re-réparation de score.php, début de highscores.php

code/button_displayer.js

@@ -30,10 +30,12 @@ modes.forEach(element => {
 
             document.getElementById(e.currentTarget.id).classList.add("selected");
             modeSelected= e.currentTarget.id;
+            setCookie("modeSelected",modeSelected,30);
             if(modeSelected!=null && diffSelected!=null)
             {
                 document.getElementById("btn_play").disabled = false;
             }
+            dispHighscores();
         });
     }
 });
@@ -44,6 +46,7 @@ diffs.forEach(element => {
     eval("btn_"+element).addEventListener("mousedown",function(e)
     {
         diffSelected= e.currentTarget.id.substring(4);
+        //setCookie("diffSelected",diffSelected,30);
         var tab=document.getElementById("diff").children;
         for(var cpt=0;cpt<tab.length;cpt++)
         {
@@ -54,6 +57,7 @@ diffs.forEach(element => {
         {
             document.getElementById("btn_play").disabled = false;
         }
+        dispHighscores();
     });
 })
 
@@ -65,6 +69,9 @@ function disp(what)
     })
 }
 
+
+    
+
 function hideAll()
 {
     document.getElementById("temps").style.display="none";

code/highscore_button_displayer.js

@@ -0,0 +1,46 @@
+var modes=["points","temps","survie"];
+var diffs=["easy","med","hard"];
+size=screen.height/6;
+hideAll();
+
+modes.forEach(element => {
+
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
+    eval("img_"+element+".width=size");
+    eval("img_"+element).addEventListener("mousedown",function(e){disp(e);});
+    var tab=document.getElementById(element).children;
+    for(var i=1;i<tab.length;i+=2){
+        tab.item(i).children[0].width=size;
+        tab.item(i).addEventListener("mousedown",function(e)
+        {
+            var tab=document.getElementById("modeSelection").children;
+            for(var cpt=1;cpt<tab.length;cpt++)
+            {
+                var tabChilds=document.getElementById(tab.item(cpt).id).children;
+                for(var cptChild=0;cptChild<tabChilds.length;cptChild++)
+                {
+                    tabChilds.item(cptChild).classList.remove("selected");
+                }
+            }
+
+            document.getElementById(e.currentTarget.id).classList.add("selected");
+            console.log(e.currentTarget.id);
+        });
+    }
+});
+
+function disp(what)
+{
+    what=what.currentTarget.id.substring(4);
+    console.log(what);
+    modes.forEach(element => {
+        document.getElementById(element).style.display=what==element ? "flex":"none";
+    })
+}
+
+function hideAll()
+{
+    document.getElementById("temps").style.display="none";
+    document.getElementById("points").style.display="none";
+    document.getElementById("survie").style.display="none";
+}

code/highscores.css

@@ -0,0 +1,94 @@
+.all-container {
+    display : flex;
+    
+    align-items: baseline;
+    width : min-content;
+    
+    margin: 5px;
+    
+
+}
+
+.button {
+    padding: 2px;
+}
+
+[type="radio"] {
+    display: none;
+}
+
+.selected {
+    -webkit-box-shadow:inset 0px 0px 0px 5px black;
+    -moz-box-shadow:inset 0px 0px 0px 5px black;
+    box-shadow:inset 0px 0px 0px 5px black;
+}
+
+.slider {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 15px;
+    border-radius: 5px;  
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%; 
+    background: #4CAF50;
+    cursor: pointer;
+  }
+  
+  .slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #4CAF50;
+    cursor: pointer;
+  }
+
+
+  /* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content */
+  .modal-content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+  }
+  
+  /* The Close Button */
+  .close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }

code/highscores.php

