Ajout et implémentation des couleurs personnalisées

code/index.php

@@ -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>

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)'
-  ],
+for(var cpt=1;cpt<9;cpt++)
+{
+  eval('pickr'+cpt+` = Pickr.create({
+    el: '.col`+cpt+`',
+    theme: 'monolith',
+  
   
     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);
-});
+  });`);
+  
+  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();
+});`);
+
+}

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<dotsAmount;cpt++)
+{
+    if(displayType=="points")
+    {
+        colors.push(customColorsAvailable[cpt]+"_"+cpt);
+    }
+    else
     {
         var pos = getRandomInt(colorsAvailable.length)-1;
         var index=colorsAvailable.indexOf(colorsAvailable[pos]);
         if(index>-1)
         {
-        colors.push(colorsAvailable[pos]);
+            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;
                 }
             })