Ajout constantes

site/js/const.js

@@ -0,0 +1,15 @@
+const imageHeight = 50;
+const imageWidth = 100;
+const pathImg = "../img/";
+const imageLogiqueEt = "logiqueet.png";
+const imageLogiqueOu = "logiqueou.png";
+const imageEnd = "idea_white.png";
+
+//line
+const colorLineInnactive = "black";
+const colorLineActive = "#f6cd61";
+
+//switch
+const colorSwitchBorder = "black";
+const colorSwitchInnactiveBackground = "red";
+const colorSwitchActiveBackground = "green";

site/js/createElement.js

@@ -0,0 +1,158 @@
+function createEnd(x, y) {
+    var imageObj2 = new Image();
+    imageObj2.onload = function () {
+        var end = new Konva.Image({
+            x: x,
+            y: y,
+            image: imageObj2,
+            width: 50,
+            height: 50,
+            id: "end",
+        });
+
+
+        layer.add(end);
+        layer.batchDraw();
+    };
+    imageObj2.src = pathImg + imageEnd;
+}
+
+function createSwitch(id, x, y) {
+    switchs.push(id);
+    var num = lineCount.length;
+    lineCount.push(1);
+    var rect1 = new Konva.Rect({
+        x: x,
+        y: y,
+        width: 100,
+        height: 50,
+        stroke: colorSwitchBorder,
+        fill: colorSwitchInnactiveBackground,
+        strokeWidth: 4,
+        id: id,
+        id3: null,
+    });
+
+
+    layer.add(rect1);
+
+}
+
+function createLine(points, id) {
+    let line = new Konva.Line({
+        points: points,
+        stroke: colorLineInnactive,
+        strokeWidth: 3,
+        lineCap: 'round',
+        lineJoin: 'round',
+        id: id,
+    });
+    layer.add(line);
+}
+
+
+function createLink(entre, sortie, lineId) {
+    //entre est une porte logique
+    switch (whatIsElement(entre)) {
+        case "switch":
+            switch (whatIsElement(sortie)) {
+                case "logique":
+                    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 + (imageHeight / 3);
+                            createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+                            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 + (imageHeight / 3) * 2], "line" + lineId);
+                            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 + imageWidth;
+                            let switchMidY = entre.y + imageHeight / 2;
+
+                            let logiqueMidX = sortie.x;
+                            let logiqueMidY = sortie.y + (imageHeight / 3);
+                            createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+                            setLine(sortie, "id1", "line" + lineId);
+                            setLine(entre, "id3", "line" + lineId);
+                            break;
+                        case "id2":
+                            createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
+                            setLine(sortie, "id2", "line" + lineId);
+                            setLine(entre, "id3", "line" + lineId);
+                            break;
+                    }
+            }
+            break;
+    }
+}
+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: imageWidth,
+                    height: imageHeight,
+                    id: id,
+                });
+
+
+                layer.add(et);
+                layer.batchDraw();
+            };
+            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;
+    }
+
+
+
+    var logique = {
+        name: id,
+        x: x,
+        y: y,
+        type: type,
+        id1: null,
+        id2: null,
+        id3: null,
+    }
+    logiques.push(logique);
+}

site/js/func.js

