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

personnalisation

Browse Source
master
pisouvigne 5 years ago
parent a7ba684f51
commit a5dae46111
3 changed files with 205 additions and 58 deletions
Show Stats Download Patch File Download Diff File

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

@ -19,7 +19,9 @@
body { body {
font-family: main; font-family: main;
background-color: #D7CCC8; background-color: #D7CCC8;
height: 91%; height: 90%;
margin: 0;
padding: 0;
} }
html { html {
@ -39,17 +41,61 @@ html {
height: 100%; 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 { #menu-selection {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0;
margin: 25vh auto; margin: 25vh auto;
text-align: center; text-align: center;
} }
.fa-play-circle { .fa-play-circle {
font-size: 15vh; 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 { .message {

152
site/vue/index.html
Unescape View File

@ -14,6 +14,58 @@
<div id="waitingPage" class="background"> <div id="waitingPage" class="background">
<p>Loading Stage</p> <p>Loading Stage</p>
</div> </div>
<!--Mode selection-->
<div id="levelSelectionPage" class="background">
<div id="header_selection" align=center>
<h1 class="dys" id="title_selection">Mode Selection</h1>
</div>
<hr id="hr">
<div id="selectionContainer">
<button class="border dys background color buttonLevel" id="button_mode4">Tuto</button>
<button class="border dys background color buttonLevel" id="button_mode"
onclick="playNormal()">Normal</button>
<button class="border dys background color buttonLevel" id="button_mode2"
onclick="modePerso()">Personnaliser</button>
<button class="border dys background color buttonLevel" id="button_mode3">Cameleon</button>
</div>
</div>
<!--Mode Personnalisé-->
<div id="PersoSetupPage" class="background">
<div id="header_perso_setup" align=center>
<h1 class="dys" id="title_perso_setup">Mode Perso</h1>
</div>
<hr id="hr">
<div id="perso-setupContainer" class="dys">
<div>
<p>Fonctions Logiques : </p>
<div>
<input type="checkbox" id="etLogique" name="etLogique" checked>
<label for="etLogique">ET</label>
</div>
<div>
<input type="checkbox" id="etLogique" name="etLogique">
<label for="etLogique">OU</label>
</div>
<div>
<input type="checkbox" id="etLogique" name="etLogique">
<label for="etLogique">NON</label>
</div>
<div>
<input type="checkbox" id="etLogique" name="etLogique">
<label for="etLogique">NON-ET</label>
</div>
<div>
<input type="checkbox" id="etLogique" name="etLogique">
<label for="etLogique">NON-OU</label>
</div>
</div><br><br><br>
<div>
<input type="number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)">
<label>Nombre de colonnes</label>
</div><br><br>
</div>
</div>
<!--Play Page--> <!--Play Page-->
<div id="playPage"> <div id="playPage">
<div id="success" class="modal"> <div id="success" class="modal">
@ -22,10 +74,12 @@
<span class="close" onclick="closeModal('success');nextLevel();">&times;</span> <span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
<h1 class="txt dys" id="successTitle"></h1> <h1 class="txt dys" id="successTitle"></h1>
<hr id="hr"> <hr id="hr">
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a></p> <p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a>
</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()" <button class="border dys background color" id="button_next_level" onmouseover="hoverButton()"
onclick="closeModal('success');nextLevel();">Niveau suivant</button><br><br> onclick="closeModal('success');nextLevel();">Niveau
suivant</button><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>
@ -164,20 +218,7 @@
<p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p> <p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
</div> </div>
<div class="btn_play" id="menu-selection"> <div class="btn_play" id="menu-selection">
<ul>
<li>
<div class="message">
<a class="txt dys" id="playSelection"></a>
<select id="jeu-select" class="background">
<option value="aleatoire" class="txt background dys" id="mode1"></option>
<option value="perso" class="txt background dys" id="mode2"></option>
</select>
</div>
</li>
<li>
<a onclick="play();"><i class="far fa-play-circle"></i></a> <a onclick="play();"><i class="far fa-play-circle"></i></a>
</li>
</ul>
</div> </div>
<a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a> <a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
<a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a> <a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
@ -189,14 +230,14 @@
<div id="setting_int" class="modal-body border background" align=center> <div id="setting_int" class="modal-body border background" align=center>
<span class="close" onclick="closeModal('myModal')">&times;</span> <span class="close" onclick="closeModal('myModal')">&times;</span>
<h1 class="txt dys" id="settingTitle">Parametres</h1> <h1 class="txt dys" id="settingTitle"></h1>
<hr id="hr"> <hr id="hr">
<br> <br>
<p> <p>
<a class="txt dys" id="themeDark">Theme dark</a> <a class="txt dys" id="themeDark"></a>
<input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p> <input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
<p> <p>
<a class="txt dys" id="dysfont">DYSLEXIE</a> <a class="txt dys" id="dysfont"></a>
<input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p> <input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
<br> <br>
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" /> <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
@ -319,58 +360,83 @@
<span class="close" onclick="closeModal('infoModal')">&times;</span> <span class="close" onclick="closeModal('infoModal')">&times;</span>
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1> <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
<hr id="hr"> <hr id="hr">
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada
lectus.
Morbi Morbi
imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend feugiat
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis
eleifend
porta. 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. 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 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 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 Aenean
imperdiet hendrerit arcu, vel faucibus mauris porttitor quis. imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. sagittis. Donec
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis
lacinia.
Sed Sed
sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a ornare
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra
sapien a
augue 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 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. finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
Interdum et 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 Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et venenatis
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus.
Maecenas et
leo leo
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
tincidunt, tincidunt,
sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. viverra
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra
leo.
Aenean 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 efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
lobortis, 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. 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, 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. est.
Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo
iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum 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 varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
malesuada 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 finibus
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
aliquam. aliquam.

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

@ -77,17 +77,25 @@ function setColor(color) {
document.querySelector(".secret").style.color = "#fe8a71"; document.querySelector(".secret").style.color = "#fe8a71";
} }
document.querySelector("#button_next_level").onmouseover = function () { mouseOver() }; 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").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() { function mouseOver(button) {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.borderColor; button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.backgroundColor; button.style.color = document.querySelector(".modal-body").style.backgroundColor;
} }
function mouseOut() { function mouseOut(button) {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor; button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.borderColor; button.style.color = document.querySelector(".modal-body").style.borderColor;
} }
function setLang(newLang) { function setLang(newLang) {
@ -546,14 +554,41 @@ function changeAllLineColorInActive(color) {
} }
function play() { function play() {
niveauActuel = 1;
timeTot = 0;
document.querySelector("#mainPage").style.display = 'none'; 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'; document.querySelector("#playPage").style.display = 'block';
niveauActuel = 1;
timeTot = 0;
launchGameOne(); 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() { function launchGameOne() {

Write Preview
Loading…
Cancel
Save