ajout de commentaires + simplification du code + corrections en cours

ajout de la possibilité de mettre les vitraux dans les cases de la réserve qu'on veut

code/index.css

@@ -77,21 +77,9 @@
   }
 
   .vitrail-select {
-    margin: 3px;
-    padding: 6px;
-    background-image: url(ress/fond_fin.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
     border: 5px solid red;
   }
 
   .vitrail-hover {
-    margin: 3px;
-    padding: 6px;
-    background-image: url(ress/fond_fin.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
     border: 5px solid blue;
   }

code/index.html

@@ -16,9 +16,9 @@
 </form>
             <p id="stats"></p>
             <h1>Objectif</h1>
-            <canvas id="canvasObj" class="vitrail"></canvas>
+            <canvas id="canvasObj" class="vitrail-plein"></canvas>
             <h1>R&eacute;sultat</h1>
-            <canvas id="canvasTotal" class="vitrail"></canvas>
+            <canvas id="canvasTotal" class="vitrail-plein"></canvas>
         </ul>
         <ul id="vitraux" class="vitraux" style="border:2px solid purple">
             <canvas id="canvas1" class="vitrail-plein"></canvas>

code/vitraux.js

@@ -12,7 +12,7 @@ var canvasT = document.getElementById('canvasTotal');
         tab3=[];
         tab4=[];
 
-        tabR=[];
+        tabR=[[],[],[],[],[]];
 
         tabR1=[];
         tabR2=[];
@@ -300,12 +300,24 @@ var canvasT = document.getElementById('canvasTotal');
             
             console.log(mousePos[0]+" vers "+canvasNumber+", mouseOnRes?"+mouseOnRes);
 
+            var firstAv=1;
+            for(i=1;i<4;i++) //détermine la 1° place libre dans la réserve
+            {
+                if(typeof tabR[i][0]=="boolean")
+                    firstAv++;
+                else
+                    break;
+            }
+
+            console.log("firstAv="+firstAv);
+            
             if(mouseOnRes && !canvasNumber.includes("R")) //clic dans la réserve, relâche sur la pile en jeu
             {
                 if(!isVisible(canvasNumber)) //relâche sur emplacement vide au centre
                 {
                     toggleVisible(canvasNumber);
                     tabR[canvasNumber]=[];
+                    console.log("contenu du tabR[cn] : "+tabR[canvasNumber]);
                     toggleVisible(mousePos[0].substring(1),true);
                 }
             }
@@ -317,14 +329,14 @@ var canvasT = document.getElementById('canvasTotal');
                     {
                         if(tabR[canvasNumber]==null) //emplacement de réserve vide
                         {
-                            toggleVisible(mousePos[0]);
-                            tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
-                            tabR[mousePos[0]][0]=eval("tab"+mousePos[0]+"[0]");
-                            toggleVisible(mousePos[0],true);
-                            toutDessiner(tabR[mousePos[0]],eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
+                            toggleVisible(mousePos[0]); //inverser tag du canvas du centre
+                            tabR[firstAv]=copyMDArray(eval("tab"+mousePos[0])); //mettre le canvas dans la réserve
+                            tabR[firstAv][0]=eval("tab"+mousePos[0]+"[0]"); //transférer le tag du canvas dans la réserve
+                            toggleVisible(firstAv,true); //inverser tag du canvas de réesrve
+                            toutDessiner(tabR[firstAv],eval("canvasR"+firstAv),eval("ctxR"+firstAv)); //afficher canvas dans réserve
                             //console.log(eval("tabR["+(mousePos[0]-1)+"]"));
                         }
-                        else //emplacement de réesrve occupé
+                        else //emplacement de réserve occupé
                         {
                             changeOrder(mousePos[0],canvasNumber);
                         }
@@ -339,22 +351,18 @@ var canvasT = document.getElementById('canvasTotal');
                         {
                             if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
                             {
-                                console.log("G");
                                 tourneG(letab,lecanvas,lectx);
                             }
                             else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
                             {
-                                console.log("D");
                                 tourneD(letab,lecanvas,lectx);
                             }
                             else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
                             {
-                                console.log("V");
                                 swap(letab,lecanvas,lectx,"V");
                             }
                             else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
                             {
-                                console.log("H");
                                 swap(letab,lecanvas,lectx,"H");
                             }
                         }
@@ -395,6 +403,7 @@ var canvasT = document.getElementById('canvasTotal');
                 audio.play();
                 points++;
                 document.getElementById("stats").innerHTML = points+" points";
+                chronoStop();
                 generateEasy();
             }
         }
@@ -429,9 +438,9 @@ var canvasT = document.getElementById('canvasTotal');
         {
             if(what.includes("R"))
             {
-                if(eval("tabR["+what+"]")==null)
+                if(tabR[what.substring(1)]==null)
                     return null;
-                return eval("tabR["+what.substring(1)+"][0]");
+                return tabR[what.substring(1)][0];
             }
             
             return eval("tab"+what+"[0]");
@@ -449,7 +458,7 @@ var canvasT = document.getElementById('canvasTotal');
             else
             {
                 tabR[where][0]=!tabR[where][0];
-                toutDessiner(eval("tabR["+where+"]"),eval("canvasR"+where),eval("ctxR"+where));
+                toutDessiner(tabR[where],eval("canvasR"+where),eval("ctxR"+where));
             }
         }