From 8fda008546ee9ae326cac5df6735953580e2a0c7 Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Sat, 1 Aug 2020 18:32:35 +0200
Subject: [PATCH] mode de jeux et fix de quelques bugs

---
 site/vue/css/style.css       |   8 ++
 site/vue/index.html          |  38 ++++++---
 site/vue/js/const.js         |   1 +
 site/vue/js/createElement.js |  41 +++++----
 site/vue/js/creator.js       |  32 -------
 site/vue/js/func.js          | 152 ++++++++++++++++++++++++++++++---
 site/vue/js/generateGame.js  | 158 +++++++++++++++++++++++++----------
 site/vue/js/init.js          |  10 +--
 site/vue/js/main.js          |   1 +
 9 files changed, 315 insertions(+), 126 deletions(-)

diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index debd4d8..185ce4c 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -92,6 +92,10 @@ html {
     margin-left: 25px;
 }
 
+.fa-check {
+    margin-left: 25px;
+}
+
 #pseudo_show {
     color: var(--cool-color);
 }
@@ -692,4 +696,8 @@ input[type=color] {
 
 .fa-edit:hover {
     color: var(--cool-color);
+}
+
+#win_pannel {
+    display: none;
 }
\ No newline at end of file
diff --git a/site/vue/index.html b/site/vue/index.html
index f871dd3..e8fcfaa 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -27,6 +27,10 @@
                 <a>Tutoriel</a>
                 <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
             </div>
+            <div class="border background dys listenerHover" onclick="wait('vanilla', this)">
+                <a>Vanilla</a>
+                <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
+            </div>
             <div class="border background dys listenerHover" onclick="wait('normal', this)">
                 <a>Normal</a>
                 <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
@@ -35,17 +39,13 @@
                 <a>Mode Perso</a>
                 <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
             </div>
-            <div class="border background dys listenerHover">
-                <a>Caméléon</a>
-                <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
-            </div>
         </div>
     </div>
     <!--Test Generateur-->
     <div id="TestNouveauGenerateur" class="background">
         <div id="header_selection" align=center>
             <i class="fa fa-arrow-left home" onclick="closePerso(this);" aria-hidden="true"></i>
-            <h1 class="dys" id="title_perso_setup">Generateur</h1>
+            <h1 class="dys" id="title_perso_setup">Générateur</h1>
             <label></label>
         </div>
         <hr id="hr">
@@ -111,7 +111,7 @@
     </div>
     <!--Play Page-->
     <div id="playPage">
-        <div id="success" class="modal">
+        <!--<div id="success" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background success_modal_body" align=center>
                     <span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
@@ -138,7 +138,7 @@
                             id="success_check_input" onclick="successCheck();" checked></p>
                 </div>
             </div>
-        </div>
+        </div>-->
         <div id="firstTimeet" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background" align=center>
@@ -350,6 +350,26 @@
             <div id="progress_bar" class="progress_bar border backgroundInv"></div>
         </div>
         <br>
+        <div id="win_pannel" class="border background" align=center>
+            <h1 class="txt dys" id="successTitle"></h1>
+            <hr id="hr">
+            <p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a>
+            </p>
+            <div id="choice_button_div">
+                <div class="border background dys listenerHover choice  retry_tuto" id="retry_tuto_button"
+                    onclick="closeModal('success');retry();"">
+                        <a>Refaire le niveau</a>
+                        <i class=" fa fa-retweet" id="margin-left-10" aria-hidden="true"></i>
+                </div>
+                <div class="border background dys listenerHover choice" id="next_level_button"
+                    onclick="closeModal('success');nextLevel();">
+                    <a id="niveauSuivantText">Niveau suivant</a>
+                    <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
+                </div>
+
+            </div>
+        </div>
+        <br>
         <div id="play_container" class="border">
 
         </div>
@@ -495,10 +515,6 @@
                                 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>
