Le bouton jouer nécessite un mode et une difficulté

code/button_displayer.js

@@ -3,8 +3,8 @@ var diffs=["easy","med","hard"];
 var div=document.getElementById('buttons');
 size=screen.height/6;
 hideAll();
-var modeSelected;
-var diffSelected;
+var modeSelected=null;
+var diffSelected=null;
 
 modes.forEach(element => {
     eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
@@ -13,15 +13,29 @@ modes.forEach(element => {
     var tab=document.getElementById(element).children;
     for(var i=0;i<tab.length;i++){
         tab.item(i).width=size;
-        tab.item(i).addEventListener("mousedown",function(e){modeSelected= e.currentTarget.id;});
+        tab.item(i).addEventListener("mousedown",function(e)
+        {
+            modeSelected= e.currentTarget.id;
+            if(modeSelected!=null && diffSelected!=null)
+            {
+                document.getElementById("btn_play").disabled = false;
+            }
+        });
     }
 });
 
 diffs.forEach(element => {
-    eval("var btn"+element+"= document.getElementById('btn_"+element+"')");
-    console.log("btn_"+element+".width=size");
+    eval("var btn_"+element+"= document.getElementById('btn_"+element+"')");
     eval("btn_"+element+".width=size");
-    eval("btn_"+element).addEventListener("mousedown",function(e){diffSelected=e.currentTarget.id;});
+    eval("btn_"+element).addEventListener("mousedown",function(e)
+    {
+        diffSelected= e.currentTarget.id;
+        
+        if(modeSelected!=null && diffSelected!=null)
+        {
+            document.getElementById("btn_play").disabled = false;
+        }
+    });
 })
 
 function disp(what)
@@ -36,9 +50,10 @@ function hideAll()
 {
     document.getElementById("temps").style.display="none";
     document.getElementById("points").style.display="none";
+    document.getElementById("survie").style.display="none";
 }
 
 function play()
 {
-    window.location.replace("./game.html?mode="+modeSelected+"&diff=easy");
+    //window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo"));
 }

code/index.css

@@ -3,8 +3,8 @@
     
     align-items: baseline;
     width : min-content;
-    /*
-    margin: 20px;
-    */
+    
+    margin: 5px;
+    
 
 }

code/index.html

@@ -21,29 +21,21 @@
                 <img id="5m" src="./ress/button_temps_5.png"/>
                 <img id="10m" src="./ress/button_temps_10.png"/>
             </ul>
+            <ul id="survie" class="all-container">
+                <img id="surv" src="./ress/button_mode_survie.png"/>
+            </ul>
             <ul id="diff" class="all-container">
                 <img id="btn_easy" src="./ress/button_diff_easy.png"/>
                 <img id="btn_med" src="./ress/button_diff_normal.png"/>
                 <img id="btn_hard" src="./ress/button_diff_hard.png"/>
             </ul>
             
-            <button onClick="play()">Jouer ?</button>
-            
-            <script src="button_displayer.js"></script>
-            <!--
-            <ul id="survie" class="all-container">
-                <img id="survie" src="./ress/button_sur.png"/>
-            </ul> -->
-            <form action="./game.html" method="GET">
-
             Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
-            <input type="text" name="pseudo" />
+            <input type="text" id="field_pseudo" />
 
+            <button id="btn_play" onClick="play()" disabled>Jouer ?</button>
             
-            <div class="button">
-                <button type="submit">JOUER !</button>
-            </div>
-        </form>
+            <script src="button_displayer.js"></script>
 
         <div>
             Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>