ajout constantes pour éviter les magics numbers

site/js/const.js

@@ -1,5 +1,8 @@
-const imageHeight = 50;
+//Portes Logiques
-const imageWidth = 100;
+const imageHeight = 25;
+const imageWidth = 50;
+
+//Image
 const pathImg = "../img/";
 const imageLogiqueEt = "logiqueet.png";
 const imageLogiqueOu = "logiqueou.png";
@@ -8,8 +11,11 @@ const imageEnd = "idea_white.png";
 //line
 const colorLineInnactive = "black";
 const colorLineActive = "#f6cd61";
+const lineStroke = 1;
 
 //switch
+const SwitchHeight = 25;
+const SwitchWidth = 50;
 const colorSwitchBorder = "black";
 const colorSwitchInnactiveBackground = "red";
 const colorSwitchActiveBackground = "green";

site/js/createElement.js

@@ -24,27 +24,22 @@ function createSwitch(id, x, y) {
   var rect1 = new Konva.Rect({
     x: x,
     y: y,
-    width: 100,
+    width: SwitchWidth,
-    height: 50,
+    height: SwitchHeight,
     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,
+    strokeWidth: lineStroke,
-    lineCap: 'round',
-    lineJoin: 'round',
     id: id,
   });
   layer.add(line);

site/js/init.js

@@ -17,7 +17,6 @@ function initAllSwitch(){
   
     });
   }
-
   function initLayer() {
     createEnd(500,50);
   }

site/vues/jeu.html

@@ -44,12 +44,11 @@
 
     initLayer();
 
-    createLogique(300, 100, "logique1","et");
+    createLogique(200, 100, "logique1","et");
-    createLogique(600,200,"logique2","ou");
+    createLogique(300,200,"logique2","ou");
-    createLogique(900,300,"logique3","et");
+    createLogique(500,300,"logique3","et");
-    createLogique(900,500,"logique4","ou");
+    createSwitch("s1", 20, 20,2,2);
-    createSwitch("s1", 20, 20);
+    createSwitch("s2", 20, 90);
-    createSwitch("s2", 20, 150);
     createSwitch("s3", 20, 300);
     createSwitch("s4", 20, 500);