ajout de la sélection de pase via boutons + réduction taille boutons

code/button_displayer.js

@@ -1,10 +1,12 @@
 var modes=["points","temps","survie"];
 var diffs=["easy","med","hard"];
+var pauses=["0","1"];
 var div=document.getElementById('buttons');
 size=screen.height/6;
 hideAll();
 var modeSelected;
 var diffSelected;
+var pauseSelected;
 
 var btn_options=document.getElementById("btn_options");
 btn_options.width=size/2;
@@ -16,7 +18,7 @@ document.getElementById("btn_play").style.display="inline";
 modes.forEach(element => {
 
     eval("var img_"+element+"= document.getElementById('img_"+element+"')");
-    eval("img_"+element+".width=size");
+    eval("img_"+element+".width=size/1.25");
     eval("img_"+element).addEventListener("mousedown",function(e)
     {
         disp(e);
@@ -28,7 +30,7 @@ modes.forEach(element => {
 
     var tab=document.getElementById(element).children;
     for(var i=1;i<tab.length;i+=2){
-        tab.item(i).children[0].width=size;
+        tab.item(i).children[0].width=size/1.25;
         tab.item(i).children[0].addEventListener("mousedown",function(e)
         {
             var tab=document.getElementById("modeSelection").children;
@@ -43,7 +45,7 @@ modes.forEach(element => {
             modeSelected= e.currentTarget.id.substring(4,e.currentTarget.id.length);
 
             document.getElementById(e.currentTarget.id).classList.add("selected");
-            if(diffSelected!="" && modeSelected!="")
+            if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
             {
                 document.getElementById(modeSelected).checked=true;
 
@@ -55,7 +57,7 @@ modes.forEach(element => {
 
 diffs.forEach(element => {
     eval("var img_"+element+"= document.getElementById('img_"+element+"')");
-    eval("img_"+element+".width=size");
+    eval("img_"+element+".width=size/1.25");
     eval("img_"+element).addEventListener("mousedown",function(e)
     {
         diffSelected= e.currentTarget.id.substring(4);
@@ -65,7 +67,7 @@ diffs.forEach(element => {
             tab.item(cpt).children[0].classList.remove("selected");
         }
         document.getElementById(e.currentTarget.id).classList.add("selected");
-        if(diffSelected!="" && modeSelected!="")
+        if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
         {
             document.getElementById(diffSelected).checked=true;
             document.getElementById("high_form").submit();
@@ -73,6 +75,27 @@ diffs.forEach(element => {
     });
 })
 
+pauses.forEach(element => {
+    eval("var img_pause_"+element+"= document.getElementById('img_pause_"+element+"')");
+    eval("img_pause_"+element+".width=size/1.25");
+    eval("img_pause_"+element).addEventListener("mousedown",function(e)
+    {
+        pauseSelected= e.currentTarget.id.substring(e.currentTarget.id.length-1);
+        var tab=document.getElementById("diff").children;
+        for(var cpt=1;cpt<tab.length;cpt+=2)
+        {
+            tab.item(cpt).children[0].classList.remove("selected");
+        }
+        document.getElementById(e.currentTarget.id).classList.add("selected");
+        if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
+        {
+            console.log("pause "+pauseSelected);
+            document.getElementById("pause_"+pauseSelected).checked=true;
+            document.getElementById("high_form").submit();
+        }
+    });
+})
+
 function disp(what, short=false)
 {
     what=(short ? what : what.currentTarget.id.substring(4));
@@ -113,7 +136,7 @@ function more()
 
 // pause oui/non
 
-document.getElementById("pause"+ (getCookie("pause")!="" ? getCookie("pause") : 0)).checked=true;
+//document.getElementById("pause"+ (getCookie("pause")!="" ? getCookie("pause") : 0)).checked=true;
     
 
 function hideAll()
@@ -134,16 +157,18 @@ if(document.getElementById("diffSel")!=null)
     diffSelected=document.getElementById("diffSel").value;
     modeSelected=document.getElementById("modeSel").value;
     amount=document.getElementById("dotsAmountSel").value;
+    pauseSelected=document.getElementById("pauseSel").value;
     gameSelected = (modeSelected.includes("s") ? "survie" : (modeSelected.includes("p") ? "points" : "temps"));
 
     disp(gameSelected, true);
     document.getElementById("img_"+diffSelected).classList.add("selected");
     document.getElementById("img_"+gameSelected).classList.add("selected");
     document.getElementById("img_"+modeSelected).classList.add("selected");
-    document.getElementById("pause"+ document.getElementById("pauseSel").value).checked=true;
+    document.getElementById("img_pause_"+pauseSelected).classList.add("selected");
 
     document.getElementById(diffSelected).checked=true;
     document.getElementById(modeSelected).checked=true;
+    document.getElementById("pause_"+pauseSelected).checked=true;
 
     outputHi.value= amount;
 }
@@ -154,10 +179,11 @@ else
     disp("points",true);
     document.getElementById(diffSelected).checked=true;
     document.getElementById(modeSelected).checked=true;
+    document.getElementById("pause_"+pauseSelected).checked=true;
     document.getElementById("img_points").classList.add("selected");
     document.getElementById("img_5p").classList.add("selected");
     document.getElementById("img_easy").classList.add("selected");
-    document.getElementById("pause0").checked=true;
+    document.getElementById("img_pause_1").classList.add("selected");
 }
 
 for(var cpt=1;cpt<9;cpt++)
@@ -208,3 +234,8 @@ function dispDots()
         }
     }
 }
+
+/*
+document.getElementById("img_pause_1").width=size/1.25;
+document.getElementById("img_pause_0").width=size/1.25;
+*/

code/index.php

@@ -77,16 +77,19 @@
                     <label for="45s"><img id="img_45s" class="button" src="./ress/button_survie_45.png"/> </label>
 
                 </ul>
+
             </div>
         
-            <ul>
+            <div>
-                <div class="slot">
+                <ul id="pause" class="all-container ad" style="display :flex;">
-                    <p class="texte">Mode pause activé <input type="radio" id="pause1" value="1" name="pause">
+                    <input type="radio" class="rad" name="pause" id="pause_0" value="0"/>
-                    <label for="pause1" class="texte">Oui</label>
+                    <label for="0"><img id="img_pause_0" class="button" src="./ress/button_pause_0.png"/></label>
-                    <input type="radio" id="pause0" value="0" name="pause">
+
-                    <label for="pause0" class="texte">Non</label>   </p>
+                    <input type="radio" class="rad" name="pause" id="pause_1" value="1" />
+                    <label for="1"><img id="img_pause_1" class="button" src="./ress/button_pause_1.png"/></label>
+
+                </ul>
 
-                </div>
                 <div class="slot">   
                     <p class="texte">Nombre de dots
                     <img src="ress/-" onClick="less()" id="-"/>
@@ -111,7 +114,7 @@
                     <img src="ress/+" onClick="more()" id="+"/>
                     <input type="hidden" name="dotsAmount" id="amountHi"/></p>
                 </div>
-            </ul>
+            </div>
         </div>
     </form>
     <?php