standardisation de la page highscores

master
adplantade 5 years ago
parent 6f06007a22
commit 3602793cdd

@ -7,7 +7,7 @@ var modeSelected=null;
var diffSelected=null;
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_des").width=size;

@ -90,13 +90,32 @@ function hideAll()
// Dots amount
var slider = document.getElementById("range_dots");
var output = document.getElementById("dotsNumber");
document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4 );
output.innerHTML = slider.value;
var outputHi = document.getElementById("amountHi");
var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
output.innerHTML = amount;
slider.oninput = function() {
output.innerHTML = this.value;
document.getElementById("+").width=size/4;
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

@ -1,12 +1,13 @@
.all-container {
display : flex;
align-items: baseline;
width : min-content;
margin: 5px;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.mode-container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.button {
@ -99,4 +100,24 @@
}
.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;
}

@ -2,18 +2,36 @@
<link rel="stylesheet" type="text/css" href="highscores.css"/>
</head>
<body>
<div>
<div class="logo">
<img src="ress/logo_dark.png" id="logo"/>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
</div>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
</div>
<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_temps" class="button" src="./ress/button_mode_temps.png"/>
<img id="img_survie" class="button" src="./ress/button_mode_survie.png"/>
</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" />
<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>
</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" />
<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>
</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"/>
<label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label>
@ -47,17 +65,6 @@
</ul>
</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>
<p>Mode pause activé : </p>
<input type="radio" id="pause1" value="1" name="pause">
@ -66,12 +73,16 @@
<label for="pause0">Non</label>
</div>
<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">
<img id="btn_high_des" src="ress/button_highscores_desac.png"/>
</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/>
<img id="btn_play" src="ress/button_play.png" onClick="play()"/>
<img id="btn_play_des" src="ress/button_play_desac.png"/>

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

@ -8,6 +8,7 @@
<body>
<div>
<div class="logo">
<img id="btn_options" src="./ress/gear.png" class="settingsButton" />
<img src="ress/logo_dark.png" id="logo"/>
<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()"/>
</ul>
<img id="btn_options" src="./ress/gear.png"/>
<!-- The Modal -->
<div id="optionsModal" class="modal">

@ -9,7 +9,7 @@ function switchLight() {
}
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)
{
document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";

Loading…
Cancel
Save