From 3768eb49947bd801adb11d82f954e29f8b225379 Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Thu, 18 Jun 2020 18:09:14 +0200
Subject: [PATCH] =?UTF-8?q?nouveau=20syst=C3=A8me=20de=20liens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/test/js/createElement.js |   3 +-
 site/vue/css/style.css        | 203 ++++++++----
 site/vue/index.html           | 106 ++++--
 site/vue/js/const.js          |   4 +-
 site/vue/js/createElement.js  | 590 +++++++++++++++++++---------------
 site/vue/js/func.js           |  13 +-
 site/vue/js/init.js           |  31 +-
 site/vue/js/lang.js           |  20 +-
 site/vue/js/logique.js        |  10 +-
 site/vue/js/main.js           | 137 ++++----
 site/vue/js/progress.js       |  14 +
 site/vue/js/timer.js          |  26 +-
 site/vue/todo.todo            |  21 +-
 13 files changed, 710 insertions(+), 468 deletions(-)
 create mode 100644 site/vue/js/progress.js

diff --git a/site/test/js/createElement.js b/site/test/js/createElement.js
index 7d31536..ad9bf2e 100644
--- a/site/test/js/createElement.js
+++ b/site/test/js/createElement.js
@@ -127,6 +127,7 @@ function createLink(entre, sortie) {
           }
           break;
         default:
+          console.log("id2222222222222222222");
           endLines.push(lineId);
           createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / end.position)*end.let], "line" + lineId);
           setLine(entre, "id3", "line" + lineId);
