pascal.lafourcade
/
onthedots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout et implémentation des couleurs personnalisées

Browse Source
master
adplantade 5 years ago
parent 552903c3da
commit bf4f46b9c1
3 changed files with 62 additions and 84 deletions
Show Stats Download Patch File Download Diff File

11
code/index.php
Unescape View File

@ -86,7 +86,16 @@ Jouer la partie en : </br>
<label for="no_pause">Non</label>
<div> Choisir les couleurs des points (ne fonctionne pas en mode "gemmes" ou "les deux")
<div class="color-picker"></div>
<div class="color-pickers">
<div id="col1" class="col1"></div>
<div id="col2" class="col2"></div>
<div id="col3" class="col3"></div>
<div id="col4" class="col4"></div>
<div id="col5" class="col5"></div>
<div id="col6" class="col6"></div>
<div id="col7" class="col7"></div>
<div id="col8" class="col8"></div>
</div>
<p>
<button id="btn_options" onClick="saveOptions()">Valider</button>

91
code/options.js
Unescape View File

@ -51,64 +51,33 @@ document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getC
output.innerHTML = (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
el: '.color-picker',
theme: 'monolith', // or 'monolith', or 'nano'
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
pickr.on('init', instance => {
console.log('init', instance);
}).on('hide', instance => {
console.log('hide', instance);
}).on('show', (color, instance) => {
console.log('show', color, instance);
}).on('save', (color, instance) => {
console.log('save', color, instance);
}).on('clear', instance => {
console.log('clear', instance);
}).on('change', (color, instance) => {
console.log('change', color, instance);
}).on('changestop', instance => {
console.log('changestop', instance);
}).on('cancel', instance => {
console.log('cancel', instance);
}).on('swatchselect', (color, instance) => {
console.log('swatchselect', color, instance);
});
for(var cpt=1;cpt<9;cpt++)
{
eval('pickr'+cpt+` = Pickr.create({
el: '.col`+cpt+`',
theme: 'monolith',
components: {
// Main components
preview: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
input: true,
clear: true,
save: true
}
}
});`);
eval("pickr"+cpt+`.on('save', function () {
console.log(pickr`+cpt+`.getColor().toHEXA().toString());
setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
pickr`+cpt+`.hide();
});`);
}

44
code/vitraux.js
Unescape View File

@ -31,19 +31,32 @@ var displayType = getCookie("displayMode")=="" ? "gems" : getCookie("displayMode
var dotsAmount= getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount");
var colors=[];
var colorsAvailable=["red","yellow","green","purple","lightblue","brown","cyan","orange"];
var customColorsAvailable=[];
for(var cpt=1;cpt<9;cpt++)
{
customColorsAvailable.push((getCookie("color_"+cpt)=="" ? colorsAvailable[cpt-1] : getCookie("color_"+cpt)));
}
for(var cpt=0;cpt<dotsAmount;cpt++)
{
var pos = getRandomInt(colorsAvailable.length)-1;
var index=colorsAvailable.indexOf(colorsAvailable[pos]);
if(index>-1)
if(displayType=="points")
{
colors.push(customColorsAvailable[cpt]+"_"+cpt);
}
else
{
colors.push(colorsAvailable[pos]);
colorsAvailable.splice(index,1);
var pos = getRandomInt(colorsAvailable.length)-1;
var index=colorsAvailable.indexOf(colorsAvailable[pos]);
if(index>-1)
{
colors.push(colorsAvailable[pos]+"_"+cpt);
colorsAvailable.splice(index,1);
}
}
}
size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px
size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50x
canvasT.width=size;
canvasO.width=size;
@ -72,7 +85,7 @@ function faireCercle(x,y,color,lectx){
cercle.moveTo(nx, ny);
cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fillStyle = color.substring(0, color.length-2);
lectx.fill(cercle);
}
@ -84,7 +97,7 @@ function drawImg(x,y,color,lectx)
var nx=(size/6)*(x>0 ? x+2 : x+3);
var ny=(size/6)*(y>0 ? y+2 : y+3);
img.src="ress/"+color+".png";
img.src="ress/"+color.substring(0, color.length-2)+".png";
img.onload = function(){
lectx.drawImage(img,nx,ny,size/6,size/6);
@ -191,25 +204,18 @@ function empiler(obj=false)
if(!obj)
{
tabTotal=[];
console.log("tabtotal début "+tabTotal);
console.log("tab1 = "+tab1);
if(tab1[0])
{
console.log("tab1 = "+tab1);
tab1.forEach(element => {
console.log("element t1="+element);
if(Array.isArray(element) && element.length!=0)
{
tabTotal.push(element);
//console.log("tabtotal tab1 "+tabTotal+"|");
}
})
}
if(tab2[0]){
console.log("tab2 = "+tab2);
tab2.forEach(element => {
console.log("element t2="+element);
if(Array.isArray(element) && element.length!=0)
{
colors.forEach(col => {
@ -227,9 +233,7 @@ function empiler(obj=false)
if(tab3[0])
{
console.log("tab3 = "+tab3);
tab3.forEach(element => {
console.log("element t3="+element);
if(Array.isArray(element) && element.length!=0){
colors.forEach(col => {
test=[element[0],element[1],col];
@ -238,16 +242,13 @@ function empiler(obj=false)
})
if(!exists)
tabTotal.push(element);
//console.log("tabtotal tab3 "+tabTotal+"|");
exists=false;
}
})
}
if(tab4[0]){
console.log("tab4 = "+tab4);
tab4.forEach(element => {
console.log("element t4="+element);
if(Array.isArray(element) && element.length!=0)
{
colors.forEach(col => {
@ -257,7 +258,6 @@ function empiler(obj=false)
})
if(!exists)
tabTotal.push(element);
//console.log("tabtotal tab4 "+tabTotal+"|");
exists=false;
}
})
@ -655,4 +655,4 @@ document.getElementById("stats").innerHTML = points+" points";
events();
generate();
chronoStart();
chronoStart();

Write Preview
Loading…
Cancel
Save