ajout de css, préparation de la pile de réserve

code/index.css

@@ -0,0 +1,32 @@
+.flex-container {
+    /* We first create a flex layout context */
+    display: flex;
+    
+    /* 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-item {
+    background: tomato;
+    padding: 5px;
+    width: 200px;
+    height: 150px;
+    margin-top: 10px;
+    line-height: 150px;
+    color: white;
+    font-weight: bold;
+    font-size: 3em;
+    text-align: center;
+  }

code/index.html

@@ -12,12 +12,12 @@
 <canvas id="canvasObj" style="border:1px solid green"></canvas>
 <button onclick="generateEasy()">gen easy</button>
 
-<canvas id="canvasR" style="border:1px solid violet">
+<ul id="canvasR" class="flex-container" style="border:1px solid violet">
-    <canvas id="canvasR1" width="150" height="150" style="border:1px solid red"></canvas>
+    <canvas id="canvasR1" class="flex-item" width="150" height="150" style="border:1px solid red"></canvas>
-    <canvas id="canvasR2" width="150" height="150" style="border:1px solid blue"></canvas>
+    <canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
-    <canvas id="canvasR3" style="border:1px solid violet"></canvas>
+    <canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
-    <canvas id="canvasR4" style="border:1px solid violet"></canvas>
+    <canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
-</canvas>
+</ul>
 
 <script>
     var canvas1 = document.getElementById('canvas1');
@@ -39,7 +39,7 @@
     var ctxO = canvasO.getContext('2d');
 
     var canvasR = document.getElementById('canvasR');
-    var ctxR = canvasR.getContext('2d');
+    //var ctxR = canvasR.getContext('2d');
     
     tab1=[];
     tab2=[];
@@ -405,6 +405,7 @@
         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"]);