@@ -0,0 +1,134 @@
+<head>
+<link rel="stylesheet" type="text/css" href="highscores.css"/>
+</head>
+
+<form action="highscores.php" method="post">
+<p>difficulty : <input type="text" name="diff" /></p>
+<p>dotsAmount : <input type="text" name="dotsAmount" /></p>
+<p>pause : <input type="text" name="pause" /></p>
+<div id="modeSelection">
+<ul id="modes">
+    <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">
+    <input type="radio" name="game_mode" id="5p" value="5p" />
+    <label for="5p"><img id="img_5p" class="button" src="./ress/button_points_5.png"/></label>
+
+    <input type="radio" name="game_mode" id="10p" value="10p"/>
+    <label for="10p"><img id="img_10p" class="button" src="./ress/button_points_10.png"/></label>
+
+    <input type="radio" name="game_mode" id="15p" value="15p" />
+    <label for="15p"><img id="img_15p" class="button" src="./ress/button_points_15.png"/></label>
+
+    <input type="radio" name="game_mode" id="20p" value="20p" />
+    <label for="20p"><img id="img_20p" class="button" src="./ress/button_points_20.png"/></label>
+
+    </ul>
+    <ul id="temps" class="all-container">
+    <input type="radio" name="game_mode" id="5m" value="5m" />
+    <label for="5m"><img id="img_5m" class="button" src="./ress/button_temps_5.png"/></label>
+
+    <input type="radio" name="game_mode" id="10m" value="10m"/>
+    <label for="10m"><img id="img_10m" class="button" src="./ress/button_temps_10.png"/></label>
+
+    </ul>
+    <ul id="survie" class="all-container">
+    <input type="radio" name="game_mode" id="15s" value="15s"/>
+    <label for="15s"><img id="img_15s" class="button" src="./ress/button_survie_15.png"/></label>
+
+        <input type="radio" name="game_mode" id="30s" value="30s" />
+    <label for="30s"><img id="img_30s" class="button" src="./ress/button_survie_30.png"/></label>
+
+        <input type="radio" name="game_mode" id="45s" value="45s" />
+    <label for="45s"><img id="img_45s" class="button" src="./ress/button_survie_45.png"/> </label>
+
+    </ul>
+</div>
+<input type="image" src="ress/red.png" alt="Submit" width="48" height="48">
+</form>
+<!--
+<form action="#">
+    
+    <input type="radio" name="radio-choice2" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice2" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice2" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice2" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice3" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice3" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+    <input type="radio" name="radio-choice3" id="radio-choice-2" />
+    <label for="radio-choice-2"><img id="img_temps" class="button" src="./ress/button_mode_temps.png"/></label>
+
+  <div>
+    <input type="submit" value="Valider" />
+  </div>
+</form>
+
+<div id="modeSelection">
+    <ul id="modes" class="all-container">
+        
+        
+        <img id="img_survie" class="button" src="./ress/button_mode_survie.png"/>
+    </ul>
+    <ul id="points" class="all-container">
+        <img id="img_5p" class="button" src="./ress/button_points_5.png"/>
+        <img id="img_10p" class="button" src="./ress/button_points_10.png"/>
+        <img id="img_15p" class="button" src="./ress/button_points_15.png"/>
+        <img id="img_20p" class="button" src="./ress/button_points_20.png"/>
+    </ul>
+    <ul id="temps" class="all-container">
+        <img id="img_5m" class="button" src="./ress/button_temps_5.png"/>
+        <img id="img_10m" class="button" src="./ress/button_temps_10.png"/>
+    </ul>
+    <ul id="survie" class="all-container">
+        <img id="img_15s" class="button" src="./ress/button_survie_15.png"/>
+        <img id="img_30s" class="button" src="./ress/button_survie_30.png"/>
+        <img id="img_45s" class="button" src="./ress/button_survie_45.png"/> 
+    </ul>
+</div>
+    <ul id="diff" class="all-container">
+        <img id="img_easy" class="button" src="./ress/button_diff_easy.png"/>
+        <img id="img_med" class="button" src="./ress/button_diff_normal.png"/>
+        <img id="img_hard" class="button" src="./ress/button_diff_hard.png"/>
+    </ul>
+
+-->
+<script src="highscore_button_displayer.js"></script>
+<?php
+
+$database = new SQLite3("data.db");
+
+
+
+if($_POST["game_mode"]!="" && $_POST["diff"]!="" && $_POST["dotsAmount"]!="" && $_POST["pause"]!="")
+{
+    if(stristr($_POST['game_mode'], "p") === FALSE)
+    {
+        $sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['diff'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select min(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['diff'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
+    }
+    else
+    {
+        $sql='select score, player from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['diff'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].' and score=(select max(score) from score where game_mode="'.$_POST['game_mode'].'" and difficulty="'.$_POST['diff'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
+    }
+    
+    $result = $database->query($sql);
+    $a=$result->fetchArray();
+
+    echo "<h1 id='aya'>".print_r($a)."</h1>";
+    echo "<h1 id='aye'>".var_dump($_POST)."</h1>";
+}

code/index.php

@@ -41,6 +41,11 @@ Jouer la partie en : </br>
         <img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
         <img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
     </ul>
+<div>
+    Meilleur score dans ce mode (avec vos préférences) :
+    <p id="record"> </p>
+
+</div>
 
     Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
     <input type="text" id="field_pseudo" />
@@ -92,6 +97,23 @@ Jouer la partie en : </br>
 
 </div>
 
+<?php
+    function returnHighscores($diff, $mode)
+    {
+        $database = new SQLite3("data.db");
+        echo $diff." ".$mode. " ".$_COOKIE["diffSelected"];
+    }
+?>
+<script>
+function dispHighscores()
+    {
+        if(diffSelected!=null && modeSelected!=null)
+        {
+            console.log("<?php echo returnHighscores("diffSelected",$_COOKIE["modeSelected"]); ?>");
+            console.log("aaaaa");
+        }
+    }
+</script>
 <script src="bakery.js"></script>
 <script src="button_displayer.js"></script>
 <script src="options.js"></script>

code/score.php

@@ -11,18 +11,17 @@ Votre score est : <h1 id="points"></h1>
 $database = new SQLite3("data.db");
 if(stristr($_GET['mode'], "p") === FALSE)
     {
-        $sql='select score, player from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and score=(select min(score) from score)';
+        $sql='select score, player from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and score=(select min(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].')';
     }
     else
     {
-        $sql='select score, player from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and score=(select max(score) from score)';
+        $sql='select score, player from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and score=(select max(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].')';
     }
 
 $result = $database->query($sql);
 $a=$result->fetchArray();
 
-
+if($a==false)
-if($a[0]==null)
 {
     echo "Vous avez le premier score de ce mode de jeu.";
 }

code/vitraux.js

@@ -24,6 +24,8 @@ tabTotal=[];
 tabObjCmp=[];
 mousePos=[];
 
+var pause=getCookie("pause");
+
 var displayType = getCookie("displayMode")=="" ? "gems" : getCookie("displayMode");
 
 var dotsAmount= getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount");
@@ -502,6 +504,8 @@ function checkAllOK(){
     {
         var audio = new Audio('ress/Jewel4.mp3');
         audio.play();
+        if(pause)
+            chronoStop();
         handleScore(1);
         generate();
     }