Les vitraux sont en surbrillance quand ils sont sélectionnés pour un changement de place

code/index.css

@@ -66,4 +66,24 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
+  }
+
+  .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

@@ -96,7 +96,7 @@
             lectx.fillStyle = color;
             lectx.fill(cercle);
         }
-
+        
         function drawImg(x,y,color,lectx)
         {
             var img= new Image();
@@ -107,7 +107,7 @@
             var ny=(height/6)*(y>0 ? y+2 : y+3);
             
             img.src="ress/"+color+".png";
-
+            
             img.onload = function(){
                 console.log("x:"+x+" y:"+y+" col:"+color);
                 lectx.drawImage(img,nx,ny,width/6,height/6);   
@@ -160,7 +160,7 @@
                         drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                     }
                     //else
-                        //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
+                    //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                 }
             }
         }
@@ -311,6 +311,7 @@
         function rotationManager(e)
         {
             canvasNumber=e.currentTarget.id.substring(6);
+            document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
             if(mousePos[0]=="R" && canvasNumber!="R")
             {
                 if(!isVisible(canvasNumber))
@@ -420,40 +421,67 @@
             toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
             toutDessiner(tabTotal,canvasT,ctxT);
         }
-        
+        /*
+        function events() {
+            for(var i=1;i<5;i++)
+            {
+                lecanvas="canvas"+i
+                eval("canvas"+i).addEventListener("mousedown",function(e){
+                    mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+                    document.getElementById(lecanvas).classList.add('vitrail-select');
+                });
+                
+                eval("canvas"+i).addEventListener("mouseup",function(e){
+                    rotationManager(e);
+                })
+            }
+        }*/
         
         canvas1.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas1").classList.add('vitrail-select');
+        })
+        canvas2.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas2").classList.add('vitrail-select');
+        })
+        canvas3.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas3").classList.add('vitrail-select');
+        })
+        canvas4.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas4").classList.add('vitrail-select');
         })
         
         canvas1.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas2.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas2.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas3.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas3.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas4.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas4.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
+        
+        canvas4.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas4").classList.add('vitrail-hover');
+        })
+        
+        canvas4.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas4").classList.remove('vitrail-hover');
+        })
+        
         canvasR.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
         })
@@ -467,7 +495,7 @@
         tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[1,1,"purple"]);
+        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         
         /*
         tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
@@ -481,7 +509,7 @@
         toutDessiner(tab3,canvas3,ctx3);
         toutDessiner(tab4,canvas4,ctx4);
         
-        
+        //events();