implémentation du ou logique

site/js/func.js

@@ -1,21 +1,47 @@
-function createEtLogique(x, y, id, type) {
-  var imageObj = new Image();
-  imageObj.onload = function () {
-    var et = new Konva.Image({
-      x: x,
-      y: y,
-      image: imageObj,
-      width: 100,
-      height: 50,
-      id: id,
-    });
+function createLogique(x, y, id, type) {
+  
+  switch(type){
+    case "et":
+      var imageObj = new Image();
+      imageObj.onload = function () {
+        var et = new Konva.Image({
+          x: x,
+          y: y,
+          image: imageObj,
+          width: 100,
+          height: 50,
+          id: id,
+        });
+
+
+        layer.add(et);
+        layer.batchDraw();
+      };
+      imageObj.src = '../img/logiqueet.png';
+      imageObj.id = id;
+      break;
+    case "ou":
+      var imageObj = new Image();
+      imageObj.onload = function () {
+        var et = new Konva.Image({
+          x: x,
+          y: y,
+          image: imageObj,
+          width: 100,
+          height: 50,
+          id: id,
+        });
+
+
+        layer.add(et);
+        layer.batchDraw();
+      };
+      imageObj.src = '../img/logiqueou.png';
+      imageObj.id = id;
+      break;
+  }
   
   
-    layer.add(et);
-    layer.batchDraw();
-  };
-  imageObj.src = '../img/logiqueet.png';
-  imageObj.id = id;
 
   var logique = {
     name: id,
@@ -120,7 +146,8 @@ function changeLineColorYellow(idLine){
 
 function checkAllSortieLogique(){
   logiques.forEach(function(element){
-    checkSortieLogique(element.name);
+    if(element.id3 != null)
+      checkSortieLogique(element.name);
   });
 }
 
@@ -150,6 +177,14 @@ function checkSortieLogique(logiqueId){
             changeLineColorBlack(element.id3);
           }
           break;  
+        case "ou" :
+          if(line1State == true || line2State == true){
+            changeLineColorYellow(element.id3);
+          }
+          else{
+            changeLineColorBlack(element.id3);
+          }
+          break;
       }
     }
 });
@@ -178,24 +213,14 @@ function createSwitch(id, x, y) {
     width: 100,
     height: 50,
     stroke: 'black',
+    fill: 'red',
     strokeWidth: 4,
     id: id,
     id3 : null,
   });
 
-  layer.add(rect1);
-  var simpleText = new Konva.Text({
-    x: x,
-    y: y,
-    text: '0',
-    fontSize: 30,
-    fontFamily: 'Calibri',
-    fill: 'black',
-    id: "text" + id,
-  });
-  layer.add(simpleText);
-
 
+  layer.add(rect1);
 
 }
 
@@ -203,8 +228,10 @@ function initAllSwitch(){
   switchs.forEach(function(element){
     let switche = stage.findOne("#"+element);
     switche.on('click', function () {
+      let colorrect = switche.fill() == 'red' ? 'green' : 'red';
+      switche.fill(colorrect);
       changeLineColor(switche.id3);
-      checkSortieLogique("logique1");
+      checkAllSortieLogique();
       layer.draw();
     });
 

site/vues/index.html

@@ -29,41 +29,18 @@
           <a>Je veux jouer à </a>
         
         <select id="jeu-select">
-          <option value="poursuite">Poursuite</option>
-          <option value="impossible">Impossible</option>
+          <option value="poursuite">Mode 1</option>
+          <option value="impossible">Mode 2</option>
           
       </select>
     </div>
       </li>
       <li>
-        <i class="far fa-play-circle"></i>  
+        <a href="jeu.html"><i class="far fa-play-circle"></i></a>
       </li>
     </ul>
   </div>
 </div>
-  <!--<div id="container"></div>-->
-  <script>
-
-    var switchs = [], lines = [], logiques = [];
-
-    var layer = new Konva.Layer();
-
-    var stage = new Konva.Stage({
-      container: 'container',
-      width: window.innerWidth / 2,
-      height: window.innerHeight / 2,
-    });
-    stage.add(layer);
-
-    initLayer();
-
-    createEtLogique(300, 50, "logique1");
-    
-    createSwitch(1,"et",20,20);
-    createSwitch(2,"et2",20,150);
-    createLink(stage.findOne("#et2"),findLogique("logique1"));
-    createLink(stage.findOne("#et"),findLogique("logique1"));
-    </script>
 </body>
 
 </html>

site/vues/jeu.html

@@ -38,17 +38,21 @@
 
     initLayer();
 
-    createEtLogique(300, 100, "logique1","et");
-
-    createEtLogique(600,200,"logique2","et");
-
-    createSwitch("et", 20, 20);
-    createSwitch("et2", 20, 150);
-    createSwitch("et3", 20, 300);
-    createLink(stage.findOne("#et3"), findLogique("logique2"),3);
-    createLink(stage.findOne("#et2"), findLogique("logique1"),1);
-    createLink(stage.findOne("#et"), findLogique("logique1"),0);
+    createLogique(300, 100, "logique1","et");
+    createLogique(600,200,"logique2","ou");
+    createLogique(900,300,"logique3","et");
+    createLogique(900,500,"logique4","ou");
+    createSwitch("s1", 20, 20);
+    createSwitch("s2", 20, 150);
+    createSwitch("s3", 20, 300);
+    createSwitch("s4", 20, 500);
+    
+    createLink(stage.findOne("#s3"), findLogique("logique2"),3);
+    createLink(stage.findOne("#s2"), findLogique("logique1"),1);
+    createLink(stage.findOne("#s1"), findLogique("logique1"),0);
     createLink(findLogique("logique1"),findLogique("logique2"),2);
+    createLink(stage.findOne("#s4"), findLogique("logique3"),4);
+    createLink(findLogique("logique2"),findLogique("logique3"),5);
     initAllSwitch();
     
     </script>