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 {
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 {

154
site/vue/index.html
Unescape View File

@ -14,6 +14,58 @@
<div id="waitingPage" class="background">
<p>Loading Stage</p>
</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-->
<div id="playPage">
<div id="success" class="modal">
@ -22,10 +74,12 @@
<span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
<h1 class="txt dys" id="successTitle"></h1>
<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>
<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"
id="success_check_input" onclick="successCheck();" checked></p>
</div>
@ -164,20 +218,7 @@
<p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
</div>
<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>
</li>
</ul>
<a onclick="play();"><i class="far fa-play-circle"></i></a>
</div>
<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>
@ -189,14 +230,14 @@
<div id="setting_int" class="modal-body border background" align=center>
<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">
<br>
<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>
<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>
<br>
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
@ -319,58 +360,83 @@
<span class="close" onclick="closeModal('infoModal')">&times;</span>
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
<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
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.

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

@ -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() {

Write Preview
Loading…
Cancel
Save