pascal.lafourcade
/
makeittrue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mode

Browse Source
master
pisouvigne 5 years ago
parent dcbe7c1d73
commit be69070088
4 changed files with 121 additions and 48 deletions
Show Stats Download Patch File Download Diff File

42
site/vue/css/style.css
Unescape View File

@ -8,19 +8,17 @@
src: url(../font/dys.otf); src: url(../font/dys.otf);
} }
:root {
--cool-color: #fe8a71;
}
body { body {
font-family: main; height: 91%;
background-color: #D7CCC8;
height: 90%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
:root {
--cool-color: #fe8a71;
}
html { html {
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -240,7 +238,6 @@ html {
.fa-arrow-left { .fa-arrow-left {
font-size: 5vh; font-size: 5vh;
position: absolute;
left: 0; left: 0;
margin: 2vh; margin: 2vh;
transition: .5s; 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 { .timer_show {
font-size: 5vh; font-size: 5vh;
position: absolute;
right: 10vh; right: 10vh;
top: 3vh; top: 3vh;
height: 10vh; height: 10vh;
@ -474,6 +491,11 @@ hr {
border-radius: 50%; border-radius: 50%;
margin: 0; margin: 0;
text-align: center; text-align: center;
transition: 0.5s;
}
.timer_show:hover {
transform: rotate(15deg);
} }
.timer_txt { .timer_txt {

35
site/vue/index.html
Unescape View File

@ -17,32 +17,36 @@
<!--Mode selection--> <!--Mode selection-->
<div id="levelSelectionPage" class="background"> <div id="levelSelectionPage" class="background">
<div id="header_selection" align=center> <div id="header_selection" align=center>
<i class="fa fa-arrow-left home" onclick="closeSelection();" aria-hidden="true"></i>
<h1 class="dys" id="title_selection">Mode Selection</h1> <h1 class="dys" id="title_selection">Mode Selection</h1>
<label></label>
</div> </div>
<hr id="hr"> <hr id="hr">
<div id="selectionContainer"> <div id="selectionContainer">
<div class="border background dys listenerHover"> <div class="border background dys listenerHover" onclick="wait('normal', this)">
<a>Tutoriel</a> <a>Tutoriel</a>
<i class="fa fa-arrow-right" aria-hidden="true"></i> <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
</div> </div>
<div class="border background dys listenerHover" onclick="playNormal()"> <div class="border background dys listenerHover" onclick="wait('normal', this)">
<a>Normal</a> <a>Normal</a>
<i class="fa fa-arrow-right" aria-hidden="true"></i> <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
</div> </div>
<div class="border background dys listenerHover" onclick="modePerso()"> <div class="border background dys listenerHover" onclick="wait('perso', this)">
<a>Personnalisé</a> <a>Personnalisé</a>
<i class="fa fa-arrow-right" aria-hidden="true"></i> <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
</div> </div>
<div class="border background dys listenerHover"> <div class="border background dys listenerHover">
<a>Caméléon</a> <a>Caméléon</a>
<i class="fa fa-arrow-right" aria-hidden="true"></i> <i class="fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
</div> </div>
</div> </div>
</div> </div>
<!--Mode Personnalisé--> <!--Mode Personnalisé-->
<div id="PersoSetupPage" class="background"> <div id="PersoSetupPage" class="background">
<div id="header_perso_setup" align=center> <div id="header_selection" align=center>
<i class="fa fa-arrow-left home" onclick="closePerso();" aria-hidden="true"></i>
<h1 class="dys" id="title_perso_setup">Mode Perso</h1> <h1 class="dys" id="title_perso_setup">Mode Perso</h1>
<label></label>
</div> </div>
<hr id="hr"> <hr id="hr">
<div id="perso-setupContainer" class="dys"> <div id="perso-setupContainer" class="dys">
@ -99,9 +103,10 @@
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a> <p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a>
</p> </p>
<div id="show_stage" class="border"></div><br> <div id="show_stage" class="border"></div><br>
<button class="border dys background color" id="button_next_level" onmouseover="hoverButton()" <div class="border background dys listenerHover" onclick="closeModal('success');nextLevel();"">
onclick="closeModal('success');nextLevel();">Niveau <a>Niveau suivant</a>
suivant</button><br><br> <i class=" fa fa-arrow-right" id="right_select" aria-hidden="true"></i>
</div><br><br>
<p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox" <p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
id="success_check_input" onclick="successCheck();" checked></p> id="success_check_input" onclick="successCheck();" checked></p>
</div> </div>
@ -221,13 +226,15 @@
</div> </div>
</div> </div>
<div class="menu border"> <div class="menu border">
<div class="header_play">
<a onclick="closeGame();"><i class="fa fa-home home" aria-hidden="true"></i></a>
<div align=center> <div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<div class="timer_show dys border"><span class="timer_txt"></span></div>
<p id="modeDeJeu" class="txt dys"></p> <p id="modeDeJeu" class="txt dys"></p>
<p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p> <p><a id="niveau" class="txt dys"></a><a class="dys niveau"></a></p>
</div> </div>
<div class="timer_show dys border"><span class="timer_txt"></span></div>
</div>
</div> </div>
<br> <br>
<div id="play_container" class="border"> <div id="play_container" class="border">

64
site/vue/js/func.js
Unescape View File

@ -91,11 +91,13 @@ document.querySelectorAll(".listenerHover").forEach(function (element) {
function mouseOver(button) { function mouseOver(button) {
button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor; button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
button.style.color = document.querySelector(".modal-body").style.backgroundColor; button.style.color = document.querySelector(".modal-body").style.backgroundColor;
button.childNodes[3].style.transform = "rotate(-15deg)";
} }
function mouseOut(button) { function mouseOut(button) {
button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor; button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
button.style.color = document.querySelector(".modal-body").style.borderColor; button.style.color = document.querySelector(".modal-body").style.borderColor;
button.childNodes[3].style.transform = "rotate(0deg)";
} }
function setLang(newLang) { function setLang(newLang) {
@ -553,23 +555,47 @@ function changeAllLineColorInActive(color) {
colorLineInnactive = color; colorLineInnactive = color;
layer.draw(); 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() { function play() {
document.querySelector("#mainPage").style.display = 'none'; hideDiv(document.querySelector("#mainPage"));
document.querySelector("#levelSelectionPage").style.display = 'block'; showDiv(document.querySelector("#levelSelectionPage"));
} }
function modePerso() { function modePerso() {
document.querySelector("#levelSelectionPage").style.display = 'none'; document.querySelector("#generate_button_perso").childNodes[3].classList = "fa fa-arrow-right";
document.querySelector("#PersoSetupPage").style.display = 'block'; hideDiv(document.querySelector("#levelSelectionPage"));
showDiv(document.querySelector("#PersoSetupPage"));
} }
function playNormal() { function playNormal() {
document.querySelector("#levelSelectionPage").style.display = 'none';
document.querySelector("#playPage").style.display = 'block'; hideDiv(document.querySelector("#levelSelectionPage"));
showDiv(document.querySelector("#playPage"));
niveauActuel = 1; niveauActuel = 1;
timeTot = 0; timeTot = 0;
launchGameOne(); 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) { function colonne_check_setup(value) {
if (value != "" || value != null || value != undefined) { if (value != "" || value != null || value != undefined) {
@ -582,7 +608,6 @@ function colonne_check_setup(value) {
var label = document.createElement("label"); var label = document.createElement("label");
let colonne_number = i + 1; let colonne_number = i + 1;
input.type = "number"; input.type = "number";
input.value = 1;
input.oninput = refresh_input; input.oninput = refresh_input;
input.id = i; input.id = i;
input.classList = "input_refresh"; input.classList = "input_refresh";
@ -594,11 +619,15 @@ function colonne_check_setup(value) {
document.querySelector('#colonne_number_ask').appendChild(div); document.querySelector('#colonne_number_ask').appendChild(div);
} }
} }
refresh_input();
} }
function refresh_input(e) { function refresh_input() {
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 = "0";
document.querySelector("#colonne_number_setup_global").value = parseInt(document.querySelector("#colonne_number_setup_global").value) + parseInt(e.target.value); 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) { function show_more_perso(div) {
@ -635,11 +664,20 @@ function clearArray(arr) {
function closeGame() { function closeGame() {
timer.stop(); timer.stop();
document.querySelector("#mainPage").style.display = 'block'; showDiv(document.querySelector("#mainPage"));
document.querySelector("#playPage").style.display = 'none'; hideDiv(document.querySelector("#playPage"));
resetAllTabs(false); resetAllTabs(false);
tutoCreateLayer(); tutoCreateLayer();
} }
function closeSelection() {
showDiv(document.querySelector("#mainPage"));
hideDiv(document.querySelector("#levelSelectionPage"));
}
function closePerso() {
showDiv(document.querySelector("#levelSelectionPage"));
hideDiv(document.querySelector("#PersoSetupPage"));
}
var rotated = false; var rotated = false;
function flip() { function flip() {
document.querySelectorAll(".fa").forEach(function (element) { document.querySelectorAll(".fa").forEach(function (element) {

22
site/vue/js/generateGame.js
Unescape View File

@ -51,6 +51,7 @@ function loadPerso() {
colonneTot = 0; colonneTot = 0;
while (porteTotal > 2) { while (porteTotal > 2) {
porteTotal = porteTotal / 2; porteTotal = porteTotal / 2;
console.log(porteTotal);
numberPerColonne.push(porteTotal); numberPerColonne.push(porteTotal);
colonneTot++; colonneTot++;
} }
@ -71,11 +72,17 @@ function loadPerso() {
generate_perso_level(); generate_perso_level();
} }
} }
function spin(button) {
function buttonSpin() { button.childNodes[3].classList = "fa fa-spinner";
document.querySelector("#generate_button_perso").childNodes[3].classList = "fa fa-spinner"; }
setTimeout(loadPerso, 10); 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) { function createGameOne(niveau) {
windowWidth = window.innerWidth; windowWidth = window.innerWidth;
@ -132,12 +139,11 @@ function createGameOne(niveau) {
timeEnd = 20; timeEnd = 20;
break; break;
case 9: case 9:
numberColonne1 = 7; numberColonne1 = 4;
numberColonne2 = 10; numberColonne2 = 2;
isNotAllowed = true; isNotAllowed = true;
isOuAllowed = true;
double = true; double = true;
timeEnd = 5000; timeEnd = 25;
break; break;
case 10: case 10:
firstTime.push("ou"); firstTime.push("ou");

Write Preview
Loading…
Cancel
Save