MAJ du mode survie + ajout "patchnote"

+ correction logo pour adapter aux droits

.gitignore

@@ -0,0 +1,3 @@
+
+code/data.db
+code/data.db

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

@@ -0,0 +1,272 @@
+var modes=["points","temps","survie"];
+var diffs=["easy","med","hard"];
+var pauses=["0","1"];
+var div=document.getElementById('buttons');
+size=screen.height/6;
+hideAll();
+var modeSelected;
+var diffSelected;
+var pauseSelected;
+
+var selectedTheme="selectedDay";
+
+var btn_options=document.getElementById("btn_options");
+btn_options.width=size/2;
+
+var btn_patchnote=document.getElementById("btn_patchnote");
+btn_patchnote.width=size;
+
+document.getElementById("btn_play").width=size/1.25;
+document.getElementById("btn_play").style.display="inline";
+
+
+modes.forEach(element => {
+
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
+    eval("img_"+element+".width=size/1.25");
+    eval("img_"+element).addEventListener("mousedown",function(e)
+    {
+        disp(e);
+        modes.forEach(element => {
+            document.getElementById("img_"+element).classList.remove(selectedTheme);
+        })
+        document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
+    });
+
+    var tab=document.getElementById(element).children;
+    for(var i=1;i<tab.length;i+=2){
+        tab.item(i).children[0].width=size/1.25;
+        tab.item(i).children[0].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=1;cptChild<tabChilds.length;cptChild+=2)
+                {
+                    tabChilds.item(cptChild).children[0].classList.remove(selectedTheme);
+                }
+            }
+            modeSelected= e.currentTarget.id.substring(4,e.currentTarget.id.length);
+
+            document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
+            if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
+            {
+                document.getElementById(modeSelected).checked=true;
+
+                document.getElementById("high_form").submit();
+            }
+        });
+    }
+});
+
+diffs.forEach(element => {
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
+    eval("img_"+element+".width=size/1.25");
+    eval("img_"+element).addEventListener("mousedown",function(e)
+    {
+        diffSelected= e.currentTarget.id.substring(4);
+        var tab=document.getElementById("diff").children;
+        for(var cpt=1;cpt<tab.length;cpt+=2)
+        {
+            tab.item(cpt).children[0].classList.remove(selectedTheme);
+        }
+        document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
+        if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
+        {
+            document.getElementById(diffSelected).checked=true;
+            document.getElementById("high_form").submit();
+        }
+    });
+})
+
+pauses.forEach(element => {
+    eval("var img_pause_"+element+"= document.getElementById('img_pause_"+element+"')");
+    eval("img_pause_"+element+".width=size/1.25");
+    eval("img_pause_"+element).addEventListener("mousedown",function(e)
+    {
+        pauseSelected= e.currentTarget.id.substring(e.currentTarget.id.length-1);
+        var tab=document.getElementById("diff").children;
+        for(var cpt=1;cpt<tab.length;cpt+=2)
+        {
+            tab.item(cpt).children[0].classList.remove(selectedTheme);
+        }
+        document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
+        if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
+        {
+            console.log("pause "+pauseSelected);
+            document.getElementById("pause_"+pauseSelected).checked=true;
+            document.getElementById("high_form").submit();
+        }
+    });
+})
+
+function disp(what, short=false)
+{
+    what=(short ? what : what.currentTarget.id.substring(4));
+    modes.forEach(element => {
+        document.getElementById(element).style.display=what==element ? "flex":"none";
+    })
+}
+
+// Dots amount
+
+var outputHi = document.getElementById("amountHi");
+var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
+outputHi.value= amount;
+
+document.getElementById("+").width=size/4;
+document.getElementById("-").width=size/4;
+
+function less()
+{
+  if(amount > 2)
+  {
+    amount--;
+  }
+  outputHi.value=amount;
+  setCookie("dotsAmount",amount,30);
+  document.getElementById("high_form").submit();
+}
+
+function more()
+{
+  
+  if(amount<8)
+  {
+    amount++;
+  }
+  outputHi.value=amount;
+  setCookie("dotsAmount",amount,30);
+  document.getElementById("high_form").submit();
+}
+
+// pause oui/non
+
+//document.getElementById("pause"+ (getCookie("pause")!="" ? getCookie("pause") : 0)).checked=true;
+    
+
+function hideAll()
+{
+    document.getElementById("temps").style.display="none";
+    document.getElementById("points").style.display="none";
+    document.getElementById("survie").style.display="none";
+}
+
+function play()
+{
+    var pseudo = prompt("Saisissez votre pseudo", getCookie("pseudo"));
+    setCookie("pause",(document.getElementById("pause_1").checked ? "1" : "0"),30);
+    if(pseudo!="")
+    {
+        setCookie("pseudo",pseudo,30);
+    }
+    
+    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+ (pseudo==null ? "" : pseudo));
+}
+
+if(document.getElementById("diffSel")!=null)
+{
+    diffSelected=document.getElementById("diffSel").value;
+    modeSelected=document.getElementById("modeSel").value;
+    amount=document.getElementById("dotsAmountSel").value;
+    pauseSelected=document.getElementById("pauseSel").value;
+    gameSelected = (modeSelected.includes("s") ? "survie" : (modeSelected.includes("p") ? "points" : "temps"));
+
+    disp(gameSelected, true);
+    document.getElementById("img_"+diffSelected).classList.add(selectedTheme);
+    document.getElementById("img_"+gameSelected).classList.add(selectedTheme);
+    document.getElementById("img_"+modeSelected).classList.add(selectedTheme);
+    document.getElementById("img_pause_"+pauseSelected).classList.add(selectedTheme);
+
+    document.getElementById(diffSelected).checked=true;
+    document.getElementById(modeSelected).checked=true;
+    document.getElementById("pause_"+pauseSelected).checked=true;
+
+    outputHi.value= amount;
+}
+else
+{
+    diffSelected="easy";
+    modeSelected="5p";
+    pauseSelected="1";
+    disp("points",true);
+    document.getElementById(diffSelected).checked=true;
+    document.getElementById(modeSelected).checked=true;
+    document.getElementById("pause_"+pauseSelected).checked=true;
+    document.getElementById("img_points").classList.add(selectedTheme);
+    document.getElementById("img_5p").classList.add(selectedTheme);
+    document.getElementById("img_easy").classList.add(selectedTheme);
+    document.getElementById("img_pause_1").classList.add(selectedTheme);
+}
+
+for(var cpt=1;cpt<9;cpt++)
+    {
+        document.getElementById("col"+cpt+"D").style.height=size/6;
+        document.getElementById("col"+cpt+"D").style.width=size/6;
+        document.getElementById("gem"+cpt+"D").style.height=size/6;
+        document.getElementById("gem"+cpt+"D").style.width=size/6;
+    }
+
+function dispDots()
+{
+    var amountI = parseInt(amount);
+    if(displ=="points")
+    {
+        for(var cpt=1;cpt<9;cpt++)
+        {
+            document.getElementById("gem"+cpt+"D").style.display="none";
+            document.getElementById("col"+cpt+"D").style.display="";
+        }
+        for(var cpt=1;cpt<amountI+1;cpt++)
+        {
+            document.getElementById("col"+cpt+"D").style.visibility="visible";
+            document.getElementById("col"+cpt+"D").style.backgroundColor=getCookie("color_"+cpt);
+        }
+        for(var cpt=amountI+1;cpt<9;cpt++)
+        {
+            document.getElementById("col"+cpt+"D").style.visibility="hidden";
+        }
+    }
+    else
+    {
+        for(var cpt=1;cpt<9;cpt++)
+        {
+            document.getElementById("col"+cpt+"D").style.display="none";
+            document.getElementById("gem"+cpt+"D").style.display="";
+
+            console.log(gemsSelected[cpt-1]+"|"+cpt);
+
+            document.getElementById("img_gem"+cpt).src="ress/"+gemsSelected[cpt-1]+".png";
+
+            document.getElementById("gem"+cpt+"D").appendChild(document.getElementById("img_gem"+cpt));
+            document.getElementById("img_gem"+cpt).style.height=size/6;
+            document.getElementById("img_gem"+cpt).style.width=size/6;
+
+            if(displ=="both")
+            {
+                document.getElementById("gem"+cpt+"D").classList.add("dot");
+                document.getElementById("gem"+cpt+"D").style.backgroundColor=gemsSelected[cpt-1];
+
+                document.getElementById("img_gem"+cpt).style.height=size/8;
+                document.getElementById("img_gem"+cpt).style.width=size/8;
+
+            }
+            else
+            {
+                document.getElementById("gem"+cpt+"D").classList.remove("dot");
+                document.getElementById("gem"+cpt+"D").style.backgroundColor="";
+            }
+        }
+
+        for(var cpt=1;cpt<amountI+1;cpt++)
+        {
+            document.getElementById("gem"+cpt+"D").style.visibility="visible";
+            document.getElementById("gem"+cpt+"D").src="ress/"+gemsSelected[cpt-1]+".png";
+        }
+        for(var cpt=amountI+1;cpt<9;cpt++)
+        {
+            document.getElementById("gem"+cpt+"D").style.visibility="hidden";
+        }
+    }
+}

code/chrono.js

@@ -3,6 +3,7 @@ var start = 0
 var end = 0
 var diff = 0
 var timerID = 0
