Affichage de la réserve fonctionnel

code/index.html

@@ -36,17 +36,6 @@
         
     </ul>
     <script>
-        var canvas1 = document.getElementById('canvas1');
-        var ctx1 = 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');
@@ -69,32 +58,34 @@
         colorsAvailable=["red","yellow","green","purple"];
         colors=["red","yellow","green","purple"];
         
-        width=120; // 6 lignes de 50px
+        size=120; // 6 lignes de 50px // 6 colonnes de 50px
-        height=120; // 6 colonnes de 50px
+        canvasT.width=size;
-        canvas1.width=width;
+        canvasO.width=size;
-        canvas2.width=width;
-        canvas3.width=width;
-        canvas4.width=width;
-        canvasT.width=width;
-        canvasO.width=width;
-        
-        canvas1.height=height;
-        canvas2.height=height;
-        canvas3.height=height;
-        canvas4.height=height;
-        canvasT.height=height;
-        canvasO.height=height;
         
-        function faireCercle0(x,y,color,lectx){
+        canvasT.height=size;
-            var cercle = new Path2D();
+        canvasO.height=size;
         
+        for(var a=1;a<5;a++)
+        {
+            eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
+            eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
+            eval("canvas"+a+".width=size");
+            eval("canvas"+a+".height=size");
+            
+            eval("var canvasR"+ a +"= document.getElementById('canvasR"+a+"')");
+            eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
+            eval("canvasR"+a+".width=size");
+            eval("canvasR"+a+".height=size");
+        }
         
+        function faireCercle0(x,y,color,lectx){
+            var cercle = new Path2D();
             
-            nx=(width/6)*(x>0 ? x+2 : x+3);
+            nx=(size/6)*(x>0 ? x+2 : x+3);
-            ny=(height/6)*(y>0 ? y+2 : y+3);
+            ny=(size/6)*(y>0 ? y+2 : y+3);
             
             cercle.moveTo(nx, ny);
-            cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
+            cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
             
             lectx.fillStyle = color;
             lectx.fill(cercle);
@@ -104,15 +95,14 @@
         {
             var img= new Image();
             
-            //lectx2=eval(lectx);
             
-            var nx=(width/6)*(x>0 ? x+2 : x+3);
+            var nx=(size/6)*(x>0 ? x+2 : x+3);
-            var ny=(height/6)*(y>0 ? y+2 : y+3);
+            var ny=(size/6)*(y>0 ? y+2 : y+3);
             
             img.src="ress/"+color+".png";
             
             img.onload = function(){
-                lectx.drawImage(img,nx,ny,width/6,height/6);   
+                lectx.drawImage(img,nx,ny,size/6,size/6);   
             }
             
         }
@@ -138,7 +128,7 @@
                 });
             }
             
-            else { // ce bout de code fout le merde yee
+            else {
                 letab[sselem].forEach(element => {
                     tmp=element[1];
                     element[1]=element[0];
@@ -164,8 +154,6 @@
                     {
                         drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                     }
-                    //else
-                    //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                 }
             }
         }
@@ -349,6 +337,8 @@
                 if(!isVisible(canvasNumber))
                 {
                     toggleVisible(canvasNumber);
+                    tabR[canvasNumber]=[];
+                    toggleVisible(canvasNumber,true);
                 }
             }
             else
@@ -357,14 +347,12 @@
                 {
                     if(canvasNumber=="R")
                     {
-                        /*
-                        eval("tab"+mousePos[0]+"[0]=!tab"+mousePos[0]+"[0];");
-                        empiler();
-                        toutDessiner(eval("tab"+mousePos[0]),eval("canvas"+mousePos[0]),eval("ctx"+mousePos[0]));
-                        toutDessiner(tabTotal,canvasT,ctxT);
-                        */
                         toggleVisible(mousePos[0]);
-                        tabR.push(eval("tab"+mousePos[0]));
+                        tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
+                        tabR[mousePos[0]][0]=eval("tab"+mousePos[0]+"[0]");
+                        toggleVisible(mousePos[0],true);
+                        toutDessiner(eval("tabR["+(mousePos[0])+"]"),eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
+                        //console.log(eval("tabR["+(mousePos[0]-1)+"]"));
                     }
                     else
                     {
@@ -409,10 +397,8 @@
             //const condition = (val) => val.toString() == element.toString();
             var exists=true;
             //exists=!tabObjCmp.every(unique);
-            console.log("---------------------------------");
             if(tabTotal.length==tabObjCmp.length)
             {
-                console.log("bon nombre, tab total.l="+tabTotal.length);
                 var verifTab=[];
                 verifTab=copyMDArray(tabTotal);
                 
@@ -421,13 +407,10 @@
                 {
                     const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
                     exists*=result.length;
-
-                    console.log("long : "+ result.length + "ling : "+verifTab.length);
                 }
             }
             else
             {
-                console.log("mauvais nombre");
                 exists=false;
             }
             
@@ -437,7 +420,6 @@
                 audio.play();
                 points++;
                 document.getElementById("stats").innerHTML = points+" points";
-                console.log("OK");
                 generateEasy();
             }
         }
@@ -465,12 +447,20 @@
             return eval("tab"+what+"[0]");
         }
         
-        function toggleVisible(where)
+        function toggleVisible(where,reserve=false)
         {
-            eval("tab"+where+"[0]=!tab"+where+"[0];");
+            if(!reserve)
-            empiler();
+            {
-            toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+                eval("tab"+where+"[0]=!tab"+where+"[0];");
-            toutDessiner(tabTotal,canvasT,ctxT);
+                empiler();
+                toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+                toutDessiner(tabTotal,canvasT,ctxT);
+            }
+            else
+            {
+                tabR[where][0]=!tabR[where][0];
+                toutDessiner(eval("tabR["+where+"]"),eval("canvasR"+where),eval("ctxR"+where));
+            }
         }
         /*
         function events() {
@@ -569,13 +559,6 @@
         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"],[3,-3,"purple"]);
         
-        /*
-        tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        */
-        
         toutDessiner(tab1,canvas1,ctx1);
         toutDessiner(tab2,canvas2,ctx2);
         toutDessiner(tab3,canvas3,ctx3);