From a5dae46111ffd0b552f8ca8818c0600b63dd2f35 Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Tue, 23 Jun 2020 12:19:49 +0200 Subject: [PATCH] personnalisation --- site/vue/css/style.css | 50 ++++++++++++- site/vue/index.html | 154 +++++++++++++++++++++++++++++------------ site/vue/js/func.js | 59 ++++++++++++---- 3 files changed, 205 insertions(+), 58 deletions(-) diff --git a/site/vue/css/style.css b/site/vue/css/style.css index 48d3ad7..3fc846f 100644 --- a/site/vue/css/style.css +++ b/site/vue/css/style.css @@ -19,7 +19,9 @@ body { font-family: main; background-color: #D7CCC8; - height: 91%; + height: 90%; + margin: 0; + padding: 0; } html { @@ -39,17 +41,61 @@ html { height: 100%; } +.buttonLevel { + height: 100px; + width: 300px; + font-size: large; + transition: .5s; + margin-bottom: 2%; +} + +.buttonLevel:hover { + cursor: pointer; +} + +#PersoSetupPage { + display: none; + height: 100%; +} + +#levelSelectionPage { + display: none; + height: 100%; +} + +#selectionContainer { + height: 95%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; +} + +#perso-setupContainer { + height: 95%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: start +} + #menu-selection { position: absolute; left: 0; right: 0; - bottom: 0; margin: 25vh auto; text-align: center; } .fa-play-circle { font-size: 15vh; + transition: font-size 0.5s, color 0.5s, transform 0.5s; +} + +.fa-play-circle:hover { + font-size: 18vh; + color: var(--cool-color); + transform: rotate(-15deg); } .message { diff --git a/site/vue/index.html b/site/vue/index.html index 06e9820..cb23fd7 100644 --- a/site/vue/index.html +++ b/site/vue/index.html @@ -14,6 +14,58 @@

Loading Stage

+ +
+
+

Mode Selection

+
+
+
+ + + + +
+
+ +
+
+

Mode Perso

+
+
+
+
+

Fonctions Logiques :

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+



+ +
+ + +


+
+
@@ -164,20 +218,7 @@

Make It True

@@ -189,14 +230,14 @@
× -

Parametres

+


- Theme dark +

- DYSLEXIE +



@@ -319,58 +360,83 @@ ×

Tableau des scores

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada + lectus. Morbi - imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat - facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend + imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit + feugiat + facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis + eleifend porta. - Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum + Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id + dictum sapien. - Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper + Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras + semper urna - sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et + sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices - posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor. + posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat + tortor. Aenean imperdiet hendrerit arcu, vel faucibus mauris porttitor quis. - Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec - laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. + Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est + sagittis. Donec + laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis + lacinia. Sed - sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare - elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a + sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus + ornare + elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra + sapien a augue - aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit + aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam + suscipit at - risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec + risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus + ex nec finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue. Interdum et - malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor. + malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis + auctor. - Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis - porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et + Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor + venenatis + porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. + Maecenas et leo ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada tincidunt, - sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra - vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. + sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed + viverra + vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra + leo. Aenean - quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio + quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque + odio efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies lobortis, - odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie + odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est + molestie sollicitudin. - Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis + Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus + venenatis tortor, - vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et + vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, + condimentum et est. - Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut - iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum + Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo + euismod. Ut + iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, + erat ipsum varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis malesuada - eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel + eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, + vel finibus mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam aliquam. diff --git a/site/vue/js/func.js b/site/vue/js/func.js index da02de8..9098141 100644 --- a/site/vue/js/func.js +++ b/site/vue/js/func.js @@ -77,17 +77,25 @@ function setColor(color) { document.querySelector(".secret").style.color = "#fe8a71"; } -document.querySelector("#button_next_level").onmouseover = function () { mouseOver() }; -document.querySelector("#button_next_level").onmouseout = function () { mouseOut() }; +document.querySelector("#button_next_level").onmouseover = function () { mouseOver(document.querySelector("#button_next_level")) }; +document.querySelector("#button_next_level").onmouseout = function () { mouseOut(document.querySelector("#button_next_level")) }; +document.querySelector("#button_mode").onmouseover = function () { mouseOver(document.querySelector("#button_mode")) }; +document.querySelector("#button_mode").onmouseout = function () { mouseOut(document.querySelector("#button_mode")) }; +document.querySelector("#button_mode2").onmouseover = function () { mouseOver(document.querySelector("#button_mode2")) }; +document.querySelector("#button_mode2").onmouseout = function () { mouseOut(document.querySelector("#button_mode2")) }; +document.querySelector("#button_mode3").onmouseover = function () { mouseOver(document.querySelector("#button_mode3")) }; +document.querySelector("#button_mode3").onmouseout = function () { mouseOut(document.querySelector("#button_mode3")) }; +document.querySelector("#button_mode4").onmouseover = function () { mouseOver(document.querySelector("#button_mode4")) }; +document.querySelector("#button_mode4").onmouseout = function () { mouseOut(document.querySelector("#button_mode4")) }; -function mouseOver() { - document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.borderColor; - document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.backgroundColor; +function mouseOver(button) { + button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor; + button.style.color = document.querySelector(".modal-body").style.backgroundColor; } -function mouseOut() { - document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor; - document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.borderColor; +function mouseOut(button) { + button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor; + button.style.color = document.querySelector(".modal-body").style.borderColor; } function setLang(newLang) { @@ -546,14 +554,41 @@ function changeAllLineColorInActive(color) { } function play() { - niveauActuel = 1; - timeTot = 0; document.querySelector("#mainPage").style.display = 'none'; + document.querySelector("#levelSelectionPage").style.display = 'block'; + +} +function modePerso() { + document.querySelector("#levelSelectionPage").style.display = 'none'; + document.querySelector("#PersoSetupPage").style.display = 'block'; +} +function playNormal() { + document.querySelector("#levelSelectionPage").style.display = 'none'; document.querySelector("#playPage").style.display = 'block'; + niveauActuel = 1; + timeTot = 0; launchGameOne(); +} - - +function colonne_check_setup(value) { + if (value != "" || value != null || value != undefined) { + document.querySelectorAll(".colonne_selection").forEach(function (element) { + console.log("e"); + element.remove(); + }); + for (let i = 0; i < value; i++) { + var div = document.createElement("div"); + var input = document.createElement("input"); + var label = document.createElement("label"); + let colonne_number = i + 1; + input.type = "number"; + div.classList.add("colonne_selection"); + label.innerHTML = "Nombre de fonctions dans la colonne " + colonne_number; + div.appendChild(input); + div.appendChild(label); + document.querySelector('#perso-setupContainer').appendChild(div); + } + } } function launchGameOne() {