ajout controle glisser-déposer pour visible/invisible

code/index.html

@@ -12,6 +12,13 @@
 <canvas id="canvasObj" style="border:1px solid green"></canvas>
 <button onclick="generateEasy()">gen easy</button>
 
+<canvas id="canvasR" style="border:1px solid violet">
+    <canvas id="canvasR1" width="150" height="150" style="border:1px solid red"></canvas>
+    <canvas id="canvasR2" width="150" height="150" style="border:1px solid blue"></canvas>
+    <canvas id="canvasR3" style="border:1px solid violet"></canvas>
+    <canvas id="canvasR4" style="border:1px solid violet"></canvas>
+</canvas>
+
 <script>
     var canvas1 = document.getElementById('canvas1');
     var ctx1 = canvas1.getContext('2d');
@@ -30,18 +37,22 @@
     
     var canvasO = document.getElementById('canvasObj');
     var ctxO = canvasO.getContext('2d');
+
+    var canvasR = document.getElementById('canvasR');
+    var ctxR = canvasR.getContext('2d');
     
     tab1=[];
     tab2=[];
     tab3=[];
     tab4=[];
+    tabR=[];
     tabTotal=[];
     tabObjCmp=[];
     mousePos=[];
     colors=["red","blue","green","brown"];
     
-    width=300; // 6 lignes de 50px
+    width=240; // 6 lignes de 50px
-    height=300; // 6 colonnes de 50px
+    height=240; // 6 colonnes de 50px
     canvas1.width=width;
     canvas2.width=width;
     canvas3.width=width;
@@ -59,11 +70,13 @@
     function faireCercle(x,y,color,lectx){
         var cercle = new Path2D();
         
-        nx=50*(x>0 ? x+2 : x+3);
+
-        ny=50*(y>0 ? y+2 : y+3);
+
+        nx=(width/6)*(x>0 ? x+2 : x+3);
+        ny=(height/6)*(y>0 ? y+2 : y+3);
         
         cercle.moveTo(nx, ny);
-        cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
+        cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
         
         lectx.fillStyle = color;
         lectx.fill(cercle);
@@ -233,10 +246,10 @@
         tabObj[0]=Array.from(tab1);
         tabObj[1]=Array.from(tab2);
         tabObjCmp=[];
-        actions=getRandomInt(5);
+        actions=getRandomInt(8);
         
         while(actions>0){
-            tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1);
+            tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
             actions--;
         }
         empiler(true);
@@ -298,6 +311,10 @@
             swap(letab,lecanvas,lectx,"H");
         }
         }
+        else if(canvasNumber=="R")
+        {
+            toggleVisible(mousePos[0]);
+        }
         else
         {
             changeOrder(mousePos[0],canvasNumber);
@@ -346,6 +363,9 @@
     function toggleVisible(where)
     {
         eval("tab"+where+"[0]=!tab"+where+"[0];");
+        empiler();
+        toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+        toutDessiner(tabTotal,canvasT,ctxT);
     }
     
     
@@ -380,6 +400,10 @@
     canvas4.addEventListener("mouseup",function(e){
         rotationManager(e);
     })
+
+    canvasR.addEventListener("mouseup",function(e){
+        rotationManager(e);
+    })
     
     /*
     tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);