@@ -1,66 +1,4 @@
-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;
-  }
-  
-  
-
-  var logique = {
-    name: id,
-    x: x,
-    y: y,
-    type: type,
-    id1: null,
-    id2: null,
-    id3: null,
-  }
-  logiques.push(logique);
-}
-
-
-
-
-
 function whatIsElement(element) {
-
   if (findLogique(element.name) == null) {
     return "switch";
   } else {
@@ -71,170 +9,72 @@ function whatIsElement(element) {
 function setLine(logiqueElement, lineId, lineName) {
   logiques.forEach(function (element, index) {
     if (element.name === logiqueElement.name) {
-      Object.keys(element).map(function(objectKey, index) {
-        if(objectKey == lineId){
+      Object.keys(element).map(function (objectKey, index) {
+        if (objectKey == lineId) {
           element[objectKey] = lineName;
         }
-    });
+      });
     }
   });
 }
 
-function createLink(entre, sortie,lineId) {
-  //entre est une porte logique
-  switch (whatIsElement(entre)) {
-    case "switch":
-      switch (whatIsElement(sortie)) {
-        case "logique":
-          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);
-              createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line"+lineId);
-              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], "line"+lineId);
-              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';
+function changeLineColor(idLine) {
+  let line = stage.findOne("#" + idLine);
+  var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
   line.stroke(colorline);
 }
-function changeLineColorBlack(idLine){
-  let line = stage.findOne("#"+idLine);
-  line.stroke("black");
+function changeLineColorBlack(idLine) {
+  let line = stage.findOne("#" + idLine);
+  line.stroke(colorLineInnactive);
 }
-function changeLineColorYellow(idLine){
-  let line = stage.findOne("#"+idLine);
-  line.stroke("#f6cd61");
+function changeLineColorYellow(idLine) {
+  let line = stage.findOne("#" + idLine);
+  line.stroke(colorLineActive);
 }
 
-function checkAllSortieLogique(){
-  logiques.forEach(function(element){
-    if(element.id3 != null)
+function checkAllSortieLogique() {
+  logiques.forEach(function (element) {
+    if (element.id3 != null)
       checkSortieLogique(element.name);
   });
 }
 
-function checkSortieLogique(logiqueId){
+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"){
+      let line1State, line2State;
+      let id1Color = stage.findOne("#" + element.id1).stroke();
+      let id2Color = stage.findOne("#" + element.id2).stroke();
+      if (id1Color == colorLineInnactive) {
         line1State = false;
       } else {
         line1State = true;
       }
-      if(id2Color == "black"){
+      if (id2Color == colorLineInnactive) {
         line2State = false;
       } else {
         line2State = true;
       }
-      switch(logique.type){
-        case "et" :
-          if(line1State == true && line2State == true){
+      switch (logique.type) {
+        case "et":
+          if (line1State == true && line2State == true) {
             changeLineColorYellow(element.id3);
           }
-          else{
+          else {
             changeLineColorBlack(element.id3);
           }
-          break;  
-        case "ou" :
-          if(line1State == true || line2State == true){
+          break;
+        case "ou":
+          if (line1State == true || line2State == true) {
             changeLineColorYellow(element.id3);
           }
-          else{
+          else {
             changeLineColorBlack(element.id3);
           }
           break;
       }
     }
-});
-}
-
-
-function createLine(points, id) {
-  let line = new Konva.Line({
-    points: points,
-    stroke: 'black',
-    strokeWidth: 3,
-    lineCap: 'round',
-    lineJoin: 'round',
-    id: id,
-  });
-  layer.add(line);
-}
-
-function createSwitch(id, x, y) {
-  switchs.push(id);
-  var num = lineCount.length;
-  lineCount.push(1);
-  var rect1 = new Konva.Rect({
-    x: x,
-    y: y,
-    width: 100,
-    height: 50,
-    stroke: 'black',
-    fill: 'red',
-    strokeWidth: 4,
-    id: id,
-    id3 : null,
-  });
-
-
-  layer.add(rect1);
-
-}
-
-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);
-      checkAllSortieLogique();
-      layer.draw();
-    });
-
   });
 }
 
@@ -252,21 +92,5 @@ function checkLineSwitch(switchId) {
   return false;
 }
 
-function initLayer() {
-  var imageObj2 = new Image();
-  imageObj2.onload = function () {
-    var yoda = new Konva.Image({
-      x: 500,
-      y: 50,
-      image: imageObj2,
-      width: 50,
-      height: 50,
-      id: "et",
-    });
 
 
-    layer.add(yoda);
-    layer.batchDraw();
-  };
-  imageObj2.src = '../img/idea_white.png';
-}

site/js/init.js

@@ -0,0 +1,17 @@
+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);
+        changeLineColor(switche.id3);
+        checkAllSortieLogique();
+        layer.draw();
+      });
+  
+    });
+  }
+
+  function initLayer() {
+    createEnd(500,50);
+  }

site/vues/jeu.html

@@ -4,8 +4,11 @@
 <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/const.js"></script>
   <script src="../js/func.js"></script>
   <script src="../js/logique.js"></script>
+  <script src="../js/init.js"></script>
+  <script src="../js/createElement.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" />