Changement d'apparence des color pickers des options

code/index.css

@@ -87,4 +87,12 @@
     color: #000;
     text-decoration: none;
     cursor: pointer;
+  }
+
+  .dot {
+    height: 25px;
+    width: 25px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
   }

code/index.php

@@ -86,16 +86,15 @@ 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")<br/>
-        &Eacute;vitez de mettre la même couleur pour plusieurs points, ça ne vous rendra pas le jeu plus facile, loin de l&agrave;
         <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>
+            <span id="col1" class="dot col1"></span>
+            <span id="col2" class="dot col2"></span>
+            <span id="col3" class="dot col3"></span>
+            <span id="col4" class="dot col4"></span>
+            <span id="col5" class="dot col5"></span>
+            <span id="col6" class="dot col6"></span>
+            <span id="col7" class="dot col7"></span>
+            <span id="col8" class="dot col8"></span>
         </div>
 
         <p>

code/options.js

@@ -51,13 +51,15 @@ document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getC
 output.innerHTML = (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
 
 var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];
-// Simple example, see optional options for more configuration.
+
+
 for(var cpt=1;cpt<9;cpt++)
 {
   eval('pickr'+cpt+` = Pickr.create({
     el: '.col`+cpt+`',
     theme: 'monolith',
     default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
+    useAsButton: true,
   
     components: {
   
@@ -75,8 +77,10 @@ for(var cpt=1;cpt<9;cpt++)
     }
   });`);
   
-  eval("pickr"+cpt+`.on('save', function () {
-    console.log(pickr`+cpt+`.getColor().toHEXA().toString());
+  eval("pickr"+cpt+`.on('init', function() {
+    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
+  }).on('save', function () {
+    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
     setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
     pickr`+cpt+`.hide();
 });`);