+var paused=true;
 function chrono(){
 	end = new Date()
 	diff = end - start
@@ -34,14 +35,18 @@ function chronoStart(){
     document.chronoForm.reset.onclick = chronoReset
     */
 	start = new Date()
+	paused=false;
 	chrono()
 }
 function chronoContinue(){
+	/*
 	document.chronoForm.startstop.value = "stop!"
 	document.chronoForm.startstop.onclick = chronoStop
 	document.chronoForm.reset.onclick = chronoReset
+	*/
 	start = new Date()-diff
 	start = new Date(start)
+	paused=false;
 	chrono()
 }
 function chronoReset(){
@@ -58,5 +63,6 @@ function chronoStop(){
 	document.chronoForm.startstop.onclick = chronoContinue
     document.chronoForm.reset.onclick = chronoStopReset
     */
+   	paused=true;
 	clearTimeout(timerID)
 }

code/game.css

@@ -1,66 +1,35 @@
 @font-face {
-  font-family: augie; src: url('ress/augie.ttf');
+  font-family: Segoe; src: url('ress/Segoepr.ttf');
 }
 
 .all-container {
     display : flex; 
     justify-content: center;
-    /*
-    align-items: baseline;
-    width : min-content;
-    flex-direction: row;
-    flex-wrap: wrap;*/
+}
 
+.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+.lightButton {
+  position: absolute;
+  right: 5px;
 }
 
 .flex-container {
-    /* We first create a flex layout context */
     display : flex;
     align-items: baseline;
     width : min-content;
     
     margin: 20px;
-    /* Then we define the flow direction 
-       and if we allow the items to wrap 
-     * Remember this is the same as:
-     * flex-direction: row;
-     * flex-wrap: wrap;
-     */
-    
-    
-    /* Then we define how is distributed the remaining space */
 
     flex-direction: column;
   }
-  /*
-  
-  .flex-item {
-    padding: 5px;
-    width: 200px;
-    height: 150px;
-    margin-top: 10px;
-    line-height: 150px;
-    color: white;
-    font-weight: bold;
-    font-size: 3em;
-    text-align: center;
-  }*/
 
   .vitraux {
-    /* We first create a flex layout context */
     display : flex;
     align-items: baseline;
     width : min-content;
     margin: 20px;
-    /* Then we define the flow direction 
-       and if we allow the items to wrap 
-     * Remember this is the same as:
-     * flex-direction: row;
-     * flex-wrap: wrap;
-     */
-    
-    
-    /* Then we define how is distributed the remaining space */
 
     flex-direction: column;
   }
@@ -92,6 +61,7 @@
     -webkit-box-shadow:inset 0px 0px 0px 5px blue;
     -moz-box-shadow:inset 0px 0px 0px 5px blue;
     box-shadow:inset 0px 0px 0px 5px blue;
+    
   }
 
   .stats {
@@ -101,3 +71,71 @@
     font-weight: bold;
     font-family: 'Segoe print';
   }
+
+  .txt {
+    padding: 10px;
+    font-size: large;
+    font-weight: bold;
+    font-family: 'Segoe print';
+  }
+
+  .back {
+    position: absolute;
+    bottom: 5px;
+  }
+
+  .bd {
+  
+    border-style: solid;
+    border-width: 5px;
+  }
+  .bd2 {
+    border-color: mediumblue;
+    border-style: solid;
+    border-width: 5px;
+  }
+
+  .child {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .parent {
+    position: relative;
+  }
+
+  h1 {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+
+  .win {
+    -webkit-box-shadow:inset 0px 0px 0px 5px lime;
+    -moz-box-shadow:inset 0px 0px 0px 5px lime;
+    box-shadow:inset 0px 0px 0px 5px lime;
+  }
+
+  .player {
+    position: absolute;
+    left: 5px;
+  }
+
+  .logo {
+    text-align: center;
+  }
+
+
+  .texte {
+    font-size: medium;
+    font-family: 'Segoe print';
+  }
+
+  .texteG {
+    font-size: xx-large;
+    font-weight: bold;
+    font-family: 'Segoe print';
+  }

code/game.html

@@ -4,22 +4,37 @@
 <head>
     <title>On The Dot</title>
     <link rel="stylesheet" type="text/css" href="game.css"/>
+    <script>var tutoMode=false;</script>
 </head>
 <body>
+    <div class="logo">
+        <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
+        <span class="player texteG" id="player"></span>
+    </div>
+
     <ul id="all-container" class="all-container"> 
         
-        <ul class="stats">
-            <p id="temps"></p>
-            <span id="chronotime" class="stats">0:00:00</span>
-            <span id="timer" class="stats">0:00:00</span>
-            <p id="stats" class="stats"></p>
+        <ul class="vitraux stats">
+            <div id="obj_box" class="parent">
+                <h1 class="child" id="obj_text" >Objectif</h1>
+            </div>
+            
+            <div id="res_box" class="parent">
+                <h1 class="child" id="res_text" >R&eacute;sultat</h1>
+            </div>
+
         </ul>
 
         <ul id="obj-container" class="vitraux">
             <canvas id="canvasObj" class="vitrail-plein"></canvas>
-            <h1>Objectif</h1>
             <canvas id="canvasTotal" class="vitrail-plein"></canvas>
-            <h1>R&eacute;sultat</h1>
+
+            <span id="player" class="stats"></span>
+            <span id="mode" class="stats"></span>
+            <span id="chronotime" class="stats">0:00:00</span>
+            <span id="timer" class="stats">0:00:00</span>
+            <span id="stats" class="stats"></span>
+
         </ul>
         <ul id="vitraux" class="vitraux">
             <canvas id="canvas1" class="vitrail-plein"></canvas>
@@ -32,7 +47,7 @@
         </ul>
         <ul id="canvasR" class="flex-container">
             <div id="reserveText">
-                <h1>R&eacute;serve</h1>
+                <h1 class="stats">R&eacute;serve</h1>
             </div>
             <canvas id="canvasR1" class="vitrail-vide"></canvas>
             <canvas id="canvasR2" class="vitrail-vide"></canvas>
@@ -42,10 +57,17 @@
         </ul>
         
     </ul>
+    
+    <a href="./" rel="external"><img id="btn_back" src="ress/button_back.png" class="back" /></a>
+    
+
     <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>
+    <script src="infoDisplayer.js"></script>
+    <script src="themeSwitcher.js"></script>
 </body>
 
 </html>

code/game.php

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>On The Dot</title>
-    <link rel="stylesheet" type="text/css" href="game.css"/>
-</head>
-<body>
-    <?php 
-        echo $_POST['mode'];
-    ?>
-    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
-        <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
-            <p id="temps"></p>
-            <span id="chronotime">0:00:00:00</span>
-<form name="chronoForm">
-    <input type="button" name="startstop" value="start!" onClick="chronoStart()" />
-    <input type="button" name="reset" value="reset!" onClick="chronoReset()" />
-</form>
-            <p id="stats"></p>
-            <h1>Objectif</h1>
-            <canvas id="canvasObj" class="vitrail-plein"></canvas>
-            <h1>R&eacute;sultat</h1>
-            <canvas id="canvasTotal" class="vitrail-plein"></canvas>
-        </ul>
-        <ul id="vitraux" class="vitraux" style="border:2px solid purple">
-            <canvas id="canvas1" class="vitrail-plein"></canvas>
-            
-            <canvas id="canvas2" class="vitrail-plein"></canvas>
-            
-            <canvas id="canvas3" class="vitrail-plein"></canvas>
-            
-            <canvas id="canvas4" class="vitrail-plein"></canvas>
-        </ul>
-        
-        <ul id="canvasR" class="flex-container" style="border:1px solid violet">
-            <h1>R&eacute;serve</h1>
-            <canvas id="canvasR1" class="vitrail-vide"></canvas>
-            <canvas id="canvasR2" class="vitrail-vide"></canvas>
-            <canvas id="canvasR3" class="vitrail-vide"></canvas>
-            <canvas id="canvasR4" class="vitrail-vide"></canvas>
-            
-        </ul>
-        
-    </ul>
-    <script src="chrono.js"></script>
-    <script src="vitraux.js"></script>
-</body>
-
-</html>

code/highscore_button_displayer.js

@@ -0,0 +1,170 @@
+var modes=["points","temps","survie"];
+var diffs=["easy","med","hard"];
+var diffSelected="";
+var modeSelected="";
+size=screen.height/6;
+hideAll();
+
+document.getElementById("btn_play").width=size;
+
+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);
+        modes.forEach(element => {
+            document.getElementById("img_"+element).classList.remove("selected");
+        })
+        document.getElementById(e.currentTarget.id).classList.add("selected");
+    });
+
+    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).children[0].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=1;cptChild<tabChilds.length;cptChild+=2)
+                {
+                    tabChilds.item(cptChild).children[0].classList.remove("selected");
+                }
+            }
+            
+            modeSelected= e.currentTarget.id.substring(4,e.currentTarget.id.length);
+
+            document.getElementById(e.currentTarget.id).classList.add("selected");
+            if(diffSelected!="" && modeSelected!="")
+        {
+            document.getElementById(modeSelected).checked=true;
+
+            document.getElementById("high_form").submit();
+        }
+        });
+    }
+});
+
+diffs.forEach(element => {
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
+    eval("img_"+element+".width=size");
+    eval("img_"+element).addEventListener("mousedown",function(e)
+    {
+        diffSelected= e.currentTarget.id.substring(4);
+        var tab=document.getElementById("diff").children;
+        for(var cpt=1;cpt<tab.length;cpt+=2)
+        {
+            tab.item(cpt).children[0].classList.remove("selected");
+        }
+        document.getElementById(e.currentTarget.id).classList.add("selected");
+        if(diffSelected!="" && modeSelected!="")
+        {
+            document.getElementById(diffSelected).checked=true;
+            document.getElementById("high_form").submit();
+        }
+    });
+})
+
+function disp(what,short=false)
+{
+    what=(short ? 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";
+}
+
+// Dots amount
+
+var output = document.getElementById("dotsNumber");
+var outputHi = document.getElementById("amountHi");
+var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
+output.innerHTML = amount;
+outputHi.value= amount;
+
+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
+
+document.getElementById("pause"+ (getCookie("pause")!="" ? getCookie("pause") : 0)).checked=true;
+
+// play button
+
+function play()
+{
+    setCookie("dotsAmount",amount,30);
+    setCookie("pause",(document.getElementById("pause0").checked ? 0 : 1),30);
+    var pseudo = prompt("Saisissez votre pseudo", '');
+    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+ (pseudo==null ? "" : pseudo));
+}
+
+function index()
+{
+    window.location.replace("./");
+}
+
+if(document.getElementById("diffSel")!=null)
+{
+    console.log("LOADING");
+    diffSelected=document.getElementById("diffSel").value;
+    modeSelected=document.getElementById("modeSel").value;
+    amount=document.getElementById("dotsAmountSel").value;
+    gameSelected = (modeSelected.includes("s") ? "survie" : (modeSelected.includes("p") ? "points" : "temps"));
+
+    console.log("LOADED "+diffSelected+" " + modeSelected+ " "+ amount + " ");
+
+    disp(gameSelected, true);
+    document.getElementById("img_"+diffSelected).classList.add("selected");
+    document.getElementById("img_"+gameSelected).classList.add("selected");
+    document.getElementById("img_"+modeSelected).classList.add("selected");
+    document.getElementById("pause"+ document.getElementById("pauseSel").value).checked=true;
+
+    document.getElementById(diffSelected).checked=true;
+    document.getElementById(modeSelected).checked=true;
+
+    output.innerHTML = amount;
+    outputHi.value= amount;
+}
+else
+{
+    diffSelected="easy";
+    modeSelected="5p";
+    disp("points",true);
+    document.getElementById(diffSelected).checked=true;
+    document.getElementById(modeSelected).checked=true;
+    document.getElementById("img_points").classList.add("selected");
+    document.getElementById("img_5p").classList.add("selected");
+    document.getElementById("img_easy").classList.add("selected");
+}
+

code/highscores.css