-                        <br>
-                        <hr id="hr">
                         <br>
                         <p><i class="fa fa-star" id="star1" aria-hidden="true"></i>
                             <i class="fa fa-star" id="star2" aria-hidden="true"></i>
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index 1777eec..29b83d4 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -23,6 +23,7 @@ const tension = 0;
 
 //objectif
 var colorEnd = "#fe8a71";
+var endHeight = 200;
 
 //switch
 const SwitchHeight = 25;
diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js
index b95a46d..243f73a 100644
--- a/site/vue/js/createElement.js
+++ b/site/vue/js/createElement.js
@@ -3,14 +3,19 @@ function createEnd() {
   //find X and Y
 
   var X = stage.width() - stage.width() / 100 * 5;
-  var Y = stage.height() / 2.5 - 5;
+  if (endHeight === 50) {
+    var Y = stage.height() / 2 - endHeight;
+  } else {
+    var Y = stage.height() / 2 - endHeight;
+  }
+
 
   var endShape = new Konva.Rect({
     x: X - 25,
     y: Y - 25,
     fill: colorEnd,
     width: 50,
-    height: 50,
+    height: endHeight,
     stroke: 'black',
     strokeWidth: 4,
     id: "end",
@@ -27,23 +32,18 @@ function createEnd() {
   layer.add(endShape);
 }
 
-
-function createCircle(x, y, name) {
-
-  name.forEach(function (idLine) {
-    var circle = new Konva.Circle({
-      id: "circle" + idLine,
-      x: x,
-      y: y,
-      radius: 10,
-      fill: 'black',
-      stroke: 'black',
-      strokeWidth: 4,
-    });
-    circles.push("circle" + idLine);
-    layer.add(circle);
+function createCircle(x, y, logiqueName) {
+  var circle = new Konva.Circle({
+    id: "circle" + circles.length,
+    x: x,
+    y: y,
+    radius: 10,
+    fill: 'black',
+    stroke: 'black',
+    strokeWidth: 4,
   });
-
+  circles.push("circle" + idLine);
+  layer.add(circle);
 }
 
 function createSwitch(id, x, y) {
@@ -282,9 +282,8 @@ function createLink(entre, sortie, infoId) {
           break;
         default:
           endLines.push(lineId);
-          if (end.position === 1) createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, (end.y + (50 / (end.position + 1) * (end.let - end.position)))], "line" + lineId, true);
-
-          else createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, (end.y + (50 / (end.position + 1) * (end.let + 1 - end.position)))], "line" + lineId, true);
+          if (end.position === 1) createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, (stage.findOne("#end").getY() + endHeight / 2)], "line" + lineId, true);
+          else createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, (stage.findOne("#end").getY() + endHeight / (end.position + 1) * end.let)], "line" + lineId, true);
 
           setLine(entre, "id3", "line" + lineId);
           end.let--;
diff --git a/site/vue/js/creator.js b/site/vue/js/creator.js
index 7079a86..ef34f10 100644
--- a/site/vue/js/creator.js
+++ b/site/vue/js/creator.js
@@ -58,38 +58,7 @@ function createGame2() {
     initEnd();
 }
 
