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);
 }

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;
@@ -154,3 +156,8 @@ hr{
 .img_france{
     margin-right:50px;
 }
+
+.setting_play{
+    height: 30vh;
+    width: 90%;
+}

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"
+                <p><a class="txt" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head"
-            value="#e66465"></p>
+            value="#008000"></p>
-            <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="head" name="head"
+            <p><a class="txt" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head"
-                value="#e66465"></p>
+                value="#FF0000"></p>
-                <br>
+                <p><a class="txt" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head"
-                <hr id="hr">
+                    value="#4CFEFE"></p>
-                <p><a>Previsualisation</a></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(){

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);
+  }

site/vue/js/const.js

@@ -1,23 +1,23 @@
 //Portes Logiques
-var imageHeight = 70;
+var imageHeight = 75;
-var imageWidth = 75;
+var imageWidth = 100;
 var imageRotation = 0;
 
 //couleur
 const blackColor = "#444442";
 const whiteColor = "#D7CCC8";
 //Image
-const pathImg = "../img/";
+const pathImg = "img/";
-const imageLogiqueEt = "eee.png";
+const imageLogiqueEt = "and_test.png";
-const imageLogiqueOu = "zzz.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";
+var colorLineInnactive = "black";
-const colorLineActive = "#4CFEFE";//FFF033
+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";
+var colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
+var colorSwitchActiveBackground = "green";
 
 //timer
 var timeEnd = 70;

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));
+    }
+  }

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();
+
+}

site/vue/js/func.js

@@ -49,9 +49,9 @@ function setColor(color) {
         document.getElementById("setting_int").style.backgroundColor = blackColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
-            console.log(item);
+            item.setAttribute("style", "border : 3px solid " + whiteColor);
-            hr.style.border = "3px solid " + blackColor;
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + whiteColor;
 
     } else {
         document.body.style.color = blackColor;
@@ -60,8 +60,9 @@ function setColor(color) {
         document.getElementById("setting_int").style.backgroundColor = whiteColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
-            hr.style.border = "3px solid " + whiteColor;
+            item.setAttribute("style", "border : 3px solid " + blackColor);
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + blackColor;
     }
 }
 
@@ -80,3 +81,258 @@ function setLang(newLang) {
         })
     }
 }
+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();
+}

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);
+    }
+  });
+}

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 : ",
+        active_line_setting : "Couleur lines active : ",
-        inactive_line_setting : "Couleur ligne innactive : ",
+        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 : ",
+        active_line_setting : "Color active lines : ",
-        inactive_line_setting : "Color inactive line : ",
+        inactive_line_setting : "Color inactive lines : ",
+        active_switch_setting : "Color inactive switch : ",
+        inactive_switch_setting : "Color inactive switchs : ",
     }
 }

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;
+}

site/vue/js/main.js

@@ -2,4 +2,35 @@ function initAll(){
     darkMode();
     setLang("fr");
     dysFont();
+
 }
+
+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();

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";
+    }