amélioration des lignes, pour éviter les lignes continue, ajout d'une arrivé de niveau pouvant acceuillir un nombre infini de lignes

site/js/const.js

@@ -1,17 +1,19 @@
 //Portes Logiques
-const imageHeight = 25;
+const imageHeight = 45;
 const imageWidth = 50;
+const imageRotation = 0;
 
 //Image
 const pathImg = "../img/";
-const imageLogiqueEt = "logiqueet.png";
+const imageLogiqueEt = "eee.png";
 const imageLogiqueOu = "logiqueou.png";
 const imageEnd = "idea_white.png";
 
 //line
 const colorLineInnactive = "black";
-const colorLineActive = "#f6cd61";
-const lineStroke = 1;
+const colorLineActive = "#46FEFE";
+const lineStroke = 3;
+const pourcentageBreak = 15;
 
 //switch
 const SwitchHeight = 25;

site/js/createElement.js

@@ -9,11 +9,17 @@ function createEnd(x, y) {
       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;
 }
 
@@ -36,8 +42,11 @@ function createSwitch(id, x, y) {
 }
 
 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: points,
+    points: newPoints,
     stroke: colorLineInnactive,
     strokeWidth: lineStroke,
     id: id,
@@ -46,8 +55,10 @@ function createLine(points, id) {
 }
 
 
-function createLink(entre, sortie, lineId) {
+function createLink(entre, sortie) {
   //entre est une porte logique
+  lineId = lineCount.length;
+  lineCount.push(1);
   switch (whatIsElement(entre)) {
     case "switch":
       switch (whatIsElement(sortie)) {
@@ -91,14 +102,19 @@ function createLink(entre, sortie, 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+1)*end.let], "line" + lineId);
+          setLine(entre, "id3", "line" + lineId);
+          end.let--;
+          break;
       }
       break;
+      
   }
 }
 function createLogique(x, y, id, type) {
-
-  switch (type) {
-    case "et":
   var imageObj = new Image();
   imageObj.onload = function () {
     var et = new Konva.Image({
@@ -109,35 +125,24 @@ function createLogique(x, y, id, type) {
       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;
-      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: imageWidth,
-          height: imageHeight,
-          id: id,
-        });
-
-
-        layer.add(et);
-        layer.batchDraw();
-      };
       imageObj.src = pathImg + imageLogiqueOu;
-      imageObj.id = id;
       break;
   }
   
+  imageObj.id = id;
+
 
 
   var logique = {

site/js/func.js

@@ -1,5 +1,5 @@
 function whatIsElement(element) {
-  if (findLogique(element.name) == null) {
+  if (findLogique(element.name) == null || findLogique(element.name) == undefined) {
     return "switch";
   } else {
     return "logique";

site/js/init.js

@@ -1,6 +1,6 @@
-function initAllSwitch(){
-    switchs.forEach(function(element){
-      let switche = stage.findOne("#"+element);
+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);
@@ -16,7 +16,23 @@ function initAllSwitch(){
     });
 
   });
+}
+function initLayer() {
+  
+}
+
+function initEnd() {
+  let countLogique = 0;
+  logiques.forEach(function (element) {
+    if(element.id3 == null){
+      countLogique++;
     }
-  function initLayer() {
-    createEnd(500,50);
+  });
+  end.position = countLogique;
+  end.let = countLogique;
+  logiques.forEach(function (element) {
+    if(element.id3 == null){
+      createLink(element,end);
     }
+  });
+}

site/vues/jeu.html

@@ -28,7 +28,7 @@
   </header>
   <div id="container"></div>
   <script>
-    var switchs = [], lineCount = [], logiques = [],lines = [];
+    var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end;
 
     var layer = new Konva.Layer();
 
@@ -47,18 +47,27 @@
     createLogique(200, 100, "logique1","et");
     createLogique(300,200,"logique2","ou");
     createLogique(500,300,"logique3","et");
-    createSwitch("s1", 20, 20,2,2);
+    createLogique(500,400,"logique4","et");
+    
+    createSwitch("s1", 20, 20);
     createSwitch("s2", 20, 90);
     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);
+    createSwitch("s5", 20, 700);
+    createSwitch("s6", 20, 600);
+    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();
+    
+    
     
     </script>
 </body>