changement des cliders pour choisir le nombre de dots

code/index.php

@@ -64,20 +64,17 @@
     <p>Options :</p>
     <div class="slidecontainer">
         <p>Changer le nombre de points</p>
-        <input type="range" min="2" max="8" class="slider" id="range_dots">
-        <p>Nombre de points : <span id="dotsNumber"></span></p>
+        <img src="ress/-" onClick="less()" id="-"/>
+        <span id="dotsNumber"></span>
+        <img src="ress/+" onClick="more()" id="+"/>
         <p>
             Mode d'affichage :
         </p>
-        <select name="displays" id="displays">
-            <option id="points_disp" value="points">Seulement des points</option>
-            <option id="gems_disp" value="gems">Seulement des gemmes</option>
-            <option id="both_disp" value="both">Les deux</option>
-        </select>
-        <span id="dot" tag="points" class="dot"></span>
-        <img id="gem" tag="gems" src="ress/green.png"/>
-        <span id="both" tag="both" class="dot both"></span>
-
+        <div id="displays">
+            <span id="points_di" class="dot" onClick="selectDisplay('points')"></span>
+            <img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/>
+            <span id="both_di" class="dot both" onClick="selectDisplay('both')"></span>
+        </div>
         <p> 
             Mettre le jeu en pause après avoir gagné un point
         </p>
@@ -88,20 +85,20 @@
 
         
         <div id="color_pickers" class="color-pickers">
-        <div> Choisir les couleurs des points<br/>
-            <span id="col1" class="dot col1 pickr"></span>
-            <span id="col2" class="dot col2 pickr"></span>
-            <span id="col3" class="dot col3 pickr"></span>
-            <span id="col4" class="dot col4 pickr"></span>
-            <span id="col5" class="dot col5 pickr"></span>
-            <span id="col6" class="dot col6 pickr"></span>
-            <span id="col7" class="dot col7 pickr"></span>
-            <span id="col8" class="dot col8 pickr"></span>
+            <div> Choisir les couleurs des points<br/>
+                <span id="col1" class="dot col1 pickr"></span>
+                <span id="col2" class="dot col2 pickr"></span>
+                <span id="col3" class="dot col3 pickr"></span>
+                <span id="col4" class="dot col4 pickr"></span>
+                <span id="col5" class="dot col5 pickr"></span>
+                <span id="col6" class="dot col6 pickr"></span>
+                <span id="col7" class="dot col7 pickr"></span>
+                <span id="col8" class="dot col8 pickr"></span>
+            </div>
+        </div>
+        <div>
+            <img src="ress/OK.png" id="btn_confirm" onClick="saveOptions()"/>
         </div>
-
-        <p>
-            <button id="btn_options" onClick="saveOptions()">Valider</button>
-        </p>
     </div>
 </div>
 

code/options.js

@@ -25,12 +25,30 @@ window.onclick = function(event) {
   }
 }
 
-var slider = document.getElementById("range_dots");
+
 var output = document.getElementById("dotsNumber");
-output.innerHTML = slider.value;
+var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
+output.innerHTML = amount;
+
+document.getElementById("+").width=size/4;
+document.getElementById("-").width=size/4;
 
-slider.oninput = function() {
-  output.innerHTML = this.value;
+function less()
+{
+  if(amount > 2)
+  {
+    amount--;
+  }
+  output.innerHTML = amount;
+}
+
+function more()
+{
+  if(amount<8)
+  {
+    amount++;
+  }
+  output.innerHTML = amount;
 }
 
 document.getElementById("displays").addEventListener("click", function(){
@@ -38,7 +56,7 @@ document.getElementById("displays").addEventListener("click", function(){
 })
 
 function saveOptions() {
-    setCookie("dotsAmount",document.getElementById("range_dots").value,30);
+    setCookie("dotsAmount",amount,30);
     setCookie("displayMode",document.getElementById("displays").value,30);
     setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
     modal.style.display = "none";
@@ -46,22 +64,27 @@ function saveOptions() {
 
 //initialisation des valeurs des préférences
 
-document.getElementById("gem").width=size/6;
-document.getElementById("dot").style.height=size/6;
-document.getElementById("dot").style.width=size/6;
-document.getElementById("both").style.height=size/6;
-document.getElementById("both").style.width=size/6;
-document.getElementById("both").style.backgroundSize=size/8+"px";
+document.getElementById("gems_di").width=size/6;
+document.getElementById("points_di").style.height=size/6;
+document.getElementById("points_di").style.width=size/6;
+document.getElementById("both_di").style.height=size/6;
+document.getElementById("both_di").style.width=size/6;
+document.getElementById("both_di").style.backgroundSize=size/8+"px";
+document.getElementById("btn_confirm").width=size/4;
 
 if(getCookie("pause")!=1)
   document.getElementById("no_pause").checked=true;
 else
   document.getElementById("yes_pause").checked=true;
 
-document.getElementById((getCookie("displayMode")!="" ? getCookie("displayMode")+"_disp" : "gems_disp")).selected=true;
-
-document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
-output.innerHTML = (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
+function selectDisplay(e)
+{
+  setCookie("displayMode",e,30);
+  document.getElementById("points_di").classList.remove("selected");
+  document.getElementById("gems_di").classList.remove("selected");
+  document.getElementById("both_di").classList.remove("selected");
+  document.getElementById(e+"_di").classList.add("selected");
+}
 
 var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];