diff --git a/code/index.css b/code/index.css
index a83aff3..5439a0a 100644
--- a/code/index.css
+++ b/code/index.css
@@ -66,4 +66,24 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
+  }
+
+  .vitrail-select {
+    margin: 3px;
+    padding: 6px;
+    background-image: url(ress/fond_fin.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border: 5px solid red;
+  }
+
+  .vitrail-hover {
+    margin: 3px;
+    padding: 6px;
+    background-image: url(ress/fond_fin.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    border: 5px solid blue;
   }
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index e5d4b88..147277c 100644
--- a/code/index.html
+++ b/code/index.html
@@ -13,6 +13,7 @@
             <h1>Objectif</h1>
             <canvas id="canvasObj" class="vitrail"></canvas>
             <button onclick="generateEasy()">gen easy</button>
+            <p id="stats"></p>
         </ul>
         <ul id="vitraux" class="vitraux" style="border:2px solid purple">
             <canvas id="canvas1" class="vitrail"></canvas>
@@ -35,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');
@@ -61,56 +51,58 @@
         tab3=[];
         tab4=[];
         tabR=[];
+        points=0;
         tabTotal=[];
         tabObjCmp=[];
         mousePos=[];
+        colorsAvailable=["red","yellow","green","purple"];
         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 faireCercle(x,y,color,lectx){
-            var cercle = new Path2D();
-            
+        size=120; // 6 lignes de 50px // 6 colonnes de 50px
+        canvasT.width=size;
+        canvasO.width=size;
+        
+        canvasT.height=size;
+        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);
-            ny=(height/6)*(y>0 ? y+2 : y+3);
+            nx=(size/6)*(x>0 ? x+2 : x+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);
         }
-
-        function drawImg0(x,y,color,lectx)
+        
+        function drawImg(x,y,color,lectx)
         {
             var img= new Image();
             
-            //lectx2=eval(lectx);
             
-            var nx=(width/6)*(x>0 ? x+2 : x+3);
-            var ny=(height/6)*(y>0 ? y+2 : y+3);
+            var nx=(size/6)*(x>0 ? x+2 : x+3);
+            var ny=(size/6)*(y>0 ? y+2 : y+3);
             
             img.src="ress/"+color+".png";
-
+            
             img.onload = function(){
-                console.log("x:"+x+" y:"+y+" col:"+color);
-                lectx.drawImage(img,nx,ny,width/6,height/6);   
+                lectx.drawImage(img,nx,ny,size/6,size/6);   
             }
             
         }
@@ -135,6 +127,7 @@
                     element[0]=-tmp;
                 });
             }
+            
             else {
                 letab[sselem].forEach(element => {
                     tmp=element[1];
@@ -142,9 +135,11 @@
                     element[0]=-tmp;
                 });
             }
-            toutDessiner(letab,lecanvas,lectx);
+            //console.log("pre-empiler :"+tabTotal);
+            empiler(sselem!=null);
+            //console.log("post-empiler :"+tabTotal);
             if(sselem==null)
-            empiler();
+            toutDessiner(letab,lecanvas,lectx);
         }
         
         function toutDessiner(pts,lecanvas,lectx)
@@ -152,15 +147,13 @@
             lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
             if(pts[0])
             {
-                
-                for(i=1;i<pts.length;i++)
+                var i=1*(typeof pts[0]==="boolean");
+                for(i;i<pts.length;i++)
                 {
                     if(Array.isArray(pts[i]))
                     {
-                        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);
                 }
             }
         }
