changement du style par défaut des emplacements de vitraux

les emplacements vides de la réserve n'ont plus de bord par défaut

code/index.css

@@ -59,7 +59,7 @@
     flex-direction: column;
   }
   
-  .vitrail {
+  .vitrail-plein {
     margin: 3px;
     padding: 6px;
     background-image: url(ress/fond_fin.png);
@@ -68,6 +68,14 @@
     background-size: cover;
   }
 
+  .vitrail-vide {
+    margin: 3px;
+    padding: 6px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
   .vitrail-select {
     margin: 3px;
     padding: 6px;

code/index.html

@@ -21,21 +21,21 @@
             <canvas id="canvasTotal" class="vitrail"></canvas>
         </ul>
         <ul id="vitraux" class="vitraux" style="border:2px solid purple">
-            <canvas id="canvas1" class="vitrail"></canvas>
+            <canvas id="canvas1" class="vitrail-plein"></canvas>
             
-            <canvas id="canvas2" class="vitrail"></canvas>
+            <canvas id="canvas2" class="vitrail-plein"></canvas>
             
-            <canvas id="canvas3" class="vitrail"></canvas>
+            <canvas id="canvas3" class="vitrail-plein"></canvas>
             
-            <canvas id="canvas4" class="vitrail"></canvas>
+            <canvas id="canvas4" class="vitrail-plein"></canvas>
         </ul>
         
         <ul id="canvasR" class="flex-container" style="border:1px solid violet">
             <h1>R&eacute;serve</h1>
-            <canvas id="canvasR1" class="vitrail"></canvas>
-            <canvas id="canvasR2" class="vitrail"></canvas>
-            <canvas id="canvasR3" class="vitrail"></canvas>
-            <canvas id="canvasR4" class="vitrail"></canvas>
+            <canvas id="canvasR1" class="vitrail-vide"></canvas>
+            <canvas id="canvasR2" class="vitrail-vide"></canvas>
+            <canvas id="canvasR3" class="vitrail-vide"></canvas>
+            <canvas id="canvasR4" class="vitrail-vide"></canvas>
             
         </ul>
         

code/vitraux.js

@@ -300,9 +300,9 @@ var canvasT = document.getElementById('canvasTotal');
             
             console.log(mousePos[0]+" vers "+canvasNumber+", mouseOnRes?"+mouseOnRes);
             
-            if(mouseOnRes && !canvasNumber.includes("R"))
+            if(mouseOnRes && !canvasNumber.includes("R")) //clic dans la réserve, relâche sur la pile en jeu
             {
-                if(!isVisible(canvasNumber))
+                if(!isVisible(canvasNumber)) //relâche sur emplacement vide au centre
                 {
                     toggleVisible(canvasNumber);
                     tabR[canvasNumber]=[];
@@ -311,11 +311,11 @@ var canvasT = document.getElementById('canvasTotal');
             }
             else
             {
-                if(isVisible(mousePos[0]))
+                if(isVisible(mousePos[0])) //clic sur un vitrail présent
                 {
-                    if(canvasNumber.includes("R"))
+                    if(canvasNumber.includes("R")) //relâche dans réserve
                     {
-                        if(tabR[canvasNumber]==null)
+                        if(tabR[canvasNumber]==null) //emplacement de réserve vide
                         {
                             toggleVisible(mousePos[0]);
                             tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
@@ -324,7 +324,7 @@ var canvasT = document.getElementById('canvasTotal');
                             toutDessiner(tabR[mousePos[0]],eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
                             //console.log(eval("tabR["+(mousePos[0]-1)+"]"));
                         }
-                        else
+                        else //emplacement de réesrve occupé
                         {
                             changeOrder(mousePos[0],canvasNumber);
                         }