From 8b2aa8f905558dc05610883aa35513b56f1db274 Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Sat, 13 Jun 2020 19:10:46 +0200 Subject: [PATCH] travail --- site/vue/css/style.css | 2 +- site/vue/index.html | 4 +- site/vue/jeu.html | 138 +++++++++++++++++++++++++++++++++++ site/vue/js/const.js | 6 +- site/vue/js/createElement.js | 30 ++++---- site/vue/js/func.js | 16 +++- site/vue/js/lang.js | 10 ++- 7 files changed, 179 insertions(+), 27 deletions(-) create mode 100644 site/vue/jeu.html diff --git a/site/vue/css/style.css b/site/vue/css/style.css index b48855c..103db7d 100644 --- a/site/vue/css/style.css +++ b/site/vue/css/style.css @@ -204,7 +204,7 @@ img { } img:hover { - height: 60px; + opacity: 1; cursor: pointer; } diff --git a/site/vue/index.html b/site/vue/index.html index 38719eb..a8e5228 100644 --- a/site/vue/index.html +++ b/site/vue/index.html @@ -48,7 +48,7 @@



-

+

Personnalisation du jeu

Couleur ligne active :

Couleur ligne innactive :

+

Couleur ligne innactive :

diff --git a/site/vue/jeu.html b/site/vue/jeu.html new file mode 100644 index 0000000..73d101d --- /dev/null +++ b/site/vue/jeu.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + Make It True + + + + + + + +
+

Niveau 0

+
+ Temps : + 0 m 0 s + 20 +
+
+
+
+ + + + \ No newline at end of file diff --git a/site/vue/js/const.js b/site/vue/js/const.js index a2c309c..85c4497 100644 --- a/site/vue/js/const.js +++ b/site/vue/js/const.js @@ -9,10 +9,10 @@ const whiteColor = "#D7CCC8"; //Image const pathImg = "img/"; const imageLogiqueEt = "and_test.png"; -const imageLogiqueOu = "ou.png"; -const imageLogiqueEtNon = "nand.png"; +const imageLogiqueOu = "or_test.png"; +const imageLogiqueEtNon = "nand_test.png"; const imageLogiqueInv = "not_test.png"; -const imageLogiqueNonOu = "aaa.png"; +const imageLogiqueNonOu = "nor_test.png"; const imageEnd = "idea_white.png"; //line diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js index 80c9cbc..4bfcb00 100644 --- a/site/vue/js/createElement.js +++ b/site/vue/js/createElement.js @@ -3,21 +3,18 @@ function createEnd() { //find X and Y var X = stage.width() - stage.width() /100 * 5; - var Y = stage.height() / 3; + var Y = stage.height() / 2; - 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(); - }; + var endShape = new Konva.RegularPolygon({ + x: X, + y: Y, + sides: 6, + radius: 30, + fill: '#9a9a9a', + stroke: 'black', + strokeWidth: 4, + id : "end", + }); end = { name: "end", x: X, @@ -26,7 +23,8 @@ function createEnd() { position: 1, let:1, } - imageObj2.src = pathImg + imageEnd; + end.x = end.x - endShape.width() / 2; + layer.add(endShape); } function createSwitch(id, x, y) { @@ -128,7 +126,7 @@ function createEnd() { break; default: endLines.push(lineId); - createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / end.position)*end.let], "line" + lineId); + createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y], "line" + lineId); setLine(entre, "id3", "line" + lineId); end.let--; break; diff --git a/site/vue/js/func.js b/site/vue/js/func.js index 631e8b2..39fee06 100644 --- a/site/vue/js/func.js +++ b/site/vue/js/func.js @@ -74,13 +74,17 @@ function setLang(newLang) { textToChange.forEach(function (item) { let currText = item.id; document.getElementById(currText).innerHTML = lang.fr[currText]; - }) + }); + document.querySelector(".img_france").style.opacity = 1; + document.querySelector(".img_usa").style.opacity = 0.2; } else { textToChange.forEach(function (item) { let currText = item.id; document.getElementById(currText).innerHTML = lang.en[currText]; - }) + }); + document.querySelector(".img_france").style.opacity = 0.2; + document.querySelector(".img_usa").style.opacity = 1; } } function calculNombreSwitch() { @@ -279,11 +283,15 @@ function activeLineInput(event) { function inactiveLineInput(event) { changeAllLineColorInActive(event.target.value); } +function inactiveEndInput(event) { + changeEndColorInActive(event.target.value); +} document.querySelector("#active_switch_picker").addEventListener("input", activeSwitchInput, false); document.querySelector("#inactive_switch_picker").addEventListener("input", inactiveSwitchInput, false); document.querySelector("#active_line_picker").addEventListener("input", activeLineInput, false); document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false); +document.querySelector("#inactive_end_picker").addEventListener("input", inactiveEndInput, false); function changeAllSwitchColorActive(color){ switchsInfoCopy.forEach(function(element){ @@ -295,6 +303,10 @@ function changeAllSwitchColorActive(color){ colorSwitchActiveBackground = color; layer.draw(); } +function changeEndColorInActive(color){ + stage.findOne("#end").fill(color); + layer.draw(); +} function changeAllSwitchColorInActive(color){ switchsInfoCopy.forEach(function(element){ var switche = stage.findOne("#"+element.id); diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js index 1b664b2..bd57340 100644 --- a/site/vue/js/lang.js +++ b/site/vue/js/lang.js @@ -9,12 +9,13 @@ const lang = { retour: "Retour", dysfont: "Dyslexie :", setting_title_perso: "Personnalisation du jeu", - active_line_setting : "Couleur lines active : ", - inactive_line_setting : "Couleur lines innactive : ", - active_switch_setting : "Couleur switchs active : ", - inactive_switch_setting : "Couleur switchs innactive : ", + active_line_setting : "Couleur lines actives : ", + inactive_line_setting : "Couleur lines innactives : ", + active_switch_setting : "Couleur switchs actif : ", + inactive_switch_setting : "Couleur switchs innactif : ", scoreTitle: "Tableau des scores", infoTitle: "Comment jouer ?", + inactive_end_setting: "Couleur fin : ", }, en: { titleGame: "Make It True", @@ -32,5 +33,6 @@ const lang = { inactive_switch_setting : "Color inactive switchs : ", scoreTitle: "Scoreboard", infoTitle: "How to play ?", + inactive_end_setting: "End color : ", } } \ No newline at end of file