From 0ef4b1d167c519d9e85837b527b1d7ea97edf77c Mon Sep 17 00:00:00 2001
From: adplantade <adrien.plantade@etu.uca.fr>
Date: Tue, 16 Jun 2020 17:52:44 +0200
Subject: [PATCH] =?UTF-8?q?ajout=20de=20css,=20pr=C3=A9paration=20de=20la?=
 =?UTF-8?q?=20pile=20de=20r=C3=A9serve?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/index.css  | 32 ++++++++++++++++++++++++++++++++
 code/index.html | 15 ++++++++-------
 2 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 code/index.css

diff --git a/code/index.css b/code/index.css
new file mode 100644
index 0000000..28fda22
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index eb8f676..285bba1 100644
--- a/code/index.html
+++ b/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">
-    <canvas id="canvasR1" 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="canvasR3" style="border:1px solid violet"></canvas>
-    <canvas id="canvasR4" style="border:1px solid violet"></canvas>
-</canvas>
+<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>
     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"]);