From be69070088a9418dd243e3c8e20caec7c631e4a1 Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Tue, 23 Jun 2020 21:18:24 +0200 Subject: [PATCH] mode --- site/vue/css/style.css | 42 +++++++++++++++++------ site/vue/index.html | 37 ++++++++++++-------- site/vue/js/func.js | 68 +++++++++++++++++++++++++++++-------- site/vue/js/generateGame.js | 22 +++++++----- 4 files changed, 121 insertions(+), 48 deletions(-) diff --git a/site/vue/css/style.css b/site/vue/css/style.css index 9b6ca5e..fbc10d0 100644 --- a/site/vue/css/style.css +++ b/site/vue/css/style.css @@ -8,19 +8,17 @@ src: url(../font/dys.otf); } -:root { - --cool-color: #fe8a71; -} - - body { - font-family: main; - background-color: #D7CCC8; - height: 90%; + height: 91%; margin: 0; padding: 0; } + +:root { + --cool-color: #fe8a71; +} + html { height: 100%; margin: 0; @@ -240,7 +238,6 @@ html { .fa-arrow-left { font-size: 5vh; - position: absolute; left: 0; margin: 2vh; transition: .5s; @@ -464,9 +461,29 @@ hr { } } +.header_play { + display: flex; + align-items: center; + padding: 0 50px 0 50px; + justify-content: space-between; +} + +.home { + font-size: 6vh; + transition: 0.5s; +} + +.home:hover { + transform: rotate(-15deg); +} + +#header_selection { + display: flex; + justify-content: space-between; +} + .timer_show { font-size: 5vh; - position: absolute; right: 10vh; top: 3vh; height: 10vh; @@ -474,6 +491,11 @@ hr { border-radius: 50%; margin: 0; text-align: center; + transition: 0.5s; +} + +.timer_show:hover { + transform: rotate(15deg); } .timer_txt { diff --git a/site/vue/index.html b/site/vue/index.html index a6ee902..9e76cc4 100644 --- a/site/vue/index.html +++ b/site/vue/index.html @@ -17,32 +17,36 @@
+

Mode Selection

+
-
+
Tutoriel - +
-
+
Normal - +
-
+
Personnalisé - +
Caméléon - +
-
+
+

Mode Perso

+
@@ -99,9 +103,10 @@

click(s)


-

+
+ Niveau suivant + +


Toujours afficher ce panneau

@@ -221,12 +226,14 @@
-
+
+ +
+

+

+
-
-

-


diff --git a/site/vue/js/func.js b/site/vue/js/func.js index 86e7121..c57ad0c 100644 --- a/site/vue/js/func.js +++ b/site/vue/js/func.js @@ -91,11 +91,13 @@ document.querySelectorAll(".listenerHover").forEach(function (element) { function mouseOver(button) { button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor; button.style.color = document.querySelector(".modal-body").style.backgroundColor; + button.childNodes[3].style.transform = "rotate(-15deg)"; } function mouseOut(button) { button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor; button.style.color = document.querySelector(".modal-body").style.borderColor; + button.childNodes[3].style.transform = "rotate(0deg)"; } function setLang(newLang) { @@ -553,23 +555,47 @@ function changeAllLineColorInActive(color) { colorLineInnactive = color; layer.draw(); } +function hideDiv(div) { + div.style.display = 'none'; +} +function showDiv(div) { + if (div.id == "levelSelectionPage") { + document.querySelectorAll("#right_select").forEach(function (element) { + element.classList = "fa fa-arrow-right"; + }); + } + div.style.display = 'block' +} function play() { - document.querySelector("#mainPage").style.display = 'none'; - document.querySelector("#levelSelectionPage").style.display = 'block'; - + hideDiv(document.querySelector("#mainPage")); + showDiv(document.querySelector("#levelSelectionPage")); } function modePerso() { - document.querySelector("#levelSelectionPage").style.display = 'none'; - document.querySelector("#PersoSetupPage").style.display = 'block'; + document.querySelector("#generate_button_perso").childNodes[3].classList = "fa fa-arrow-right"; + hideDiv(document.querySelector("#levelSelectionPage")); + showDiv(document.querySelector("#PersoSetupPage")); } function playNormal() { - document.querySelector("#levelSelectionPage").style.display = 'none'; - document.querySelector("#playPage").style.display = 'block'; + + hideDiv(document.querySelector("#levelSelectionPage")); + showDiv(document.querySelector("#playPage")); niveauActuel = 1; timeTot = 0; launchGameOne(); } +function wait(mode, btn) { + var time = 300; + spin(btn); + switch (mode) { + case "normal": + setTimeout(playNormal, time); + break; + case "perso": + setTimeout(modePerso, time); + break; + } +} function colonne_check_setup(value) { if (value != "" || value != null || value != undefined) { @@ -582,7 +608,6 @@ function colonne_check_setup(value) { var label = document.createElement("label"); let colonne_number = i + 1; input.type = "number"; - input.value = 1; input.oninput = refresh_input; input.id = i; input.classList = "input_refresh"; @@ -594,11 +619,15 @@ function colonne_check_setup(value) { document.querySelector('#colonne_number_ask').appendChild(div); } } -} -function refresh_input(e) { - if (document.querySelector("#colonne_number_setup_global").value == "" || document.querySelector("#colonne_number_setup_global").value == undefined || document.querySelector("#colonne_number_setup_global").value == null) - document.querySelector("#colonne_number_setup_global").value = "0"; - document.querySelector("#colonne_number_setup_global").value = parseInt(document.querySelector("#colonne_number_setup_global").value) + parseInt(e.target.value); + refresh_input(); +} +function refresh_input() { + document.querySelector("#colonne_number_setup_global").value = "0"; + document.querySelectorAll(".input_refresh").forEach(function (element) { + if (element.value == "" || element.value == null || element.value == undefined) + element.value = '0'; + document.querySelector("#colonne_number_setup_global").value = parseInt(document.querySelector("#colonne_number_setup_global").value) + parseInt(element.value); + }); } function show_more_perso(div) { @@ -635,11 +664,20 @@ function clearArray(arr) { function closeGame() { timer.stop(); - document.querySelector("#mainPage").style.display = 'block'; - document.querySelector("#playPage").style.display = 'none'; + showDiv(document.querySelector("#mainPage")); + hideDiv(document.querySelector("#playPage")); resetAllTabs(false); tutoCreateLayer(); } + +function closeSelection() { + showDiv(document.querySelector("#mainPage")); + hideDiv(document.querySelector("#levelSelectionPage")); +} +function closePerso() { + showDiv(document.querySelector("#levelSelectionPage")); + hideDiv(document.querySelector("#PersoSetupPage")); +} var rotated = false; function flip() { document.querySelectorAll(".fa").forEach(function (element) { diff --git a/site/vue/js/generateGame.js b/site/vue/js/generateGame.js index f45ab57..0588f48 100644 --- a/site/vue/js/generateGame.js +++ b/site/vue/js/generateGame.js @@ -51,6 +51,7 @@ function loadPerso() { colonneTot = 0; while (porteTotal > 2) { porteTotal = porteTotal / 2; + console.log(porteTotal); numberPerColonne.push(porteTotal); colonneTot++; } @@ -71,12 +72,18 @@ function loadPerso() { generate_perso_level(); } } - -function buttonSpin() { - document.querySelector("#generate_button_perso").childNodes[3].classList = "fa fa-spinner"; - setTimeout(loadPerso, 10); +function spin(button) { + button.childNodes[3].classList = "fa fa-spinner"; +} +function stopspin(button) { + button.childNodes[3].classList = "fa fa-arrow-right"; +} +function buttonSpin(button) { + spin(document.querySelector("#generate_button_perso")); + setTimeout(loadPerso, 1000); } + function createGameOne(niveau) { windowWidth = window.innerWidth; windowHeight = window.innerHeight; @@ -132,12 +139,11 @@ function createGameOne(niveau) { timeEnd = 20; break; case 9: - numberColonne1 = 7; - numberColonne2 = 10; + numberColonne1 = 4; + numberColonne2 = 2; isNotAllowed = true; - isOuAllowed = true; double = true; - timeEnd = 5000; + timeEnd = 25; break; case 10: firstTime.push("ou");