Merge branch 'affichage-v2'

5 years ago · 9b46a292b6
parent 7c56070d47 bea019f0dc
commit 9b46a292b6
12 changed files with 481 additions and 381 deletions
--- a/code/index.css
+++ b/code/index.css
@ -1,25 +1,35 @@
 .all-container {
    display : flex; 
    justify-content: space-between;
    /*
    align-items: baseline;
    width : min-content;
    flex-direction: row;
    flex-wrap: wrap;*/
 }
 .flex-container {
    /* We first create a flex layout context */
-    display: flex;
+    display : flex;
-    
+    align-items: baseline;
    width : min-content;
    /* Then we define the flow direction 
       and if we allow the items to wrap 
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
-    padding: 0;
+    /* Then we define how is distributed the remaining space */
-    margin: 0;
+
-    list-style: none;
+    flex-direction: column;
  }
  /*
  .flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
@ -29,4 +39,31 @@
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }*/
  .vitraux {
    /* We first create a flex layout context */
    display : flex;
    align-items: baseline;
    width : min-content;
    /* Then we define the flow direction 
       and if we allow the items to wrap 
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    /* Then we define how is distributed the remaining space */
    flex-direction: column;
  }
  .vitrail {
    margin: 3px;
    padding: 6px;
    background-image: url(ress/fond_fin.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
--- a/code/index.html
+++ b/code/index.html
@ -1,432 +1,495 @@
 <!DOCTYPE html>
 <html>
-<canvas id="canvas1" style="border:1px solid #000"></canvas>
+<head>
-
+    <title>On The Dot</title>
-<canvas id="canvas2" style="border:1px solid #000"></canvas>
+    <link rel="stylesheet" type="text/css" href="index.css"/>
-
+</head>
-<canvas id="canvas3" style="border:1px solid #000"></canvas>
+<body>
-
+    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
-<canvas id="canvas4" style="border:1px solid #000"></canvas>
+        <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
-
+            <h1>R&eacute;sultat</h1>
-<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
+            <canvas id="canvasTotal" class="vitrail"></canvas>
-
+            <h1>Objectif</h1>
-<canvas id="canvasObj" style="border:1px solid green"></canvas>
+            <canvas id="canvasObj" class="vitrail"></canvas>
-<button onclick="generateEasy()">gen easy</button>
+            <button onclick="generateEasy()">gen easy</button>
        </ul>
        <ul id="vitraux" class="vitraux" style="border:2px solid purple">
            <canvas id="canvas1" class="vitrail"></canvas>
            <canvas id="canvas2" class="vitrail"></canvas>
            <canvas id="canvas3" class="vitrail"></canvas>
            <canvas id="canvas4" class="vitrail"></canvas>
        </ul>
        <ul id="canvasR" class="flex-container" style="border:1px solid violet">
            <h1>R&eacute;serve</h1>
            <canvas id="canvasR1" class="vitrail"></canvas>
            <canvas id="canvasR2" class="vitrail"></canvas>
            <canvas id="canvasR3" class="vitrail"></canvas>
            <canvas id="canvasR4" class="vitrail"></canvas>
        </ul>
    </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');
        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","yellow","green","purple"];
        width=120; // 6 lignes de 50px
        height=120; // 6 colonnes de 50px
        canvas1.width=width;
        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){
            var cercle = new Path2D();
            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+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
            lectx.fillStyle = color;
            lectx.fill(cercle);
        }
-<ul id="canvasR" class="flex-container" style="border:1px solid violet">
+        function drawImg(x,y,color,lectx)
-    <canvas id="canvasR1" class="flex-item" width="150" height="150" style="border:1px solid red"></canvas>
+        {
-    <canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
+            var img= new Image();
-    <canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
+            
-    <canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
+            //lectx2=eval(lectx);
-</ul>
+            
            var nx=(width/6)*(x>0 ? x+2 : x+3);
            var ny=(height/6)*(y>0 ? y+2 : y+3);
            img.src="ress/"+color+".png";
-<script>
+            img.onload = function(){
-    var canvas1 = document.getElementById('canvas1');
+                console.log("x:"+x+" y:"+y+" col:"+color);
-    var ctx1 = canvas1.getContext('2d');
+                lectx.drawImage(img,nx,ny,width/6,height/6);   
-    
+            }
-    var canvas2 = document.getElementById('canvas2');
+            
-    var ctx2 = canvas2.getContext('2d');
+        }
-    
+        
-    var canvas3 = document.getElementById('canvas3');
+        function tourneG(letab,lecanvas,lectx)
-    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');
    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=240; // 6 lignes de 50px
    height=240; // 6 colonnes de 50px
    canvas1.width=width;
    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 faireCercle(x,y,color,lectx){
        var cercle = new Path2D();
        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+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
        lectx.fillStyle = color;
        lectx.fill(cercle);
    }
    function tourneG(letab,lecanvas,lectx)
    {
        letab.forEach(element => {
            tmp=element[0];
            element[0]=element[1];
            element[1]=-tmp;
        });
        toutDessiner(letab,lecanvas,lectx);
        empiler();
    }
    function tourneD(letab,lecanvas,lectx,sselem=null)
    {
        if(sselem==null){
            letab.forEach(element => {
-                tmp=element[1];
+                tmp=element[0];
-                element[1]=element[0];
+                element[0]=element[1];
-                element[0]=-tmp;
+                element[1]=-tmp;
            });
            toutDessiner(letab,lecanvas,lectx);
            empiler();
        }
-        else {
+        
-            letab[sselem].forEach(element => {
+        function tourneD(letab,lecanvas,lectx,sselem=null)
-                tmp=element[1];
+        {
-                element[1]=element[0];
+            if(sselem==null){
-                element[0]=-tmp;
+                letab.forEach(element => {
-            });
+                    tmp=element[1];
                    element[1]=element[0];
                    element[0]=-tmp;
                });
            }
            else {
                letab[sselem].forEach(element => {
                    tmp=element[1];
                    element[1]=element[0];
                    element[0]=-tmp;
                });
            }
            toutDessiner(letab,lecanvas,lectx);
            if(sselem==null)
            empiler();
        }
-        toutDessiner(letab,lecanvas,lectx);
+        
-        if(sselem==null)
+        function toutDessiner(pts,lecanvas,lectx)
        empiler();
    }
    function toutDessiner(pts,lecanvas,lectx)
    {
        lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
        if(pts[0])
        {
-            for(i=1;i<pts.length;i++)
+            lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
            if(pts[0])
            {
-                if(Array.isArray(pts[i]))
+                
                for(i=1;i<pts.length;i++)
                {
-                    /*
+                    if(Array.isArray(pts[i]))
-                    pts[i].forEach(element => {
+                    {
-                        faireCercle(element[0],element[1],element[2],lectx);
+                        drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
-                    })*/
+                    }
-                    faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                    //else
                        //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                }
                else
                faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
            }
        }
-        /*
+        
-        pts.forEach(element=> {
+        function empiler(obj=false)
            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)
    {
        const unique = (val) => val.toString() != test.toString();
        exists=false;
        if(!obj)
        {
-            tabTotal=[];
+            const unique = (val) => val.toString() != test.toString();
-            if(tab1[0])
+            exists=false;
            if(!obj)
            {
-                
+                tabTotal=[];
-                tab1.forEach(element => {
+                if(tab1[0])
-                    tabTotal.push(element);
+                {
-                })
+                    
-            }
+                    tab1.forEach(element => {
-            if(tab2[0]){
+                        tabTotal.push(element);
-                
+                    })
-                tab2.forEach(element => {
+                }
-                    colors.forEach(col => {
+                if(tab2[0]){
-                        test=[element[0],element[1],col];
+                    
                    tab2.forEach(element => {
                        colors.forEach(col => {
                            test=[element[0],element[1],col];
                            if(!exists)
                            exists=!tabTotal.every(unique);
                        })
                        if(!exists)
-                        exists=!tabTotal.every(unique);
+                        tabTotal.push(element);
                        exists=false;
                    })
-                    if(!exists)
+                }
-                    tabTotal.push(element);
+                if(tab3[0])
-                    exists=false;
+                {
-                })
+                    
-            }
+                    tab3.forEach(element => {
-            if(tab3[0])
+                        colors.forEach(col => {
-            {
+                            test=[element[0],element[1],col];
-                
+                            if(!exists)
-                tab3.forEach(element => {
+                            exists=!tabTotal.every(unique);
-                    colors.forEach(col => {
+                        })
                        test=[element[0],element[1],col];
                        if(!exists)
-                        exists=!tabTotal.every(unique);
+                        tabTotal.push(element);
                        exists=false;
                    })
-                    if(!exists)
+                }
-                    tabTotal.push(element);
+                if(tab4[0]){
-                    exists=false;
+                    
-                })
+                    tab4.forEach(element => {
                        colors.forEach(col => {
                            test=[element[0],element[1],col];
                            if(!exists)
                            exists=!tabTotal.every(unique);
                        })
                        if(!exists)
                        tabTotal.push(element);
                        exists=false;
                    })
                }
                checkAllOK();
                toutDessiner(tabTotal,canvasT,ctxT);
            }
-            if(tab4[0]){
+            else{
                tabObj[0].forEach(element => {
                    tabObjCmp.push(element);
                })
-                tab4.forEach(element => {
+                tabObj[1].forEach(element => {
                    colors.forEach(col => {
                        test=[element[0],element[1],col];
                        if(!exists)
-                        exists=!tabTotal.every(unique);
+                        exists=!tabObjCmp.every(unique);
                    })
                    if(!exists)
-                    tabTotal.push(element);
+                    tabObjCmp.push(element);
                    exists=false;
                })
            }
            checkAllOK();
            toutDessiner(tabTotal,canvasT,ctxT);
        }
-        else{
+        
-            tabObj[0].forEach(element => {
+        function swap(letab, lecanvas, lectx,ladir){
-                tabObjCmp.push(element);
+            if(ladir=="H"){
-            })
+                letab.forEach(element=> {
-            
+                    element[1]=-element[1];
            tabObj[1].forEach(element => {
                colors.forEach(col => {
                    test=[element[0],element[1],col];
                    if(!exists)
                    exists=!tabObjCmp.every(unique);
                })
-                if(!exists)
+            }
-                tabObjCmp.push(element);
+            else {
-                exists=false;
+                letab.forEach(element=> {
-            })
+                    element[0]=-element[0];
                })
            }
            toutDessiner(letab,lecanvas,lectx);
            empiler();
        }
-    }
+        
-    
+        function getRandomInt(max) {
-    function swap(letab, lecanvas, lectx,ladir){
+            return Math.floor(Math.random() * Math.floor(max))+1;
        if(ladir=="H"){
            letab.forEach(element=> {
                element[1]=-element[1];
            })
        }
-        else {
+        
-            letab.forEach(element=> {
+        function generateEasy(){
-                element[0]=-element[0];
+            tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)];
-            })
+            tabObjCmp=[];
            actions=getRandomInt(8);
            while(actions>0){
                tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
                actions--;
            }
            empiler(true);
            toutDessiner(tabObjCmp,canvasO,ctxO);
        }
-        toutDessiner(letab,lecanvas,lectx);
+        function getMousePosition(lecanvas, event, lectx, letab) { 
-        empiler();
+            let rect = lecanvas.getBoundingClientRect(); 
-    }
+            let x = event.clientX - rect.left; 
-    
+            let y = event.clientY - rect.top; 
-    function getRandomInt(max) {
+            let dir = compas(x,y,lecanvas);
-        return Math.floor(Math.random() * Math.floor(max))+1;
+            
-    }
+            if(x<lecanvas.width/2)
-    
+            tourneG(letab,lecanvas,lectx);
-    function generateEasy(){
+            else
-        tabObj=[[],[]];
+            tourneD(letab,lecanvas,lectx);
-        tabObj[0]=Array.from(tab1);
+        } 
        tabObj[1]=Array.from(tab2);
        tabObjCmp=[];
        actions=getRandomInt(8);
-        while(actions>0){
+        /// renvoie le point cardianl où se trouve le point
-            tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
+        
-            actions--;
+        function compas(x,y,lecanvas)
        }
        empiler(true);
        toutDessiner(tabObj,canvasO,ctxO);
    }
    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<lecanvas.width/2)
        tourneG(letab,lecanvas,lectx);
        else
        tourneD(letab,lecanvas,lectx);
    } 
    /// renvoie le point cardianl où se trouve le point
    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;
        if(ne && se ) return "E";
        if(ne && !se ) return "N";
        if(!ne && se ) return "S";
        if(!ne && !se ) return "O";
    }
    function rotationManager(e)
    {
        canvasNumber=e.currentTarget.id.substring(6);
        if(canvasNumber=="R")
        {
-            toggleVisible(mousePos[0]);
+            rect = lecanvas.getBoundingClientRect(); 
            x = event.clientX - rect.left; 
            y = event.clientY - rect.top; 
            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";
        }
-        else
+        
        /*
        6 cas : v1 vis->v1 vis
        */
        function rotationManager(e)
        {
-            lecanvas=eval("canvas"+canvasNumber);
+            canvasNumber=e.currentTarget.id.substring(6);
-            letab=eval("tab"+canvasNumber);
+            if(mousePos[0]=="R" && canvasNumber!="R")
            lectx=lecanvas.getContext('2d');
            dir = compas(e.clientX,e.clientY,e.currentTarget);
            if(mousePos[0]==canvasNumber)
            {
-                if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
+                if(!isVisible(canvasNumber))
                {
                    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(letab,lecanvas,lectx);
+                    toggleVisible(canvasNumber);
                }
-                else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
+            }
            else
            {
                if(isVisible(mousePos[0]))
                {
-                    swap(letab,lecanvas,lectx,"V");
+                    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]));
                    }
                    else
                    {
                        lecanvas=eval("canvas"+canvasNumber);
                        letab=eval("tab"+canvasNumber);
                        lectx=lecanvas.getContext('2d');
                        dir = compas(e.clientX,e.clientY,e.currentTarget);
                        if(mousePos[0]==canvasNumber)
                        {
                            if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
                            {
                                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(letab,lecanvas,lectx);
                            }
                            else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
                            {
                                swap(letab,lecanvas,lectx,"V");
                            }
                            else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
                            {
                                swap(letab,lecanvas,lectx,"H");
                            }
                        }
                        else
                        {
                            changeOrder(mousePos[0],canvasNumber);
                        }
                    }
                }
-                else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
+            }
        }
        function checkAllOK(){
            //const condition = (val) => val.toString() == element.toString();
            exists=true;
            //exists=!tabObjCmp.every(unique);
            if(tabTotal.length==tabObjCmp.length)
            {
                for(i=0;i>tabTotal.length;i++)
                {
-                    swap(letab,lecanvas,lectx,"H");
+                    exists*tabTotal[i].toString()==tabObjCmp[i].toString();
                }
            }
            else
            exists=false;
            if(exists)
            {
-                changeOrder(mousePos[0],canvasNumber);
+                console.log("OK");
                generateEasy();
            }
        }
