le nombre de dots affiche les dots, de la bonne couleur (pas encore de gemmes)

code/button_displayer.js

@@ -100,16 +100,19 @@ function less()
   }
   output.innerHTML = amount;
   outputHi.value=amount;
+  dispDots();
 }
 
 function more()
 {
+  
   if(amount<8)
   {
     amount++;
   }
   output.innerHTML = amount;
   outputHi.value=amount;
+  dispDots();
 }
 
 // pause oui/non
@@ -161,3 +164,23 @@ else
     document.getElementById("img_easy").classList.add("selected");
     document.getElementById("pause0").checked=true;
 }
+
+for(var cpt=1;cpt<9;cpt++)
+    {
+        document.getElementById("col"+cpt+"D").style.height=size/6;
+        document.getElementById("col"+cpt+"D").style.width=size/6;
+    }
+
+function dispDots()
+{
+    var amountI = parseInt(amount);
+    for(var cpt=1;cpt<amountI+1;cpt++)
+    {
+        document.getElementById("col"+cpt+"D").style.visibility="visible";
+        document.getElementById("col"+cpt+"D").style.backgroundColor=getCookie("color_"+cpt);
+    }
+    for(var cpt=amountI+1;cpt<9;cpt++)
+    {
+        document.getElementById("col"+cpt+"D").style.visibility="hidden";
+    }
+}

code/index.php

@@ -90,6 +90,15 @@
                 <div class="slot">   
                     <p class="texte">Nombre de dots
                     <img src="ress/-" onClick="less()" id="-"/>
+                    <span class="slot" id="dotsDisplayer">
+                <span id="col1D" class="dot"></span>
+                <span id="col2D" class="dot"></span>
+                <span id="col3D" class="dot"></span>
+                <span id="col4D" class="dot"></span>
+                <span id="col5D" class="dot"></span>
+                <span id="col6D" class="dot"></span>
+                <span id="col7D" class="dot"></span>
+                <span id="col8D" class="dot"></span></span>
                     <span id="dotsNumber" class="texte"></span>
                     <img src="ress/+" onClick="more()" id="+"/>
                     <input type="hidden" name="dotsAmount" id="amountHi"/></p>
@@ -204,5 +213,8 @@ if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]
 <script src="button_displayer.js"></script>
 <script src="options.js"></script>
 <script src="themeSwitcher.js"></script>
+<script>
+    dispDots();
+</script>
 </body>
 </html>

code/options.js

@@ -35,24 +35,6 @@ output.innerHTML = amount;
 document.getElementById("+").width=size/4;
 document.getElementById("-").width=size/4;
 
-function less()
-{
-    if(amount > 2)
-    {
-        amount--;
-    }
-    output.innerHTML = amount;
-}
-
-function more()
-{
-    if(amount<8)
-    {
-        amount++;
-    }
-    output.innerHTML = amount;
-}
-
 document.getElementById("displays").addEventListener("click", function(){
     document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
     document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
@@ -142,6 +124,7 @@ for(var cpt=1;cpt<9;cpt++)
         document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
         setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
         pickr`+cpt+`.hide();
+        dispDots();
     });`);
     
 }