@@ -0,0 +1,158 @@
+@font-face {
+  font-family: Segoe; src: url('ress/Segoepr.ttf');
+}
+
+.all-container {
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+  }
+
+.mode-container {
+text-align: center;
+margin-left: auto;
+margin-right: auto;
+}
+
+.button {
+    padding: 2px;
+}
+
+.rad {
+    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;
+  }
+
+  .lightButton {
+    position: absolute;
+    right: 0px;
+  }
+
+  .day   { background: #eee; color: black; }
+.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;
+
+}
+
+.slot {
+  display: inline-block;
+  margin-left: 15px;
+}
+
+
+.texte {
+  font-size: medium;
+  font-family: Segoe;
+}
+
+.texteG {
+  font-size: xx-large;
+  /*font-weight: bold;*/
+  font-family: Segoe;
+}
+.bd {
+  
+  border-style: solid;
+  border-width: 5px;
+}
+.bd2 {
+  border-color: mediumblue;
+  border-style: solid;
+  border-width: 5px;
+}
+
+ul {
+  padding-inline-start: 0px;
+}

code/highscores.php

@@ -0,0 +1,147 @@
+<head>
+<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>
+    
+</div>
+
+    <form action="highscores.php" id="high_form" method="post">
+        <div class="mode-container">
+            <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 id="modeSelection" class="mode-container">
+                <ul id="modes" class="all-container">
+                    <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 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>
+
+                    <input type="radio" class="rad" 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" class="rad" 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" class="rad" 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 ad">
+                    <input type="radio" class="rad" name="game_mode" id="2m" value="2m" />
+                    <label for="2m"><img id="img_2m" class="button" src="./ress/button_temps_2.png"/></label>
+
+                    <input type="radio" class="rad" name="game_mode" id="3m" value="3m" />
+                    <label for="3m"><img id="img_3m" class="button" src="./ress/button_temps_3.png"/></label>
+
+                    <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>
+
+                    <input type="radio" class="rad" 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 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>
+
+                    <input type="radio" class="rad" 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" class="rad" 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>
+        
+            <ul>
+                <div class="slot">
+                    <p class="texte">Mode pause activé <input type="radio" id="pause1" value="1" name="pause">
+                    <label for="pause1" class="texte">Oui</label>
+                    <input type="radio" id="pause0" value="0" name="pause">
+                    <label for="pause0" class="texte">Non</label>   </p>
+                           
+                </div>
+                <div class="slot">   
+                    <p class="texte">Nombre de dots
+                    <img src="ress/-" onClick="less()" id="-"/>
+                    <span id="dotsNumber" class="texte"></span>
+                    <img src="ress/+" onClick="more()" id="+"/>
+                    <input type="hidden" name="dotsAmount" id="amountHi"/></p>
+                </div>
+            </ul>
+        </div>
+    </form>
+    <?php
+
+$database = new SQLite3("data.db");
+
+
+
+if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]!="" && $_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['difficulty'].'" 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['difficulty'].'" 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['difficulty'].'" 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['difficulty'].'" and dots_amount='.$_POST["dotsAmount"].' and pause='.$_POST["pause"].')';
+    }
+    $result = $database->query($sql);
+    $a=$result->fetchArray();
+
+    if($a==false)
+    {
+        $phrase= "Il n'y a pas encore de score pour ce mode de jeu.";
+    }
+    else
+    {
+        $phrase="Le record est ".$a[0].", tenu par ".$a["player"];
+        while ($row = $result->fetchArray()) {
+            $phrase=$phrase.", ".$row["player"];
+    }
+
+}
+
+    echo "<h1 id='aya' class='texte' >".$phrase."</h1>";
+    echo "<input type='hidden' id='modeSel' value='".$_POST["game_mode"]."'/>";
+    echo "<input type='hidden' id='diffSel' value='".$_POST["difficulty"]."'/>";
+    echo "<input type='hidden' id='dotsAmountSel' value='".$_POST["dotsAmount"]."'/>";
+    echo "<input type='hidden' id='pauseSel' value='".$_POST["pause"]."'/>";
+}
+?>
+    <div id="play" class="mode-container">
+            <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
+            <!--<img id="btn_play_des" src="ress/button_play_desac.png"/>-->
+        </div>
+    </div>
+    
+    
+    <img id="btn_back" src="ress/button_back.png" class="back" onClick="index()"/>
+    
+    <script src="bakery.js"></script>
+    <script src="highscore_button_displayer.js"></script>
+    <script src="themeSwitcher.js"></script>
+    <script src="bakery.js"></script>
+    <script src="themeSwitcher.js"></script>
+</body>

code/index.css

