diff --git a/code/index.php b/code/index.php index 196a788..7150209 100644 --- a/code/index.php +++ b/code/index.php @@ -86,7 +86,16 @@ Jouer la partie en :
Choisir les couleurs des points (ne fonctionne pas en mode "gemmes" ou "les deux") -
+
+
+
+
+
+
+
+
+
+

diff --git a/code/options.js b/code/options.js index 4d03d40..56fb9a4 100644 --- a/code/options.js +++ b/code/options.js @@ -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); -}); \ No newline at end of file +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(); +});`); + +} \ No newline at end of file diff --git a/code/vitraux.js b/code/vitraux.js index 9cdac1b..8ab5605 100644 --- a/code/vitraux.js +++ b/code/vitraux.js @@ -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-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(); \ No newline at end of file +chronoStart();