@@ -168,7 +161,7 @@
         function empiler(obj=false)
         {
             const unique = (val) => val.toString() != test.toString();
-            exists=false;
+            var exists=false;
             
             if(!obj)
             {
@@ -177,67 +170,84 @@
                 {
                     
                     tab1.forEach(element => {
-                        tabTotal.push(element);
+                        if(Array.isArray(element))
+                        {
+                            tabTotal.push(element);
+                        }
                     })
                 }
                 if(tab2[0]){
                     
                     tab2.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
+                        if(Array.isArray(element))
+                        {
+                            colors.forEach(col => {
+                                test=[element[0],element[1],col];
+                                if(!exists)
+                                exists=!tabTotal.every(unique);
+                            })
                             if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
+                            tabTotal.push(element);
+                            exists=false;
+                        }
                     })
                 }
                 if(tab3[0])
                 {
                     
                     tab3.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
+                        if(Array.isArray(element)){
+                            colors.forEach(col => {
+                                test=[element[0],element[1],col];
+                                if(!exists)
+                                exists=!tabTotal.every(unique);
+                            })
                             if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
+                            tabTotal.push(element);
+                            exists=false;
+                        }
                     })
                 }
                 if(tab4[0]){
                     
                     tab4.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
+                        if(Array.isArray(element))
+                        {
+                            colors.forEach(col => {
+                                test=[element[0],element[1],col];
+                                if(!exists)
+                                exists=!tabTotal.every(unique);
+                            })
                             if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
+                            tabTotal.push(element);
+                            exists=false;
+                        }
                     })
                 }
                 checkAllOK();
                 toutDessiner(tabTotal,canvasT,ctxT);
             }
             else{
-                tabObj[0].forEach(element => {
-                    tabObjCmp.push(element);
-                })
-                
-                tabObj[1].forEach(element => {
-                    colors.forEach(col => {
-                        test=[element[0],element[1],col];
+                tabObjCmp=[];
+                for(count=1;count<tabObj[0].length;count++)
+                {
+                    tabObjCmp.push(tabObj[0][count]);
+                }
+                for(tabCount=1;tabCount<tabObj.length;tabCount++)
+                {
+                    for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
+                    {
+                        element=tabObj[tabCount][elmCount];
+                        colors.forEach(col => {
+                            test=[element[0],element[1],col];
+                            if(!exists)
+                            exists=!tabObjCmp.every(unique);
+                        })
                         if(!exists)
-                        exists=!tabObjCmp.every(unique);
-                    })
-                    if(!exists)
-                    tabObjCmp.push(element);
-                    exists=false;
-                })
+                        tabObjCmp.push(element);
+                        exists=false; 
+                    }
+                }
             }
         }
         
@@ -261,10 +271,20 @@
             return Math.floor(Math.random() * Math.floor(max))+1;
         }
         
+        function copyMDArray(array) //permet la copie d'arrays sans copier les références
+        {
+            var newArray = [];
+            array.forEach(element => {
+                newArray.push(Array.from(element))
+            });
+            return newArray
+        }
+        
         function generateEasy(){
-            tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)];
+            console.log(copyMDArray(tab1))
+            tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
             tabObjCmp=[];
