From ec67becd4c59f7676c9dd6fa2bfab9960a51c80b Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Wed, 17 Jun 2020 17:56:33 +0200 Subject: [PATCH] pisouvigne --- site/test/js/createElement.js | 1 + site/vue/css/style.css | 24 ++++- site/vue/index.html | 121 +++++++++++++++++---- site/vue/js/class.js | 196 +++++++++++++++++++++++++++++----- site/vue/js/createElement.js | 1 + site/vue/js/lang.js | 4 + site/vue/js/main.js | 142 +++++++++++++++--------- site/vue/todo.todo | 32 ++++++ 8 files changed, 424 insertions(+), 97 deletions(-) create mode 100644 site/vue/todo.todo diff --git a/site/test/js/createElement.js b/site/test/js/createElement.js index c2deb3d..7d31536 100644 --- a/site/test/js/createElement.js +++ b/site/test/js/createElement.js @@ -199,6 +199,7 @@ function switchCreator(number){ } function insertLogiqueColonne(nomLogique, TypeLogique, colonne){ + console.log(TypeLogique); var X = stage.width() / (colonneTot+1) * (colonne+1); //calcul position Y if(numberPerColonne[colonne] == 1){ diff --git a/site/vue/css/style.css b/site/vue/css/style.css index 0bd132d..18f0cb6 100644 --- a/site/vue/css/style.css +++ b/site/vue/css/style.css @@ -140,7 +140,7 @@ i:hover { .modal { display: none; position: fixed; - z-index: 1; + z-index: 100; padding-top: 2%; left: 0; top: 0; @@ -248,6 +248,28 @@ hr{ color:red; cursor: pointer; } + +.margin-right{ + margin-right: 5%; +} +.margin-global{ + margin-left: 2%; + margin-right: 2%; +} +.veriteTable{ + border-collapse: collapse; + border-radius: 15px; + overflow: hidden; + text-align: center; + width: 30%; +} +.veriteTable th{ + height: 3em; +} +.veriteTable td{ + height: 2em; +} + #playPage{ display: none; flex-direction: column; diff --git a/site/vue/index.html b/site/vue/index.html index f487292..30cf93c 100644 --- a/site/vue/index.html +++ b/site/vue/index.html @@ -10,6 +10,104 @@ + +
+ + +
+
+ +

Mode de jeu

+

Niveau 1

+

Temps : 0 s0 s

+
+
+ +
+
+
+
+ +
+
+ - -
-
-
- -

Mode de jeu

-

Niveau 1

-

Temps : 0 s0 s

-
-
- -
-
-
-
- -
-
+ + diff --git a/site/vue/js/class.js b/site/vue/js/class.js index 5cc4e64..8d182f9 100644 --- a/site/vue/js/class.js +++ b/site/vue/js/class.js @@ -1,33 +1,173 @@ -class gameData { - - constructor(hauteur, largeur) { - this.hauteur = hauteur; - this.largeur = largeur; +class GameData { + + hauteur; + largeur; + timeEnd; + numberColonne1; + numberColonne2; + isEtNonAllowed; + isOuNonAllowed; + niveau; + isTuto; + mode; + container; + colonneTot; + + constructor(hauteur, largeur, colonneTot, timeEnd, mode, isTuto, container) { + this.hauteur = hauteur; + this.largeur = largeur; + this.timeEnd = timeEnd; + this.numberColonne1 = 2; + this.numberColonne2 = 1; + this.isEtNonAllowed = false; + this.isOuNonAllowed = false; + this.niveau = 1; + this.mode = mode; + this.isTuto = isTuto; + this.container = container; + this.colonneTot = colonneTot; + } + + createStageCanvas() { + stage = new Konva.Stage({ + container: this.container, + /*rotation: -90, + x: 20, + y: 1000,*/ + width: this.hauteur, + height: this.largeur, + }); + stage.add(layer); + } + + generateRandomDoor() { + numberPerColonne = [this.numberColonne1, this.numberColonne2]; + var logiqueCount = 0; + + for (let i = 0; i < this.colonneTot; i++) { + liveColonneNumber.push([]); } + for (let i = 0; i < this.colonneTot; i++) { + for (let j = 0; j < numberPerColonne[i]; j++) { + logiqueCount++; + let type = null; + switch (getRandomArbitrary(0, 4)) { + case 0: + type = "et"; + break; + case 1: + type = "ou"; + break; + case 2: + if (this.isEtNonAllowed) { + type = "etnon"; + } else { + type = "et"; + } + break; + case 3: + if (this.isOuNonAllowed) { + type = "nonou"; + } else { + type = "et"; + } + break; + } + insertLogiqueColonne("logique" + logiqueCount, type, i); + } + } + logiques.forEach(function (element) { + createLinkAuto(element.name); + }); + } + + + + setDifficulty(niveau) { + switch (niveau) { + case 1: + case 2: + timeEnd = 5; + break; + case 3: + case 4: + timeEnd = 4; + break; + case 5: + timeEnd = 3; + break; + case 6: + case 7: + case 8: + isEtNonAllowed = true; + timeEnd = 5; + numberColonne1 = 3; + break; + case 9: + case 10: + case 11: + isEtNonAllowed = true; + timeEnd = 4; + numberColonne1 = 3; + break; + case 12: + case 13: + case 14: + isEtNonAllowed = true; + isOuNonAllowed = true; + timeEnd = 4; + numberColonne1 = 3; + break; + default: + isEtNonAllowed = true; + isOuNonAllowed = true; + timeEnd = 3; + numberColonne1 = 4; + break; + } + } + createGame(){ + + this.setDifficulty(this.niveau); + initTimer(); + this.createStageCanvas(); + this.generateRandomDoor(); + + calculNombreSwitch(); + switchCreator(numberOfSwitch); + console.log(stage); + createAllLinkSwitch(); + + initAllSwitch(); + createEnd(); + initEnd(); + + checkAllSortieLogique(); + } } function createSwitch(id, x, y) { - var switche = { - id : id, - x : x, - y : y, - }; - switchsInfo.push(switche); - switchsInfoCopy.push(switche); - switchs.push(id); - var num = lineCount.length; - lineCount.push(1); - var rect1 = new Konva.Rect({ - x: x, - y: y, - width: SwitchWidth, - height: SwitchHeight, - stroke: colorSwitchBorder, - fill: colorSwitchInnactiveBackground, - strokeWidth: 4, - id: id, - id3: null, - }); - layer.add(rect1); - } \ No newline at end of file + var switche = { + id: id, + x: x, + y: y, + }; + switchsInfo.push(switche); + switchsInfoCopy.push(switche); + switchs.push(id); + var num = lineCount.length; + lineCount.push(1); + var rect1 = new Konva.Rect({ + x: x, + y: y, + width: SwitchWidth, + height: SwitchHeight, + stroke: colorSwitchBorder, + fill: colorSwitchInnactiveBackground, + strokeWidth: 4, + id: id, + id3: null, + }); + layer.add(rect1); +} \ No newline at end of file diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js index 4bfcb00..28434c5 100644 --- a/site/vue/js/createElement.js +++ b/site/vue/js/createElement.js @@ -136,6 +136,7 @@ function createEnd() { } } function createLogique(x, y, id, type) { + console.log(layer); var imageObj = new Image(); imageObj.onload = function () { var et = new Konva.Image({ diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js index b207515..1d1ecbe 100644 --- a/site/vue/js/lang.js +++ b/site/vue/js/lang.js @@ -20,6 +20,10 @@ const lang = { modeDeJeu : "Mode de jeu", niveau : "Niveau ", temps: "Temps : ", + infoFirstTimeEt: "Porte \"et\"", + infoFirstTimeEtInfo1: "L'opérateur ET renvoie VRAI seulement si ses deux entrées sont à 1.


Voici la table de vérité :", + infoFirstTimeOu: "Porte \"ou\"", + infoFirstTimeOuInfo1: "L'opérateur OU renvoie VRAI si au moins une entrés est à 1.


Voici la table de vérité :", }, en: { diff --git a/site/vue/js/main.js b/site/vue/js/main.js index 14f0cd7..d3a654a 100644 --- a/site/vue/js/main.js +++ b/site/vue/js/main.js @@ -8,7 +8,7 @@ function initAll() { var mobile = false; var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = []; var width = window.innerWidth - window.innerWidth / 100 * 30; -var height = window.innerHeight /2.5; +var height = window.innerHeight / 2.5; var stage = new Konva.Stage({ container: 'setting_container', width: width, @@ -20,7 +20,7 @@ tutoCreateLayer(); function tutoCreateLayer() { isTuto = true; width = window.innerWidth - window.innerWidth / 100 * 30; - height = window.innerHeight /2.5; + height = window.innerHeight / 2.5; stage = new Konva.Stage({ container: 'setting_container', width: width, @@ -48,7 +48,7 @@ function tutoCreateLayer() { function resetAllTabs() { switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = []; width = window.innerWidth - window.innerWidth / 100 * 10; - height = window.innerHeight /1.5; + height = window.innerHeight / 1.5; timeEnd = 5; numberOfSwitch = 0; @@ -62,35 +62,75 @@ function resetAllTabs() { function gameOne() { createGameOne(niveauActuel); + //console.log(stage); + //gameData = new GameData(height,width,2,10,"mode1",false,"play_container"); + //gameData.createGame(); + + //checkAllSortieLogique(); } -function createGameOne(niveau){ + + +function createGameOne(niveau) { windowWidth = window.innerWidth; - windowHeight = window.innerHeight ; + windowHeight = window.innerHeight; var numberColonne1 = 2; var numberColonne2 = 1; var isEtNonAllowed = false; var isOuNonAllowed = false; - switch(niveau){ + var isOuAllowed = false; + var firstTime = []; + switch (9) { case 1: + firstTime.push("et"); + break; case 2: + numberColonne1 = 2; + numberColonne2 = 0; timeEnd = 5; break; case 3: + numberColonne1 = 2; + numberColonne2 = 1; + timeEnd = 5; + break; case 4: - timeEnd = 4; + numberColonne1 = 4; + numberColonne2 = 1; + timeEnd = 5; break; + //Fin premiere serie case 5: - timeEnd = 3; + firstTime.push("ou"); + numberColonne1 = 1; + numberColonne2 = 0; + isOuAllowed = true; + timeEnd = 5; break; case 6: + numberColonne1 = 2; + numberColonne2 = 0; + isOuAllowed = true; + timeEnd = 5; + break; case 7: - case 8: - isEtNonAllowed = true; + numberColonne1 = 2; + numberColonne2 = 1; + isOuAllowed = true; timeEnd = 5; + break; + case 8: numberColonne1 = 3; + numberColonne2 = 1; + isOuAllowed = true; + timeEnd = 5; break; case 9: + numberColonne1 = 5; + numberColonne2 = 1; + isOuAllowed = true; + timeEnd = 400; + break; case 10: case 11: isEtNonAllowed = true; @@ -115,51 +155,54 @@ function createGameOne(niveau){ isTuto = false; stage = new Konva.Stage({ container: 'play_container', - /*rotation: -90, - x: 20, - y: 1000,*/ width: width, height: height, }); stage.add(layer); - initTimer(); colonneTot = 2; - numberPerColonne = [numberColonne1,numberColonne2]; + numberPerColonne = [numberColonne1, numberColonne2]; var logiqueCount = 0; - for (let i = 0; i < colonneTot; i++) { + if (firstTime.length > 0) { + numberColonne1 = 1; + numberColonne2 = 0; liveColonneNumber.push([]); - } - for (let i = 0; i < colonneTot; i++) { - for (let j = 0; j < numberPerColonne[i]; j++) { - logiqueCount++; - let type = null; - switch (getRandomArbitrary(0, 4)) { - case 0: - type = "et"; - break; - case 1: - type = "ou"; - break; - case 2: - if(isEtNonAllowed){ - type = "etnon"; - }else{ + timeEnd = 5; + insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0); + openModal('firstTime' + firstTime[0]); + timer.pause(); + } else { + for (let i = 0; i < colonneTot; i++) { + liveColonneNumber.push([]); + } + for (let i = 0; i < colonneTot; i++) { + for (let j = 0; j < numberPerColonne[i]; j++) { + logiqueCount++; + let type = null; + let x = 1; + if(isOuAllowed) x++; + if(isEtNonAllowed) x++; + if(isOuNonAllowed) x++; + let numberRandom = getRandomArbitrary(0, x); + switch (numberRandom) { + case 0: type = "et"; - } - break; - case 3: - if(isOuNonAllowed){ + break; + case 1: + type = "ou"; + break; + case 2: + type = "etnon"; + break; + case 3: type = "nonou"; - }else{ - type = "et"; - } - break; + break; + } + insertLogiqueColonne("logique" + logiqueCount, type, i); } - insertLogiqueColonne("logique" + logiqueCount, type, i); } } - + logiques.forEach(function (element) { createLinkAuto(element.name); }); @@ -170,28 +213,29 @@ function createGameOne(niveau){ initAllSwitch(); createEnd(); initEnd(); - - console.log(layer.scaleX()); + + initTimer(); checkAllSortieLogique(); + } window.addEventListener('resize', changeStage); -function changeStage(){ - if(window.innerWidth <= 900){ +function changeStage() { + if (window.innerWidth <= 900) { console.log("mobile"); - if(!mobile){ + if (!mobile) { stage.rotate(90); stage.x(stage.getX() + stage.height()); mobile = true; } - }else{ + } else { stage.scaleX(window.innerWidth / windowWidth); console.log(document.querySelector("#play_container").offsetHeight); stage.scaleY(window.innerHeight / windowHeight); } - + stage.draw(); } \ No newline at end of file diff --git a/site/vue/todo.todo b/site/vue/todo.todo new file mode 100644 index 0000000..5ac21c0 --- /dev/null +++ b/site/vue/todo.todo @@ -0,0 +1,32 @@ +ctrl + enter to add +alt+d to set done + +Responsive : + ☐ enlever les borders au format mobile + ☐ Faire en sorte que le canvas se réajuste + `Piste` + Faire en sorte que le canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise) + Suite : + ☐ Changer de direction lorsqu'on atteint un certain format + `Piste` + Quand la largeur est inférieur à la hauteur ??? + En dessous d'un certains nombre de pixels ??? Attention aux téléphone haute résolution + +Paramètres : + Choix du types de porte : + ☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image + ☐ Ajouter au menu des paramètres la possibilité de choisir entre les 2 types de portes + ☐ Mettre tout les types de portes dans la prévisualisation + +Jeu : + ☐ Refaire entièrement le "not" pour éviter la fuite de mémoire + ☐ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes + `Piste` + Remplacer l'id3 par une liste d'id3 qu'on parcourerait + ☐ Faire en sorte que les portes d'une colonne autres que la 1ere n'ai que des lignes qui viennent de porte et non des switchs + +UI/UX : + ☐ Trouver une police d'écriture bien pour le jeu + ☐ Corriger les fautes d'orthographes + ☐ Faire la traduction en anglais + \ No newline at end of file