@@ -0,0 +1,175 @@
+@font-face {
+  font-family: Segoe; src: url('ress/segoepr.ttf');
+}
+
+.all-container {
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    }
+
+.mode-container {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bd {
+  
+  border-style: solid;
+  border-width: 5px;
+}
+.bd2 {
+  border-color: mediumblue;
+  border-style: solid;
+  border-width: 5px;
+}
+
+.ad {
+  width: min-content;
+  margin-left: auto;
+  margin-right: auto;
+
+}
+
+.z {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+.button {
+    padding: 2px;
+}
+
+.selectedDay {
+  -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;
+}
+
+.selectedNight {
+  -webkit-box-shadow:inset 0px 0px 0px 5px #eee;
+  -moz-box-shadow:inset 0px 0px 0px 5px #eee;
+  box-shadow:inset 0px 0px 0px 5px #eee;
+}
+  /* 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;
+  }
+
+  .dot {
+    background-color: green;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .both {
+    background-image: url("ress/green.png");
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .pickr {
+    width: 30px;
+    height: 30px;
+  }
+
+  .logo {
+    text-align: center;
+  }
+
+  .lightButton {
+    position: absolute;
+    right: 5px;
+  }
+
+  .settingsButton {
+    position: absolute;
+    left: 5px;
+  }
+
+  .slot {
+    display: inline-block;
+    position: relative;
+  }
+
+  .gem {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .texte {
+    font-size: medium;
+    font-family: Segoe;
+  }
+
+  .texteG {
+    font-size: xx-large;
+    /*font-weight: bold;*/
+    font-family: Segoe;
+  }
+
+  ul {
+    padding-inline-start: 0px;
+  }
+
+  .player {
+    position: absolute;
+    left: 5px;
+  }
+  .rad {
+    display: none;
+}
+
+.mid {
+  margin: 5px;
+}
+
+.bg {
+  position: absolute;
+  bottom: 5px;
+}
+
+.patchnote {
+  border: none;
+  width: 100%;
+}

code/index.html

@@ -1,39 +0,0 @@
-<html>
-    <head>
-        On the Dot
-    </head>
-    <body>
-        <form action="./game.html" method="GET">
-            <input type="radio" id="no-res" name="diff" value="no-res">
-            <label for="no-res">Sans r&eacute;serve</label><br>
-            Jouer la partie en : </br>
-            <input type="radio" id="5pts" name="mode" value="5p">
-            <label for="5pts">5 points</label><br>
-            <input type="radio" id="10pts" name="mode" value="10p">
-            <label for="5pts">10 points</label><br>
-            <input type="radio" id="15pts" name="mode" value="15p">
-            <label for="5pts">15 points</label><br>
-            <input type="radio" id="20pts" name="mode" value="20p">
-            <label for="5pts">20 points</label><br>
-            <input type="radio" id="5min" name="mode" value="5m">
-            <label for="5pts">5 minutes</label><br>
-            <input type="radio" id="10min" name="mode" value="10m">
-            <label for="5pts">10 minutes</label><br>
-
-            <input type="radio" id="survie" name="mode" value="surv">
-            <label for="5pts">survie</label><br>
-
-            
-            <div class="button">
-                <button type="submit">JOUER !</button>
-            </div>
-        </form>
-
-        <div>
-            Partie en points : la partie se finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
-            Partie en temps : la partie se finit quand le temps imparti est écoulé. Obtenez le plus de points possible ! </br>
-            Partie en survie : la partie se finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
-        </div>
-        
-    </body>
-</html>

code/index.php

@@ -1,16 +1,292 @@
 <html>
-    <head>
+<head>
+<title>On The Dot</title>
+<link rel="stylesheet" type="text/css" href="index.css"/>
+<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>
+<script>console.log("index");</script>
+<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()"/>
         
-        On the Dot
-    </head>
-    <body>
-        <form action="./game.php" method="post">
-            <input type="radio" id="no-res" name="mode" value="no-res">
-            <label for="no-res">Sans réserve</label><br>
-            <div class="button">
-                <button type="submit">JOUER !</button>
+    </div>
+    
+</div>
+
+
+<form action="index.php" id="high_form" method="post">
+        <div class="mode-container">
+            <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 id="modeSelection" class="mode-container">
+                <ul id="modes" class="all-container">
+                    <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 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>
+
+                    <input type="radio" class="rad" name="game_mode" id="10p" value="10p"/>
+                    <label for="10p"><img id="img_10p" class="button mid" src="./ress/button_points_10.png"/></label>
+
+                    <input type="radio" class="rad" 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" class="rad" 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 ad">
+                    <input type="radio" class="rad" name="game_mode" id="2m" value="2m" />
+                    <label for="2m"><img id="img_2m" class="button" src="./ress/button_temps_2.png"/></label>
+
+                    <input type="radio" class="rad" name="game_mode" id="3m" value="3m" />
+                    <label for="3m"><img id="img_3m" class="button mid" src="./ress/button_temps_3.png"/></label>
+
+                    <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>
+
+                    <!--<input type="radio" class="rad" 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 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>
+
+                    <input type="radio" class="rad" name="game_mode" id="30s" value="30s" />
+                    <label for="30s"><img id="img_30s" class="button mid" src="./ress/button_survie_30.png"/></label>
+
+                    <input type="radio" class="rad" 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>
+        
+            <div>
+                <ul id="pause" class="all-container ad" style="display :flex;">
+                    <input type="radio" class="rad" name="pause" id="pause_1" value="1" />
+                    <label for="1"><img id="img_pause_1" class="button" src="./ress/button_pause_1.png"/></label>
+
+                    <input type="radio" class="rad" name="pause" id="pause_0" value="0"/>
+                    <label for="0"><img id="img_pause_0" class="button" src="./ress/button_pause_0.png"/></label>
+
+
+                </ul>
+
+                <div class="slot">   
+                    <p class="texte">
+                    <img src="ress/-" onClick="less()" id="-"/>
+                    <span class="slot" id="dotsDisplayer">
+                        <span id="col1D" class="dot"></span>
+                        <span id="col2D" class="dot"></span>
+                        <span id="col3D" class="dot"></span>
+                        <span id="col4D" class="dot"></span>
+                        <span id="col5D" class="dot"></span>
+                        <span id="col6D" class="dot"></span>
+                        <span id="col7D" class="dot"></span>
+                        <span id="col8D" class="dot"></span>
+
+                        <img id="img_gem1" class="gem"/>
+                        <img id="img_gem2" class="gem"/>
+                        <img id="img_gem3" class="gem"/>
+                        <img id="img_gem4" class="gem"/>
+                        <img id="img_gem5" class="gem"/>
+                        <img id="img_gem6" class="gem"/>
+                        <img id="img_gem7" class="gem"/>
+                        <img id="img_gem8" class="gem"/>
+
+                        <span id="gem1D" class="slot"></span>
+                        <span id="gem2D" class="slot"></span>
+                        <span id="gem3D" class="slot"></span>
+                        <span id="gem4D" class="slot"></span>
+                        <span id="gem5D" class="slot"></span>
+                        <span id="gem6D" class="slot"></span>
+                        <span id="gem7D" class="slot"></span>
+                        <span id="gem8D" class="slot"></span>
+                        <!--
+                        <img id="gem1D" class=" slot" />
+                        <img id="gem2D" class=" slot" />
+                        <img id="gem3D" class=" slot" />
+                        <img id="gem4D" class=" slot" />
+                        <img id="gem5D" class=" slot" />
+                        <img id="gem6D" class=" slot" />
+                        <img id="gem7D" class=" slot" />
+                        <img id="gem8D" class=" slot" />-->
+                    </span>
+                    <img src="ress/+" onClick="more()" id="+"/>
+                    <input type="hidden" name="dotsAmount" id="amountHi"/></p>
+                </div>
+            </div>
         </div>
     </form>
+    <?php
+
+$database = new SQLite3("data.db");
+
+// echo isset($_POST["game_mode"])." ".isset($_POST["difficulty"])." ".isset($_POST["dotsAmount"])." ".isset($_POST["pause"]);
+$toDisp=5;
+if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]!="" && $_POST["dotsAmount"]!="" && $_POST["pause"]!="")
+{
+    $db_game_mode=$_POST["game_mode"];
+    $db_difficulty=$_POST["difficulty"];
+    $db_dotsAmount=$_POST["dotsAmount"];
+    $db_pause=$_POST["pause"];
+}
+else
+{
+    $db_game_mode="5p";
+    $db_difficulty="easy";
+    $db_dotsAmount=(isset($_COOKIE["dotsAmount"])) ? $_COOKIE["dotsAmount"] : 4;
+    $db_pause=(isset($_COOKIE["pause"])) ? $_COOKIE["pause"] : 1;
+}
+
+if(stristr($db_game_mode, "p") === FALSE)
+{
+    $sql='select score, player from score where game_mode="'.$db_game_mode.'" and difficulty="'.$db_difficulty.'" and dots_amount='.$db_dotsAmount.' and pause='.$db_pause.' order by score desc limit '.$toDisp;
+    $unit="points";
+}
+else
+{
+    $sql='select score, player from score where game_mode="'.$db_game_mode.'" and difficulty="'.$db_difficulty.'" and dots_amount='.$db_dotsAmount.' and pause='.$db_pause.' order by score asc limit '.$toDisp;
+    $unit="secondes";
+}
+$result = $database->query($sql);
+$a=$result->fetchArray();
+
+if($a==false)
+{
+    $phrase= "Il n'y a pas encore de score pour ce mode de jeu.";
+}
+else
+{
+    $phrase="1° ".$a["player"].", ".$a[0]." ".$unit;
+    $cpt=2;
+    while ($row = $result->fetchArray()) {
+
+        $phrase=$phrase."</br>".$cpt."° ".$row["player"].", ".$row["score"]." ".$unit;
+        $cpt++;
+    }
+
+}
+
+echo "<h1 id='aya' class='texte mode-container' >".$phrase."</h1>";
+
+if(isset($_POST["game_mode"]) && $_POST["game_mode"]!="" && $_POST["difficulty"]!="" && $_POST["dotsAmount"]!="" && $_POST["pause"]!="")
+{
+    echo "<input type='hidden' id='modeSel' value='".$_POST["game_mode"]."'/>";
+    echo "<input type='hidden' id='diffSel' value='".$_POST["difficulty"]."'/>";
+    echo "<input type='hidden' id='dotsAmountSel' value='".$_POST["dotsAmount"]."'/>";
+    echo "<input type='hidden' id='pauseSel' value='".$_POST["pause"]."'/>";
+}
+
+?>
+<div class="mode-container">
+    <ul id="btns_play">
+        <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
+    </ul>
+</div>
+
+<img id="btn_patchnote" src="./ress/button_patchnote.png" class="bg"/>
+
+<div id="patchnote" class="modal">
+    <div class="modal-content" id="patchnoteContenu">
+    <span class="close" id="close_patchnote">&times;</span>
+    <p class="texte">Notes de mise à jour</p>
+    <!--<iframe src="patchnote1.txt" class="texte patchnote" id="patchnote_content"></iframe>-->
+    <?php
+        $ct=htmlspecialchars(file_get_contents("patchnote1.txt"));
+        $ct=str_replace("\n","<br/>",$ct);
+        //var_dump($ct);
+        echo '<p class="texte">'.$ct.'</p>';
+    ?>
+    </div>
+</div>
+
+<!-- The Modal -->
+<div id="optionsModal" class="modal">
+
+<!-- Modal content -->
+<div class="modal-content" id="modal">
+    <span class="close" id="close_options">&times;</span>
+    <p class="texte ad">Options</p>
+    <div class="slidecontainer">        
+            <div id="displays">
+            <p class="texte">
+            Mode d'affichage 
+            <span id="points_di" class="dot" onClick="selectDisplay('points')"></span>
+            <img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/>
+            <span id="both_di" class="dot both" onClick="selectDisplay('both')"></span>
+        </p>
+        </div>
+                
+        <div id="color_pickers" class="color-pickers">
+            <div class="texte"> Couleurs des dots  
+                <span id="col1" class="dot col1 pickr"></span>
+                <span id="col2" class="dot col2 pickr"></span>
+                <span id="col3" class="dot col3 pickr"></span>
+                <span id="col4" class="dot col4 pickr"></span>
+                <span id="col5" class="dot col5 pickr"></span>
+                <span id="col6" class="dot col6 pickr"></span>
+                <span id="col7" class="dot col7 pickr"></span>
+                <span id="col8" class="dot col8 pickr"></span>
+            </div>
+        </div>
+        <div id="gems_picker">
+            <img id="gem1" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem2" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem3" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem4" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem5" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem6" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem7" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem8" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <div>
+                <p class="texte">Gemmes à afficher</p>
+            <span id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot3" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot4" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot5" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot6" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot7" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <span id="slot8" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
+            <img id="resetGems2" onClick="resetGems()" src="ress/reset"/>
+            </div>
+        </div>
+        <div class=" mode-container z">
+            <img src="ress/OK.png" id="btn_confirm" onClick="saveOptions()"/>
+        </div>
+    </div>
+</div>
 
-    </body>
+</div>
+<script src="bakery.js"></script>
+<script src="button_displayer.js"></script>
+<script src="options.js"></script>
+<script src="patchnote.js"></script>
+<script src="modals.js"></script>
+<script src="themeSwitcher.js"></script>
+<script>
+    dispDots();
+</script>
+</body>
 </html>

code/infoDisplayer.js

@@ -0,0 +1,36 @@
+var player = document.getElementById("player");
+var mode = document.getElementById("mode");
+var modeString;
+
+if(player!=null)
+{
+    if(get['pseudo']=="")
+    {
+        player.style.display="none";
+    }
+    else
+    {
+        player.innerHTML = get['pseudo'];
+    }
+}
+
+
+if (get['mode'].includes('p'))
+{
+    modeString = get['mode'].substring(0,get['mode'].length-1) + " points";
+}
+else if(get['mode'].includes('m'))
+{
+    modeString = get['mode'].substring(0,get['mode'].length-1) + " minutes";
+}
+else if(get['mode'].includes('s'))
+{
+    modeString = "Survie, +" + get['mode'];
+}
+
+function updateInfos()
+{
+    mode.innerHTML = modeString + ", " + (get["diff"]=="easy" ? "facile" : (get["diff"]=="med" ? "moyen" : "difficile")) + "\n" + (getCookie("pause")==0 ? "pas de pause" : "avec pause");
+}
+
+updateInfos();

code/modals.js

@@ -0,0 +1,20 @@
+// When the user clicks anywhere outside of the modalPatch, close it
+window.onclick = function(event) {
+    if (event.target == modalPatch || event.target == modalOptions) {
+        console.log(modalPatch.style.display + " " + modalOptions.style.display);
+        modalPatch.style.display = "none";
+        modalOptions.style.display = "none";
+        console.log(modalPatch.style.display + " " + modalOptions.style.display);
+
+    }
+}
+
+// When the user clicks on <spanPatch> (x), close the modalPatch
+spanPatch.onclick = function() {
+    modalPatch.style.display = "none";
+}
+
+// When the user clicks on <spanOptions> (x), close the modalOptions
+spanOptions.onclick = function() {
+    modalOptions.style.display = "none";
+}

code/options.js

