Lignes des switchs jusqu'aux portes logiques, les switchs mettent le courant

site/js/func.js

@@ -14,7 +14,7 @@ function createEtLogique(x, y,id) {
     layer.add(et);
     layer.batchDraw();
   };
-  imageObj.src = 'img/logiqueet.png';
+  imageObj.src = '../img/logiqueet.png';
   imageObj.id = id;
 
   var logique = {
@@ -29,32 +29,9 @@ function createEtLogique(x, y,id) {
   logiques.push(logique);
 }
 
-function findLogique(logiqueId){
-  let elem = null;
-  logiques.forEach(function(element) {
-    if(element.name === logiqueId) {
-      elem = element;
-    }
-  });
-  return elem;
-}
 
-function checkLogiqueLines(logiqueId,lineId){
-  let logique = findLogique(logiqueId);
-  switch(lineId){
-    case "id1" : 
-      if (lineId.id1 == null) return false;
-      return true;
-      break;
-    case "id2" : 
-      if (lineId.id2 == null) return false;
-      return true;
-      break;
-    case "id3" : 
-      if (lineId.id3 == null) return false;
-      return true;
-  }
-}
+
+
 
 function whatIsElement(element) {
 
@@ -66,11 +43,11 @@ function whatIsElement(element){
 }
 
 function setLine(logiqueElement, lineId, lineName) {
-  logiques.forEach(function(element) {
+  logiques.forEach(function (element, index) {
     if (element.name === logiqueElement.name) {
-      element.forEach(function(elem){
-        if(elem == lineId){
-          elem = lineName;
+      Object.keys(element).map(function(objectKey, index) {
+        if(objectKey == lineId){
+          element[objectKey] = lineName;
         }
     });
     }
@@ -83,30 +60,26 @@ function createLink(entre,sortie){
     case "switch":
       switch (whatIsElement(sortie)) {
         case "logique":
-          if(!checkLogiqueLines(sortie.name,"id2")){
-            let switchMidX = entre.getX() + entre.getWidth();
-            let switchMidY = entre.getY() + entre.getHeight()/2;
-            
-            let logiqueMidX = sortie.x;
-            let logiqueMidY = sortie.y + (50/3)*2;
-            createLine([switchMidX,switchMidY,logiqueMidX,logiqueMidY],"line2");
-            setLine(sortie,"id2","line2");
-            return;
-          }
-          if(!checkLogiqueLines(sortie.name,"id1")){
+          switch (giveLineId(sortie.name)) {
+            case "id1":
               let switchMidX = entre.getX() + entre.getWidth();
               let switchMidY = entre.getY() + entre.getHeight() / 2;
 
               let logiqueMidX = sortie.x;
-            let logiqueMidY = sortie.y + (50/3)*3;
+              let logiqueMidY = sortie.y + (50 / 3);
               createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line1");
               setLine(sortie, "id1", "line1");
-            return;
+              break;
+            case "id2":
+              createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (50 / 3) * 2], "line2");
+              setLine(sortie, "id2", "line2");
+              break;
           }
       }
   }
 }
 
+
 function createLine(points, id) {
   let line = new Konva.Line({
     points: points,
@@ -145,8 +118,9 @@ function createSwitch(num,id,x,y){
   rect1.on('click', function () {
     var et = stage.findOne("#text" + num);
     var line = stage.findOne("#line" + num);
+    console.log("#line" + num);
     var text = et.text() == '1' ? '0' : '1';
-    var colorline = et.text() == '1' ? 'black' : 'blue';
+    var colorline = et.text() == '1' ? 'black' : '#f6cd61';
     line.stroke(colorline);
     et.text(text);
     layer.draw();
@@ -184,6 +158,5 @@ function initLayer() {
     layer.add(yoda);
     layer.batchDraw();
   };
-  imageObj2.src = 'img/idea_white.png';
-  
+  imageObj2.src = '../img/idea_white.png';
 }

site/js/logique.js

@@ -0,0 +1,45 @@
+function findLogique(logiqueId) {
+    let elem = null;
+    logiques.forEach(function (element) {
+        if (element.name === logiqueId) {
+            elem = element;
+        }
+    });
+    return elem;
+}
+
+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(objectKey == "id2"){
+                if(element[objectKey] == null){
+                    lineId = "id2";
+                }
+            }
+        });
+        }
+    });
+    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/vues/jeu.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <link rel="stylesheet" type="text/css" href="../css/style.css">
   <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
   <script src="../js/func.js"></script>
+  <script src="../js/logique.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" />
@@ -21,11 +23,13 @@
       </ul>
     </nav>
   </header>
-  <div id="container"></div>
+  <div id="container" style="width: 50%;"></div>
   <script>
-
     var switchs = [], lines = [], logiques = [];
-
+    for (var i = logiques.length; i > 0; i--) {
+      logiques.pop();
+    }
+    console.log(logiques);
     var layer = new Konva.Layer();
 
     var stage = new Konva.Stage({
@@ -37,8 +41,7 @@
 
     initLayer();
 
-    createEtLogique(300, 50, "logique1");
-  
+    createEtLogique(300, 100, "logique1");
 
     createSwitch(1, "et", 20, 20);
     createSwitch(2, "et2", 20, 150);
@@ -46,5 +49,4 @@
     createLink(stage.findOne("#et"), findLogique("logique1"));
   </script>
 </body>
-
 </html>