-    }
+        
-    
+        function changeOrder(from, to)
    function checkAllOK(){
        //const condition = (val) => val.toString() == element.toString();
        exists=true;
        //exists=!tabObjCmp.every(unique);
        if(tabTotal.length==tabObjCmp.length)
        {
-            for(i=0;i>tabTotal.length;i++)
+            fromTab=eval("tab"+from);
            toTab=eval("tab"+to);
            for(i=0;i<toTab.length;i++)
            {
-                exists*tabTotal[i].toString()==tabObjCmp[i].toString();
+                
                [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
            }
            //[fromTab,toTab]=[toTab,fromTab];
            toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
            toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
            toutDessiner(tabTotal,canvasT,ctxT);
            empiler();
        }
        else
        exists=false;
-        if(exists)
+        function isVisible(what)
        {
-            console.log("OK");
+            return eval("tab"+what+"[0]");
            generateEasy();
        }
-    }
+        
-    
+        function toggleVisible(where)
    function changeOrder(from, to)
    {
        fromTab=eval("tab"+from);
        toTab=eval("tab"+to);
        for(i=0;i<toTab.length;i++)
        {
-            
+            eval("tab"+where+"[0]=!tab"+where+"[0];");
-            [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
+            empiler();
            toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
            toutDessiner(tabTotal,canvasT,ctxT);
        }
-        //[fromTab,toTab]=[toTab,fromTab];
+        
-        toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
+        
-        toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
+        canvas1.addEventListener("mousedown",function(e){
-        
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        
+        })
-    }
+        
-    
+        canvas1.addEventListener("mouseup",function(e){
-    function toggleVisible(where)
+            rotationManager(e);
-    {
+        })
-        eval("tab"+where+"[0]=!tab"+where+"[0];");
+        
-        empiler();
+        canvas2.addEventListener("mousedown",function(e){
-        toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        toutDessiner(tabTotal,canvasT,ctxT);
+        })
-    }
+        
-    
+        canvas2.addEventListener("mouseup",function(e){
-    
+            rotationManager(e);
-    canvas1.addEventListener("mousedown",function(e){
+        })
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        
-    })
+        canvas3.addEventListener("mousedown",function(e){
-    
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    canvas1.addEventListener("mouseup",function(e){
+        })
-        rotationManager(e);
+        
-    })
+        canvas3.addEventListener("mouseup",function(e){
-    
+            rotationManager(e);
-    canvas2.addEventListener("mousedown",function(e){
+        })
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        
-    })
+        canvas4.addEventListener("mousedown",function(e){
-    
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    canvas2.addEventListener("mouseup",function(e){
+        })
-        rotationManager(e);
+        
-    })
+        canvas4.addEventListener("mouseup",function(e){
-    
+            rotationManager(e);
-    canvas3.addEventListener("mousedown",function(e){
+        })
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        
-    })
+        canvasR.addEventListener("mousedown",function(e){
-    
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-    canvas3.addEventListener("mouseup",function(e){
+        })
-        rotationManager(e);
+        
-    })
+        canvasR.addEventListener("mouseup",function(e){
-    
+            rotationManager(e);
-    canvas4.addEventListener("mousedown",function(e){
+        })
-        mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        
-    })
+        
-    
+        
-    canvas4.addEventListener("mouseup",function(e){
+        tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        rotationManager(e);
+        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"]);
-    canvasR.addEventListener("mouseup",function(e){
+        
-        rotationManager(e);
+        /*
-    })
+        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"]);
-    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"]);
+        toutDessiner(tab1,canvas1,ctx1);
-    tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
+        toutDessiner(tab2,canvas2,ctx2);
-    */
+        toutDessiner(tab3,canvas3,ctx3);
-    
+        toutDessiner(tab4,canvas4,ctx4);
-    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);
+    </script>
-    
+</body>
-    
+
-    
+</html>
 </script>
--- a/code/ress/fond.png
+++ b/code/ress/fond.png
--- a/code/ress/fond_fin.png
+++ b/code/ress/fond_fin.png
--- a/code/ress/fond_tr.png
+++ b/code/ress/fond_tr.png
--- a/code/ress/green.png
+++ b/code/ress/green.png
--- a/code/ress/material_08.png
+++ b/code/ress/material_08.png
--- a/code/ress/material_10.png
+++ b/code/ress/material_10.png
--- a/code/ress/purple.png
+++ b/code/ress/purple.png
--- a/code/ress/red.png
+++ b/code/ress/red.png
--- a/code/ress/wi.png
+++ b/code/ress/wi.png
--- a/code/ress/yellow.png
+++ b/code/ress/yellow.png