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

standardisation de la page highscores

Browse Source
master
adplantade 5 years ago
parent 6f06007a22
commit 3602793cdd
7 changed files with 93 additions and 39 deletions
Show Stats Download Patch File Download Diff File

2
code/button_displayer.js
Unescape View File

@ -7,7 +7,7 @@ var modeSelected=null;
var diffSelected=null; var diffSelected=null;
var btn_options=document.getElementById("btn_options"); var btn_options=document.getElementById("btn_options");
btn_options.width=size; btn_options.width=size/2;
document.getElementById("btn_play").width=size; document.getElementById("btn_play").width=size;
document.getElementById("btn_play_des").width=size; document.getElementById("btn_play_des").width=size;

29
code/highscore_button_displayer.js
Unescape View File

@ -90,13 +90,32 @@ function hideAll()
// Dots amount // Dots amount
var slider = document.getElementById("range_dots");
var output = document.getElementById("dotsNumber"); var output = document.getElementById("dotsNumber");
document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4 ); var outputHi = document.getElementById("amountHi");
output.innerHTML = slider.value; var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
output.innerHTML = amount;
slider.oninput = function() { document.getElementById("+").width=size/4;
output.innerHTML = this.value; document.getElementById("-").width=size/4;
function less()
{
if(amount > 2)
{
amount--;
}
output.innerHTML = amount;
outputHi.value=amount;
}
function more()
{
if(amount<8)
{
amount++;
}
output.innerHTML = amount;
outputHi.value=amount;
} }
// pause oui/non // pause oui/non

35
code/highscores.css
Unescape View File

