diff --git a/site/js/const.js b/site/js/const.js
new file mode 100644
index 0000000..030a512
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/site/js/createElement.js b/site/js/createElement.js
new file mode 100644
index 0000000..f8a2afc
--- /dev/null
+++ b/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);
+}
diff --git a/site/js/func.js b/site/js/func.js
index f38518f..8e3c991 100644
--- a/site/js/func.js
+++ b/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';
-}
\ No newline at end of file
diff --git a/site/js/init.js b/site/js/init.js
new file mode 100644
index 0000000..149f9a6
--- /dev/null
+++ b/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);
+ }
\ No newline at end of file
diff --git a/site/vues/jeu.html b/site/vues/jeu.html
index f3a07e4..f9cb76d 100644
--- a/site/vues/jeu.html
+++ b/site/vues/jeu.html
@@ -4,8 +4,11 @@
+
+
+