diff --git a/site/test/js/func.js b/site/test/js/func.js
index 24f5659..c9b6f92 100644
--- a/site/test/js/func.js
+++ b/site/test/js/func.js
@@ -24,6 +24,7 @@ function changeLineColor(idLine) {
   line.stroke(colorline);
 }
 function changeLineColorBlack(idLine) {
+  
   let line = stage.findOne("#" + idLine);
   line.stroke(colorLineInnactive);
 }
diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 0cabb12..16d2996 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -88,12 +88,13 @@ i:hover {
     display: none;
     position: fixed;
     z-index: 1;
-    padding-top: 100px;
+    padding-top: 2%;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
+    
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -103,6 +104,7 @@ i:hover {
     margin: auto;
     padding: 0;
     width: 80%;
+    border-radius: 15px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -153,4 +155,9 @@ hr{
 }
 .img_france{
     margin-right:50px;
+}
+
+.setting_play{
+    height: 30vh;
+    width: 90%;
 }
\ No newline at end of file
diff --git a/site/vue/img/and_test.png b/site/vue/img/and_test.png
new file mode 100644
index 0000000..a5b09bc
Binary files /dev/null and b/site/vue/img/and_test.png differ
diff --git a/site/vue/img/idea_white.png b/site/vue/img/idea_white.png
new file mode 100644
index 0000000..62532d9
Binary files /dev/null and b/site/vue/img/idea_white.png differ
diff --git a/site/vue/img/nand_test.png b/site/vue/img/nand_test.png
new file mode 100644
index 0000000..89153d9
Binary files /dev/null and b/site/vue/img/nand_test.png differ
diff --git a/site/vue/img/nor_test.png b/site/vue/img/nor_test.png
new file mode 100644
index 0000000..8c969d6
Binary files /dev/null and b/site/vue/img/nor_test.png differ
diff --git a/site/vue/img/not_test.png b/site/vue/img/not_test.png
new file mode 100644
index 0000000..1d76058
Binary files /dev/null and b/site/vue/img/not_test.png differ
diff --git a/site/vue/img/or_test.png b/site/vue/img/or_test.png
new file mode 100644
index 0000000..6390577
Binary files /dev/null and b/site/vue/img/or_test.png differ
diff --git a/site/vue/index.html b/site/vue/index.html
index f5f7e75..c5c7165 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -46,26 +46,31 @@
                 <img onclick="setLang('en')" src="img/usa.png" /><br><br>
                 <hr id="hr">
                 <p id="setting_title_perso" class="txt">Personnalisation du jeu</p>
-                <p><a class="txt" id="active_line_setting">Couleur ligne active : </a><input type="color" id="head" name="head"
-            value="#e66465"></p>
-            <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="head" name="head"
-                value="#e66465"></p>
-                <br>
-                <hr id="hr">
-                <p><a>Previsualisation</a></p>
+                <p><a class="txt" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head"
+            value="#008000"></p>
+            <p><a class="txt" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head"
+                value="#FF0000"></p>
+                <p><a class="txt" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head"
+                    value="#4CFEFE"></p>
+                    <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="inactive_line_picker" name="head"
+                        value="#000000"></p>
                 <hr id="hr">
                 <div class="setting_play" id="setting_container">
 
                 </div>
-                <br>
             </div>
         </div>
     </div>
 </body>
+<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
 <script src="js/const.js"></script>
 <script src="js/lang.js"></script>
 <script src="js/func.js"></script>
+<script src="js/createElement.js"></script>
+<script src="js/logique.js"></script>
+<script src="js/init.js"></script>
 <script src="js/main.js"></script>
+
 <script>
 
     function play(){
diff --git a/site/vue/js/class.js b/site/vue/js/class.js
new file mode 100644
index 0000000..5cc4e64
--- /dev/null
+++ b/site/vue/js/class.js
@@ -0,0 +1,33 @@
+class gameData {
+    
+    constructor(hauteur, largeur) {
+        this.hauteur = hauteur;
+        this.largeur = largeur;
+    }
+    
+}
+
+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);
+  }
\ No newline at end of file
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index 6096de6..a2c309c 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -1,23 +1,23 @@
 //Portes Logiques
-var imageHeight = 70;
-var imageWidth = 75;
+var imageHeight = 75;
+var imageWidth = 100;
 var imageRotation = 0;
 
 //couleur
 const blackColor = "#444442";
 const whiteColor = "#D7CCC8";
 //Image
-const pathImg = "../img/";
-const imageLogiqueEt = "eee.png";
-const imageLogiqueOu = "zzz.png";
+const pathImg = "img/";
+const imageLogiqueEt = "and_test.png";
+const imageLogiqueOu = "ou.png";
 const imageLogiqueEtNon = "nand.png";
 const imageLogiqueInv = "not_test.png";
 const imageLogiqueNonOu = "aaa.png";
 const imageEnd = "idea_white.png";
 
 //line
-const colorLineInnactive = "black";
-const colorLineActive = "#4CFEFE";//FFF033
+var colorLineInnactive = "black";
+var colorLineActive = "#4CFEFE";//FFF033
 const lineStroke = 4;
 const pourcentageBreak = 15;
 
@@ -25,8 +25,8 @@ const pourcentageBreak = 15;
 const SwitchHeight = 25;
 const SwitchWidth = 50;
 const colorSwitchBorder = "black";
-const colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
+var colorSwitchInnactiveBackground = "red";
+var colorSwitchActiveBackground = "green";
 
 //timer
 var timeEnd = 70;
diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js
new file mode 100644
index 0000000..80c9cbc
--- /dev/null
+++ b/site/vue/js/createElement.js
@@ -0,0 +1,298 @@
+function createEnd() {
+
+    //find X and Y
+  
+    var X = stage.width() - stage.width() /100 * 5;
+    var Y = stage.height() / 3;
+  
+    var imageObj2 = new Image();
+    imageObj2.onload = function () {
+      var end = new Konva.Image({
+        x: X,
+        y: Y,
+        image: imageObj2,
+        width: 50,
+        height: 50,
+        id: "end",
+      });
+      layer.add(end);
+      layer.batchDraw();
+    };
+    end = {
+      name: "end",
+      x: X,
+      y: Y,
+      type: "end",
+      position: 1,
+      let:1,
+    }
+    imageObj2.src = pathImg + imageEnd;
+  }
+  
+  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);
+                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 + (imageHeight / end.position)*end.let], "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);
+      }
+      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;
+    }
+    
+    imageObj.id = id;
+  
+  
+  
+    var logique = {
+      name: id,
+      x: x,
+      y: y,
+      type: type,
+      id1: null,
+      id2: null,
+      id3: null,
+    }
+    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 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.id1 == null || element.id2 == 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;
+        }
+      });
+    }
+    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();
+    }
+  }
+  
+  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);
+          }
+        }
+      });
+      //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
diff --git a/site/vue/js/creator.js b/site/vue/js/creator.js
new file mode 100644
index 0000000..8abc79c
--- /dev/null
+++ b/site/vue/js/creator.js
@@ -0,0 +1,204 @@
+function createGame1() {
+
+    timeEnd = 20;
+
+    initTimer();
+
+    createSwitch("s1", 20, 20);
+    createSwitch("s2", 20, 90);
+    createSwitch("s3", 20, 300);
+    createSwitch("s4", 20, 500);
+    createSwitch("s5", 20, 700);
+    createSwitch("s6", 20, 600);
+    createSwitch("s7", 350, 600);
+
+    createLogique(200, 100, "logique1", "et");
+    createLogique(300, 200, "logique2", "nonou");
+    createLogique(500, 300, "logique3", "et");
+    createLogique(500, 400, "logique4", "etnon");
+    createLogique(500, 500, "logique5", "inv");
+
+    createLink(stage.findOne("#s7"), findLogique("logique5"));
+    createLink(stage.findOne("#s5"), findLogique("logique4"));
+    createLink(stage.findOne("#s6"), findLogique("logique4"));
+    createLink(stage.findOne("#s3"), findLogique("logique2"));
+    createLink(stage.findOne("#s2"), findLogique("logique1"));
+    createLink(stage.findOne("#s1"), findLogique("logique1"));
+    createLink(findLogique("logique1"), findLogique("logique2"));
+    createLink(stage.findOne("#s4"), findLogique("logique3"));
+    createLink(findLogique("logique2"), findLogique("logique3"));
+    initAllSwitch();
+    createEnd(800, 320);
+    initEnd();
+}
+function createGame2() {
+
+    timeEnd = 40;
+
+    colonneTot = 3;
+    numberPerColonne = [1,1,3];
+
+    initTimer();
+
+    switchCreator(7);
+
+    insertLogiqueColonne("logique1", "et", 0);
+    insertLogiqueColonne("logique2", "nonou", 1);
+    insertLogiqueColonne("logique3", "et", 2);
+    insertLogiqueColonne("logique4", "etnon", 2);
+    insertLogiqueColonne("logique5", "inv", 2);
+
+    createLink(findLogique("logique1"), findLogique("logique2"));
+    createLink(findLogique("logique2"), findLogique("logique3"));
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
+function tuto(){
+    timeEnd = 1000;
+
+    initTimer();
+
+    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);
+
+    initTimer();
+
+    var premiereColonne = 2;
+
+    let still = premiereColonne;
+    let nmbColonne = 1;
+
+    while(still != 1){
+        still = still / 2;
+        nmbColonne++;
+    }
+
+    var logiqueCount = 0;
+
+    colonneTot = nmbColonne;
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+    premiereColonne = premiereColonne * 2;
+    for (let i = 0; i < colonneTot; i++) {
+        numberPerColonne[i] = premiereColonne - premiereColonne / 2;
+        premiereColonne = premiereColonne / 2;
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let type = null;
+            switch (getRandomArbitrary(0, 4)) {
+                case 0:
+                    type = "et";
+                    break;
+                case 1:
+                    type = "ou";
+                    break;
+                case 2:
+                    type = "etnon";
+                    break;
+                case 3:
+                    type = "nonou";
+                    break;
+            }
+            insertLogiqueColonne("logique" + logiqueCount, type, i);
+        }
+    }
+    
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
+function generatorGame() {
+
+    timeEnd = getRandomArbitrary(15, 50);
+
+    initTimer();
+
+    var logiqueCount = 0;
+
+    colonneTot = getRandomArbitrary(2, 3);
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+
+    for (let i = 0; i < colonneTot; i++) {
+        numberPerColonne[i] = getRandomArbitrary(2, 4);
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let type = null;
+            switch (getRandomArbitrary(0, 4)) {
+                case 0:
+                    type = "et";
+                    break;
+                case 1:
+                    type = "ou";
+                    break;
+                case 2:
+                    type = "etnon";
+                    break;
+                case 3:
+                    type = "nonou";
+                    break;
+            }
+            insertLogiqueColonne("logique" + logiqueCount, type, i);
+        }
+    }
+    
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+
+}
\ No newline at end of file
diff --git a/site/vue/js/easytimer.min.js b/site/vue/js/easytimer.min.js
new file mode 100644
index 0000000..ca9c46b
--- /dev/null
+++ b/site/vue/js/easytimer.min.js
@@ -0,0 +1,7 @@
+/**
+ * easytimer.js
+ * Generated: 2019-12-22
+ * Version: 4.1.1
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).easytimer={})}(this,function(t){"use strict";function _(t){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function z(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(i,t))})}return r}function i(t,e,n){var o,r="";if((t="number"==typeof t?String(t):t).length>e)return t;for(o=0;o<e;o+=1)r+=String(n);return(r+t).slice(-r.length)}function R(){this.secondTenths=0,this.seconds=0,this.minutes=0,this.hours=0,this.days=0,this.toString=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["hours","minutes","seconds"],e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:":",n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:2;t=t||["hours","minutes","seconds"],e=e||":",n=n||2;var o,r=[];for(o=0;o<t.length;o+=1)void 0!==this[t[o]]&&("secondTenths"===t[o]?r.push(this[t[o]]):r.push(i(this[t[o]],n,"0")));return r.join(e)}}var n="undefined"!=typeof window?window.CustomEvent:void 0;"undefined"!=typeof window&&"function"!=typeof n&&((n=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}).prototype=window.Event.prototype,window.CustomEvent=n);var B="secondTenths",F="seconds",G="minutes",H="hours",J="days",K=[B,F,G,H,J],N={secondTenths:100,seconds:1e3,minutes:6e4,hours:36e5,days:864e5},Q={secondTenths:10,seconds:60,minutes:60,hours:24},W="undefined"!=typeof module&&module.exports&&"function"==typeof require?require("events"):void 0;function X(){return"undefined"!=typeof document}function Y(){return W}function Z(t,e){return(t%e+e)%e}function o(){var e,n,r,o,i,s,u,c,a,f,d=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},l=new R,h=new R,p=X()?document.createElement("span"):Y()?new W.EventEmitter:void 0,v=!1,y=!1,m={},b={detail:{timer:this}};function w(t,e){var n,o,r=h[e];return o=C(t,N[n=e]),h[n]=o,l[n]=n===J?o:0<=o?Z(o,Q[n]):Q[n]-Z(o,Q[n]),h[e]!==r}function t(){g(),function(){for(var t in l)l.hasOwnProperty(t)&&"number"==typeof l[t]&&(l[t]=0);for(var e in h)h.hasOwnProperty(e)&&"number"==typeof h[e]&&(h[e]=0)}()}function g(){clearInterval(e),e=void 0,y=v=!1}function O(t){I()?(a=E(),s=V(i.target)):D(t),function(){var t=N[n];if(S(P(Date.now())))return;e=setInterval(j,t),v=!0,y=!1}()}function E(){return P(Date.now())-h.secondTenths*N[B]*r}function j(){var t=P(Date.now());!function(t){t[B]&&M("secondTenthsUpdated",b);t[F]&&M("secondsUpdated",b);t[G]&&M("minutesUpdated",b);t[H]&&M("hoursUpdated",b);t[J]&&M("daysUpdated",b)}(T()),o(b.detail.timer),S(t)&&(U(),M("targetAchieved",b))}function T(t){var e=0<arguments.length&&void 0!==t?t:P(Date.now()),n=0<r?e-a:a-e,o={};return o[B]=w(n,B),o[F]=w(n,F),o[G]=w(n,G),o[H]=w(n,H),o[J]=w(n,J),o}function P(t){return Math.floor(t/N[n])*N[n]}function S(t){return s instanceof Array&&f<=t}function D(t){var e;n=function(t){if(function(t){return 0<=K.indexOf(t)}(t=typeof t==="string"?t:F))return t;throw new Error("Error in precision parameter: ".concat(t," is not a valid value"))}((t=t||{}).precision),o="function"==typeof t.callback?t.callback:function(){},c=!0===t.countdown,r=!0==c?-1:1,"object"===_(t.startValues)?(e=t.startValues,u=x(e),l.secondTenths=u[0],l.seconds=u[1],l.minutes=u[2],l.hours=u[3],l.days=u[4],h=L(u,h)):u=null,a=E(),T(),s="object"===_(t.target)?V(t.target):c?(t.target={seconds:0},V(t.target)):null,m={precision:n,callback:o,countdown:"object"===_(t)&&!0===t.countdown,target:s,startValues:u},i=t}function x(t){var e,n,o,r,i,s;if("object"===_(t))if(t instanceof Array){if(5!==t.length)throw new Error("Array size not valid");s=t}else{for(var u in t)if(K.indexOf(u)<0)throw new Error("Error in startValues or target parameter: ".concat(u," is not a valid input value"));s=[t.secondTenths||0,t.seconds||0,t.minutes||0,t.hours||0,t.days||0]}return e=s[0],n=s[1]+C(e,10),o=s[2]+C(n,60),r=s[3]+C(o,60),i=s[4]+C(r,24),s[0]=e%10,s[1]=n%60,s[2]=o%60,s[3]=r%24,s[4]=i,s}function C(t,e){var n=t/e;return n<0?Math.ceil(n):Math.floor(n)}function V(t){if(t){var e=L(s=x(t));return f=a+e.secondTenths*N[B]*r,s}}function L(t,e){var n=e||{};return n.days=t[4],n.hours=24*n.days+t[3],n.minutes=60*n.hours+t[2],n.seconds=60*n.minutes+t[1],n.secondTenths=10*n.seconds+t[[0]],n}function U(){t(),M("stopped",b)}function k(t,e){X()?p.addEventListener(t,e):Y()&&p.on(t,e)}function A(t,e){X()?p.removeEventListener(t,e):Y()&&p.removeListener(t,e)}function M(t,e){X()?p.dispatchEvent(new CustomEvent(t,e)):Y()&&p.emit(t,e)}function q(){return v}function I(){return y}D(d),void 0!==this&&(this.start=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t=z({},d,{},t),q()||(O(t),M("started",b))},this.pause=function(){g(),y=!0,M("paused",b)},this.stop=U,this.reset=function(){t(),O(i),M("reset",b)},this.isRunning=q,this.isPaused=I,this.getTimeValues=function(){return l},this.getTotalTimeValues=function(){return h},this.getConfig=function(){return m},this.addEventListener=k,this.on=k,this.removeEventListener=A,this.off=A)}t.Timer=o,t.default=o,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index 214a679..4da739f 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -48,10 +48,10 @@ function setColor(color) {
         document.getElementById("setting_int").style.color = whiteColor;
         document.getElementById("setting_int").style.backgroundColor = blackColor;
         var hr = document.querySelectorAll("#hr");
-        hr.forEach(function(item){
-            console.log(item);
-            hr.style.border = "3px solid " + blackColor;
+        hr.forEach(function (item) {
+            item.setAttribute("style", "border : 3px solid " + whiteColor);
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + whiteColor;
 
     } else {
         document.body.style.color = blackColor;
@@ -59,9 +59,10 @@ function setColor(color) {
         document.getElementById("setting_int").style.color = blackColor;
         document.getElementById("setting_int").style.backgroundColor = whiteColor;
         var hr = document.querySelectorAll("#hr");
-        hr.forEach(function(item){
-            hr.style.border = "3px solid " + whiteColor;
+        hr.forEach(function (item) {
+            item.setAttribute("style", "border : 3px solid " + blackColor);
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + blackColor;
     }
 }
 
@@ -79,4 +80,259 @@ function setLang(newLang) {
             document.getElementById(currText).innerHTML = lang.en[currText];
         })
     }
-}
\ No newline at end of file
+}
+function calculNombreSwitch() {
+    var entrelibre = 0;
+    logiques.forEach(function (element) {
+
+        if (element.id1 == null) {
+            entrelibre++;
+        }
+        if (element.id2 == null && element.type != "inv") {
+            entrelibre++;
+        }
+    });
+    numberOfSwitch = entrelibre;
+}
+function whatIsElement(element) {
+    if (findLogique(element.name) == null || findLogique(element.name) == undefined) {
+        return "switch";
+    } else {
+        return "logique";
+    }
+}
+
+function setLine(logiqueElement, lineId, lineName) {
+    logiques.forEach(function (element, index) {
+        if (element.name === logiqueElement.name) {
+            Object.keys(element).map(function (objectKey, index) {
+                if (objectKey == lineId) {
+                    element[objectKey] = lineName;
+                }
+            });
+        }
+    });
+}
+
+function changeLineColor(idLine) {
+    let line = stage.findOne("#" + idLine);
+    var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
+    line.stroke(colorline);
+}
+function changeLineColorInput(idLine,color) {
+    let line = stage.findOne("#" + idLine);
+    console.log("changer");
+    line.stroke(color);
+}
+function changeLineColorBlack(idLine) {
+    let line = stage.findOne("#" + idLine);
+    line.stroke(colorLineInnactive);
+}
+function changeLineColorYellow(idLine) {
+    let line = stage.findOne("#" + idLine);
+    line.stroke(colorLineActive);
+}
+
+function checkAllSortieLogique() {
+    logiques.forEach(function (element) {
+        if (element.id3 != null)
+            checkSortieLogique(element.name);
+    });
+}
+
+function checkSortieLogique(logiqueId) {
+    let logique = findLogique(logiqueId);
+    logiques.forEach(function (element, index) {
+        if (element.name === logique.name) {
+            let line1State, line2State;
+            let id1Color = stage.findOne("#" + element.id1).stroke();
+            if (element.type !== "inv") {
+                let id2Color = stage.findOne("#" + element.id2).stroke();
+                if (id2Color == colorLineInnactive) {
+                    line2State = false;
+                } else {
+                    line2State = true;
+                }
+            }
+
+            if (id1Color == colorLineInnactive) {
+                line1State = false;
+            } else {
+                line1State = true;
+            }
+
+            switch (logique.type) {
+                case "et":
+                    if (line1State == true && line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "inv":
+                    if (line1State == false) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "ou":
+                    if (line1State == true || line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "nonou":
+                    if (line1State == true || line2State == true) {
+                        changeLineColorBlack(element.id3);
+                    }
+                    else {
+                        changeLineColorYellow(element.id3);
+                    }
+                    break;
+                case "etnon":
+                    if (line1State == false && line2State == false) {
+                        changeLineColorYellow(element.id3);
+                    } else if (line1State == false && line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    } else if (line1State == true && line2State == false) {
+                        changeLineColorYellow(element.id3);
+                    } else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+            }
+        }
+    });
+}
+
+function getRandomArbitrary(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+}
+
+function isElementExisting(elementId) {
+    if (stage.findOne("#" + elementId) != null) {
+        return true;
+    }
+    return false;
+}
+
+function checkLineSwitch(switchId) {
+    if (stage.findOne("#" + switchId) != null) {
+        return true;
+    }
+    return false;
+}
+
+function checkEnd() {
+    let ter = true;
+    endLines.forEach(function (element) {
+        if (stage.findOne("#line" + element).stroke() == "black") {
+            ter = false;
+
+        }
+    });
+    if (ter) {
+        setTimeout(() => { localStorage.setItem("niveau", parseInt(niveauActuel) + 1); document.location.reload(true); }, 100);
+    }
+}
+
+
+function calculNombreSwitch() {
+    var entrelibre = 0;
+    logiques.forEach(function (element) {
+
+        if (element.id1 == null) {
+            entrelibre++;
+        }
+        if (element.id2 == null && element.type != "inv") {
+            entrelibre++;
+        }
+    });
+    numberOfSwitch = entrelibre;
+}
+
+
+
+function resize() {
+    console.log(window.innerWidth);
+    stage.scale({ x: 1, y: 1 });
+    stage.draw();
+    console.log(stage);
+}
+
+function activeSwitchInput(event) {
+    changeAllSwitchColorActive(event.target.value);
+}
+function inactiveSwitchInput(event) {
+    changeAllSwitchColorInActive(event.target.value);
+}
+function activeLineInput(event) {
+    changeAllLineColorActive(event.target.value);
+}
+function inactiveLineInput(event) {
+    changeAllLineColorInActive(event.target.value);
+}
+
+document.querySelector("#active_switch_picker").addEventListener("input", activeSwitchInput, false);
+document.querySelector("#inactive_switch_picker").addEventListener("input", inactiveSwitchInput, false);
+document.querySelector("#active_line_picker").addEventListener("input", activeLineInput, false);
+document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false);
+
+function changeAllSwitchColorActive(color){
+    switchsInfoCopy.forEach(function(element){
+        var switche = stage.findOne("#"+element.id);
+        if(switche.fill() == colorSwitchActiveBackground){
+            switche.fill(color);
+        }
+    });
+    colorSwitchActiveBackground = color;
+    layer.draw();
+}
+function changeAllSwitchColorInActive(color){
+    switchsInfoCopy.forEach(function(element){
+        var switche = stage.findOne("#"+element.id);
+        if(switche.fill() == colorSwitchInnactiveBackground){
+            switche.fill(color);
+        }
+    });
+    colorSwitchInnactiveBackground = color;
+    layer.draw();
+}
+
+function changeAllLineColorActive(color){
+    var line1 = stage.findOne("#line2");
+    var line2 = stage.findOne("#line3");
+    var line3 = stage.findOne("#line4");
+    if(line1.stroke() === colorLineActive){
+        line1.stroke(color);
+    }
+    if(line2.stroke() === colorLineActive){
+        line2.stroke(color);
+    }
+    if(line3.stroke() === colorLineActive){
+        line3.stroke(color);
+    }
+    colorLineActive = color;
+    layer.draw();
+}
+function changeAllLineColorInActive(color){
+    var line1 = stage.findOne("#line2");
+    var line2 = stage.findOne("#line3");
+    var line3 = stage.findOne("#line4");
+    if(line1.stroke() === colorLineInnactive){
+        line1.stroke(color);
+    }
+    if(line2.stroke() === colorLineInnactive){
+        line2.stroke(color);
+    }
+    if(line3.stroke() === colorLineInnactive){
+        line3.stroke(color);
+    }
+    colorLineInnactive = color;
+    layer.draw();
+}
diff --git a/site/vue/js/init.js b/site/vue/js/init.js
new file mode 100644
index 0000000..47e74e8
--- /dev/null
+++ b/site/vue/js/init.js
@@ -0,0 +1,52 @@
+function initAllSwitch() {
+  switchs.forEach(function (element) {
+    let switche = stage.findOne("#" + element);
+    switche.on('click', function () {
+      
+      let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
+      switche.fill(colorrect);
+      changeLineColor(switche.id3);
+      checkAllSortieLogique();
+      layer.draw();
+      checkEnd(); 
+    });
+    switche.on('mouseover', function () {
+      document.body.style.cursor = "pointer";
+    });
+    switche.on('mouseout', function () {
+      document.body.style.cursor = "default";
+    });
+
+  });
+   
+}
+function initLayer() {
+  
+}
+
+function compareLogiqueForEnd(a,b){
+  if(a.y > b.y)
+    return -1;
+  if(a.y < b.y)
+    return 1;
+  return 0;
+}
+
+function initEnd() {
+  var listeLogique = [];
+  let countLogique = 0;
+  logiques.forEach(function (element) {
+    if(element.id3 == null){
+      countLogique++;
+      listeLogique.push(element);
+    }
+  });
+  listeLogique.sort(compareLogiqueForEnd);
+  end.position = countLogique;
+  end.let = countLogique;
+  listeLogique.forEach(function (element) {
+    if(element.id3 == null){
+      createLink(element,end);
+    }
+  });
+}
\ No newline at end of file
diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js
index e3c11ef..8898a5e 100644
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@@ -9,8 +9,10 @@ const lang = {
         retour: "Retour",
         dysfont: "Dyslexie :",
         setting_title_perso: "Personnalisation du jeu",
-        active_line_setting : "Couleur ligne active : ",
-        inactive_line_setting : "Couleur ligne innactive : ",
+        active_line_setting : "Couleur lines active : ",
+        inactive_line_setting : "Couleur lines innactive : ",
+        active_switch_setting : "Couleur switchs active : ",
+        inactive_switch_setting : "Couleur switchs innactive : ",
     },
     en: {
         titleGame: "Make It True",
@@ -22,7 +24,9 @@ const lang = {
         retour: "Back",
         dysfont:"Dyslexia :",
         setting_title_perso: "Game customization",
-        active_line_setting : "Color active line : ",
-        inactive_line_setting : "Color inactive line : ",
+        active_line_setting : "Color active lines : ",
+        inactive_line_setting : "Color inactive lines : ",
+        active_switch_setting : "Color inactive switch : ",
+        inactive_switch_setting : "Color inactive switchs : ",
     }
 }
\ No newline at end of file
diff --git a/site/vue/js/logique.js b/site/vue/js/logique.js
new file mode 100644
index 0000000..edda198
--- /dev/null
+++ b/site/vue/js/logique.js
@@ -0,0 +1,105 @@
+function findLogique(logiqueId) {
+    let elem = null;
+    logiques.forEach(function (element) {
+        if (element.name === logiqueId) {
+            elem = element;
+        }
+    });
+    return elem;
+}
+
+function giveSwitchYWithLineId(lineId){
+    var elementY = null;
+    switchsInfoCopy.forEach(function(element){
+        if(stage.findOne("#"+element.id).id3 == lineId){
+            elementY = (element.y);
+        }
+    });
+    return elementY;
+}
+
+function removeLineFromSwitch(lineId){
+    switchsInfoCopy.forEach(function(element){
+        if(stage.findOne("#"+element.id).id3 == lineId){
+            stage.findOne("#"+element.id).id3 = null;
+        }
+    });
+}
+
+function removeLine(lineId){
+    //remove from switch
+    removeLineFromSwitch(lineId);
+    let line = stage.findOne("#" + lineId);
+    line.destroy();
+
+}
+
+function giveLineId(logiqueId,entre) {
+    var newEntre = entre;
+    isSwitch = false;
+    if(entre.id !== undefined){
+        switchsInfoCopy.forEach(function(element){
+            if(entre.id() == element.id){
+                isSwitch = true;
+                newEntre = element;
+            }
+        });
+    }
+    let lineId = null;
+    let logique = findLogique(logiqueId);
+    if(logique.y >= newEntre.y){
+        if (logique.type === "inv") {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            }
+        }
+        else {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            } else if (logique.id2 == null) {
+                lineId = "id2";
+                /*if(isSwitch){
+                    if(giveSwitchYWithLineId(logique.id1) > entre.getY()){
+                        console.log(giveSwitchYWithLineId(logique.id1));
+                        console.log(entre);
+                        removeLine(entre.id3);
+                        lineRemove.push([entre, "switch"]);
+                    }else{
+                        lineId = "id2";
+                    }
+                }*/
+            }    
+        }
+    }else{
+        if (logique.type === "inv") {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            }
+        }
+        else {
+            if (logique.id2 == null) {
+                lineId = "id2";
+            } else if (logique.id1 == null) {
+                lineId = "id1";
+            }
+    
+    
+        }
+    }
+    
+    return lineId
+}
+
+function checkLogiqueLines(logiqueId, lineId) {
+    let logique = findLogique(logiqueId);
+    logiques.forEach(function (element, index) {
+        if (element.name === logique.name) {
+          Object.keys(element).map(function(objectKey, index) {
+            if(objectKey == lineId && objectKey != null){
+                return true;
+            }
+        });
+        }
+    });
+    return false;
+}
\ No newline at end of file
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index 6c25195..709691b 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -1,5 +1,36 @@
-function initAll(){
+function initAll() {
     darkMode();
     setLang("fr");
     dysFont();
-}
\ No newline at end of file
+
+}
+
+var mobile = false;
+var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
+console.log(document.querySelector("#setting_container").offsetWidth);
+var width = window.innerWidth - window.innerWidth / 100 * 30;
+var height = window.innerWidth / 5;
+
+var stage = new Konva.Stage({
+    container: 'setting_container',
+    width: width,
+    height: height,
+});
+var layer = new Konva.Layer();
+stage.add(layer);
+
+colonneTot = 1;
+numberPerColonne = [1];
+var logiqueCount = 0;
+
+for (let i = 0; i < colonneTot; i++) {
+    liveColonneNumber.push([]);
+}
+insertLogiqueColonne("logique1", "et", 0);
+calculNombreSwitch();
+switchCreator(numberOfSwitch);
+createAllLinkSwitch();
+
+initAllSwitch();
+createEnd();
+initEnd();
diff --git a/site/vue/js/timer.js b/site/vue/js/timer.js
new file mode 100644
index 0000000..dffff75
--- /dev/null
+++ b/site/vue/js/timer.js
@@ -0,0 +1,35 @@
+function initTimer(){
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = "0%";
+    let seconds = timeEnd;
+    let minutes = 0;
+    while(seconds - 60 > 0){
+      minutes++;
+      seconds = seconds - 60;
+    }
+    document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";
+}
+
+function move() {
+    var lapsPerSecond = 100/timeEnd;
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
+}
+
+
+
+var timer = new easytimer.Timer();
+    timer.start();
+    timer.addEventListener('secondsUpdated', function (e) {
+      if(timer.getTimeValues().seconds <= timeEnd){
+        document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
+        move();
+      }else{
+        endTime();
+        timer.stop();
+      }
+    });
+    function endTime(){
+        var modal = document.getElementById("myModal");
+        modal.style.display = "block";
+    }
\ No newline at end of file