-function tuto() {
-    timeEnd = 1000;
 
-    initTimer();
-    setMode("Tuto");
-
-    var logiqueCount = 0;
-
-    colonneTot = 1;
-
-    for (let i = 0; i < colonneTot; i++) {
-        liveColonneNumber.push([]);
-    }
-
-    numberPerColonne[0] = 1;
-
-    insertLogiqueColonne("logique" + logiqueCount, "et", 0);
-
-
-    logiques.forEach(function (element) {
-        createLinkAuto(element.name);
-    });
-
-    calculNombreSwitch();
-    switchCreator(numberOfSwitch);
-
-    createAllLinkSwitch();
-
-    initAllSwitch();
-    createEnd();
-    initEnd();
-}
 
 function creatorRandomPyramid() {
     timeEnd = getRandomArbitrary(15, 50);
@@ -153,7 +122,6 @@ function creatorRandomPyramid() {
 }
 
 function generatorGame() {
-
     timeEnd = getRandomArbitrary(15, 50);
 
     initTimer();
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index eb6345e..ba6dd55 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -224,6 +224,21 @@ function changeLineColorInput(idLine, color) {
     line.stroke(color);
 }
 
+function changeCircleBlack(logiqueId) {
+    circles.forEach(function (cir) {
+        if (cir[1] === logiqueId) {
+            stage.findOne("#" + cir[0]).fill(colorLineInnactive);
+        }
+    });
+}
+function changeCircleYellow(logiqueId) {
+    circles.forEach(function (cir) {
+        if (cir[1] === logiqueId) {
+            stage.findOne("#" + cir[0]).fill(colorLineActive);
+        }
+    });
+}
+
 function changeLineColorBlack(idLine) {
     setLineStateFalse(idLine);
     let line = stage.findOne("#" + idLine);
@@ -384,10 +399,12 @@ function checkSortieLogique(logiqueId) {
                     if (line1State == true && line2State == true) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else {
                         element.id3.forEach(function (line) {
                             changeLineColorBlack(line);
+                            changeCircleBlack(logique.name);
                         });
                     }
                     break;
@@ -395,10 +412,12 @@ function checkSortieLogique(logiqueId) {
                     if (line1State == false) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else {
                         element.id3.forEach(function (line) {
                             changeLineColorBlack(line);
+                            changeCircleBlack(logique.name);
                         });
                     }
                     break;
@@ -406,10 +425,12 @@ function checkSortieLogique(logiqueId) {
                     if (line1State == true || line2State == true) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else {
                         element.id3.forEach(function (line) {
                             changeLineColorBlack(line);
+                            changeCircleBlack(logique.name);
                         });
                     }
                     break;
@@ -417,10 +438,12 @@ function checkSortieLogique(logiqueId) {
                     if (line1State == true || line2State == true) {
                         element.id3.forEach(function (line) {
                             changeLineColorBlack(line);
+                            changeCircleBlack(logique.name);
                         });
                     } else {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     }
                     break;
@@ -428,18 +451,22 @@ function checkSortieLogique(logiqueId) {
                     if (line1State == false && line2State == false) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else if (line1State == false && line2State == true) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else if (line1State == true && line2State == false) {
                         element.id3.forEach(function (line) {
                             changeLineColorYellow(line);
+                            changeCircleYellow(logique.name);
                         });
                     } else {
                         element.id3.forEach(function (line) {
                             changeLineColorBlack(line);
+                            changeCircleBlack(logique.name);
                         });
                     }
                     break;
@@ -605,6 +632,7 @@ function checkEnd(mode) {
 }
 
 function success(mode) {
+    console.log(mode)
     timeTot = timeTot + timer.getTimeValues().seconds;
     timer.stop();
     stage.findOne("#end").fill(colorSwitchActiveBackground);
@@ -612,20 +640,21 @@ function success(mode) {
     if (mode != undefined && mode != null && mode === "tuto") {
         document.querySelector(".retry_tuto").style.display = "flex";
         document.querySelector("#retry_tuto_button").onclick = function () {
-            closeModal('success');
+            //closeModal('success');
             launchTuto();
         }
     } else {
         document.querySelector(".retry_tuto").style.display = "none";
     }
     if (successPanel) {
-        openModal("success");
+        document.querySelector("#win_pannel").style.display = "block";
+        //openModal("success");
         document.querySelector("#click_number").innerHTML = click;
         document.querySelector("#next_level_button").onclick = function () {
-            closeModal('success');
+            //closeModal('success');
             nextLevel(mode);
         }
-        var previewStage = new Konva.Stage({
+        /*var previewStage = new Konva.Stage({
             container: 'show_stage',
             width: window.innerWidth / 1.5,
             height: window.innerHeight / 2.5,
@@ -636,7 +665,7 @@ function success(mode) {
             hitGraphEnabled: false
         });
         previewStage.add(previewLayer);
-        previewLayer.batchDraw();
+        previewLayer.batchDraw();*/
     } else {
         setTimeout(() => {
             nextLevel(mode);
@@ -654,7 +683,7 @@ function nextLevel(mode) {
     if (mode != undefined && mode != null && mode === "tuto") {
         launchTuto();
     } else {
-        generate2(tempCol, tempMatchs, tempFork, tempPortes);
+        launchGameOne(mode);
     }
 }
 
@@ -785,9 +814,16 @@ function playNormal() {
     showDiv(document.querySelector("#playPage"));
     niveauActuel = 1;
     timeTot = 0;
-    launchGameOne();
+    launchGameOne("normal");
 }
 
+function playVanilla() {
+    hideDiv(document.querySelector("#levelSelectionPage"));
+    showDiv(document.querySelector("#playPage"));
+    niveauActuel = 1;
+    timeTot = 0;
+    launchGameOne("vanilla");
+}
 function modeTuto() {
     hideDiv(document.querySelector("#levelSelectionPage"));
     showDiv(document.querySelector("#playPage"));
@@ -828,6 +864,10 @@ function wait(mode, btn) {
             setTimeout(playNormal, time);
             setMode("Normal");
             break;
+        case "vanilla":
+            setTimeout(playVanilla, time);
+            setMode("Vanilla")
+            break;
         case "perso":
             setTimeout(modePerso, time);
             setMode("Perso")
@@ -894,15 +934,104 @@ function show_more_perso(div) {
     }
 }
 
-function launchGameOne() {
+function launchGameOne(mode) {
     document.querySelector(".niveau").innerHTML = niveauActuel;
+    document.querySelector("#win_pannel").style.display = "none";
     timer.stop();
     timer.reset();
     resetAllTabs(false);
-    gameOne();
+    var col = [];
+    var matchs = [];
+    var porteLogique = [];
+    var time = 20;
+    switch (niveauActuel) {
+        case 1:
+            col = [2, 1];
+            porteLogique = [[true, "et"], [true, "ou"]];
+            break;
+        case 2:
+            col = [2, 2];
+            porteLogique = [[true, "et"], [true, "ou"]];
+            break;
+        case 3:
+            col = [3, 2];
+            matchs = [[1, 2]];
+            porteLogique = [[true, "et"], [true, "ou"]];
+            break;
+        case 4:
+            col = [3, 2];
+            porteLogique = [[true, "et"], [true, "inv"]];
+            break;
+        case 5:
+            col = [3, 3];
+            matchs = [[1, 2]];
+            porteLogique = [[true, "et"], [true, "inv"]];
+            break;
+        case 7:
+        case 6:
+            col = [4, 3];
+            matchs = [[1, 2]];
+            porteLogique = [[true, "et"], [true, "inv"], [true, "ou"]];
+            break;
+        case 8:
+        case 9:
+        case 10:
+        case 11:
+            col = [5, 4, 3];
+            matchs = [[1, 3], [2, 2]];
+            porteLogique = [[true, "et"], [true, "ou"], [true, "inv"]];
+            break;
+        case 12:
+        case 13:
+        case 14:
+        case 15:
+        case 16:
+            col = [5, 4, 4];
+            matchs = [[1, 3], [2, 2]];
+            porteLogique = [[true, "et"], [true, "nonou"], [true, "ou"], [true, "inv"]];
+            break;
+
+        default:
+            col = [4, 3, 2];
+            matchs = [[1, 2], [2, 2]];
+            porteLogique = [[true, "et"], [true, "ou"]];
+            break;
+    }
+    for (let i = 0; i < 200; i++) {
+        tentative = i;
+        if (generator(matchs, col, porteLogique, mode, time) === false)
+            break;
+
+    }
+    if (mode === "normal") {
+        switchsInfoCopy.forEach(function (sw) {
+            if (getRandomArbitrary(0, 3) === 1) {
+                activeSwitch(sw.id);
+                checkAllSortieLogique();
+            }
+        });
+    }
+    while (checkIfEnd()) {
+        for (let i = 0; i < 200; i++) {
+            tentative = i;
+            if (generator(matchs, col, porteLogique, mode, time) === false)
+                break;
+        }
+        if (mode === "normal") {
+            switchsInfoCopy.forEach(function (sw) {
+                switchsInfoCopy.forEach(function (sw) {
+                    if (getRandomArbitrary(0, 3) === 1) {
+                        activeSwitch(sw.id);
+                        checkAllSortieLogique();
+                    }
+                });
+            });
+        }
+    }
 }
 
 function launchTuto() {
+    document.querySelector("#win_pannel").style.display = "none";
     document.querySelector(".niveau").innerHTML = niveauActuel;
     timer.stop();
     timer.reset();
@@ -912,10 +1041,11 @@ function launchTuto() {
         while (checkIfEnd()) {
             resetAllTabs(false);
             tuto();
-
+            break;
         }
     } else {
-
+        document.querySelector("#niveauSuivantText").innerHTML = "Niveau Suivant";
+        document.querySelector(".niveauSuivantIcon").className = "fa fa fa-arrow-right niveauSuivantIcon";
         hideDiv(document.querySelector("#playPage"));
         showDiv(document.querySelector("#mainPage"));
     }
diff --git a/site/vue/js/generateGame.js b/site/vue/js/generateGame.js
index f047ba1..06cceac 100644
--- a/site/vue/js/generateGame.js
+++ b/site/vue/js/generateGame.js
@@ -121,6 +121,10 @@ function calcul(launch) {
     var col = new Array();
     let i = 0;
     let reste = 0;
+    //Calcul
+    if (number === 1) {
+        col = [1];
+    }
     while (number > 1) {
         number = number / 2;
         if (!Number.isInteger(number) && number > 1) reste = 1;
@@ -155,7 +159,7 @@ function calcul(launch) {
         count[(parseInt(element.childNodes[1].value) - 1)] = count[(parseInt(element.childNodes[1].value) - 1)] + parseInt(element.childNodes[2].value);
         matchs.push([(parseInt(element.childNodes[1].value) + 1), parseInt(element.childNodes[2].value)]);
         fork.push([parseInt(element.childNodes[1].value), parseInt(element.childNodes[2].value)]);
-        if (parseInt(element.childNodes[1].value) < 1 || parseInt(element.childNodes[1].value) > col.length) {
+        if (parseInt(element.childNodes[1].value) < 1 || parseInt(element.childNodes[1].value) > col.length - 1) {
             error = "Problème sur le numéro de colonne";
             element.childNodes[1].style.borderColor = "red";
         } else {
@@ -242,17 +246,10 @@ function addGenForkInput() {
 }
 
 function tuto(niveau) {
-    setMode("Tuto");
+    finish = false;
     isTutoriel = true;
     windowWidth = window.innerWidth;
     windowHeight = window.innerHeight;
-    var numberColonne1 = 2;
-    var numberColonne2 = 1;
-    var isEtNonAllowed = false;
-    var isOuNonAllowed = false;
-    var isNotAllowed = false;
-    var isOuAllowed = false;
-    var finish = false;
     var firstTime = [];
     switch (niveauActuel) {
         case 1:
@@ -268,6 +265,8 @@ function tuto(niveau) {
             firstTime.push("etnon");
             break;
         case 5:
+            document.querySelector("#niveauSuivantText").innerHTML = "Terminer le tutoriel";
+            document.querySelector("#next_level_button").children[1].className = "fa fa fa-check niveauSuivantIcon";
             firstTime.push("nonou");
             break;
         default:
@@ -275,31 +274,24 @@ function tuto(niveau) {
             break;
     }
     if (!finish) {
-        isTuto = false;
-        createStage("play_container");
-        stage.add(layer);
-        colonneTot = 3;
-        numberPerColonne = [numberColonne1, numberColonne2, 2];
-        var logiqueCount = 0;
-
         if (firstTime.length > 0) {
-            numberColonne1 = 1;
-            numberColonne2 = 0;
-            numberPerColonne = [numberColonne1, numberColonne2];
-            liveColonneNumber.push([]);
-            timeEnd = 99;
-            insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
             if (allowedInfoPorte) {
                 openModal('firstTime' + firstTime[0]);
                 timer.pause();
             }
+            generator([], [1], [[true, firstTime[0]]], "tuto");
+            while (checkIfEnd()) {
+                switchsInfoCopy.forEach(function (element) {
+                    if (getRandomArbitrary(0, 2) === 1)
+                        activeSwitch(element.id);
+                    checkAllSortieLogique();
+                });
+            }
+
         }
-        logiques.forEach(function (element) {
-            createLinkAuto(element.name);
-        });
-        initEndGame("tuto");
-    }
+    } else {
 
+    }
 }
 
 
@@ -452,10 +444,9 @@ function createGameOne(niveau) {
 }
 
 
-function generator(matchs, col, listePorteLogique) {
-    console.log(col)
+function generator(matchs, col, listePorteLogique, mode, time) {
     var regen = false;
-
+    endHeight = 100;
     isTutoriel = false;
     isTuto = false;
     hideDiv(document.querySelector('#TestNouveauGenerateur'));
@@ -463,7 +454,9 @@ function generator(matchs, col, listePorteLogique) {
     resetAllTabs(false);
     createStage("play_container");
     stage.add(layer);
-    timeEnd = 999;
+    if (time === undefined || time === null || time === -1)
+        timeEnd = 999;
+    else timeEnd = time;
 
     var groupes = [];
     var colCopy = [];
@@ -514,6 +507,8 @@ function generator(matchs, col, listePorteLogique) {
                     //Selection de la sortie au hasard dans la colonne i
                     var index = getRandomArbitrary(0, logiqueCol.length);
                     var logiqueUse = logiqueCol[index];
+                    //Création du rond du fork
+                    circles.push(["circle" + circles.length, logiqueUse.id]);
                     logiqueCol.splice(index, 1);
                     //Selection du groupes
                     groupes.forEach(function (group, index) {
@@ -605,6 +600,28 @@ function generator(matchs, col, listePorteLogique) {
             }
         });
 
+        //calcul de id3 :
+        logiquesTemp.forEach(function (logique) {
+            if (logique.col === i) {
+                if (i === col.length) {
+                    logique.id3 = 1;
+                } else {
+                    //Attribution du signal id3
+                    var isNull = null;
+                    //console.log("Colonne : " + i + " ---------------------")
+                    links.forEach(function (link) {
+                        if (isNull === null) {
+                            if (link[0] === logique.id) {
+                                logique.id3 = link[3];
+                                isNull = 1;
+                            }
+                        }
+                    });
+                    if (isNull === null) logique.id3 = 1;
+                }
+            }
+        });
+
         //Calcul du signal souhaité à chaque porte de la colonne i
         var logiqueTemp2 = [];
         for (let k = 0; k < logiquesTemp.length; k++) logiqueTemp2[k] = logiquesTemp[k];
@@ -615,7 +632,6 @@ function generator(matchs, col, listePorteLogique) {
                 //Attribution du signal :
                 //Si dernière colonne
                 if (i === col.length) {
-                    logique.id3 = 1;
                     //Opération pour les entrée :
                     switch (logique.type) {
                         case "et":
@@ -663,18 +679,6 @@ function generator(matchs, col, listePorteLogique) {
                             break;
                     }
                 } else {
-                    //Attribution du signal id3
-                    var isNull = null;
-                    //console.log("Colonne : " + i + " ---------------------")
-                    links.forEach(function (link) {
-                        if (isNull === null) {
-                            if (link[0] === logique.id) {
-                                logique.id3 = link[3];
-                                isNull = 1;
-                            }
-                        }
-                    });
-                    if (isNull === null) logique.id3 = 1;
                     //Calcul valeur d'entrée
                     if (logique.id3 === 1) {
                         switch (logique.type) {
@@ -773,6 +777,8 @@ function generator(matchs, col, listePorteLogique) {
                 }
             }
         });
+        //Check si y a assez de portes :
+
         var usedLogique = [];
         matchs.forEach(function (element) {
             if (element[0] === i - 1) {
@@ -988,8 +994,68 @@ function generator(matchs, col, listePorteLogique) {
             if (link[1] !== "end")
                 createLink(findLogique(link[0]), findLogique(link[1]), link[2]);
         });
-        initEndGame();
-        //createLink(findLogique("logique5"), findLogique("logique1"))
+        //On place les rond si fork :
+        //On check la valeur entre 2 colonne :
+        var d1 = 0, tot = 0;
+        logiques.forEach(function (logique) {
+            if (d1 === 0) d1 = logique.x;
+            else if (d1 !== logique.x && tot === 0) {
+                tot = logique.x - d1;
+            }
+        });
+        circles.forEach(function (cir) {
+            logiques.forEach(function (logique) {
+
+                if (logique.name === cir[1]) {
+                    var circle = new Konva.Circle({
+                        id: cir[0],
+                        x: logique.x + imageWidth + (tot / 100 * pourcentageBreak),
+                        y: logique.y + imageHeight / 2,
+                        radius: 10,
+                        fill: 'black',
+                        stroke: 'black',
+                        strokeWidth: 4,
+                    });
+                    layer.add(circle);
+                }
+            })
+        });
+        //On init la fin
+        initEndGame(mode);
+
+        //On change les lignes de places :
+
+        logiques.forEach(function (logique) {
+            if (logique.type !== "inv") {
+                var distance1;
+                var distance2;
+                if (getLogiqueFromLine(logique.id1) === null)
+                    distance1 = getSwitchFromLine(logique.id1).y;
+                else distance1 = getLogiqueFromLine(logique.id1).y;
+                if (getLogiqueFromLine(logique.id2) === null)
+                    distance2 = getSwitchFromLine(logique.id2).y;
+                else distance2 = getLogiqueFromLine(logique.id2).y;
+
+                if (distance2 < distance1) {
+
+                    if (getLogiqueFromLine(logique.id1) === null && getLogiqueFromLine(logique.id2) === null) {
+                        let switch1Id = getSwitchFromLine(logique.id1).id;
+                        let switch2Id = getSwitchFromLine(logique.id2).id;
+                        removeLine(logique.id1);
+                        removeLine(logique.id2);
+                        logique.id1 = null;
+                        logique.id2 = null;
+                        createLink(stage.findOne("#" + switch1Id), logique);
+                        createLink(stage.findOne("#" + switch2Id), logique);
+                    }
+                }
+
+
+
+            }
+        });
+
+
     }
     return regen;
 
diff --git a/site/vue/js/init.js b/site/vue/js/init.js
index a86f82b..73bf815 100644
--- a/site/vue/js/init.js
+++ b/site/vue/js/init.js
@@ -16,11 +16,11 @@ function initAllSwitch(mode) {
       document.body.style.cursor = "default";
     });
     //faire le random de l'inversion de switch
-    //if (getRandomArbitrary(0, 3) == 1) {
-    //activeSwitch(switche.id());
-    //if (checkIfEnd())
-    //activeSwitch(switche.id());
-    //}
+    if (isTutoriel && getRandomArbitrary(0, 3) == 1) {
+      activeSwitch(switche.id());
+      if (checkIfEnd())
+        activeSwitch(switche.id());
+    }
 
   });
 }
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index c708181..8ed78be 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -33,6 +33,7 @@ var layer = new Konva.Layer();
 tutoCreateLayer();
 
 function tutoCreateLayer() {
+    endHeight = 50;
     isTuto = true;
     width = window.innerWidth - window.innerWidth / 100 * 30;
     height = window.innerHeight / 2.5;