ajout mode nuit/jour sur l'accueil

5 years ago · 09f881adba
parent 0a6517e701
commit 09f881adba
8 changed files with 55 additions and 3 deletions
--- a/code/index.css
+++ b/code/index.css
@ -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 {
    padding: 2px;
 }
@ -104,4 +117,13 @@
  .pickr {
    width: 30px;
    height: 30px;
+  }
+
+  .logo {
+    text-align: center;
+  }
+
+  .lightButton {
+    position: absolute;
+    right: 0px;
  }
--- a/code/index.php
+++ b/code/index.php
@ -5,7 +5,15 @@
 <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>
 </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">
    <ul id="diff" class="all-container">
@ -101,5 +109,6 @@
 <script src="bakery.js"></script>
 <script src="button_displayer.js"></script>
 <script src="options.js"></script>
+<script src="themeSwitcher.js"></script>
 </body>
 </html>
--- a/code/ress/dark.PNG
+++ b/code/ress/dark.PNG
--- a/code/ress/light.png
+++ b/code/ress/light.png
--- a/code/ress/logo_clair.png
+++ b/code/ress/logo_clair.png
--- a/code/ress/logo_dark.png
+++ b/code/ress/logo_dark.png
--- a/code/score.php
+++ b/code/score.php
@ -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)
    { //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
    { // 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
    $data = $result->fetchArray()[0];
--- a/code/themeSwitcher.js
+++ b/code/themeSwitcher.js
@ -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);