ajout d'un fond + changement des points

code/index.html

@@ -15,7 +15,7 @@
             <button onclick="generateEasy()">gen easy</button>
         </ul>
         <ul id="vitraux" class="vitraux" style="border:2px solid purple">
-            <canvas id="canvas1" class="vitrail" style="border:1px solid #000"></canvas>
+            <canvas id="canvas1" class="vitrail" style="background: url(ress/fond.png) no-repeat center center; border:1px solid #000"></canvas>
             
             <canvas id="canvas2" class="vitrail" style="border:1px solid #000"></canvas>
             
@@ -30,6 +30,7 @@
             <canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
             <canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
             <canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
+            
         </ul>
         
     </ul>
@@ -63,10 +64,10 @@
         tabTotal=[];
         tabObjCmp=[];
         mousePos=[];
-        colors=["red","blue","green","brown"];
+        colors=["red","yellow","green","purple"];
         
-        width=240; // 6 lignes de 50px
-        height=240; // 6 colonnes de 50px
+        width=180; // 6 lignes de 50px
+        height=180; // 6 colonnes de 50px
         canvas1.width=width;
         canvas2.width=width;
         canvas3.width=width;
@@ -81,7 +82,7 @@
         canvasT.height=height;
         canvasO.height=height;
         
-        function faireCercle(x,y,color,lectx){
+        function faireCercle0(x,y,color,lectx){
             var cercle = new Path2D();
             
             
@@ -95,6 +96,22 @@
             lectx.fillStyle = color;
             lectx.fill(cercle);
         }
+
+        function drawImg(x,y,color,lectx)
+        {
+            var img= new Image();
+            img.src="ress/"+color+".png";
+            
+            //lectx2=eval(lectx);
+            
+            nx=(width/6)*(x>0 ? x+2 : x+3);
+            ny=(height/6)*(y>0 ? y+2 : y+3);
+            
+            img.onload = function(){
+                console.log("x:"+x+" y:"+y+" col:"+color);
+                lectx.drawImage(img,nx,ny,width/6,height/6);   
+            }
+        }
         
         function tourneG(letab,lecanvas,lectx)
         {
@@ -137,26 +154,12 @@
                 {
                     if(Array.isArray(pts[i]))
                     {
-                        /*
-                        pts[i].forEach(element => {
-                            faireCercle(element[0],element[1],element[2],lectx);
-                        })*/
-                        faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                        drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                     }
-                    else
-                    faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                    //else
+                        //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                 }
             }
-            /*
-            pts.forEach(element=> {
-                if(Array.isArray(element[0])){
-                    element.forEach(element2 => {
-                        faireCercle(element2[0],element2[1],element2[2],lectx);
-                    })
-                }
-                else
-                faireCercle(element[0],element[1],element[2],lectx);
-            })*/
         }
         
         function empiler(obj=false)
@@ -256,9 +259,7 @@
         }
         
         function generateEasy(){
-            tabObj=[[],[]];
-            tabObj[0]=Array.from(tab1);
-            tabObj[1]=Array.from(tab2);
+            tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)];
             tabObjCmp=[];
             actions=getRandomInt(8);
             
@@ -267,7 +268,7 @@
                 actions--;
             }
             empiler(true);
-            toutDessiner(tabObj,canvasO,ctxO);
+            toutDessiner(tabObjCmp,canvasO,ctxO);
             
         }
         
@@ -299,10 +300,10 @@
             if(!ne && !se ) return "O";
         }
         
-
+        
         /*
         6 cas : v1 vis->v1 vis
-
+        
         */
         function rotationManager(e)
         {
@@ -457,23 +458,29 @@
         })
         
         
-        /*
-        tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-        tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-        tab3.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-        tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
-        */
         
+        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"]);
+        
+        /*
         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);
-        toutDessiner(tab4,canvas4,ctx4);
+        //toutDessiner(tab2,canvas2,ctx2);
+        //toutDessiner(tab3,canvas3,ctx3);
+        //toutDessiner(tab4,canvas4,ctx4);
+        
+        
+        
+        
+        
+