ajout mode nuit/jour sur l'accueil

master
adplantade 5 years ago
parent 0a6517e701
commit 09f881adba

@ -9,6 +9,19 @@
} }
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}
.button { .button {
padding: 2px; padding: 2px;
} }
@ -105,3 +118,12 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.logo {
text-align: center;
}
.lightButton {
position: absolute;
right: 0px;
}

@ -5,7 +5,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <!-- 'monolith' theme --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <!-- 'monolith' theme -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
</head> </head>
<body> <body class="night">
<div>
<div class="logo">
<img src="ress/logo_dark.png" id="logo"/>
<img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
</div>
</div>
<div id="modeSelection"> <div id="modeSelection">
<ul id="diff" class="all-container"> <ul id="diff" class="all-container">
@ -101,5 +109,6 @@
<script src="bakery.js"></script> <script src="bakery.js"></script>
<script src="button_displayer.js"></script> <script src="button_displayer.js"></script>
<script src="options.js"></script> <script src="options.js"></script>
<script src="themeSwitcher.js"></script>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

@ -40,11 +40,11 @@ if($_GET['pseudo']!="")
{ {
if(stristr($_GET['mode'], "p") === FALSE) // vérification du mode pour afficher le score le plus grand ou le plus petit (- de temps = + de score) if(stristr($_GET['mode'], "p") === FALSE) // vérification du mode pour afficher le score le plus grand ou le plus petit (- de temps = + de score)
{ //il n'y a pas "p" dans le mode, donc on cherche le plus haut score { //il n'y a pas "p" dans le mode, donc on cherche le plus haut score
$sqlScore='select max(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"'; $sqlScore='select min(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"';
} }
else else
{ // on est en points, donc on cherche le temps le plus faible { // on est en points, donc on cherche le temps le plus faible
$sqlScore='select min(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"'; $sqlScore='select max(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"';
} }
$result = $database->query($sqlScore); // on prend le meilleur score du joueur $result = $database->query($sqlScore); // on prend le meilleur score du joueur
$data = $result->fetchArray()[0]; $data = $result->fetchArray()[0];

@ -0,0 +1,21 @@
var light= (getCookie("light")=="" ? true : getCookie("light"));
document.getElementById("light").width=size/4;
function switchLight() {
console.log("light avant "+light);
light=(light=="true" ? "false" : "true");
console.log("light après "+light);
setCookie("light",light,30);
applyLight(light);
}
function applyLight(li) {
console.log("app li "+li);
document.getElementById("light").src="ress/"+(li=="true" ? "light" : "dark")+".png";
document.getElementById("logo").src="ress/logo_"+(li=="true" ? "clair" : "dark")+".png";
document.getElementsByTagName("body")[0].classList.add((li=="true" ? "day" : "night"));
document.getElementsByTagName("body")[0].classList.remove((li=="true" ? "night" : "day"));
}
applyLight(light);
Loading…
Cancel
Save