-            actions=getRandomInt(8);
+            actions=getRandomInt(8)+1;
             
             while(actions>0){
                 tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
@@ -310,12 +330,18 @@
         */
         function rotationManager(e)
         {
+            
+            var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
             canvasNumber=e.currentTarget.id.substring(6);
-            if(mousePos[0]=="R" && canvasNumber!="R")
+            document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
+
+            if(mouseOnRes && canvasNumber!="R")
             {
                 if(!isVisible(canvasNumber))
                 {
                     toggleVisible(canvasNumber);
+                    tabR[canvasNumber]=[];
+                    toggleVisible(mousePos[0].substring(1),true);
                 }
             }
             else
@@ -324,14 +350,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
                     {
@@ -343,18 +367,22 @@
                         {
                             if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
                             {
+                                console.log("G");
                                 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"))
                             {
+                                console.log("D");
                                 tourneD(letab,lecanvas,lectx);
                             }
                             else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
                             {
+                                console.log("V");
                                 swap(letab,lecanvas,lectx,"V");
                             }
                             else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
                             {
+                                console.log("H");
                                 swap(letab,lecanvas,lectx,"H");
                             }
                         }
@@ -370,22 +398,31 @@
         
         function checkAllOK(){
             //const condition = (val) => val.toString() == element.toString();
-            exists=true;
+            var exists=true;
             //exists=!tabObjCmp.every(unique);
-            
             if(tabTotal.length==tabObjCmp.length)
             {
-                for(i=0;i>tabTotal.length;i++)
+                var verifTab=[];
+                verifTab=copyMDArray(tabTotal);
+                
+                
+                for(i=0;i<tabTotal.length;i++)
                 {
-                    exists*tabTotal[i].toString()==tabObjCmp[i].toString();
+                    const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
+                    exists*=result.length;
                 }
             }
             else
-            exists=false;
+            {
+                exists=false;
+            }
             
             if(exists)
             {
-                console.log("OK");
+                var audio = new Audio('ress/Jewel4.mp3');
+                audio.play();
+                points++;
+                document.getElementById("stats").innerHTML = points+" points";
                 generateEasy();
             }
         }
@@ -402,61 +439,136 @@
             //[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();
+            toutDessiner(tabTotal,canvasT,ctxT);
             
             
         }
         
         function isVisible(what)
         {
+            if(what.includes("R"))
+                return eval("tabR["+what.substring(1)+"][0]");
             return eval("tab"+what+"[0]");
         }
         
-        function toggleVisible(where)
+        function toggleVisible(where,reserve=false)
         {
-            eval("tab"+where+"[0]=!tab"+where+"[0];");
-            empiler();
-            toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
-            toutDessiner(tabTotal,canvasT,ctxT);
+            if(!reserve)
+            {
+                eval("tab"+where+"[0]=!tab"+where+"[0];");
+                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() {
+            for(var i=1;i<5;i++)
+            {
+                lecanvas="canvas"+i
+                eval("canvas"+i).addEventListener("mousedown",function(e){
+                    mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+                    document.getElementById(lecanvas).classList.add('vitrail-select');
+                });
+                
+                eval("canvas"+i).addEventListener("mouseup",function(e){
+                    rotationManager(e);
+                })
+            }
+        }*/
         
         canvas1.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas1").classList.add('vitrail-select');
+        })
+        canvas2.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas2").classList.add('vitrail-select');
+        })
+        canvas3.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas3").classList.add('vitrail-select');
+        })
+        canvas4.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvas4").classList.add('vitrail-select');
         })
         
         canvas1.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas2.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas2.addEventListener("mouseup",function(e){
             rotationManager(e);
         })
         
-        canvas3.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
         
         canvas3.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){
             rotationManager(e);
         })
         
+        canvas1.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas1").classList.add('vitrail-hover');
+        })
+        
+        canvas1.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas1").classList.remove('vitrail-hover');
+        })
+        canvas2.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas2").classList.add('vitrail-hover');
+        })
+        
+        canvas2.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas2").classList.remove('vitrail-hover');
+        })
+        canvas3.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas3").classList.add('vitrail-hover');
+        })
+        
+        canvas3.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas3").classList.remove('vitrail-hover');
+        })
+        
+        canvas4.addEventListener("mouseenter",function(e){
+            document.getElementById("canvas4").classList.add('vitrail-hover');
+        })
+        
+        canvas4.addEventListener("mouseleave",function(e){
+            document.getElementById("canvas4").classList.remove('vitrail-hover');
+        })
+        /*
         canvasR.addEventListener("mousedown",function(e){
             mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
         })
+*/
+        canvasR1.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvasR1").classList.add('vitrail-select');
+        })
+        canvasR2.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvasR2").classList.add('vitrail-select');
+        })
+        canvasR3.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvasR3").classList.add('vitrail-select');
+        })
+        canvasR4.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+            document.getElementById("canvasR4").classList.add('vitrail-select');
+        })
         
         canvasR.addEventListener("mouseup",function(e){
             rotationManager(e);
@@ -467,23 +579,19 @@
         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"]);
-        */
+        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
         
         toutDessiner(tab1,canvas1,ctx1);
         toutDessiner(tab2,canvas2,ctx2);
         toutDessiner(tab3,canvas3,ctx3);
         toutDessiner(tab4,canvas4,ctx4);
+        
         empiler();
         toutDessiner(tabTotal,canvasT,ctxT);
         
+        document.getElementById("stats").innerHTML = points+" points";
         
+        //events();
         
         
         
diff --git a/code/ress/Jewel4.mp3 b/code/ress/Jewel4.mp3
new file mode 100644
index 0000000..718c370
Binary files /dev/null and b/code/ress/Jewel4.mp3 differ