passage des options via cookies

code/bakery.js

@@ -0,0 +1,22 @@
+function setCookie(cname, cvalue, exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    var expires = "expires="+d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  }
+  
+  function getCookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+  }
+  

code/button_displayer.js

@@ -74,5 +74,5 @@ function hideAll()
 
 function play()
 {
-    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo"));
+    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo").value);
 }

code/game.html

@@ -45,6 +45,7 @@
         
     </ul>
     <script src="selecteur.js"></script>
+    <script src="bakery.js"></script>
     <script src="chrono.js"></script>
     <script src="timer.js"></script>
     <script src="vitraux.js"></script>

code/index.php

@@ -15,41 +15,41 @@ function displayHighscore() {
 
 Jouer la partie en : </br>
 <div id="modeSelection">
-<ul id="modes" class="all-container">
-<img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
-<img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
-<img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
-</ul>
-<ul id="points" class="all-container">
-<img id="5p" class="button" src="./ress/button_points_5.png"/>
-<img id="10p" class="button" src="./ress/button_points_10.png"/>
-<img id="15p" class="button" src="./ress/button_points_15.png"/>
-<img id="20p" class="button" src="./ress/button_points_20.png"/>
-</ul>
-<ul id="temps" class="all-container">
-<img id="5m" class="button" src="./ress/button_temps_5.png"/>
-<img id="10m" class="button" src="./ress/button_temps_10.png"/>
-</ul>
-<ul id="survie" class="all-container">
-<img id="surv" class="button" src="./ress/button_mode_survie.png"/>
-</ul>
+    <ul id="modes" class="all-container">
+        <img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
+        <img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
+        <img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
+    </ul>
+    <ul id="points" class="all-container">
+        <img id="5p" class="button" src="./ress/button_points_5.png"/>
+        <img id="10p" class="button" src="./ress/button_points_10.png"/>
+        <img id="15p" class="button" src="./ress/button_points_15.png"/>
+        <img id="20p" class="button" src="./ress/button_points_20.png"/>
+    </ul>
+    <ul id="temps" class="all-container">
+        <img id="5m" class="button" src="./ress/button_temps_5.png"/>
+        <img id="10m" class="button" src="./ress/button_temps_10.png"/>
+    </ul>
+    <ul id="survie" class="all-container">
+        <img id="surv" class="button" src="./ress/button_mode_survie.png"/> 
+    </ul>
 </div>
-<ul id="diff" class="all-container">
-<img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
-<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>
+    <ul id="diff" class="all-container">
+        <img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
+        <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>
 
-Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
-<input type="text" id="field_pseudo" />
+    Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
+    <input type="text" id="field_pseudo" />
 
-<button id="btn_play" onClick="play()" disabled>Jouer ?</button>
+    <button id="btn_play" onClick="play()" disabled>Jouer ?</button>
 
 
 <div>
-Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
-Partie en temps : la partie finit quand le temps imparti est &eacute;coul&eacute;. Obtenez le plus de points possible ! </br>
-Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
+    Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
+    Partie en temps : la partie finit quand le temps imparti est &eacute;coul&eacute;. Obtenez le plus de points possible ! </br>
+    Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
 </div>
 
 <img id="btn_options" src="./ress/gear.png"/>
@@ -57,18 +57,30 @@ Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vou
 <!-- The Modal -->
 <div id="optionsModal" class="modal">
 
-  <!-- Modal content -->
-  <div class="modal-content">
+<!-- Modal content -->
+<div class="modal-content">
     <span class="close">&times;</span>
     <p>Options :</p>
     <div class="slidecontainer">
-<input type="range" min="2" max="8" value="4" class="slider" id="range_dots">
-<p>Nombre de points : <span id="dotsNumber"></span></p>
+        <p>Changer le nombre de points</p>
+        <input type="range" min="2" max="8" value="4" class="slider" id="range_dots">
+        <p>Nombre de points : <span id="dotsNumber"></span></p>
+        <p>
+            Mode d'affichage :
+        </p>
+        <select name="displays" id="displays">
+            <option value="points">Seulement des points</option>
+            <option value="gems">Seulement des gemmes</option>
+            <option value="both">Les deux</option>
+        </select>
+
+        <button id="btn_options" onClick="saveOptions()">Valider</button>
+    </div>
 </div>
-  </div>
 
 </div>
 
+<script src="bakery.js"></script>
 <script src="button_displayer.js"></script>
 <script src="options.js"></script>
 </body>

code/options.js

@@ -30,4 +30,9 @@ output.innerHTML = slider.value;
 
 slider.oninput = function() {
   output.innerHTML = this.value;
+}
+
+function saveOptions() {
+    setCookie("dotsAmount",document.getElementById("range_dots").value,30);
+    setCookie("displayMode",document.getElementById("displays").value,30);
 }

code/vitraux.js

@@ -24,7 +24,7 @@ tabTotal=[];
 tabObjCmp=[];
 mousePos=[];
 
-var dotsAmount=4;
+var dotsAmount= getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount");
 var colors=[];
 colorsAvailable=["red","yellow","green","purple","lightblue","brown","cyan","orange"];