Amélioration ergonomie, rotations en glissant la souris

code/index.html

@@ -155,31 +155,62 @@ function getMousePosition(lecanvas, event, lectx, letab) {
             let rect = lecanvas.getBoundingClientRect(); 
             let x = event.clientX - rect.left; 
             let y = event.clientY - rect.top; 
+            let dir = compas(x,y,lecanvas);
+
             if(x<canvas.width/2)
                 tourneG(letab,lecanvas,lectx);
             else
                 tourneD(letab,lecanvas,lectx);
         } 
 
-canvas.addEventListener("click",function(e) 
+/// renvoie le point cardianl où se trouve le point
+
+function compas(x,y,lecanvas)
+{
+    ne = x>y;
+    se = x>lecanvas.height-y;
+
+    if(ne && se ) return "E";
+    if(ne && !se ) return "N";
+    if(!ne && se ) return "S";
+    if(!ne && !se ) return "O";
+}
+
+/*canvas.addEventListener("click",function(e) 
         { 
-            getMousePosition(canvas, e,ctx, tab1); 
+            //getMousePosition(canvas, e,ctx, tab1); 
-        }); 
+            compas(e.clientX,e.clientY,canvas);
+        }); */
 
         canvas2.addEventListener("click",function(e) 
         { 
             getMousePosition(canvas2, e, ctx2, tab2); 
         }); 
 
-        canvasO.addEventListener("mousedown",function(e){
+        canvas.addEventListener("mousedown",function(e){
-            console.log("down : ",e.clientX,",",e.clientY);
+            //console.log(e);
-            mousePos=["obj",e.clientX-canvasO.getBoundingClientRect().left<canvasO.width/2];
+            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);
             })
-        canvasO.addEventListener("mouseup",function(e){
+        canvas.addEventListener("mouseup",function(e){
-            console.log("up : ",e.clientX,",",e.clientY, "|",mousePos[1]);
+            dir = compas(e.clientX,e.clientY,e.currentTarget);
-            if(e.clientX-canvasO.getBoundingClientRect().left>canvasO.width/2 && mousePos[1]==true)
+            if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E"))
-                console.log("ok");
+            {
+                tourneG(tab1,canvas,ctx);
+            }
+            else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O"))
+            {
+                tourneD(tab1,canvas,ctx);
+            }
+            else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
+            {
+                swap(tab1,canvas,ctx,"V");
+            }
+            else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
+            {
+                swap(tab1,canvas,ctx,"H");
+            }
             })
 
 tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);