Rendu les fonctions de rotation standard

code/index.html

@@ -1,11 +1,11 @@
 
-<canvas id="canvas" style="border:1px solid #000"></canvas>
+<canvas id="canvas1" style="border:1px solid #000"></canvas>
-<button onclick="swap(tab1,canvas,ctx,'H')">Swap H</button>
-<button onclick="swap(tab1,canvas,ctx,'V')">Swap V</button>
 
 <canvas id="canvas2" style="border:1px solid #000"></canvas>
-<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
+
-<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>
+<canvas id="canvas3" style="border:1px solid #000"></canvas>
+
+<canvas id="canvas4" style="border:1px solid #000"></canvas>
 
 <canvas id="canvasTotal" style="border:1px solid #000"></canvas>
 
@@ -13,12 +13,18 @@
 <button onclick="generateEasy()">gen easy</button>
 
 <script>
-    var canvas = document.getElementById('canvas');
+    var canvas1 = document.getElementById('canvas1');
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas1.getContext('2d');
     
     var canvas2 = document.getElementById('canvas2');
     var ctx2 = canvas2.getContext('2d');
 
+    var canvas3 = document.getElementById('canvas3');
+    var ctx3 = canvas3.getContext('2d');
+    
+    var canvas4 = document.getElementById('canvas4');
+    var ctx4 = canvas4.getContext('2d');
+    
     var canvasT = document.getElementById('canvasTotal');
     var ctxT = canvasT.getContext('2d');
     
@@ -32,13 +38,17 @@ mousePos=[];
     
     width=300; // 6 lignes de 50px
     height=300; // 6 colonnes de 50px
-canvas.width=width;
+    canvas1.width=width;
     canvas2.width=width;
+    canvas3.width=width;
+    canvas4.width=width;
     canvasT.width=width;
     canvasO.width=width;
     
-canvas.height=height;
+    canvas1.height=height;
     canvas2.height=height;
+    canvas3.height=height;
+    canvas4.height=height;
     canvasT.height=height;
     canvasO.height=height;
     
@@ -157,7 +167,7 @@ function getMousePosition(lecanvas, event, lectx, letab) {
         let y = event.clientY - rect.top; 
         let dir = compas(x,y,lecanvas);
         
-            if(x<canvas.width/2)
+        if(x<lecanvas.width/2)
         tourneG(letab,lecanvas,lectx);
         else
         tourneD(letab,lecanvas,lectx);
@@ -167,6 +177,9 @@ function getMousePosition(lecanvas, event, lectx, letab) {
     
     function compas(x,y,lecanvas)
     {
+        rect = lecanvas.getBoundingClientRect(); 
+        x = event.clientX - rect.left; 
+        y = event.clientY - rect.top; 
         ne = x>y;
         se = x>lecanvas.height-y;
         
@@ -176,46 +189,51 @@ function compas(x,y,lecanvas)
         if(!ne && !se ) return "O";
     }
     
-/*canvas.addEventListener("click",function(e) 
+    function rotationManager(e)
-        { 
-            //getMousePosition(canvas, e,ctx, tab1); 
-            compas(e.clientX,e.clientY,canvas);
-        }); */
-
-        canvas2.addEventListener("click",function(e) 
     {
-            getMousePosition(canvas2, e, ctx2, tab2); 
+        canvasNumber=e.currentTarget.id.substring(6);
-        }); 
+        lecanvas=eval("canvas"+canvasNumber);
-
+        letab=eval("tab"+canvasNumber);
-        canvas.addEventListener("mousedown",function(e){
+        lectx=lecanvas.getContext('2d');
-            //console.log(e);
-            mousePos = [1,compas(e.clientX,e.clientY,e.currentTarget)];
-            //mousePos=["obj",e.clientX-canvas.getBoundingClientRect().left<canvas.width/2,e.clientY-canvas.getBoundingClientRect().top<canvas.height/2];
-            console.log(mousePos);
-            })
-        canvas.addEventListener("mouseup",function(e){
         dir = compas(e.clientX,e.clientY,e.currentTarget);
         if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
         {
-                tourneG(tab1,canvas,ctx);
+            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"))
         {
-                tourneD(tab1,canvas,ctx);
+            tourneD(letab,lecanvas,lectx);
         }
         else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
         {
-                swap(tab1,canvas,ctx,"V");
+            swap(letab,lecanvas,lectx,"V");
         }
         else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
         {
-                swap(tab1,canvas,ctx,"H");
+            swap(letab,lecanvas,lectx,"H");
+        }
     }
+    
+    canvas1.addEventListener("mousedown",function(e){
+        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+    })
+
+    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)];
+        //console.log("md =",e.clientX,":",e.clientY);
+    })
+
+    canvas2.addEventListener("mouseup",function(e){
+        rotationManager(e);
     })
     
     tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
     tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
-toutDessiner(tab1,canvas,ctx);
+    toutDessiner(tab1,canvas1,ctx);
     toutDessiner(tab2,canvas2,ctx2);
     
     faireCercle(1,1,"violet",ctxO);