améliorations des liens entres portes logiques, et entre switch et porte logiques, les portes logiques laisse passer le courant en suivant de ce qu'elles recoivent

site/js/func.js

@@ -1,4 +1,4 @@
-function createEtLogique(x, y, id) {
+function createEtLogique(x, y, id, type) {
   var imageObj = new Image();
   imageObj.onload = function () {
     var et = new Konva.Image({
@@ -21,7 +21,7 @@ function createEtLogique(x, y, id) {
     name: id,
     x: x,
     y: y,
-    type: "et",
+    type: type,
     id1: null,
     id2: null,
     id3: null,
@@ -54,7 +54,7 @@ function setLine(logiqueElement, lineId, lineName) {
   });
 }
 
-function createLink(entre, sortie) {
+function createLink(entre, sortie,lineId) {
   //entre est une porte logique
   switch (whatIsElement(entre)) {
     case "switch":
@@ -67,18 +67,94 @@ function createLink(entre, sortie) {
 
               let logiqueMidX = sortie.x;
               let logiqueMidY = sortie.y + (50 / 3);
-              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line1");
+              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line"+lineId);
-              setLine(sortie, "id1", "line1");
+              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 + (50 / 3) * 2], "line2");
+              createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (50 / 3) * 2], "line"+lineId);
-              setLine(sortie, "id2", "line2");
+              setLine(sortie, "id2", "line"+lineId);
+              entre.id3 = "line"+lineId;
               break;
           }
       }
+      break;
+    case "logique" :
+      switch (whatIsElement(sortie)) {
+        case "logique":
+          switch (giveLineId(sortie.name)) {
+            case "id1":
+              let switchMidX = entre.x + 100;
+              let switchMidY = entre.y + 50 / 2;
+
+              let logiqueMidX = sortie.x;
+              let logiqueMidY = sortie.y + (50 / 3);
+              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line"+lineId);
+              setLine(sortie, "id1", "line"+lineId);
+              setLine(entre, "id3", "line"+lineId);
+              break;
+            case "id2":
+              createLine([entre.x + 100, entre.y + 50 / 2, sortie.x, sortie.y + (50 / 3) * 2], "line"+lineId);
+              setLine(sortie, "id2", "line"+lineId);
+              setLine(entre, "id3", "line"+lineId);
+              break;
+          }
+      }
+      break;
   }
 }
 
+function changeLineColor(idLine){
+  let line = stage.findOne("#"+idLine);
+  var colorline = line.stroke() == '#f6cd61' ? 'black' : '#f6cd61';
+  line.stroke(colorline);
+}
+function changeLineColorBlack(idLine){
+  let line = stage.findOne("#"+idLine);
+  line.stroke("black");
+}
+function changeLineColorYellow(idLine){
+  let line = stage.findOne("#"+idLine);
+  line.stroke("#f6cd61");
+}
+
+function checkAllSortieLogique(){
+  logiques.forEach(function(element){
+    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(); 
+      let id2Color = stage.findOne("#"+element.id2).stroke(); 
+      if(id1Color == "black"){
+        line1State = false;
+      } else {
+        line1State = true;
+      }
+      if(id2Color == "black"){
+        line2State = false;
+      } else {
+        line2State = true;
+      }
+      switch(logique.type){
+        case "et" :
+          if(line1State == true && line2State == true){
+            changeLineColorYellow(element.id3);
+          }
+          else{
+            changeLineColorBlack(element.id3);
+          }
+          break;  
+      }
+    }
+});
+}
+
 
 function createLine(points, id) {
   let line = new Konva.Line({
@@ -92,7 +168,10 @@ function createLine(points, id) {
   layer.add(line);
 }
 
-function createSwitch(num, id, x, y) {
+function createSwitch(id, x, y) {
+  switchs.push(id);
+  var num = lineCount.length;
+  lineCount.push(1);
   var rect1 = new Konva.Rect({
     x: x,
     y: y,
@@ -101,6 +180,7 @@ function createSwitch(num, id, x, y) {
     stroke: 'black',
     strokeWidth: 4,
     id: id,
+    id3 : null,
   });
 
   layer.add(rect1);
@@ -111,21 +191,24 @@ function createSwitch(num, id, x, y) {
     fontSize: 30,
     fontFamily: 'Calibri',
     fill: 'black',
-    id: "text" + num,
+    id: "text" + id,
   });
   layer.add(simpleText);
 
-  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';
+function initAllSwitch(){
-    var colorline = et.text() == '1' ? 'black' : '#f6cd61';
+  switchs.forEach(function(element){
-    line.stroke(colorline);
+    let switche = stage.findOne("#"+element);
-    et.text(text);
+    switche.on('click', function () {
-    layer.draw();
+      changeLineColor(switche.id3);
-  });
+      checkSortieLogique("logique1");
+      layer.draw();
+    });
 
+  });
 }
 
 function isElementExisting(elementId) {

site/vues/index.html

@@ -58,7 +58,6 @@
     initLayer();
 
     createEtLogique(300, 50, "logique1");
-  
     
     createSwitch(1,"et",20,20);
     createSwitch(2,"et2",20,150);

site/vues/jeu.html

@@ -23,30 +23,34 @@
       </ul>
     </nav>
   </header>
-  <div id="container" style="width: 50%;"></div>
+  <div id="container" style="border: 2px solid black;"></div>
   <script>
-    var switchs = [], lines = [], logiques = [];
+    var switchs = [], lineCount = [], logiques = [],lines = [];
-    for (var i = logiques.length; i > 0; i--) {
+
-      logiques.pop();
-    }
-    console.log(logiques);
     var layer = new Konva.Layer();
 
     var stage = new Konva.Stage({
       container: 'container',
-      width: window.innerWidth / 2,
+      width: window.innerWidth,
-      height: window.innerHeight / 2,
+      height: window.innerHeight,
     });
     stage.add(layer);
 
     initLayer();
 
-    createEtLogique(300, 100, "logique1");
+    createEtLogique(300, 100, "logique1","et");
+
+    createEtLogique(600,200,"logique2","et");
 
-    createSwitch(1, "et", 20, 20);
+    createSwitch("et", 20, 20);
-    createSwitch(2, "et2", 20, 150);
+    createSwitch("et2", 20, 150);
-    createLink(stage.findOne("#et2"), findLogique("logique1"));
+    createSwitch("et3", 20, 300);
-    createLink(stage.findOne("#et"), findLogique("logique1"));
+    createLink(stage.findOne("#et3"), findLogique("logique2"),3);
-  </script>
+    createLink(stage.findOne("#et2"), findLogique("logique1"),1);
+    createLink(stage.findOne("#et"), findLogique("logique1"),0);
+    createLink(findLogique("logique1"),findLogique("logique2"),2);
+    initAllSwitch();
+    
+    </script>
 </body>
 </html>