@@ -0,0 +1,245 @@
+// Get the modalOptions
+var modalOptions = document.getElementById("optionsModal");
+
+// Get the button that opens the modalOptions
+var btnOptions = document.getElementById("btn_options");
+
+// Get the <spanOptions> element that closes the modalOptions
+var spanOptions = document.getElementById("close_options");
+
+// When the user clicks the button, open the modalOptions 
+btnOptions.onclick = function() {
+    modalOptions.style.display = "block";
+    document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
+    document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
+    document.getElementById(getCookie("displayMode")+"_di").classList.add(selectedTheme);
+    if(displ=="both")
+    {
+        applyBackgrounds();
+        
+        backgroundBoth();
+    }
+}
+/*
+// When the user clicks on <spanOptions> (x), close the modalOptions
+spanOptions.onclick = function() {
+    modalOptions.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modalOptions, close it
+window.onclick = function(event) {
+    if (event.target == modalOptions) {
+        modalOptions.style.display = "none";
+        modalPatch.style.display = "none";
+
+    }
+}*/
+
+
+document.getElementById("displays").addEventListener("click", function(){
+    document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
+    document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
+    if(displ=="both")
+    {
+        applyBackgrounds();
+        
+        backgroundBoth();
+    }
+})
+
+function saveOptions() {
+    modalOptions.style.display = "none";
+}
+
+//initialisation des valeurs des préférences
+
+document.getElementById("gems_di").width=size/6;
+document.getElementById("points_di").style.height=size/6;
+document.getElementById("points_di").style.width=size/6;
+document.getElementById("both_di").style.height=size/6;
+document.getElementById("both_di").style.width=size/6;
+document.getElementById("both_di").style.backgroundSize=size/8+"px";
+document.getElementById("btn_confirm").width=size/4;
+
+var displ=getCookie("displayMode");
+
+function selectDisplay(e)
+{
+    displ=e;
+    setCookie("displayMode",e,30);
+    document.getElementById("points_di").classList.remove(selectedTheme);
+    document.getElementById("gems_di").classList.remove(selectedTheme);
+    document.getElementById("both_di").classList.remove(selectedTheme);
+    document.getElementById(e+"_di").classList.add(selectedTheme);
+    backgroundBoth();
+    if(displ=="both")
+    {
+        applyBackgrounds();
+    }
+    dispDots();
+}
+
+function backgroundBoth()
+{
+    
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        eval("slot"+cpt+".classList."+(displ=="both" ? "add" : "remove")+"('dot')");
+        if(displ=="both")
+        {
+            eval("slot"+cpt+".style.backgroundColor='"+gemsSelected[cpt-1]+"'");
+            eval("gem"+cpt+".width=size/8");
+        }
+        else
+        {
+            eval("slot"+cpt+".style.backgroundColor=''");
+            eval("gem"+cpt+".width=size/6");
+        }
+        
+    }
+}
+
+var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];
+
+
+for(var cpt=1;cpt<9;cpt++)
+{
+    eval('pickr'+cpt+` = Pickr.create({
+        el: '.col`+cpt+`',
+        theme: 'monolith',
+        default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
+        useAsButton: true,
+        
+        swatches:["red","yellow","green","purple","black","brown","cyan","orange"],
+        
+        components: {
+            
+            // Main components
+            preview: true,
+            hue: true,
+            
+            // Input / output Options
+            interaction: {
+                hex: true,
+                input: true,
+                clear: true,
+                save: true
+            }
+        }
+    });`);
+    
+    eval("pickr"+cpt+`.on('init', function() {
+        document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
+    }).on('save', function () {
+        document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
+        colorBake();
+        pickr`+cpt+`.hide();
+        dispDots();
+    });`);
+    
+}
+
+function colorBake()
+{
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        setCookie("color_"+cpt,eval("pickr"+cpt+".getColor().toHEXA().toString()"),30);
+    }
+}
+
+function gemBake()
+{
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        setCookie("gem"+cpt,eval("gem"+cpt).src.substring(document.getElementById("gem"+cpt).src.search("/ress")+6),30);
+    }
+}
+
+function allowDrop(ev) {
+    ev.preventDefault();
+}
+
+function drag(ev) {
+    ev.dataTransfer.setData("text", ev.target.id);
+    dragFrom=ev.currentTarget.parentElement;
+}
+
+var dragFrom;
+
+function drop(ev) {
+    ev.preventDefault();
+    var data = ev.dataTransfer.getData("text");
+    var color;
+    if(dragFrom.hasChildNodes() && ev.currentTarget.hasChildNodes() && dragFrom!=ev.currentTarget)
+    {
+        [gemsSelected[dragFrom.id.substring(4)-1],gemsSelected[ev.currentTarget.id.substring(4)-1]]=[gemsSelected[ev.currentTarget.id.substring(4)-1],gemsSelected[dragFrom.id.substring(4)-1]];
+        dragFrom.appendChild(ev.currentTarget.firstChild);
+        ev.currentTarget.appendChild(dragFrom.firstChild);
+        if(displ=="both")
+        {/*
+            var target = document.getElementById("slot"+dragFrom.id.substring(4));
+            target.style.backgroundColor=target.children[0].src.substring(target.children[0].src.search("/ress")+6);
+
+            target = document.getElementById("slot"+ev.currentTarget.id.substring(4));
+            target.style.backgroundColor=target.children[0].src.substring(target.children[0].src.search("/ress")+6);*/
+            applyBackgrounds();
+        }
+        //gemBake();
+    }
+}
+
+function applyBackgrounds()
+{
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        var target = document.getElementById("slot"+cpt);
+        target.classList.add("dot");
+        target.style.backgroundColor=target.children[0].src.substring(target.children[0].src.search("/ress")+6);
+        //console.log("cookie avant : "+getCookie("gem"+cpt));
+        setCookie("gem"+cpt,target.style.backgroundColor,30);
+        //console.log("cookie après : "+getCookie("gem"+cpt));
+        //console.log("trg : "+target.id+ "|"+target.children[0].src.substring(target.children[0].src.search("/ress")+6));
+    }
+    dispDots();
+}
+
+var gemsAvailable=["green","yellow","cyan","red","purple","orange","brown","black"];
+var gemsSelected=[];
+
+for(var cpt=0;cpt<8;cpt++)
+{
+    gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1)));
+    //console.log("get : "+gemsSelected[cpt]);
+}
+
+for(var cpt=1;cpt<9;cpt++)
+{
+    eval("var gemIcon_"+gemsSelected[cpt-1]+"=document.getElementById('gem"+cpt+"')");
+    eval('gemIcon_'+gemsSelected[cpt-1]+'.src="ress/'+gemsSelected[cpt-1]+'"');
+    eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6');
+    
+    eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')");
+    eval("slot"+cpt+".style.width=size/6");
+    eval("slot"+cpt+".style.height=size/6");
+    
+    document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt));
+}
+
+//document.getElementById("resetGems").width=size/2;
+document.getElementById("resetGems2").width=size/4;
+
+function resetGems()
+{
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        setCookie("gem"+cpt,"",30);
+        document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
+        //console.log("sl "+"slot"+cpt+" | "+"gemIcon_"+gemsAvailable[cpt-1]);
+    }
+    
+    if(displ=="both")
+    {
+        //backgroundBoth();
+        applyBackgrounds();
+    }
+}

code/patchnote.js

@@ -0,0 +1,36 @@
+// Get the modalPatch
+var modalPatch = document.getElementById("patchnote");
+
+// Get the button that opens the modalPatch
+var btnPatch = document.getElementById("btn_patchnote");
+
+// Get the <spanPatch> element that closes the modalPatch
+var spanPatch = document.getElementById("close_patchnote");
+
+// When the user clicks the button, open the modalPatch 
+btnPatch.onclick = function() {
+    modalPatch.style.display = "block";
+}
+
+// When the user clicks on <spanPatch> (x), close the modalPatch
+spanPatch.onclick = function() {
+    modalPatch.style.display = "none";
+}
+/*
+// When the user clicks anywhere outside of the modalPatch, close it
+window.onclick = function(event) {
+    if (event.target == modalPatch) {
+        modalPatch.style.display = "none";
+        modalOptions.style.display = "none";
+
+    }
+}
+
+// When the user clicks on <spanPatch> (x), close the modalPatch
+spanPatch.onclick = function() {
+    modalPatch.style.display = "none";
+}
+*/
+
+var content = document.getElementById("patchnote_content");
+//content.style.width=modalPatch.width;

code/patchnote1.txt

@@ -0,0 +1,5 @@
+Modification du mode survie :
+    - La difficulté devient "normal" en atteignant 30 points (si le mode "facile" avait été sélectionné)
+    - La difficulté devient "difficile" en atteignant 60 points (si le mode "facile" ou "normal" avait été sélectionné)
+
+    - Le nombre de secondes récupéré diminue au fil de la partie (une seconde de moins tous les 3 points gagnés, avec un minimum de 15/10/5 secondes selon le mode de difficulté)

code/phpinfo.php

@@ -0,0 +1,13 @@
+<?php
+
+$database = new SQLite3("data.db");
+$sql='select score, player from score where difficulty="easy" order by score desc limit 5';
+$result = $database->query($sql);
+//$a=$result->fetchArray();
+
+$phrase="|";
+while ($row = $result->fetchArray()) {
+        $phrase=$phrase."</br> ".$row["player"].":".$row["score"];
+}
+echo $phrase;
+?>

code/score.html

@@ -1,13 +0,0 @@
-<html>
-    <head>
-        
-    </head>
-    <body>
-        
-    <script src="selecteur.js"></script>
-    Votre score est : <h1 id="points"></h1>
-    <script>
-        document.getElementById("points").innerHTML = get['pts'];
-    </script>
-    </body>
-</html>

code/score.php