@@ -238,9 +239,7 @@ function createLinkSwitch(){
   else {
     switchsInfoCopy.forEach(function(element){
       if(stage.findOne("#"+element.id).id3 == null){
-        console.log("le switch " + element.id);
         if(Math.abs(logique.y - element.y) < distanceSwitch){
-          console.log("ai");
           distanceSwitch = Math.abs(logique.y - element.y);
           switchs = element;
         }
diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 18f0cb6..9594076 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -2,20 +2,26 @@
     font-family: main;
     src: url(../font/main.TTF);
 }
+
 @font-face {
     font-family: dys;
     src: url(../font/dys.otf);
 }
-*{
+
+* {
     transition: .01s;
 }
 
-body{
+body {
     font-family: main;
+    background-color: #D7CCC8;
+    height: 91%;
 }
 
-body {
-    background-color: #D7CCC8;
+html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 .title {
@@ -24,7 +30,7 @@ body {
     font-size: 8vh;
 }
 
-#play_container{
+#play_container {
     display: flex;
     height: 100%;
 }
@@ -84,6 +90,7 @@ body {
 .fa-cog:hover {
     font-size: 6vh;
 }
+
 .fa-trophy {
     font-size: 5vh;
     position: absolute;
@@ -96,6 +103,7 @@ body {
 .fa-trophy:hover {
     font-size: 6vh;
 }
+
 .fa-users {
     font-size: 5vh;
     position: absolute;
@@ -121,11 +129,12 @@ body {
 .fa-info:hover {
     font-size: 6vh;
 }
+
 .fa-arrow-left {
     font-size: 5vh;
     position: absolute;
     left: 0;
-    margin: 4vh;
+    margin: 2vh;
     transition: .5s;
 }
 
@@ -147,7 +156,7 @@ i:hover {
     width: 100%;
     height: 100%;
     overflow: auto;
-    
+
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -163,33 +172,38 @@ i:hover {
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;
     animation-duration: 0.4s
-}   
-.modal-body{
+}
+
+.modal-body {
     height: 100%;
-    border:5px solid #D3D3CE;
+    border: 5px solid #D3D3CE;
     border-radius: 15px;
 }
-.score-content{
+
+.score-content {
     height: 90%;
 }
-.scoreOne{
+
+.scoreOne {
     position: absolute;
     width: 40%;
     bottom: 1.5%;
-    top:15%;
-    left:5%;
-    border:5px solid #D3D3CE;
+    top: 15%;
+    left: 5%;
+    border: 5px solid #D3D3CE;
     border-radius: 15px;
 }
-.scoreTwo{
+
+.scoreTwo {
     position: absolute;
     width: 40%;
     bottom: 1.5%;
-    top:15%;
-    right:5%;
-    border:5px solid #D3D3CE;
+    top: 15%;
+    right: 5%;
+    border: 5px solid #D3D3CE;
     border-radius: 15px;
 }
+
 @-webkit-keyframes animatetop {
     from {
         top: -200px;
@@ -224,98 +238,175 @@ img:hover {
     cursor: pointer;
 }
 
-hr{
-    border : 3px solid #D3D3CE;
+hr {
+    border: 3px solid #D3D3CE;
 }
-.img_france{
-    margin-right:50px;
+
+.img_france {
+    margin-right: 50px;
 }
 
-.setting_play{
+.setting_play {
     height: 30vh;
     width: 90%;
 }
-.close{
+
+.close {
     position: absolute;
-    right:33px;
-    top:10px;
+    right: 33px;
+    top: 10px;
     font-size: 50px;
 }
-#modeDeJeu{
-    font-size: 25px;;
+
+#modeDeJeu {
+    font-size: 25px;
+    ;
 }
-.close:hover{
-    color:red;
+
+.close:hover {
+    color: red;
     cursor: pointer;
 }
 
-.margin-right{
+.margin-right {
     margin-right: 5%;
 }
-.margin-global{
-    margin-left: 2%;
+
+.margin-global {
+    margin-left: 2f%;
     margin-right: 2%;
 }
-.veriteTable{
+
+.veriteTable {
     border-collapse: collapse;
     border-radius: 15px;
     overflow: hidden;
     text-align: center;
     width: 30%;
 }
-.veriteTable th{
+
+.veriteTable th {
     height: 3em;
 }
-.veriteTable td{
+
+.veriteTable td {
     height: 2em;
 }
 
-#playPage{
+#playPage {
     display: none;
     flex-direction: column;
-    height: 50%;
+    height: 95%;
+    margin: 0;
+    padding: 0;
 }
-.border{
+
+.border {
     border-radius: 15px;
 }
-.secret{
+
+.secret {
     cursor: pointer;
-    color:#fe8a71;
+    color: #fe8a71;
 }
-#niveauGameOver{
-    color:#fe8a71;
+
+#niveauGameOver {
+    color: #fe8a71;
 }
-#scoreTotGameOver{
-    color:#fe8a71;
+
+#scoreTotGameOver {
+    color: #fe8a71;
 }
-#TempsTotGameOver{
-    color:#fe8a71;
+
+#TempsTotGameOver {
+    color: #fe8a71;
 }
-.timer_bar{
+
+.timer_bar {
     height: 15px;
     max-width: 95%;
-    margin:2%;
+    margin: 2%;
     transition: 1.5s;
 }
-.fa-star{
+
+.fa-star {
     font-size: 10vh;
     cursor: default;
 }
 
-@media screen and (max-width:900px){
+@media screen and (max-width:900px) {
     .fa {
         font-size: 1em;
     }
-    #titleGame{
+
+    #titleGame {
         font-size: 2em;
-        margin-top:35%;
+        margin-top: 35%;
     }
+
     .far {
-        font-size:5em;
+        font-size: 5em;
         margin: 0;
 
     }
-    #setting_int{
+
+    #setting_int {
         font-size: 0.6em;
     }
+}
+
+.timer_show {
+    font-size: 5vh;
+    position: absolute;
+    right: 10vh;
+    top: 3vh;
+    height: 10vh;
+    width: 10vh;
+    border-radius: 50%;
+    margin: 0;
+    text-align: center;
+}
+
+.timer_txt {
+    transition: 0.2s;
+}
+
+.info_check {
+    margin-right: 2%;
+}
+
+#cache_reinit {
+    background-color: red;
+    color: #D7CCC8;
+    border: none;
+}
+
+#cache_reinit:hover {
+    background-color: lightcoral;
+    cursor: pointer;
+}
+.input-color-container {
+    position: relative;
+    overflow: hidden;
+    width: 40px;
+    height: 40px;
+    border: solid 2px #ddd;
+    border-radius: 40px;
+}
+input[type=color]{
+    position: absolute;
+  right: -8px;
+  top: -8px;
+  width: 56px;
+  height: 56px;
+  border: none;
+}
+
+.input_line{
+    display: flex;
+    justify-content: center;
+}
+.colomn_line_input{
+    margin-right:25px;
+    margin-left:25px;
 }
\ No newline at end of file
diff --git a/site/vue/index.html b/site/vue/index.html
index 30cf93c..ef4edfa 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -49,6 +49,7 @@
                     <br><br>
                     <p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p>
                     <br><br>
+                    <p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
                 </div>
             </div>
         </div>
@@ -89,18 +90,44 @@
                     <br><br>
                     <p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p>
                     <br><br>
+                    <p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
+                </div>
+            </div>
+        </div>
+        <div id="firstTimeinv" class="modal">
+            <div class="modal-content info-content">
+                <div class="modal-body border background" align=center>
+                    <span class="close" onclick="closeModal('firstTimeinv');timer.start()">&times;</span>
+                    <h1 class="txt dys" id="infoFirstTimeinv"></h1>
+                    <hr id="hr">
+                    <p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
+                    <table class="veriteTable dys">
+                            <tr>
+                            <th class="border">a</th>
+                            <th class="border">S</th>
+                          </tr>
+                          <tr>
+                            <td class="border">0</td>
+                            <td class="border">1</td>
+                          </tr>
+                          <tr>
+                            <td class="border">1</td>
+                            <td class="border">0</td>
+                          </tr>
+                    </table>
+                    <br><br>
+                    <p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p>
+                    <br><br>
+                    <p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
                 </div>
             </div>
         </div>
         <div class="menu border">
             <div align=center>
                 <a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
-                <p id="modeDeJeu" class="txt dys">Mode de jeu</p>
-                <p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
-                <p class="dys"><a id="temps" class="txt">Temps : </a><a id="timer">0 s</a><a id="timerend">0 s</a></p>
-            </div>
-            <div class="timer_bar border">
-
+                <div class="timer_show dys border"><span class="timer_txt"></span></div>
+                <p id="modeDeJeu" class="txt dys"></p>
+                <p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p>
             </div>
         </div>
         <br>
@@ -117,9 +144,9 @@
             <ul>
                 <li>
                     <div class="message">
-                        <a class="txt dys" id="playSelection">Je veux jouer a </a>
+                        <a class="txt dys" id="playSelection"></a>
                         <select id="jeu-select" class="background">
-                            <option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option>
+                            <option value="aleatoire" class="txt background dys" id="mode1"></option>
                             <option value="perso" class="txt background dys" id="mode2"></option>
                         </select>
                     </div>
@@ -150,19 +177,44 @@
                         <input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
                     <br>
                     <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
-                    <img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br>
+                    <img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br><br>
+                    <button class="dys txt" id="cache_reinit" onclick="resetCache();"></button><br>
                     <hr id="hr">
-                    <p id="setting_title_perso" class="txt dys">Personnalisation du jeu</p>
-                    <p><a class="txt dys" id="active_switch_setting">Couleur ligne active : </a><input type="color"
-                            id="active_switch_picker" name="head" value="#008000"></p>
-                    <p><a class="txt dys" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color"
-                            id="inactive_switch_picker" name="head" value="#FF0000"></p>
-                    <p><a class="txt dys" id="active_line_setting">Couleur ligne innactive : </a><input type="color"
-                            id="active_line_picker" name="head" value="#4CFEFE"></p>
-                    <p><a class="txt dys" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color"
-                            id="inactive_line_picker" name="head" value="#000000"></p>
-                    <p><a class="txt dys" id="inactive_end_setting">Couleur ligne innactive : </a><input type="color"
-                            id="inactive_end_picker" name="head" value="#9a9a9a"></p>
+                    <p id="setting_title_perso" class="txt dys"></p>
+                    <div class="input_line">
+                        <div class="colomn_line_input">
+                            <a class="txt dys" id="active_switch_setting"></a>
+                            <div class="input-color-container">
+                                <input type="color" id="active_switch_picker" name="head" value="#008000" />
+                            </div>
+                        </div>
+                        <div class="colomn_line_input">
+                            <a class="txt dys" id="inactive_switch_setting"></a>
+                            <div class="input-color-container">
+                                <input type="color" id="inactive_switch_picker" name="head" value="#FF0000">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input_line">
+                        <div class="colomn_line_input">
+                            <a class="txt dys" id="active_line_setting"></a>
+                            <div class="input-color-container">
+                                <input type="color" id="active_line_picker" name="head" value="#4CFEFE">
+                            </div>
+                        </div>
+                        <div class="colomn_line_input">
+                            <a class="txt dys" id="inactive_line_setting"></a>
+                            <div class="input-color-container">
+                                <input type="color" id="inactive_line_picker" name="head" value="#000000">
+                            </div>
+                        </div>
+                        <div class="colomn_line_input">
+                            <a class="txt dys" id="inactive_end_setting"></a>
+                            <div class="input-color-container">
+                                <input type="color" id="inactive_end_picker" name="head" value="#9a9a9a">
+                            </div>
+                        </div>
+                    </div>
                     <hr id="hr">
                     <div class="setting_play" id="setting_container">
 
@@ -170,6 +222,18 @@
                 </div>
             </div>
         </div>
+        <div id="reset_cache" class="modal">
+            <div class="modal-content info-content">
+                <div class="modal-body border background" align=center>
+                    <span class="close" onclick="closeModal('reset_cache');">&times;</span>
+                    <h1 class="txt dys" id="reset"></h1>
+                    <hr id="hr">
+                    <p class="dys txt margin-global" id="reset_cache_message"></p>
+                    <br><br>
+                    <br><br>
+                </div>
+            </div>
+        </div>
 
         <div id="scoreModal" class="modal">
             <div class="modal-content score-content">
@@ -205,7 +269,7 @@
                     <br><br>
                     <div align=center>
                         <p><a class="dys">Vous avez fait un score total de </a><a class="dys" id="scoreTotGameOver">140</a></p>
-                        <p><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
+                        <p class="dys"><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
                         <p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
                         <hr id="hr">
                         <p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p>
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index dcc9860..7dfbf2f 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -48,4 +48,6 @@ var isTuto = true;
 var windowWidth = 0;
 var windowHeight = 0;
 
-var mobile = false;
\ No newline at end of file
+var mobile = false;
+
+var allowedInfoPorte = true;
\ No newline at end of file
diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js
index 4bfcb00..a3299c4 100644
--- a/site/vue/js/createElement.js
+++ b/site/vue/js/createElement.js
@@ -1,296 +1,350 @@
 function createEnd() {
 
-    //find X and Y
-  
-    var X = stage.width() - stage.width() /100 * 5;
-    var Y = stage.height() / 2;
-  
-    var endShape = new Konva.RegularPolygon({
-      x: X,
-      y: Y,
-      sides: 6,
-      radius: 30,
-      fill: '#9a9a9a',
-      stroke: 'black',
-      strokeWidth: 4,
-      id : "end",
-    });
-    end = {
-      name: "end",
-      x: X,
-      y: Y,
-      type: "end",
-      position: 1,
-      let:1,
-    }
-    end.x = end.x - endShape.width() / 2;
-    layer.add(endShape);
-  }
-  
-  function createSwitch(id, x, y) {
-    var switche = {
-      id : id,
-      x : x,
-      y : y,
-    };
-    switchsInfo.push(switche);
-    switchsInfoCopy.push(switche);
-    switchs.push(id);
-    var num = lineCount.length;
-    lineCount.push(1);
-    var rect1 = new Konva.Rect({
-      x: x,
-      y: y,
-      width: SwitchWidth,
-      height: SwitchHeight,
-      stroke: colorSwitchBorder,
-      fill: colorSwitchInnactiveBackground,
-      strokeWidth: 4,
-      id: id,
-      id3: null,
-    });
-    layer.add(rect1);
-  }
-  
-  function createLine(points, id) {
-    let startX = points[0], startY = points[1], endX = points[2], endY = points[3];
-    let distance20 = (endX - startX)/100*pourcentageBreak;
-    let newPoints = [startX, startY,startX + distance20, startY,endX - distance20,endY,endX,endY];
-    let line = new Konva.Line({
-      points: newPoints,
-      fill : 'blue',
-      stroke: colorLineInnactive,
-      strokeWidth: lineStroke,
-      id: id,
-    });
-    layer.add(line);
+  //find X and Y
+
+  var X = stage.width() - stage.width() / 100 * 5;
+  var Y = stage.height() / 2;
+
+  var endShape = new Konva.RegularPolygon({
+    x: X,
+    y: Y,
+    sides: 6,
+    radius: 30,
+    fill: '#9a9a9a',
+    stroke: 'black',
+    strokeWidth: 4,
+    id: "end",
+  });
+  end = {
+    name: "end",
+    x: X,
+    y: Y,
+    type: "end",
+    position: 1,
+    let: 1,
   }
-  
-  
-  function createLink(entre, sortie) {
-    //entre est une porte logique
-    lineId = lineCount.length;
-    lineCount.push(1);
-    switch (whatIsElement(entre)) {
-      case "switch":
-        switch (whatIsElement(sortie)) {
-          case "logique":
-            switch (giveLineId(sortie.name,entre)) {
+  end.x = end.x - endShape.width() / 2;
+  layer.add(endShape);
+}
+
+function createSwitch(id, x, y) {
+  var switche = {
+    id: id,
+    x: x,
+    y: y,
+  };
+  switchsInfo.push(switche);
+  switchsInfoCopy.push(switche);
+  switchs.push(id);
+  var num = lineCount.length;
+  lineCount.push(1);
+  var rect1 = new Konva.Rect({
+    x: x,
+    y: y,
+    width: SwitchWidth,
+    height: SwitchHeight,
+    stroke: colorSwitchBorder,
+    fill: colorSwitchInnactiveBackground,
+    strokeWidth: 4,
+    id: id,
+    id3: null,
+  });
+  layer.add(rect1);
+}
+
+function createLine(points, id) {
+  let startX = points[0], startY = points[1], endX = points[2], endY = points[3];
+  let distance20 = (endX - startX) / 100 * pourcentageBreak;
+  let newPoints = [startX, startY, startX + distance20, startY, endX - distance20, endY, endX, endY];
+  let line = new Konva.Line({
+    points: newPoints,
+    fill: 'blue',
+    stroke: colorLineInnactive,
+    strokeWidth: lineStroke,
+    id: id,
+  });
+  layer.add(line);
+}
+
+
+function createLink(entre, sortie) {
+  //entre est une porte logique
+  lineId = lineCount.length;
+  lineCount.push(1);
+  switch (whatIsElement(entre)) {
+    case "switch":
+      switch (whatIsElement(sortie)) {
+        case "logique":
+          switch (giveLineId(sortie.name, entre)) {
+
+            case "id1":
+              let switchMidX = entre.getX() + entre.getWidth();
+              let switchMidY = entre.getY() + entre.getHeight() / 2;
+
+              let logiqueMidX = sortie.x;
+              if (sortie.type === "inv") {
+                var logiqueMidY = sortie.y + (imageHeight / 2);
+              } else {
+                var logiqueMidY = sortie.y + (imageHeight / 3);
+              }
+              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+              setLine(sortie, "id1", "line" + lineId);
               
-              case "id1":
-                let switchMidX = entre.getX() + entre.getWidth();
-                let switchMidY = entre.getY() + entre.getHeight() / 2;
-  
-                let logiqueMidX = sortie.x;
-                if(sortie.type === "inv"){
-                  var logiqueMidY = sortie.y + (imageHeight / 2);
-                }else{
-                  var logiqueMidY = sortie.y + (imageHeight / 3);
-                }
-                createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
-                setLine(sortie, "id1", "line" + lineId);
-                entre.id3 = "line" + lineId;
-                break;
-              case "id2":
-                createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
-                setLine(sortie, "id2", "line" + lineId);
-                entre.id3 = "line" + lineId;
-                break;
-            }
-        }
-        break;
-      case "logique":
-        switch (whatIsElement(sortie)) {
-          case "logique":
-            switch (giveLineId(sortie.name,entre)) {
-              case "id1":
-                let switchMidX = entre.x + imageWidth;
-                let switchMidY = entre.y + imageHeight / 2;
-  
-                let logiqueMidX = sortie.x;
-                if(sortie.type === "inv"){
-                  var logiqueMidY = sortie.y + (imageHeight / 2);
-                }else{
-                  var logiqueMidY = sortie.y + (imageHeight / 3);
-                }
-                createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
-                setLine(sortie, "id1", "line" + lineId);
-                setLine(entre, "id3", "line" + lineId);
-                break;
-              case "id2":
-                createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
-                setLine(sortie, "id2", "line" + lineId);
-                setLine(entre, "id3", "line" + lineId);
-                break;
-            }
-            break;
-          default:
-            endLines.push(lineId);
-            createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y], "line" + lineId);
-            setLine(entre, "id3", "line" + lineId);
-            end.let--;
-            break;
-        }
-        break;
-        
-    }
-  }
-  function createLogique(x, y, id, type) {
-    var imageObj = new Image();
-    imageObj.onload = function () {
-      var et = new Konva.Image({
-        x: x,
-        y: y,
-        image: imageObj,
-        width: imageWidth,
-        height: imageHeight,
-        id: id,
-      });
-      if (imageRotation != 0) {
-        et.rotation(imageRotation);
-        et.x(et.getX() + imageHeight);
+              let truc = entre.x;
+              entre.id3 = "line" + lineId;
+              break;
+            case "id2":
+              
+              createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
+              setLine(sortie, "id2", "line" + lineId);
+              entre.id3 = "line" + lineId;
+              break;
+          }
       }
-      layer.add(et);
-      layer.batchDraw();
-    };
-    switch(type){
-      case "et" :
-        imageObj.src = pathImg + imageLogiqueEt;
-        break;
-      case "ou":
-        imageObj.src = pathImg + imageLogiqueOu;
-        break;
-      case "etnon":
-        imageObj.src = pathImg + imageLogiqueEtNon;
-        break;
-      case "inv":
-        imageObj.src = pathImg + imageLogiqueInv;
-        break;
-      case "nonou":
-        imageObj.src = pathImg + imageLogiqueNonOu;
+      break;
+    case "logique":
+      switch (whatIsElement(sortie)) {
+        case "logique":
+          switch (giveLineId(sortie.name, entre)) {
+            case "id1":
+              let switchMidX = entre.x + imageWidth;
+              let switchMidY = entre.y + imageHeight / 2;
+
+              let logiqueMidX = sortie.x;
+              if (sortie.type === "inv") {
+                var logiqueMidY = sortie.y + (imageHeight / 2);
+              } else {
+                var logiqueMidY = sortie.y + (imageHeight / 3);
+              }
+              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+              setLine(sortie, "id1", "line" + lineId);
+              setLine(entre, "id3", "line" + lineId);
+              break;
+            case "id2":
+              createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
+              setLine(sortie, "id2", "line" + lineId);
+              setLine(entre, "id3", "line" + lineId);
+              break;
+          }
+          break;
+        default:
+          endLines.push(lineId);
+          createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y], "line" + lineId);
+          setLine(entre, "id3", "line" + lineId);
+          end.let--;
+          break;
+      }
+      break;
+      default:
+        console.log("error");
         break;
-    }
-    
-    imageObj.id = id;
-  
-  
-  
-    var logique = {
-      name: id,
+
+  }
+}
+function createLogique(x, y, id, type) {
+  var imageObj = new Image();
+  imageObj.onload = function () {
+    var et = new Konva.Image({
       x: x,
       y: y,
-      type: type,
-      id1: null,
-      id2: null,
-      id3: null,
+      image: imageObj,
+      width: imageWidth,
+      height: imageHeight,
+      id: id,
+    });
+    if (imageRotation != 0) {
+      et.rotation(imageRotation);
+      et.x(et.getX() + imageHeight);
     }
-    logiques.push(logique);
+    layer.add(et);
+    layer.batchDraw();
+  };
+  switch (type) {
+    case "et":
+      imageObj.src = pathImg + imageLogiqueEt;
+      break;
+    case "ou":
+      imageObj.src = pathImg + imageLogiqueOu;
+      break;
+    case "etnon":
+      imageObj.src = pathImg + imageLogiqueEtNon;
+      break;
+    case "inv":
+      imageObj.src = pathImg + imageLogiqueInv;
+      break;
+    case "nonou":
+      imageObj.src = pathImg + imageLogiqueNonOu;
+      break;
   }
-  
-  function switchCreator(number){
-    numberOfSwitch = number;
-    let split = number + 1;
-    let space = (stage.height() - stage.height()/100*25) / split;
-    for(let i = 1; i < number+1 ; i++){
-      createSwitch("s"+i, 20, (i) * space);
-    }
+
+  imageObj.id = id;
+
+
+
+  var logique = {
+    name: id,
+    x: x,
+    y: y,
+    type: type,
+    id1: null,
+    id2: null,
+    id3: [],
   }
-  
-  function insertLogiqueColonne(nomLogique, TypeLogique, colonne){
-    var X = stage.width() / (colonneTot+1) * (colonne+1);
-    //calcul position Y
-    if(numberPerColonne[colonne] == 1){
-      var Y = stage.height() / 3;
-    }else{
-      let numberAlreadyAdded = liveColonneNumber[colonne].length+1;
-      let split = (stage.height() - stage.height()/100*25) / (numberPerColonne[colonne]+1);
-      var Y = split * numberAlreadyAdded;
-    }
-    createLogique(X, Y, nomLogique,TypeLogique);
-    liveColonneNumber[colonne].push(1);
+  logiques.push(logique);
+}
+
+function switchCreator(number) {
+  numberOfSwitch = number;
+  let split = number + 1;
+  let space = (stage.height() - stage.height() / 100 * 25) / split;
+  for (let i = 1; i < number + 1; i++) {
+    createSwitch("s" + i, 20, (i) * space);
   }
-  
-  function createLinkSwitch(){
-    var logique = null;
-    var distance = stage.width();
-    //Trouver la porte logique la plus proche des switchs
-    logiques.forEach(function(element){
-      if(element.id1 == null || element.id2 == null){
-        if(element.x < distance){
+}
+
+function insertLogiqueColonne(nomLogique, TypeLogique, colonne) {
+  var X = stage.width() / (colonneTot + 1) * (colonne + 1);
+  //calcul position Y
+  if (numberPerColonne[colonne] == 1) {
+    var Y = stage.height() / 3;
+  } else {
+    let numberAlreadyAdded = liveColonneNumber[colonne].length + 1;
+    let split = (stage.height() - stage.height() / 100 * 25) / (numberPerColonne[colonne] + 1);
+    var Y = split * numberAlreadyAdded;
+  }
+  createLogique(X, Y, nomLogique, TypeLogique);
+  liveColonneNumber[colonne].push(1);
+}
+
+function createLinkSwitch() {
+  var logique = null;
+  var distance = stage.width();
+  //Trouver la porte logique la plus proche des switchs
+  logiques.forEach(function (element) {
+    if(element.type != "inv"){
+      if (element.id1 == null || element.id2 == null) {
+        if (element.x < distance) {
           logique = element;
           distance = element.x;
         }
       }
+    }else{
+      if (element.id1 == null) {
+        if (element.x < distance) {
+          logique = element;
+          distance = element.x;
+        }
+      }
+    }
+  });
+  var distanceSwitch = stage.height();
+  var switchs = null;
+  if (switchsInfo.length > 0) {
+    switchsInfo.forEach(function (element) {
+      if (Math.abs(logique.y - element.y) < distanceSwitch) {
+        distanceSwitch = Math.abs(logique.y - element.y);
+        switchs = element;
+      }
     });
-    var distanceSwitch = stage.height();
-    var switchs = null;
-    if(switchsInfo.length > 0){
-      switchsInfo.forEach(function(element){
-        if(Math.abs(logique.y - element.y) < distanceSwitch){
+  }
+  else {
+    switchsInfoCopy.forEach(function (element) {
+      if (stage.findOne("#" + element.id).id3.length === 0) {
+        if (Math.abs(logique.y - element.y) < distanceSwitch) {
           distanceSwitch = Math.abs(logique.y - element.y);
           switchs = element;
         }
-      });
-    }
-    else {
-      switchsInfoCopy.forEach(function(element){
-        if(stage.findOne("#"+element.id).id3 == null){
-          console.log("le switch " + element.id);
-          if(Math.abs(logique.y - element.y) < distanceSwitch){
-            console.log("ai");
-            distanceSwitch = Math.abs(logique.y - element.y);
-            switchs = element;
-          }
-        }
-      });
-    } 
-    
-    switchsInfo.splice( switchsInfo.indexOf(switchs), 1 );
-    createLink(stage.findOne("#"+switchs.id), findLogique(logique.name));
-  }
-  
-  function getNumberOfSwitchEmpty(){
-    let number = 0;
-    switchsInfoCopy.forEach(function(element){
-      if(stage.findOne("#"+element.id).id3 == null)
-        number++;
+      }
     });
-    return number;
   }
-  
-  function createAllLinkSwitch(){
-    while(getNumberOfSwitchEmpty() > 0){
-      createLinkSwitch();
-    }
+
+  switchsInfo.splice(switchsInfo.indexOf(switchs), 1);
+  createLink(stage.findOne("#" + switchs.id), findLogique(logique.name));
+}
+
+function getNumberOfSwitchEmpty() {
+  let number = 0;
+  switchsInfoCopy.forEach(function (element) {
+    if (stage.findOne("#" + element.id).id3.length === 0)
+      number++;
+  });
+  return number;
+}
+
+function createAllLinkSwitch() {
+  for(let i = 0; i < numberOfSwitch;i++){
+    createLinkSwitch();
   }
-  
-  function createLinkAuto(logiqueId){
-    var logique = findLogique(logiqueId);
-    var ligneSupCoor = null;
-    var stop = false;
-    //on cherche la ligne supérieur
-    logiques.forEach(function(element){
-      if(!stop){
-        if(logique.x < element.x){
-          stop = true;
-          ligneSupCoor = element.x;
+  /*while (getNumberOfSwitchEmpty() > 0) {
+    createLinkSwitch();
+  }*/
+}
+
+function createLinkAuto(logiqueId) {
+  var logique = findLogique(logiqueId);
+  var ligneSupCoor = null;
+  var stop = false;
+  //on cherche la ligne supérieur
+  logiques.forEach(function (element) {
+    if (!stop) {
+      if (logique.x < element.x) {
+        stop = true;
+        ligneSupCoor = element.x;
+      }
+    }
+  });
+  if (ligneSupCoor != null) {
+    //on stock les portes logiques de la lignes supérieur (si il reste de la place dans leur entrees)
+    var ligneSup = [];
+    logiques.forEach(function (element) {
+
+      if (element.x == ligneSupCoor) {
+        if (checkLogiqueLines(element.name, "id1") == false || checkLogiqueLines(element.name, "id2") == false) {
+          ligneSup.push(element);
         }
       }
     });
-    if(ligneSupCoor != null){
-      //on stock les portes logiques de la lignes supérieur (si il reste de la place dans leur entrees)
-      var ligneSup = [];
-      logiques.forEach(function(element){
-        
-        if(element.x == ligneSupCoor){
-          if(checkLogiqueLines(element.name,"id1") == false || checkLogiqueLines(element.name,"id2") == false){
-            ligneSup.push(element);
-          }
-        }
+    //on tire au sort
+    let sortie = getRandomArbitrary(0, ligneSup.length);
+    sortie = ligneSup[sortie];
+    createLink(findLogique(logiqueId), findLogique(sortie.name));
+  }
+}
+
+function createStage(container) {
+  height = document.querySelector("#"+container).offsetHeight;
+  width = document.querySelector("#"+container).offsetWidth;
+  if (window.innerWidth <= 900) {
+    if (!mobile) {
+      mobile = true;
+      stage = new Konva.Stage({
+        container: container,
+        width: height,
+        height: width,
+        rotation:90,
+        x:height,
       });
-      //on tire au sort
-      let sortie = getRandomArbitrary(0,ligneSup.length);
-      sortie = ligneSup[sortie];
-      createLink(findLogique(logiqueId),findLogique(sortie.name));
     }
-  }
\ No newline at end of file
+    stage = new Konva.Stage({
+      container: container,
+      width: height,
+      height: width,
+      rotation:90,
+      x:height,
+    });
+    
+  } else {
+    if (mobile) {
+      mobile = false;
+    }else{
+      stage = new Konva.Stage({
+        container: container,
+        width: width,
+        height: height,
+      });
+    }
+  }
+
+  stage.draw();
+  
+}
\ No newline at end of file
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index e1ecf9a..d6e4e41 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -115,13 +115,22 @@ function setLine(logiqueElement, lineId, lineName) {
         if (element.name === logiqueElement.name) {
             Object.keys(element).map(function (objectKey, index) {
                 if (objectKey == lineId) {
-                    element[objectKey] = lineName;
+                    if(lineId === "id3"){
+                        element[objectKey].push(lineName);
+                    }else
+                        element[objectKey] = lineName;
                 }
             });
         }
     });
 }
 
+function changeSwitchColor(switchId){
+    let swi = stage.findOne("#" + switchId);
+    var colorswi = swi.fill() == colorSwitchActiveBackground ? colorSwitchInnactiveBackground : colorSwitchActiveBackground;
+    swi.fill(colorswi);
+}
+
 function changeLineColor(idLine) {
     let line = stage.findOne("#" + idLine);
     var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
@@ -142,7 +151,7 @@ function changeLineColorYellow(idLine) {
 
 function checkAllSortieLogique() {
     logiques.forEach(function (element) {
-        if (element.id3 != null)
+        if (element.id3.length != 0)
             checkSortieLogique(element.name);
     });
 }
diff --git a/site/vue/js/init.js b/site/vue/js/init.js
index 638e93f..40785bd 100644
--- a/site/vue/js/init.js
+++ b/site/vue/js/init.js
@@ -2,32 +2,36 @@ function initAllSwitch() {
   switchs.forEach(function (element) {
     let switche = stage.findOne("#" + element);
     switche.on('click touchstart', function () {
-      
-      let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
-      switche.fill(colorrect);
+      changeSwitchColor(switche.id());
       changeLineColor(switche.id3);
       checkAllSortieLogique();
       layer.draw();
-      checkEnd(); 
+      checkEnd();
     });
-    switche.on('mousedown', function () {
+    switche.on('mouseover', function () {
       document.body.style.cursor = "pointer";
     });
     switche.on('mouseout', function () {
       document.body.style.cursor = "default";
     });
+    //faire le random de l'inversion de switch
+    if(getRandomArbitrary(0,3) == 1){
+      changeSwitchColor(switche.id());
+      changeLineColor(switche.id3);
+    }
 
   });
-   
+  
+
 }
 function initLayer() {
-  
+
 }
 
-function compareLogiqueForEnd(a,b){
-  if(a.y > b.y)
+function compareLogiqueForEnd(a, b) {
+  if (a.y > b.y)
     return -1;
-  if(a.y < b.y)
+  if (a.y < b.y)
     return 1;
   return 0;
 }
@@ -36,7 +40,7 @@ function initEnd() {
   var listeLogique = [];
   let countLogique = 0;
   logiques.forEach(function (element) {
-    if(element.id3 == null){
+    if(element.id3.length === 0) {
       countLogique++;
       listeLogique.push(element);
     }
@@ -44,9 +48,8 @@ function initEnd() {
   listeLogique.sort(compareLogiqueForEnd);
   end.position = countLogique;
   end.let = countLogique;
+  console.log(listeLogique);
   listeLogique.forEach(function (element) {
-    if(element.id3 == null){
-      createLink(element,end);
-    }
+      createLink(element, end);
   });
 }
\ No newline at end of file
diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js
index 1d1ecbe..bd98590 100644
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@@ -1,7 +1,7 @@
 const lang = {
     fr: {
         titleGame: "Make It True",
-        settingTitle: "Parametres",
+        settingTitle: "Paramètres",
         playSelection: "Je veux jouer a",
         mode1: "Aleatoire",
         mode2: "Cameleon",
@@ -9,14 +9,14 @@ const lang = {
         retour: "Retour",
         dysfont: "Dyslexie :",
         setting_title_perso: "Personnalisation du jeu",
-        active_line_setting : "Couleur lines actives : ",
-        inactive_line_setting : "Couleur lines inactives : ",
-        active_switch_setting : "Couleur switchs actif : ",
-        inactive_switch_setting : "Couleur switchs inactif : ",
+        active_line_setting : "Couleur lignes actives",
+        inactive_line_setting : "Couleur lignes inactives",
+        active_switch_setting : "Couleur intérupteur actif",
+        inactive_switch_setting : "Couleur intérupteur inactif",
         scoreTitle: "Tableau des scores",
         infoTitle: "Comment jouer ?",
         gameOverTitle: "Perdu",
-        inactive_end_setting: "Couleur fin : ",
+        inactive_end_setting: "Couleur objectif : ",
         modeDeJeu : "Mode de jeu",
         niveau : "Niveau ",
         temps: "Temps : ",
@@ -24,7 +24,13 @@ const lang = {
         infoFirstTimeEtInfo1: "L'opérateur ET renvoie VRAI seulement si ses deux entrées sont à 1.<br><br><br> Voici la table de vérité :",
         infoFirstTimeOu: "Porte \"ou\"",
         infoFirstTimeOuInfo1: "L'opérateur OU renvoie VRAI si au moins une entrés est à 1.<br><br><br> Voici la table de vérité :",
-        
+        infoFirstTimeinv: "Porte \"non\"",
+        infoFirstTimeinvInfo1: "La sortie est l'inverse de l'entrée.<br><br><br> Voici la table de vérité :",
+        cache_reinit:"Réinitialiser toutes les données en caches",
+        reset_cache_message: "Toutes les données ont été supprimées.<br><br><br> La page va automatiquement se rafraichir dans 3s ...",
+        reset: "Reset",
+        close_helps:"Ne plus afficher les aides",
+
     },
     en: {
         titleGame: "Make It True",
diff --git a/site/vue/js/logique.js b/site/vue/js/logique.js
index edda198..9bf8c1a 100644
--- a/site/vue/js/logique.js
+++ b/site/vue/js/logique.js
@@ -20,9 +20,13 @@ function giveSwitchYWithLineId(lineId){
 
 function removeLineFromSwitch(lineId){
     switchsInfoCopy.forEach(function(element){
-        if(stage.findOne("#"+element.id).id3 == lineId){
-            stage.findOne("#"+element.id).id3 = null;
-        }
+        stage.findOne("#"+element.id).id3.forEach(function(element){
+            if(element == lineId){
+                ax = stage.findOne("#"+element.id).id3.indexOf(lineId);
+                stage.findOne("#"+element.id).id3.splice(ax, 1);
+            }
+        });
+        
     });
 }
 
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index e7ff39c..5316067 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -76,8 +76,6 @@ function gameOne() {
     //checkAllSortieLogique();
 }
 
-
-
 function createGameOne(niveau) {
     windowWidth = window.innerWidth;
     windowHeight = window.innerHeight;
@@ -85,86 +83,86 @@ function createGameOne(niveau) {
     var numberColonne2 = 1;
     var isEtNonAllowed = false;
     var isOuNonAllowed = false;
+    var isNotAllowed = false;
     var isOuAllowed = false;
     var firstTime = [];
-    switch (niveauActuel) {
+    switch(niveauActuel) {
         case 1:
             firstTime.push("et");
             break;
         case 2:
             numberColonne1 = 2;
             numberColonne2 = 0;
-            timeEnd = 5;
+            timeEnd = 15;
             break;
         case 3:
             numberColonne1 = 2;
             numberColonne2 = 1;
-            timeEnd = 5;
+            timeEnd = 15;
             break;
         case 4:
-            numberColonne1 = 4;
+            numberColonne1 = 3;
             numberColonne2 = 1;
-            timeEnd = 5;
+            timeEnd = 20;
             break;
         //Fin premiere serie
         case 5:
-            firstTime.push("ou");
-            numberColonne1 = 1;
-            numberColonne2 = 0;
-            isOuAllowed = true;
-            timeEnd = 5;
+            firstTime.push("inv");
+            isNotAllowed = true;
+            timeEnd = 20;
             break;
         case 6:
             numberColonne1 = 2;
             numberColonne2 = 0;
-            isOuAllowed = true;
-            timeEnd = 5;
+            isNotAllowed = true;
+            timeEnd = 20;
             break;
         case 7:
             numberColonne1 = 2;
             numberColonne2 = 1;
-            isOuAllowed = true;
-            timeEnd = 5;
+            isNotAllowed = true;
+            timeEnd = 20;
             break;
         case 8:
             numberColonne1 = 3;
             numberColonne2 = 1;
-            isOuAllowed = true;
-            timeEnd = 5;
+            isNotAllowed = true;
+            timeEnd = 20;
             break;
         case 9:
-            numberColonne1 = 5;
+            numberColonne1 = 4;
             numberColonne2 = 1;
-            isOuAllowed = true;
-            timeEnd = 400;
+            isNotAllowed = true;
+            timeEnd = 20;
             break;
         case 10:
+            firstTime.push("ou");
+            break;
         case 11:
-            isEtNonAllowed = true;
-            timeEnd = 4;
+            isNotAllowed = true;
+            isOuAllowed = true;
             numberColonne1 = 3;
+            numberColonne2 = 1;
+            timeEnd = 20;
             break;
         case 12:
         case 13:
         case 14:
-            isEtNonAllowed = true;
-            isOuNonAllowed = true;
-            timeEnd = 4;
+            isNotAllowed = true;
+            isOuAllowed = true;
             numberColonne1 = 3;
+            numberColonne2 = 1;
+            timeEnd = 20;
             break;
         default:
             isEtNonAllowed = true;
             isOuNonAllowed = true;
-            timeEnd = 3;
+            timeEnd = 20;
             numberColonne1 = 4;
             break;
     }
     isTuto = false;
-    stage = new Konva.Stage({
-        container: 'play_container',
-        width: width,
-        height: height,
-    });
+    createStage("play_container");
     stage.add(layer);
     colonneTot = 2;
     numberPerColonne = [numberColonne1, numberColonne2];
@@ -175,10 +173,12 @@ function createGameOne(niveau) {
         numberColonne2 = 0;
         numberPerColonne = [numberColonne1, numberColonne2];
         liveColonneNumber.push([]);
-        timeEnd = 5;
+        timeEnd = 20;
         insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
-        openModal('firstTime' + firstTime[0]);
-        timer.pause();
+        if(allowedInfoPorte){
+            openModal('firstTime' + firstTime[0]);
+            timer.pause();
+        }
     } else {
         for (let i = 0; i < colonneTot; i++) {
             liveColonneNumber.push([]);
@@ -191,18 +191,22 @@ function createGameOne(niveau) {
                 if (isOuAllowed) x++;
                 if (isEtNonAllowed) x++;
                 if (isOuNonAllowed) x++;
+                if (isNotAllowed) x++;
                 let numberRandom = getRandomArbitrary(0, x);
                 switch (numberRandom) {
                     case 0:
                         type = "et";
                         break;
                     case 1:
-                        type = "ou";
+                        type = "inv";
                         break;
                     case 2:
-                        type = "etnon";
+                        type = "ou";
                         break;
                     case 3:
+                        type = "etnon";
+                        break;
+                    case 4:
                         type = "nonou";
                         break;
                 }
@@ -214,8 +218,10 @@ function createGameOne(niveau) {
     logiques.forEach(function (element) {
         createLinkAuto(element.name);
     });
+    
     calculNombreSwitch();
     switchCreator(numberOfSwitch);
+    
     createAllLinkSwitch();
 
     initAllSwitch();
@@ -225,32 +231,27 @@ function createGameOne(niveau) {
     initTimer();
 
     checkAllSortieLogique();
+    
 
 }
 
-window.addEventListener('resize', changeCanvas);
-window.addEventListener('resize', changeStage);
-
-var rtime;
-var timeout = false;
-function changeCanvas() {
-    rtime = new Date();
-    if (timeout === false) {
-        timeout = true;
-        setTimeout(resizeend, 200);
-    }
+function resetCache(){
+    openModal("reset_cache");
+    setTimeout(() => { location.reload(); }, 3000);
 }
 
+window.addEventListener('resize', saveStage);
+
 function saveStage() {
     resetAllTabs(true);
-    stage = new Konva.Stage({
-        container: 'play_container',
-        width: width,
-        height: height,
-    });
+    if(isTuto){
+        createStage("setting_container");
+    }else{
+        createStage("play_container");
+    }
+    
     stage.add(layer);
     logique2 = logiques;
-    console.log(logique2);
     logiques = [];
     var logiqueCount = 0;
     for (let i = 0; i < colonneTot; i++) {
@@ -258,7 +259,6 @@ function saveStage() {
     }
     for (let i = 0; i < colonneTot; i++) {
         for (let j = 0; j < numberPerColonne[i]; j++) {
-            console.log(numberPerColonne[i]);
             insertLogiqueColonne("logique" + logiqueCount, logique2[logiqueCount].type, i);
             logiqueCount++;
         }
@@ -277,27 +277,8 @@ function saveStage() {
     checkAllSortieLogique();
 }
 
-function resizeend() {
-    if (new Date() - rtime < 200) {
-        setTimeout(resizeend, 200);
-    } else {
-        timeout = false;
-        saveStage();
-    }
-}
-
-function changeStage() {
-    if (window.innerWidth <= 900) {
-        if (!mobile) {
-            console.log("mobile");
-            stage.rotate(90);
-            stage.x(stage.getX() + stage.height());
-            mobile = true;
-        }
-    } else {
-        stage.scaleX(window.innerWidth / windowWidth);
-        stage.scaleY(window.innerHeight / windowHeight);
-    }
+function showInfo(){
+    if(document.querySelector("#info_check_input").checked) allowedInfoPorte = false;
+    else allowedInfoPorte = true;
 
-    stage.draw();
-}
\ No newline at end of file
+}
diff --git a/site/vue/js/progress.js b/site/vue/js/progress.js
new file mode 100644
index 0000000..f9cbf5f
--- /dev/null
+++ b/site/vue/js/progress.js
@@ -0,0 +1,14 @@
+const level = {
+    1:{
+        timeEnd: 20,
+        firstTime: "et",
+        numberColonne1 : 1,
+        numberColonne2 : 0,
+    },
+    2:{
+        timeEnd:20,
+        firstTime : null,
+        numberColonne1 : 2,
+        numberColonne2 : 0,
+    }
+}
\ No newline at end of file
diff --git a/site/vue/js/timer.js b/site/vue/js/timer.js
index c426597..75dd2d9 100644
--- a/site/vue/js/timer.js
+++ b/site/vue/js/timer.js
@@ -1,23 +1,29 @@
 function initTimer() {
-  var TimerElem = document.querySelector(".timer_bar");
-  TimerElem.style.width = "0%";
-  let seconds = timeEnd;
-  document.getElementById("timerend").innerHTML = " / "  + seconds + " s";
+  document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
 }
 
 function move() {
-  var lapsPerSecond = 100 / timeEnd;
-  var TimerElem = document.querySelector(".timer_bar");
-  TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond) + "%";
+  document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
+  switch(timeEnd - timer.getTimeValues().seconds){
+    case 5:
+    case 4:
+      document.querySelector(".timer_txt").style.color = "#eca1a6";
+      break;
+    case 3:
+    case 2:
+    case 1:
+    case 0:
+      document.querySelector(".timer_txt").style.color = "#c94c4c";
+      break;
+    default:
+      document.querySelector(".timer_txt").style.color =  document.querySelector("#modeDeJeu").style.color;
+  }
 }
 
-
-
 var timer = new easytimer.Timer();
 timer.start();
 timer.addEventListener('secondsUpdated', function (e) {
   if (timer.getTimeValues().seconds <= timeEnd) {
-    document.getElementById("timer").innerHTML = timer.getTimeValues().seconds.toString() + " s";
     move();
   } else {
     timeTot = timeTot + timer.getTimeValues().seconds;
diff --git a/site/vue/todo.todo b/site/vue/todo.todo
index e6d723a..eabb1b8 100644
--- a/site/vue/todo.todo
+++ b/site/vue/todo.todo
@@ -7,27 +7,36 @@ Responsive :
         `Piste`e canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise)
             Faire en sorte que l
     Suite :
-        ☐ Changer de direction lorsqu'on atteint un certain format
+        ✔ Changer de direction lorsqu'on atteint un certain format @done(20-06-18 11:27)
             `Piste`
                 Quand la largeur est inférieur à la hauteur ???
                 En dessous d'un certains nombre de pixels ??? Attention aux téléphone haute résolution
 
 Paramètres : 
     Choix du types de porte :
-        ☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image
+        ☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image //Mouai
+            Impossible je pense
         ☐ Ajouter au menu des paramètres la possibilité de choisir entre les 2 types de portes
     ☐ Mettre tout les types de portes dans la prévisualisation
-    
+
+Site : 
+    Ajouter la sauvegarde dans le cache :
+        ☐ Faire une affiche qui demande le pseudo du joueur si il se connecte pour la première fois
+        ☐ Sauvegarder les infos des paramètres dans le cache et les récupérer au redémarrage de la page
+        ☐ Supprimer le cache lors du clique sur le bouton
+
 Jeu :
-    ☐ Refaire entièrement le "not" pour éviter la fuite de mémoire
-    ☐ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes
+    ✔ Refaire entièrement le "not" pour éviter la fuite de mémoire @done(20-06-18 12:44)
+    ☐ Eviter les croisements de fils
+    ✔ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes @done(20-06-18 15:37)
         `Piste`
             Remplacer l'id3 par une liste d'id3 qu'on parcourerait
     ☐ Faire en sorte que les portes d'une colonne autres que la 1ere n'ai que des lignes qui viennent de porte et non des switchs
 
 UI/UX :
     ☐ Trouver une police d'écriture bien pour le jeu
-    ☐ Changer la bar de temps pour que ce soit fluide
+    ✔ Changer la bar de temps pour que ce soit fluide @done(20-06-18 12:04)
+    ✔ Refaire les carrés de séléctions des couleurs @done(20-06-18 17:11)
     ☐ Corriger les fautes d'orthographes
     ☐ Faire la traduction en anglais
     
\ No newline at end of file