le placement ce fait mtn automatiquement en fonctions de 'grilles' et de la taille de la page

site/js/const.js

@@ -1,12 +1,15 @@
 //Portes Logiques
-const imageHeight = 45;
-const imageWidth = 50;
-const imageRotation = 0;
+var imageHeight = 45;
+var imageWidth = 50;
+var imageRotation = 0;
 
 //Image
 const pathImg = "../img/";
 const imageLogiqueEt = "eee.png";
 const imageLogiqueOu = "logiqueou.png";
+const imageLogiqueEtNon = "logiqueetnon.png";
+const imageLogiqueInv = "non.png";
+const imageLogiqueNonOu = "nonou.png";
 const imageEnd = "idea_white.png";
 
 //line
@@ -23,4 +26,9 @@ const colorSwitchInnactiveBackground = "red";
 const colorSwitchActiveBackground = "green";
 
 //timer
-const timeEnd = 15;
+var timeEnd = 70;
+
+//grid
+var colonneTot = 4;
+var numberPerColonne = [1,1,3];
+var liveColonneNumber = [[],[],[]];

site/js/createElement.js

@@ -1,9 +1,16 @@
-function createEnd(x, y) {
+function createEnd() {
+
+  //find X and Y
+
+  var X = stage.width() - stage.width() /100 * 10;
+  console.log(X);
+  var Y = stage.height() / 3;
+
   var imageObj2 = new Image();
   imageObj2.onload = function () {
     var end = new Konva.Image({
-      x: x,
-      y: y,
+      x: X,
+      y: Y,
       image: imageObj2,
       width: 50,
       height: 50,
@@ -14,8 +21,8 @@ function createEnd(x, y) {
   };
   end = {
     name: "end",
-    x: x,
-    y: y,
+    x: X,
+    y: Y,
     type: "end",
     position: 1,
     let:1,
@@ -69,7 +76,11 @@ function createLink(entre, sortie) {
               let switchMidY = entre.getY() + entre.getHeight() / 2;
 
               let logiqueMidX = sortie.x;
-              let logiqueMidY = sortie.y + (imageHeight / 3);
+              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;
@@ -91,7 +102,11 @@ function createLink(entre, sortie) {
               let switchMidY = entre.y + imageHeight / 2;
 
               let logiqueMidX = sortie.x;
-              let logiqueMidY = sortie.y + (imageHeight / 3);
+              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);
@@ -139,6 +154,15 @@ function createLogique(x, y, id, type) {
     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;
@@ -156,3 +180,25 @@ function createLogique(x, y, id, type) {
   }
   logiques.push(logique);
 }
+
+function switchCreator(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);
+}

site/js/creator.js

@@ -0,0 +1,60 @@
+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;
+
+    initTimer();
+
+    switchCreator(7);
+
+    insertLogiqueColonne("logique1", "et", 0);
+    insertLogiqueColonne("logique2", "nonou", 1);
+    insertLogiqueColonne("logique3", "et", 2);
+    insertLogiqueColonne("logique4", "etnon", 2);
+    insertLogiqueColonne("logique5", "inv", 2);
+
+    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();
+    initEnd();
+}

site/js/func.js

@@ -45,17 +45,21 @@ function checkSortieLogique(logiqueId) {
     if (element.name === logique.name) {
       let line1State, line2State;
       let id1Color = stage.findOne("#" + element.id1).stroke();
-      let id2Color = stage.findOne("#" + element.id2).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;
       }
-      if (id2Color == colorLineInnactive) {
-        line2State = false;
-      } else {
-        line2State = true;
-      }
+
       switch (logique.type) {
         case "et":
           if (line1State == true && line2State == true) {
@@ -65,6 +69,14 @@ function checkSortieLogique(logiqueId) {
             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);
@@ -73,6 +85,25 @@ function checkSortieLogique(logiqueId) {
             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;
       }
     }
   });
@@ -92,16 +123,16 @@ function checkLineSwitch(switchId) {
   return false;
 }
 
-function checkEnd(){
+function checkEnd() {
   let ter = true;
-  endLines.forEach(function(element){
-    if(stage.findOne("#line"+element).stroke() == "black"){
+  endLines.forEach(function (element) {
+    if (stage.findOne("#line" + element).stroke() == "black") {
       ter = false;
-      
+
     }
   });
-  if(ter){
-    setTimeout(() => {  alert("Niveau terminé"); }, 40);
+  if (ter) {
+    setTimeout(() => { alert("Niveau terminé"); }, 40);
   }
 }
 

site/js/logique.js

@@ -11,22 +11,29 @@ function findLogique(logiqueId) {
 function giveLineId(logiqueId){
     let lineId = null;
     let logique = findLogique(logiqueId);
-    logiques.forEach(function(element, index) {
-        if (element.name === logique.name) {
-          Object.keys(element).map(function(objectKey, index) {      
-            if(objectKey == "id1"){
-                if(element[objectKey] == null){
-                    lineId = "id1";
+    if(logique.type === "inv"){
+        if(logique.id1 == null){
+            lineId = "id1";
+        }
+    }
+    else{
+        logiques.forEach(function(element, index) {
+            if (element.name === logique.name) {
+            Object.keys(element).map(function(objectKey, index) {      
+                if(objectKey == "id1"){
+                    if(element[objectKey] == null){
+                        lineId = "id1";
+                    }
                 }
-            }
-            if(objectKey == "id2"){
-                if(element[objectKey] == null){
-                    lineId = "id2";
+                if(objectKey == "id2"){
+                    if(element[objectKey] == null){
+                        lineId = "id2";
+                    }
                 }
+            });
             }
         });
-        }
-    });
+    }   
     return lineId
 }
 

site/js/timer.js

@@ -1,7 +1,13 @@
 function initTimer(){
     var TimerElem = document.getElementById("progressBar");
     TimerElem.style.width = "0%";
-    document.getElementById("timerend").innerHTML = timeEnd;
+    let seconds = timeEnd;
+    let minutes = 0;
+    while(seconds - 60 > 0){
+      minutes++;
+      seconds = seconds - 60;
+    }
+    document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";
 }
 
 function move() {

site/vues/jeu.html

@@ -11,6 +11,7 @@
   <script src="../js/createElement.js"></script>
   <script src="../js/easytimer.min.js"></script>
   <script src="../js/timer.js"></script>
+  <script src="../js/creator.js"></script>
   <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet">
   <meta charset="utf-8" />
@@ -56,7 +57,7 @@
     <div align=center>
       <a>Temps :</a>  
       <a id="timer">0 m 0 s</a>
-      <a id="end"> / 0 m </a><a id="timerend">20</a><a> s</a> 
+      <a id="timerend">20</a>
     </div>
       <div id="progressBar"></div>
   </div>
@@ -69,7 +70,7 @@
     container.style.height = innerHeight /100*80 + "px";
     var width = container.offsetWidth;
 
-    initTimer();
+    
 
     var stage = new Konva.Stage({
       container: 'play-container',
@@ -83,30 +84,9 @@
 
     initLayer();
 
-   
-    createSwitch("s1", 20, 20);
-    createSwitch("s2", 20, 90);
-    createSwitch("s3", 20, 300);
-    createSwitch("s4", 20, 500);
-    createSwitch("s5", 20, 700);
-    createSwitch("s6", 20, 600);
+    createGame2();
     
-    createLogique(200, 100, "logique1","et");
-    createLogique(300,200,"logique2","ou");
-    createLogique(500,300,"logique3","et");
-    createLogique(500,400,"logique4","et");
-
-    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();
+    checkAllSortieLogique();
     </script>
     <script>
       var modal = document.getElementById("myModal");