@@ -0,0 +1,129 @@
+<html>
+<head>
+
+<link rel="stylesheet" type="text/css" href="index.css"/>
+</head>
+<body>
+    <div class="logo">
+        <img src="ress/logo_dark.png" id="logo"/>
+        <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
+        
+    </div>
+
+<script src="selecteur.js"></script>
+<p class="texteG" id="mode">Mode de jeu : </p>
+<p class="texteG" id="points"></p>
+
+<?php
+$database = new SQLite3("data.db");
+$toDisp=5;
+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"].' order by score desc limit '.$toDisp;
+    $unit="points";
+}
+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"].' order by score asc limit '.$toDisp;
+    $unit="secondes";
+}
+
+$result = $database->query($sql);
+$a=$result->fetchArray();
+
+if($a==false)
+{
+    echo "<p class='texteG'>Vous avez le premier score de ce mode de jeu.</p>";
+}
+else
+{
+    $phrase="1° ".$a["player"].", ".$a[0]." ".$unit;
+    $cpt=2;
+    while ($row = $result->fetchArray()) {
+
+        $phrase=$phrase."</br>".$cpt."° ".$row["player"].", ".$row["score"]." ".$unit;
+        //$phrase+=;
+        $cpt++;
+    }
+        
+    echo "<h1 id='aya' class='texteG mode-container' >".$phrase."</h1>";
+}
+?>
+</br>
+<?php 
+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'].'"';
+    }
+    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'].'"';
+    }
+    $result = $database->query($sqlScore); // on prend le meilleur score du joueur
+    $data = $result->fetchArray()[0];
+
+    if($data==null) // Le joueur n'a pas encore de score enregistré
+    {
+        $sql='select count(*) from game where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"];
+        $result = $database->query($sql);
+
+        if($result->fetchArray()[0]==0) // Si le mode de jeu 'nest pas déjà dans la base, on l'ajoute
+        {
+            $sql='insert into game values("'.$_GET['diff'].'","'.$_GET['mode'].'","---",'.$_COOKIE["dotsAmount"].','.$_COOKIE["pause"].')';
+        }
+
+        $sql='insert into score values("'.$_GET['pseudo'].'","'.$_GET['diff'].'","'.$_GET['mode'].'",'.$_COOKIE["dotsAmount"].','.$_COOKIE["pause"].',date("now"),'.$_GET['pts'].')';
+        $database->query($sql); // enregistrement du score du joueur
+    }
+    else // Le joueur a un score enregistré, vérification s'il dépasse son record
+    {
+        $result = $database->query($sqlScore)->fetchArray()[0];
+        //Si le joueur a un meilleur score (selon le critère du mode), mise à jour
+        if(($data<$_GET['pts'] && stristr($_GET['mode'], "p") === FALSE) || ($data>$_GET['pts'] && stristr($_GET['mode'], "p") !== FALSE))
+        {
+            $sql="update score set score=".$_GET['pts'].",date=date('now') where player='".$_GET['pseudo']."' and game_mode='".$_GET['mode']."' and difficulty='".$_GET['diff']."' and dots_amount=".$_COOKIE["dotsAmount"]." and pause=".$_COOKIE["pause"];
+            $database->query($sql);
+
+            $result=$data;
+            
+        }
+        echo "<input type='hidden' id='rec' value='".$result."'/>";
+    }
+}
+?>
+<div class="mode-container">
+    <a href="./" rel="external"><img id="btn_index" src="ress/button_index.png" class="back" /></a>
+    <img id="btn_replay" src="ress/button_replay.png" class="back" onClick="play()"/>
+</div>
+<script>
+size=screen.height/6;
+phrase=get['pseudo']+", votre "+(get['mode'].includes('p') ? "temps" : "score") +" est "+ get['pts'] +" "+(get['mode'].includes('p') ? "secondes" : "points");
+if(document.getElementById("rec")!=null)
+{
+    phrase+= (document.getElementById("rec").value==get['pts'] ? " et c'est votre record" : " et votre record est "+ document.getElementById("rec").value +" "+(get['mode'].includes('p') ? "secondes" : "points"));
+}
+document.getElementById("points").innerHTML = phrase;
+document.getElementById("btn_index").width=size;
+document.getElementById("btn_replay").width=size;
+
+function play()
+{
+    var pseudo = prompt("Saisissez votre pseudo", getCookie("pseudo"));
+    //setCookie("pause",(document.getElementById("pause_1").checked ? "1" : "0"),30);
+    if(pseudo!="")
+    {
+        setCookie("pseudo",pseudo,30);
+    }
+    
+    window.location.replace("./game.html?mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+ (pseudo==null ? "" : pseudo));
+}
+
+</script>
+
+<script src="bakery.js"></script>
+<script src="themeSwitcher.js"></script>
+<script src="infoDisplayer.js"></script>
+</body>
+</html>

code/selecteur.js

@@ -15,25 +15,33 @@ function $_GET(param) {
 
 var get=$_GET();
 
-if(get['diff']=="no-res")
+if(document.getElementById("canvasR")!=null)
 {
     document.getElementById("canvasR").style.display="none";
     document.getElementById("reserveText").style.display="none";
 }
-if (get['mode'].includes('p'))
+if(document.getElementById("canvasTotal")!=null)
 {
+	if (get['mode'].includes('p'))
+	{
 		objPts=get['mode'].substring(0,get['mode'].length-1);
 		document.getElementById("timer").style.display="none";
-}
-else if(get['mode'].includes('m'))
-{
+	}
+	else if(get['mode'].includes('m'))
+	{
 		objPts=null;
 		tpsRem=[0,parseInt(get['mode'].substring(0,get['mode'].length-1),10),0];
 		document.getElementById("chronotime").style.display="none";
-}
-else if(get['mode']=="surv")
-{
+	}
+	else if(get['mode'].includes('s'))
+	{
 		objPts=null;
 		tpsRem=[0,1,0];
+		tpsPlus=[0,parseInt(get['mode'].substring(0,get['mode'].length-1),10),0];
 		document.getElementById("chronotime").style.display="none";
+	}
 }
+
+
+difficulty=get["diff"];
+console.log("difficulté = "+difficulty+" mode:"+get['mode']);

code/themeSwitcher.js

@@ -0,0 +1,59 @@
+var light= (getCookie("light")=="" ? true : getCookie("light"));
+selectedTheme = "selected"+(light=="true" ? "Day" : "Night");
+
+document.getElementById("light").width=size/4;
+
+if(document.getElementById("logo")!=null)
+{
+    document.getElementById("logo").width=size*2;
+}
+
+
+function switchLight() {
+    light=(light=="true" ? "false" : "true");
+    setCookie("light",light,30);
+    applyLight(light);
+}
+
+function applyLight(li) {
+    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";
+    }
+
+    listeModals=document.getElementsByClassName("modal-content");
+    if(listeModals[0]!=null)
+    {
+        for(cpt=0;cpt<listeModals.length;cpt++)
+        {
+            listeModals[cpt].classList.add((li=="true" ? "day" : "night"));
+            listeModals[cpt].classList.remove((li=="true" ? "night" : "day"));
+        }
+    }
+
+    if(document.getElementById("resetGems")!=null)
+    {
+        document.getElementById("resetGems").src="ress/reset_"+(li=="true" ? "light" : "dark")+".png";
+    }
+    
+    document.getElementsByTagName("body")[0].classList.add((li=="true" ? "day" : "night"));
+    document.getElementsByTagName("body")[0].classList.remove((li=="true" ? "night" : "day"));
+
+    var all = document.getElementsByClassName('selected'+(li!="true" ? "Day" : "Night"));
+    var ids=[];
+    for (var cpt = 0; cpt < all.length; cpt++)
+    {
+        ids.push(all[cpt].id);
+    }
+
+    selectedTheme = "selected"+(li=="true" ? "Day" : "Night");
+
+    for (var cpt = 0; cpt < ids.length; cpt++) {
+        var el=document.getElementById(ids[cpt]);
+        el.classList.remove('selected'+(li!="true" ? "Day" : "Night"));
+        el.classList.add('selected'+(li=="true" ? "Day" : "Night"));
+    }
+}
+
+applyLight(light);

code/timer.js

@@ -1,32 +1,66 @@
-var fin = new Date();
-fin.setMinutes(fin.getMinutes()+tpsRem[1]);
-document.getElementById("timer").innerHTML = tpsRem[0] + ":" + tpsRem[1] + ":" + tpsRem[2];
 
-// Update the count down every 1 second
-var x = setInterval(function() {
+//---------------
+var time_in_minutes = tpsRem[1];
+var current_time = Date.parse(new Date());
+var deadline = new Date(current_time + time_in_minutes*60*1000);
 
-  // Get today's date and time
-  var now = new Date().getTime();;
 
+function time_remaining(endtime){
+	var t = Date.parse(endtime) - Date.parse(new Date());
+	var seconds = Math.floor( (t/1000) % 60 );
+	var minutes = Math.floor( (t/1000/60) % 60 );
+	var hours = Math.floor( (t/(1000*60*60)) % 24 );
+	var days = Math.floor( t/(1000*60*60*24) );
+	return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
+}
 
-  // Find the distance between now and the count down date
-  var distance = fin - now;
+var timeinterval;
+function run_clock(id,endtime){
+	var clock = document.getElementById(id);
+	function update_clock(){
+		var t = time_remaining(endtime);
+		clock.innerHTML = t.hours + ":" + t.minutes + ":" + t.seconds;
+		if(t.total<=0)
+		{ 
+			clearInterval(timeinterval);
+			window.location.replace("./score.php?pts="+points+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
+		}
+	}
+	update_clock(); // run function once at first to avoid delay
+	timeinterval = setInterval(update_clock,1000);
+}
+run_clock('timer',deadline);
 
-  // Time calculations for days, hours, minutes and seconds
-  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
-  document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;
+var pausedC = false; // is the clock paused?
+var time_left; // time left on the clock when paused
 
-  // If the count down is over, write some text 
-  if (distance < 0) {
-    clearInterval(x);
-    window.location.replace("./score.html?pts="+points);
+function pause_clock(){
+	if(!pausedC){
+    pausedC = true;
+		clearInterval(timeinterval); // stop the clock
+		time_left = time_remaining(deadline).total; // preserve remaining time
 	}
-}, 1000);
+}
+
+function resume_clock(){
+	if(pausedC){
+		pausedC = false;
 
-function addTime(secs)
+		// update the deadline to preserve the amount of time remaining
+		console.log("tl"+time_left);
+		deadline = new Date(Date.parse(new Date()) + time_left);
+		console.log("dl"+deadline);
+
+		// start the clock
+		run_clock('timer',deadline);
+	}
+}
+
+function addTime(sec)
 {
-    fin.setSeconds(fin.getSeconds()+secs);
+	console.log(deadline);
+	deadline.setSeconds(deadline.getSeconds() + sec);
+
+	console.log(deadline);
 }

code/tuto.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>On The Dot</title>
+    <link rel="stylesheet" type="text/css" href="game.css"/>
+</head>
+<body>
+    <p class="txt">Faites tourner le vitrail vers la droite pour qu'il corresponde à l'objectif</p>
+    <ul id="all-container" class="all-container"> 
+        <ul class="stats">
+            
+            <p id="temps"></p>
+            <span id="chronotime" class="stats">0:00:00</span>
+            <span id="timer" class="stats">0:00:00</span>
+            <p id="stats" class="stats"></p>
+            
+            <h1>Objectif</h1>
+            
+            <h1>R&eacute;sultat</h1>
+        </ul>
+
+        <ul id="obj-container" class="vitraux">
+            <canvas id="canvasObj" class="vitrail-plein"></canvas>
+            <canvas id="canvasTotal" class="vitrail-plein"></canvas>
+        </ul>
+        <ul id="vitraux" class="vitraux">
+            <canvas id="canvas1" class="vitrail-plein"></canvas>
+            
+            <canvas id="canvas2" class="vitrail-plein"></canvas>
+            
+            <canvas id="canvas3" class="vitrail-plein"></canvas>
+            
+            <canvas id="canvas4" class="vitrail-plein"></canvas>
+        </ul>
+        <ul id="canvasR" class="flex-container">
+            <div id="reserveText">
+                <h1>R&eacute;serve</h1>
+            </div>
+            <canvas id="canvasR1" class="vitrail-vide"></canvas>
+            <canvas id="canvasR2" class="vitrail-vide"></canvas>
+            <canvas id="canvasR3" class="vitrail-vide"></canvas>
+            <canvas id="canvasR4" class="vitrail-vide"></canvas>
+            
+        </ul>
+        
+    </ul>
+    
+    <p id="tuto1" class="txt">Pour faire tourner le vitrail vers la droite, cliquez dans le triangle bleu, puis relâchez le clic dans le triangle vert.</p>
+    <p id="tuto2" class="txt">Pour faire tourner le vitrail vers la gauche, cliquez dans le triangle bleu, puis relâchez le clic dans le triangle vert.</p>
+
+
+
+    <script>var tutoMode=true;</script>
+    <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>
+    <script src="tutorial.js"></script>
+</body>
+
+</html>

code/tutorial.js

@@ -0,0 +1,55 @@
+function handleTuto()
+{
+    console.log("tuto");
+    points++;
+    if(points==0)
+    {
+        tab1=[true,[-3,-3,"brown_1"],[-3,-2,"cyan_2"]];
+        tab2[0]=false;
+        tab3[0]=false;
+        tab4[0]=false;
+        document.getElementById("canvas2").style.display="none";
+        document.getElementById("canvas3").style.display="none";
+        document.getElementById("canvas4").style.display="none";
+        console.log("1");
+        tabObj=[copyMDArray(tab1)];
+        empiler(true);
+        console.log(tabObj);
+        tourneD(tabObj,canvasO,ctxO,0);
+        empiler(true);
+        toutDessiner(tab1,canvas1,ctx1);
+        toutDessiner(tabObjCmp,canvasO,ctxO);
+        faireLignes(ctx1);
+        faireTriangle(ctx1,"H","#0000FF50");
+        faireTriangle(ctx1,"D","#00FF0050");
+    }
+}
+
+function faireLignes(ctx)
+{
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(size, size);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(0, size);
+    ctx.lineTo(size, 0);
+    ctx.stroke();
+}
+
+function faireTriangle(ctx,dir,color)
+{
+    var a = (dir=="H" || dir=="G" ? 0 : size);
+    var b = (dir=="H" || dir=="D" ? size : 0);
+    var c = (dir=="H" || dir=="D" ? 0 : size);
+
+    ctx.beginPath();
+    ctx.moveTo(a,a);
+    ctx.lineTo(size/2,size/2);
+    ctx.lineTo(b,c);
+    ctx.lineTo(a,a);
+    ctx.fillStyle = color;
+    ctx.fill();
+}
+
+handleTuto();

code/vitraux.js

@@ -1,40 +1,81 @@
+var difficulties=["easy","med","hard"];
+
 var canvasT = document.getElementById('canvasTotal');
-        var ctxT = canvasT.getContext('2d');
+var ctxT = canvasT.getContext('2d');
 
-        var canvasO = document.getElementById('canvasObj');
-        var ctxO = canvasO.getContext('2d');
+var canvasO = document.getElementById('canvasObj');
+var ctxO = canvasO.getContext('2d');
 
-        var canvasR = document.getElementById('canvasR');
-        //var ctxR = canvasR.getContext('2d');
+var canvasR = document.getElementById('canvasR');
+//var ctxR = canvasR.getContext('2d');
 
-        tab1=[];
-        tab2=[];
-        tab3=[];
-        tab4=[];
+tab1=[];
+tab2=[];
+tab3=[];
+tab4=[];
 
-        tabR=[[],[],[],[],[]];
+tabR=[[],[],[],[],[]];
 
-        tabR1=[];
-        tabR2=[];
-        tabR3=[];
-        tabR4=[];
+tabR1=[];
+tabR2=[];
+tabR3=[];
+tabR4=[];
 
-        points=0;
-        tabTotal=[];
-        tabObjCmp=[];
-        mousePos=[];
-        colorsAvailable=["red","yellow","green","purple"];
-        colors=["red","yellow","green","purple"];
+points=0;
+tabTotal=[];
+tabObjCmp=[];
+mousePos=[];
+
+var pause=getCookie("pause");
+var won=false;
 
-        size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px
-        canvasT.width=size;
-        canvasO.width=size;
+var displayType = getCookie("displayMode")=="" ? "gems" : getCookie("displayMode");
 
-        canvasT.height=size;
-        canvasO.height=size;
+var dotsAmount= getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount");
+var colors=[];
+var colorsAvailable=["red","yellow","green","purple","black","brown","cyan","orange"];
+var customColorsAvailable=[];
 
-        for(var a=1;a<5;a++)
+for(var cpt=1;cpt<9;cpt++)
+{
+    customColorsAvailable.push((getCookie("color_"+cpt)=="" ? colorsAvailable[cpt-1] : getCookie("color_"+cpt)));
+}
+
+var gemsAvailable=["red","yellow","green","purple","black","brown","cyan","orange"];
+var gemsSelected=[];
+
+for(var cpt=0;cpt<8;cpt++)
+{
+  gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1)));
+}
+
+for(var cpt=0;cpt<dotsAmount;cpt++)
+{
+    if(displayType=="points")
+    {
+        colors.push(customColorsAvailable[cpt]+"_"+cpt);
+    }
+    else
     {
+        colors.push(gemsSelected[cpt]+"_"+cpt);
+    }
+}
+
+size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50x
+canvasT.width=size;
+canvasO.width=size;
+
+canvasT.height=size;
+canvasO.height=size;
+
+document.getElementById("btn_back").width=size;
+document.getElementById("obj_box").style.width=size+"px";
+document.getElementById("obj_box").style.height=size+"px";
+document.getElementById("res_box").style.width=size+"px";
+document.getElementById("res_box").style.height=size+"px";
+
+for(var a=1;a<5;a++)
+{
     eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
     eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
     eval("canvas"+a+".width=size");
@@ -44,9 +85,9 @@ var canvasT = document.getElementById('canvasTotal');
     eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
     eval("canvasR"+a+".width=size");
     eval("canvasR"+a+".height=size");
-        }
+}
 
