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;
-    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,25 +1,40 @@
-
-<canvas id="canvas1" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas2" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas3" style="border:1px solid #000"></canvas>
-
-<canvas id="canvas4" style="border:1px solid #000"></canvas>
-
-<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
-
-<canvas id="canvasObj" style="border:1px solid green"></canvas>
-<button onclick="generateEasy()">gen easy</button>
-
-<ul id="canvasR" class="flex-container" style="border:1px solid violet">
-    <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>
-    <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>
-
-<script>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>On The Dot</title>
+    <link rel="stylesheet" type="text/css" href="index.css"/>
+</head>
+<body>
+    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
+        <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
+            <h1>R&eacute;sultat</h1>
+            <canvas id="canvasTotal" class="vitrail"></canvas>
+            <h1>Objectif</h1>
+            <canvas id="canvasObj" class="vitrail"></canvas>
+            <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');
        
@ -49,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=120; // 6 lignes de 50px
+        height=120; // 6 colonnes de 50px
        canvas1.width=width;
        canvas2.width=width;
        canvas3.width=width;
@ -67,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();
            
            
@ -82,6 +97,24 @@
            lectx.fill(cercle);
        }

+        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);
+            
+            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);   
+            }
+            
+        }
+        
        function tourneG(letab,lecanvas,lectx)
        {
            letab.forEach(element => {
@ -119,30 +152,17 @@
            lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
            if(pts[0])
            {
+                
                for(i=1;i<pts.length;i++)
                {
                    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);
-                }
-                else
-                faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                        drawImg(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)
@ -242,9 +262,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);
            
@ -253,7 +271,7 @@
                actions--;
            }
            empiler(true);
-        toutDessiner(tabObj,canvasO,ctxO);
+            toutDessiner(tabObjCmp,canvasO,ctxO);
            
        }
        
@ -285,12 +303,35 @@
            if(!ne && !se ) return "O";
        }
        
+        
+        /*
+        6 cas : v1 vis->v1 vis
+        
+        */
        function rotationManager(e)
        {
            canvasNumber=e.currentTarget.id.substring(6);
+            if(mousePos[0]=="R" && canvasNumber!="R")
+            {
+                if(!isVisible(canvasNumber))
+                {
+                    toggleVisible(canvasNumber);
+                }
+            }
+            else
+            {
+                if(isVisible(mousePos[0]))
+                {
                    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
                    {
@ -323,6 +364,8 @@
                        }
                    }
                }
+            }
+        }
        
        
        function checkAllOK(){
@ -359,10 +402,17 @@
            //[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();
            
            
        }
        
+        function isVisible(what)
+        {
+            return eval("tab"+what+"[0]");
+        }
+        
        function toggleVisible(where)
        {
            eval("tab"+where+"[0]=!tab"+where+"[0];");
@ -404,23 +454,27 @@
            rotationManager(e);
        })
        
+        canvasR.addEventListener("mousedown",function(e){
+            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+        })
+        
        canvasR.addEventListener("mouseup",function(e){
            rotationManager(e);
        })
        
        
-    /*
-    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);
@ -429,4 +483,13 @@
        
        
        
-</script>
+        
+        
+        
+        
+        
+        
+    </script>
+</body>
+
+</html>
--- 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