@ -1,12 +1,13 @@
.all-container { .all-container {
display : flex; margin-left: auto;
margin-right: auto;
align-items: baseline; align-items: center;
width : min-content; }
margin: 5px;
.mode-container {
text-align: center;
margin-left: auto;
margin-right: auto;
} }
.button { .button {
@ -100,3 +101,23 @@
.day { background: #eee; color: black; } .day { background: #eee; color: black; }
.night { background: #333; color: white; } .night { background: #333; color: white; }
.logo {
text-align: center;
}
.bd {
/*
border-style: solid;
border-width: 5px;*/
}
.ad { /*
border-style: solid;
border-width: 5px;
border-color: red; */
width: min-content;
margin-left: auto;
margin-right: auto;
}

51
code/highscores.php
Unescape View File

@ -2,18 +2,36 @@
<link rel="stylesheet" type="text/css" href="highscores.css"/> <link rel="stylesheet" type="text/css" href="highscores.css"/>
</head> </head>
<body> <body>
<div>
<div class="logo">
<img src="ress/logo_dark.png" id="logo"/>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/> </div>
</div>
<form action="highscores.php" method="post"> <form action="highscores.php" method="post">
<div id="modeSelection">
<ul id="modes"> <div id="modeSelection" class="mode-container">
<ul id="diff" class="all-container bd">
<input type="radio" class="rad" name="difficulty" id="easy" value="easy" />
<label for="easy"><img id="img_easy" class="button" src="./ress/button_diff_easy.png"/></label>
<input type="radio" class="rad" name="difficulty" id="med" value="med" />
<label for="med"><img id="img_med" class="button" src="./ress/button_diff_normal.png"/></label>
<input type="radio" class="rad" name="difficulty" id="hard" value="hard" />
<label for="hard"><img id="img_hard" class="button" src="./ress/button_diff_hard.png"/></label>
</ul>
<ul id="modes" class="all-container bd">
<img id="img_points" class="button" src="./ress/button_mode_points.png"/> <img id="img_points" class="button" src="./ress/button_mode_points.png"/>
<img id="img_temps" class="button" src="./ress/button_mode_temps.png"/> <img id="img_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="img_survie" class="button" src="./ress/button_mode_survie.png"/> <img id="img_survie" class="button" src="./ress/button_mode_survie.png"/>
</ul> </ul>
<ul id="points" class="all-container"> <ul id="points" class="all-container ad">
<input type="radio" class="rad" name="game_mode" id="5p" value="5p" /> <input type="radio" class="rad" name="game_mode" id="5p" value="5p" />
<label for="5p"><img id="img_5p" class="button" src="./ress/button_points_5.png"/></label> <label for="5p"><img id="img_5p" class="button" src="./ress/button_points_5.png"/></label>
@ -27,7 +45,7 @@
<label for="20p"><img id="img_20p" class="button" src="./ress/button_points_20.png"/></label> <label for="20p"><img id="img_20p" class="button" src="./ress/button_points_20.png"/></label>
</ul> </ul>
<ul id="temps" class="all-container"> <ul id="temps" class="all-container ad">
<input type="radio" class="rad" name="game_mode" id="5m" value="5m" /> <input type="radio" class="rad" name="game_mode" id="5m" value="5m" />
<label for="5m"><img id="img_5m" class="button" src="./ress/button_temps_5.png"/></label> <label for="5m"><img id="img_5m" class="button" src="./ress/button_temps_5.png"/></label>
@ -35,7 +53,7 @@
<label for="10m"><img id="img_10m" class="button" src="./ress/button_temps_10.png"/></label> <label for="10m"><img id="img_10m" class="button" src="./ress/button_temps_10.png"/></label>
</ul> </ul>
<ul id="survie" class="all-container"> <ul id="survie" class="all-container ad">
<input type="radio" class="rad" name="game_mode" id="15s" value="15s"/> <input type="radio" class="rad" name="game_mode" id="15s" value="15s"/>
<label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label> <label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label>
@ -47,17 +65,6 @@
</ul> </ul>
</div> </div>
<ul id="diff" class="all-container">
<input type="radio" class="rad" name="difficulty" id="easy" value="easy" />
<label for="easy"><img id="img_easy" class="button" src="./ress/button_diff_easy.png"/></label>
<input type="radio" class="rad" name="difficulty" id="med" value="med" />
<label for="med"><img id="img_med" class="button" src="./ress/button_diff_normal.png"/></label>
<input type="radio" class="rad" name="difficulty" id="hard" value="hard" />
<label for="hard"><img id="img_hard" class="button" src="./ress/button_diff_hard.png"/></label>
</ul>
<div> <div>
<p>Mode pause activé : </p> <p>Mode pause activé : </p>
<input type="radio" id="pause1" value="1" name="pause"> <input type="radio" id="pause1" value="1" name="pause">
@ -66,12 +73,16 @@
<label for="pause0">Non</label> <label for="pause0">Non</label>
</div> </div>
<p>Changer le nombre de points</p> <p>Changer le nombre de points</p>
<input type="range" min="2" max="8" class="slider" name="dotsAmount" id="range_dots">
<p>Nombre de points : <span id="dotsNumber"></span></p> <img src="ress/-" onClick="less()" id="-"/>
<span id="dotsNumber"></span>
<img src="ress/+" onClick="more()" id="+"/>
<input id="amountHi" name="dotsAmount" type="hidden">
<input type="image" src="ress/button_highscores.png" alt="Submit" id="btn_high"> <input type="image" src="ress/button_highscores.png" alt="Submit" id="btn_high">
<img id="btn_high_des" src="ress/button_highscores_desac.png"/> <img id="btn_high_des" src="ress/button_highscores_desac.png"/>
</form> </form>
Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score): <br/> Entrez votre pseudo : <br/>
<input type="text" id="field_pseudo" /><br/> <input type="text" id="field_pseudo" /><br/>
<img id="btn_play" src="ress/button_play.png" onClick="play()"/> <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
<img id="btn_play_des" src="ress/button_play_desac.png"/> <img id="btn_play_des" src="ress/button_play_desac.png"/>

7
code/index.css
Unescape View File

@ -137,7 +137,12 @@
.lightButton { .lightButton {
position: absolute; position: absolute;
right: 0px; right: 5px;
}
.settingsButton {
position: absolute;
left: 5px;
} }
.slot { .slot {

4
code/index.php
Unescape View File

@ -8,6 +8,7 @@
<body> <body>
<div> <div>
<div class="logo"> <div class="logo">
<img id="btn_options" src="./ress/gear.png" class="settingsButton" />
<img src="ress/logo_dark.png" id="logo"/> <img src="ress/logo_dark.png" id="logo"/>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/> <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
@ -54,9 +55,6 @@
<img id="btn_high" src="ress/button_highscores.png" onClick="goHigh()"/> <img id="btn_high" src="ress/button_highscores.png" onClick="goHigh()"/>
</ul> </ul>
<img id="btn_options" src="./ress/gear.png"/>
<!-- The Modal --> <!-- The Modal -->
<div id="optionsModal" class="modal"> <div id="optionsModal" class="modal">

2
code/themeSwitcher.js
Unescape View File

@ -9,7 +9,7 @@ function switchLight() {
} }
function applyLight(li) { function applyLight(li) {
document.getElementById("light").src="ress/"+(li=="true" ? "light" : "dark")+".png"; document.getElementById("light").src="ress/"+(li=="true" ? "dark" : "light")+".png";
if(document.getElementById("logo")!=null) if(document.getElementById("logo")!=null)
{ {
document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png"; document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";

Write Preview
Loading…
Cancel
Save