-        function faireCercle(x,y,color,lectx){
+function faireCercle(x,y,color,lectx){
     var cercle = new Path2D();
     
     nx=(size/6)*(x>0 ? x+2 : x+3);
@@ -55,39 +96,95 @@ var canvasT = document.getElementById('canvasTotal');
     cercle.moveTo(nx, ny);
     cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
     
-            lectx.fillStyle = color;
+    lectx.fillStyle = color.substring(0, color.length-2);
     lectx.fill(cercle);
-        }
+}
 
-        function drawImg(x,y,color,lectx)
-        {
+function drawImg(x,y,color,lectx)
+{
     var img= new Image();
     
     
     var nx=(size/6)*(x>0 ? x+2 : x+3);
     var ny=(size/6)*(y>0 ? y+2 : y+3);
     
-            img.src="ress/"+color+".png";
+    img.src="ress/"+color.substring(0, color.length-2)+".png";
     
     img.onload = function(){
+        if(displayType=="gems")
+        {
             lectx.drawImage(img,nx,ny,size/6,size/6); 
         }
+        else
+        {
+            lectx.drawImage(img,nx+(size/48),ny+(size/48),size/8,size/8);  
+        }
+    }
+    
+}
 
+function genVitraux()
+{
+    var mat = matrix(6,6);
+    var x;
+    var y;
+    var baseVitrail=[];
+    var tries;
+
+    for(var cpt=0;cpt<dotsAmount;cpt++)
+    {
+        x=getRandomInt(6)-1;
+        y=getRandomInt(6)-1;
+
+        while(mat[x][y]!=0 && tries!=20)
+        {
+            x=getRandomInt(6)-1;
+            y=getRandomInt(6)-1;
+
+            tries++;
+        }
+
+        mat[x][y]=1;
+        x-=2;
+        y-=2;
+        baseVitrail.push([(x>0 ? x : x-1),(y>0 ? y : y-1),colors[cpt]]);
+        tries=0;
     }
     
-        function tourneG(letab,lecanvas,lectx)
+    for(var i=1;i<5;i++)
     {
+        eval("tab"+i+"=copyMDArray(baseVitrail)");
+        eval("tab"+i+".unshift(true)");
+    }
+}
+
+function tourneG(letab,lecanvas,lectx,sselem=null)
+{
+    
+    if(sselem==null){
         letab.forEach(element => {
             tmp=element[0];
             element[0]=element[1];
             element[1]=-tmp;
         });
-            toutDessiner(letab,lecanvas,lectx);
-            empiler();
     }
     
-        function tourneD(letab,lecanvas,lectx,sselem=null)
-        {
+    else {
+        letab[sselem].forEach(element => {
+            tmp=element[1];
+            element[1]=element[0];
+            element[0]=-tmp;
+        });
+    }
+    //console.log("pre-empiler :"+tabTotal);
+    empiler(sselem!=null);
+    //console.log("post-empiler :"+tabTotal);
+    if(sselem==null)
+    toutDessiner(letab,lecanvas,lectx);
+}
+
+function tourneD(letab,lecanvas,lectx,sselem=null)
+{
     if(sselem==null){
         letab.forEach(element => {
             tmp=element[1];
@@ -108,10 +205,10 @@ var canvasT = document.getElementById('canvasTotal');
     //console.log("post-empiler :"+tabTotal);
     if(sselem==null)
     toutDessiner(letab,lecanvas,lectx);
-        }
+}
 
-        function toutDessiner(pts,lecanvas,lectx)
-        {
+function toutDessiner(pts,lecanvas,lectx)
+{
     lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
     if(pts[0])
     {
@@ -120,15 +217,17 @@ var canvasT = document.getElementById('canvasTotal');
         {
             if(Array.isArray(pts[i]))
             {
+                if(displayType=="points" || displayType=="both")
                     faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                if(displayType=="gems" || displayType=="both")
                     drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
             }
         }
     }
-        }
+}
 
-        function empiler(obj=false)
-        {
+function empiler(obj=false)
+{
     const unique = (val) => val.toString() != test.toString();
     var exists=false;
     
@@ -137,9 +236,8 @@ var canvasT = document.getElementById('canvasTotal');
         tabTotal=[];
         if(tab1[0])
         {
-                    
             tab1.forEach(element => {
-                        if(Array.isArray(element))
+                if(Array.isArray(element) && element.length!=0)
                 {
                     tabTotal.push(element);
                 }
@@ -148,7 +246,7 @@ var canvasT = document.getElementById('canvasTotal');
         if(tab2[0]){
             
             tab2.forEach(element => {
-                        if(Array.isArray(element))
+                if(Array.isArray(element) && element.length!=0)
                 {
                     colors.forEach(col => {
                         test=[element[0],element[1],col];
@@ -157,6 +255,7 @@ var canvasT = document.getElementById('canvasTotal');
                     })
                     if(!exists)
                     tabTotal.push(element);
+                    //console.log("tabtotal tab2 "+tabTotal+"|");
                     exists=false;
                 }
             })
@@ -165,7 +264,7 @@ var canvasT = document.getElementById('canvasTotal');
         {
             
             tab3.forEach(element => {
-                        if(Array.isArray(element)){
+                if(Array.isArray(element) && element.length!=0){
                     colors.forEach(col => {
                         test=[element[0],element[1],col];
                         if(!exists)
@@ -180,7 +279,7 @@ var canvasT = document.getElementById('canvasTotal');
         if(tab4[0]){
             
             tab4.forEach(element => {
-                        if(Array.isArray(element))
+                if(Array.isArray(element) && element.length!=0)
                 {
                     colors.forEach(col => {
                         test=[element[0],element[1],col];
@@ -218,9 +317,9 @@ var canvasT = document.getElementById('canvasTotal');
             }
         }
     }
-        }
+}
 
-        function swap(letab, lecanvas, lectx,ladir){
+function swap(letab, lecanvas, lectx,ladir){
     if(ladir=="H"){
         letab.forEach(element=> {
             element[1]=-element[1];
@@ -231,40 +330,88 @@ var canvasT = document.getElementById('canvasTotal');
             element[0]=-element[0];
         })
     }
+    if(lecanvas!=null)
+    {
         
         toutDessiner(letab,lecanvas,lectx);
         empiler();
     }
+}
 
-        function getRandomInt(max) {
+function getRandomInt(max) { //rng entier [1;max]
     return Math.floor(Math.random() * Math.floor(max))+1;
-        }
+}
 
-        function copyMDArray(array) //permet la copie d'arrays sans copier les références
-        {
+function copyMDArray(array) //permet la copie d'arrays sans copier les références
+{
     var newArray = [];
     array.forEach(element => {
         newArray.push(Array.from(element))
     });
     return newArray
-        }
+}
 
-        function generateEasy(){
-            console.log(copyMDArray(tab1))
+function generate(){
     tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
     tabObjCmp=[];
-            actions=getRandomInt(8)+1;
+    var actions=getRandomInt(4)+1; //2-6
+    var swapTreshold=11;
+    var switchTreshold=11;
+    if(difficulty=="med") //70% tournerD, 30% swap
+    {
+        actions+=getRandomInt(3)+3; //+4-6 6-12
+        swapTreshold=8;
+    }
+    if(difficulty=="hard") //50% tournerD, 30% swap, 20% switch
+    {
+        actions+=getRandomInt(5)+5; //+6-10 12-22
+        swapTreshold=6;
+        switchTreshold=9;
+    }
+    
+    console.log("actions : "+actions+" difficulty="+difficulty);
     
     while(actions>0){
+        if(difficulty!="easy")
+        act=getRandomInt(10);
+        else
+        act=1;
+        //console.log("act="+act+" left:"+actions);
+        if(switchTreshold<=act && actions>3) // faire un switch
+        {
+            var from=getRandomInt(4)-1;
+            var to=getRandomInt(4)-1;
+            while(from==to)
+            to=getRandomInt(4)-1;
+            
+            [tabObj[from],tabObj[to]]=[tabObj[to],tabObj[from]];
+            //console.log("switch "+from+"->"+to);
+            actions-=3;
+        }
+        else if(swapTreshold<=act && actions>2)
+        {
+            var from=getRandomInt(4)-1;
+            var dir=getRandomInt(2)==1 ? "H":"V";
+            swap(tabObj[from],null,ctxO,dir);
+            //console.log("swap"+dir+" de "+from);
+            actions-=2;
+        }
+        else
+        {
             tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
-                actions--;
+            actions-=1;
+        }
     }
     empiler(true);
+    if(checkAllOK(true)==true)
+    {
+        generate();
+    }
     toutDessiner(tabObjCmp,canvasO,ctxO);
     
-        }
+}
 
-        function getMousePosition(lecanvas, event, lectx, letab) { 
+function getMousePosition(lecanvas, event, lectx, letab) { 
     let rect = lecanvas.getBoundingClientRect(); 
     let x = event.clientX - rect.left; 
     let y = event.clientY - rect.top; 
@@ -274,12 +421,12 @@ var canvasT = document.getElementById('canvasTotal');
     tourneG(letab,lecanvas,lectx);
     else
     tourneD(letab,lecanvas,lectx);
-        } 
+} 
 
-        /// renvoie le point cardianl où se trouve le point
+/// renvoie le point cardianl où se trouve le point
 
-        function compas(x,y,lecanvas)
-        {
+function compas(x,y,lecanvas)
+{
     rect = lecanvas.getBoundingClientRect(); 
     x = event.clientX - rect.left; 
     y = event.clientY - rect.top; 
@@ -290,11 +437,11 @@ var canvasT = document.getElementById('canvasTotal');
     if(ne && !se ) return "N";
     if(!ne && se ) return "S";
     if(!ne && !se ) return "O";
-        }
+}
 
 
-        function rotationManager(e)
-        {
+function rotationManager(e)
+{
     var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
     canvasNumber=e.currentTarget.id.substring(6);
     document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
@@ -310,15 +457,13 @@ var canvasT = document.getElementById('canvasTotal');
         break;
     }
     
-            console.log("firstAv="+firstAv);
-            
     if(mouseOnRes && !canvasNumber.includes("R")) //clic dans la réserve, relâche sur la pile en jeu
     {
         if(!isVisible(canvasNumber)) //relâche sur emplacement vide au centre
         {
             toggleVisible(canvasNumber);
             tabR[canvasNumber]=[];
-                    console.log("contenu du tabR[cn] : "+tabR[canvasNumber]);
+            //console.log("contenu du tabR[cn] : "+tabR[canvasNumber]);
             toggleVisible(mousePos[0].substring(1),true);
         }
     }
@@ -374,10 +519,10 @@ var canvasT = document.getElementById('canvasTotal');
             }
         }
     }
-        }
+}
 
 
-        function checkAllOK(){
+function checkAllOK(justChecking=false){
     //const condition = (val) => val.toString() == element.toString();
     var exists=true;
     //exists=!tabObjCmp.every(unique);
@@ -390,6 +535,7 @@ var canvasT = document.getElementById('canvasTotal');
         for(i=0;i<tabTotal.length;i++)
         {
             const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
+            //console.log(verifTab.filter(point => point.toString()+" et "+tabObjCmp[i].toString()));
             exists*=result.length;
         }
     }
@@ -398,33 +544,79 @@ var canvasT = document.getElementById('canvasTotal');
         exists=false;
     }
     
-            if(exists)
+    if(!tutoMode)
+    {
+        if(exists && !justChecking)
         {
             var audio = new Audio('ress/Jewel4.mp3');
             audio.play();
             handleScore(1);
-                generateEasy();
+            if(pause)
+            {
+                chronoStop();
+                pause_clock();
             }
+            won=true;
         }
-
-        function handleScore(modif)
+        else if(justChecking)
+        {
+            return exists;
+        }
+    }
+    else
     {
+        if(points==0)
+        {
+            points=-1;
+            console.log("points "+points);
+        }
+        if(exists)
+        {
+            handleTuto();
+        }
+        
+    }
+    
+}
+
+function handleSurvival()
+{
+    difficulty=difficulties[Math.min(parseInt(points/20),2)];
+    updateInfos();
+    tpsPlus=Math.max(tpsPlus[1]-parseInt(points/3),tpsPlus[1]/3);
+    console.log(tpsPlus);
+    return tpsPlus;
+}
+
+function handleScore(modif)
+{
     points+=modif;
     document.getElementById("stats").innerHTML = points+" points";
 
+    document.getElementById("canvasObj").classList.add("win");
+    document.getElementById("canvasTotal").classList.add("win");
+
+    for(var cpt=1;cpt<5;cpt++)
+    {
+        document.getElementById("canvas"+cpt).classList.add("win");
+    }
+    
     if(objPts!=null && points==objPts)
     {
         chronoStop();
-                window.location.replace("./score.html?pts="+document.getElementById("chronotime").innerHTML);
+
+        var pts = diff.getSeconds()+ (diff.getMinutes()*60) + ((diff.getHours()-1)*3600);
+        window.location.replace("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
     }
-            else if(get['mode']=="surv")
+    else if(get['mode'].includes("s"))
     {
-                addTime(30);
-            }
+        addTime(handleSurvival());
+        console.log("add time");
     }
+}
 
-        function changeOrder(from, to)
-        {
+function changeOrder(from, to)
+{
     if(from.includes("R"))
     fromTab=tabR[from];
     else
@@ -447,10 +639,10 @@ var canvasT = document.getElementById('canvasTotal');
     toutDessiner(tabTotal,canvasT,ctxT);
     
     
-        }
+}
 
-        function isVisible(what)
-        {
+function isVisible(what)
+{
     if(what.includes("R"))
     {
         if(tabR[what.substring(1)]==null)
@@ -459,10 +651,10 @@ var canvasT = document.getElementById('canvasTotal');
     }
     
     return eval("tab"+what+"[0]");
-        }
+}
 
-        function toggleVisible(where,reserve=false)
-        {
+function toggleVisible(where,reserve=false)
+{
     if(!reserve)
     {
         eval("tab"+where+"[0]=!tab"+where+"[0];");
@@ -475,9 +667,17 @@ var canvasT = document.getElementById('canvasTotal');
         tabR[where][0]=!tabR[where][0];
         toutDessiner(tabR[where],eval("canvasR"+where),eval("ctxR"+where));
     }
+}
+
+function matrix(m, n) {
+    var result = []
+    for(var i = 0; i < n; i++) {
+        result.push(new Array(m).fill(0))
     }
+    return result
+}
 
-        function events() {
+function events() {
     for(var i=1;i<5;i++)
     {
         eval("canvas"+i).addEventListener("mousedown",function(e){mdManager(e);});
@@ -490,43 +690,69 @@ var canvasT = document.getElementById('canvasTotal');
         eval("canvasR"+i).addEventListener("mouseenter",function(e){meManager(e);});
         eval("canvasR"+i).addEventListener("mouseleave",function(e){mlManager(e);});
     }
-        }
+}
 
-        function mdManager(e){
+function mdManager(e){
     mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-            document.getElementById(e.currentTarget.id).classList.add('vitrail-select');
+
+    document.getElementById("canvasObj").classList.remove("win");
+    document.getElementById("canvasTotal").classList.remove("win");
+
+    for(var cpt=1;cpt<5;cpt++)
+    {
+        document.getElementById("canvas"+cpt).classList.remove("win");
+    }
+
+    if(won)
+    {
+        won=!won;
+        generate();
     }
 
-        function muManager(e){
+    if(paused)
+    {
+        chronoContinue();
+        resume_clock();
+    }
+        
+    document.getElementById(e.currentTarget.id).classList.add('vitrail-select');
+}
+
+function muManager(e){
     rotationManager(e);
     mousePos=[];
-        }
+}
 
-        function meManager(e) {
+function meManager(e) {
     document.getElementById(e.currentTarget.id).classList.add('vitrail-hover');
-        }
+}
 
-        function mlManager(e) {
+function mlManager(e) {
     document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover');
-        }        
+}        
 
+function index()
+{
+    window.location.href="./index.php";
+}
 
-        tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
+genVitraux();
 
-        toutDessiner(tab1,canvas1,ctx1);
-        toutDessiner(tab2,canvas2,ctx2);
-        toutDessiner(tab3,canvas3,ctx3);
-        toutDessiner(tab4,canvas4,ctx4);
+toutDessiner(tab1,canvas1,ctx1);
+toutDessiner(tab2,canvas2,ctx2);
+toutDessiner(tab3,canvas3,ctx3);
+toutDessiner(tab4,canvas4,ctx4);
 
-        empiler();
-        toutDessiner(tabTotal,canvasT,ctxT);
+empiler();
+toutDessiner(tabTotal,canvasT,ctxT);
 
-        document.getElementById("stats").innerHTML = points+" points";
+document.getElementById("stats").innerHTML = points+" points";
 
-        events();
+events();
 
-        generateEasy();
+if(!tutoMode)
+{
+    generate();
     chronoStart();
+}
+