MAJ du mode survie + ajout "patchnote"

+ correction logo pour adapter aux droits

.gitignore

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

code/button_displayer.js

@@ -1,70 +1,151 @@
 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=null;
+var modeSelected;
-var diffSelected=null;
+var diffSelected;
+var pauseSelected;
+
+var selectedTheme="selectedDay";
 
 var btn_options=document.getElementById("btn_options");
-btn_options.width=size;
+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 btn"+element+"= document.getElementById('btn_"+element+"')");
+
-    eval("btn_"+element+".width=size");
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
-    eval("btn_"+element).addEventListener("mousedown",function(e){disp(e);});
+    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=0;i<tab.length;i++){
+    for(var i=1;i<tab.length;i+=2){
-        tab.item(i).width=size;
+        tab.item(i).children[0].width=size/1.25;
-        tab.item(i).addEventListener("mousedown",function(e)
+        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=0;cptChild<tabChilds.length;cptChild++)
+                for(var cptChild=1;cptChild<tabChilds.length;cptChild+=2)
                 {
-                    tabChilds.item(cptChild).classList.remove("selected");
+                    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("selected");
+            document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
-            modeSelected= e.currentTarget.id;
+            if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
-            if(modeSelected!=null && diffSelected!=null)
             {
-                document.getElementById("btn_play").disabled = false;
+                document.getElementById(modeSelected).checked=true;
+
+                document.getElementById("high_form").submit();
             }
         });
     }
 });
 
 diffs.forEach(element => {
-    eval("var btn_"+element+"= document.getElementById('btn_"+element+"')");
+    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
-    eval("btn_"+element+".width=size");
+    eval("img_"+element+".width=size/1.25");
-    eval("btn_"+element).addEventListener("mousedown",function(e)
+    eval("img_"+element).addEventListener("mousedown",function(e)
     {
-        diffSelected= e.currentTarget.id;
+        diffSelected= e.currentTarget.id.substring(4);
         var tab=document.getElementById("diff").children;
-        for(var cpt=0;cpt<tab.length;cpt++)
+        for(var cpt=1;cpt<tab.length;cpt+=2)
         {
-            tab.item(cpt).classList.remove("selected");
+            tab.item(cpt).children[0].classList.remove(selectedTheme);
         }
-        document.getElementById(e.currentTarget.id).classList.add("selected");
+        document.getElementById(e.currentTarget.id).classList.add(selectedTheme);
-        if(modeSelected!=null && diffSelected!=null)
+        if(diffSelected!="" && modeSelected!="" && pauseSelected!="")
         {
-            document.getElementById("btn_play").disabled = false;
+            document.getElementById(diffSelected).checked=true;
+            document.getElementById("high_form").submit();
         }
     });
 })
 
-function disp(what)
+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=what.currentTarget.id.substring(4);
+    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";
@@ -74,5 +155,118 @@ function hideAll()
 
 function play()
 {
-    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo").value);
+    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;
   }
@@ -102,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,24 +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">
+        <ul class="vitraux stats">
-            <p id="temps"></p>
+            <div id="obj_box" class="parent">
-            <span id="chronotime" class="stats">0:00:00</span>
+                <h1 class="child" id="obj_text" >Objectif</h1>
-            <span id="timer" class="stats">0:00:00</span>
+            </div>
-            <p id="stats" class="stats"></p>
             
-            <h1>Objectif</h1>
+            <div id="res_box" class="parent">
+                <h1 class="child" id="res_text" >R&eacute;sultat</h1>
+            </div>
 
-            <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>
+
+            <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>
@@ -34,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>
@@ -44,11 +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/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

@@ -1,55 +1,60 @@
-.all-container {
+@font-face {
-    display : flex;
+  font-family: Segoe; src: url('ress/segoepr.ttf');
+}
 
-    align-items: baseline;
+.all-container {
-    width : min-content;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    }
 
-    margin: 5px;
+.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;
 }
 
-.button {
+.ad {
-    padding: 2px;
+  width: min-content;
+  margin-left: auto;
+  margin-right: auto;
+
 }
 
-.selected {
+.z {
-    -webkit-box-shadow:inset 0px 0px 0px 5px black;
+  margin-left: auto;
-    -moz-box-shadow:inset 0px 0px 0px 5px black;
+  margin-right: auto;
-    box-shadow:inset 0px 0px 0px 5px black;
 }
 
-.slider {
+.day   { background: #eee; color: black; }
-    -webkit-appearance: none;
+.night { background: #333; color: white; }
-    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 {
+.button {
-    width: 25px;
+    padding: 2px;
-    height: 25px;
+}
-    border-radius: 50%;
-    background: #4CAF50;
-    cursor: pointer;
-  }
 
+.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 */
@@ -61,13 +66,13 @@
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
+    /*background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
   
   /* Modal Content */
   .modal-content {
-    background-color: #fefefe;
+    /*background-color: #fefefe;*/
     margin: auto;
     padding: 20px;
     border: 1px solid #888;
@@ -88,3 +93,83 @@
     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.php

@@ -2,86 +2,291 @@
 <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>
-<?php
+<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()"/>
+        
+    </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");
-function displayHighscore() {
+
-    //d
+// 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()) {
 
-Jouer la partie en : </br>
+        $phrase=$phrase."</br>".$cpt."° ".$row["player"].", ".$row["score"]." ".$unit;
-<div id="modeSelection">
+        $cpt++;
-    <ul id="modes" class="all-container">
+    }
-        <img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
-        <img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
-        <img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
-    </ul>
-    <ul id="points" class="all-container">
-        <img id="5p" class="button" src="./ress/button_points_5.png"/>
-        <img id="10p" class="button" src="./ress/button_points_10.png"/>
-        <img id="15p" class="button" src="./ress/button_points_15.png"/>
-        <img id="20p" class="button" src="./ress/button_points_20.png"/>
-    </ul>
-    <ul id="temps" class="all-container">
-        <img id="5m" class="button" src="./ress/button_temps_5.png"/>
-        <img id="10m" class="button" src="./ress/button_temps_10.png"/>
-    </ul>
-    <ul id="survie" class="all-container">
-        <img id="surv" class="button" src="./ress/button_mode_survie.png"/> 
-    </ul>
-</div>
-    <ul id="diff" class="all-container">
-        <img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
-        <img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
-        <img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
-    </ul>
 
-    Entrez votre pseudo (optionnel, mais n&eacute;cessaire si vous voulez sauvegarder votre score):
+}
-    <input type="text" id="field_pseudo" />
 
-    <button id="btn_play" onClick="play()" disabled>Jouer ?</button>
+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>
+?>
-    Partie en points : la partie finit quand vous obtenez le nombre de points choisi. Mettez le moins de temps possible ! </br>
+<div class="mode-container">
-    Partie en temps : la partie finit quand le temps imparti est &eacute;coul&eacute;. Obtenez le plus de points possible ! </br>
+    <ul id="btns_play">
-    Partie en survie : la partie finit quand le temps atteint 0. Gagner un point vous rajoute 30s, obtenez le plus de points possible ! </br>
+        <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
+    </ul>
 </div>
 
-<img id="btn_options" src="./ress/gear.png"/>
+<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">
+<div class="modal-content" id="modal">
-    <span class="close">&times;</span>
+    <span class="close" id="close_options">&times;</span>
-    <p>Options :</p>
+    <p class="texte ad">Options</p>
     <div class="slidecontainer">        
-        <p>Changer le nombre de points</p>
+            <div id="displays">
-        <input type="range" min="2" max="8" value="4" class="slider" id="range_dots">
+            <p class="texte">
-        <p>Nombre de points : <span id="dotsNumber"></span></p>
+            Mode d'affichage 
-        <p>
+            <span id="points_di" class="dot" onClick="selectDisplay('points')"></span>
-            Mode d'affichage :
+            <img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/>
+            <span id="both_di" class="dot both" onClick="selectDisplay('both')"></span>
         </p>
-        <select name="displays" id="displays">
+        </div>
-            <option value="points">Seulement des points</option>
-            <option value="gems">Seulement des gemmes</option>
-            <option value="both">Les deux</option>
-        </select>
                 
-        <button id="btn_options" onClick="saveOptions()">Valider</button>
+        <div 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>
 
 </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

@@ -1,38 +1,245 @@
-// Get the modal
+// Get the modalOptions
-var modal = document.getElementById("optionsModal");
+var modalOptions = document.getElementById("optionsModal");
 
-// Get the button that opens the modal
+// Get the button that opens the modalOptions
-var btn = document.getElementById("btn_options");
+var btnOptions = document.getElementById("btn_options");
 
-// Get the <span> element that closes the modal
+// Get the <spanOptions> element that closes the modalOptions
-var span = document.getElementsByClassName("close")[0];
+var spanOptions = document.getElementById("close_options");
 
-// When the user clicks the button, open the modal 
+// When the user clicks the button, open the modalOptions 
-btn.onclick = function() {
+btnOptions.onclick = function() {
-  modal.style.display = "block";
+    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();
         
-// When the user clicks on <span> (x), close the modal
+        backgroundBoth();
-span.onclick = function() {
+    }
-  modal.style.display = "none";
+}
+/*
+// 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 modal, close it
+// When the user clicks anywhere outside of the modalOptions, close it
 window.onclick = function(event) {
-  if (event.target == modal) {
+    if (event.target == modalOptions) {
-    modal.style.display = "none";
+        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";
 }
 
-var slider = document.getElementById("range_dots");
+//initialisation des valeurs des préférences
-var output = document.getElementById("dotsNumber");
+
-output.innerHTML = slider.value;
+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;
 
-slider.oninput = function() {
+var displ=getCookie("displayMode");
-  output.innerHTML = this.value;
+
+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 saveOptions() {
+function backgroundBoth()
-    setCookie("dotsAmount",document.getElementById("range_dots").value,30);
+{
-    setCookie("displayMode",document.getElementById("displays").value,30);
+    
+    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

@@ -1,4 +1,13 @@
 <?php
 
-phpinfo();
+$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.php

@@ -1,70 +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>
-Votre score est : <h1 id="points"></h1>
+<p class="texteG" id="mode">Mode de jeu : </p>
-</br>
+<p class="texteG" id="points"></p>
+
 <?php
 $database = new SQLite3("data.db");
+$toDisp=5;
 if(stristr($_GET['mode'], "p") === FALSE)
-    {
+{
-        $sql='select max(points) from scores where mode="'.$_GET['mode'].'" and diff="'.$_GET['diff'].'"';
+    $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
+}
-    {
+else
-        $sql='select min(points) from scores where mode="'.$_GET['mode'].'" and diff="'.$_GET['diff'].'"';
+{
-    }
+    $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[0]==null)
+
+if($a==false)
 {
-    echo "Vous avez le premier score de ce mode de jeu.";
+    echo "<p class='texteG'>Vous avez le premier score de ce mode de jeu.</p>";
 }
 else
 {
-    echo "Le record est ".$a[0];
+    $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)
+    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(points) from scores where mode="'.$_GET['mode'].'" and diff="'.$_GET['diff'].'" and player="'.$_GET['pseudo'].'"';
+        $sqlScore='select max(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"';
     }
     else
-    {
+    { // on est en points, donc on cherche le temps le plus faible
-        $sqlScore='select min(points) from scores where mode="'.$_GET['mode'].'" and diff="'.$_GET['diff'].'" and player="'.$_GET['pseudo'].'"';
+        $sqlScore='select min(score) from score where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"].' and player="'.$_GET['pseudo'].'"';
     }
-    
+    $result = $database->query($sqlScore); // on prend le meilleur score du joueur
-    $result = $database->query($sqlScore);
     $data = $result->fetchArray()[0];
-    if($data==null)
+
+    if($data==null) // Le joueur n'a pas encore de score enregistré
     {
-        echo "Ceci est votre première partie dans ce mode de jeu.";
+        $sql='select count(*) from game where game_mode="'.$_GET['mode'].'" and difficulty="'.$_GET['diff'].'" and dots_amount='.$_COOKIE["dotsAmount"].' and pause='.$_COOKIE["pause"];
-        $sql='insert into scores values("'.$_GET['pseudo'].'","'.$_GET['mode'].'","'.$_GET['diff'].'",date("now"),'.$_GET['pts'].')';
+        $result = $database->query($sql);
-        $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
+    else // Le joueur a un score enregistré, vérification s'il dépasse son record
     {
-        if($data>$_GET['pts'])
+        $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 scores set points='".$_GET['pts']."',date=date('now') where player='".$_GET['pseudo']."' and mode='".$_GET['mode']."' and diff='".$_GET['diff']."'";
+            $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;
+            
         }
-        $result = $database->query($sqlScore);
+        echo "<input type='hidden' id='rec' value='".$result."'/>";
-        echo "Votre record est ".$result->fetchArray()[0];
     }
 }
 ?>
+<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>
-document.getElementById("points").innerHTML = get['pts'];
+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,28 +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'))
-{
-    objPts=get['mode'].substring(0,get['mode'].length-1);
-    document.getElementById("timer").style.display="none";
-}
-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")
+if(document.getElementById("canvasTotal")!=null)
 {
-    objPts=null;
+	if (get['mode'].includes('p'))
-    tpsRem=[0,1,0];
+	{
-    document.getElementById("chronotime").style.display="none";
+		objPts=get['mode'].substring(0,get['mode'].length-1);
+		document.getElementById("timer").style.display="none";
+	}
+	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'].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};
+}
+
+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);
 
 
-  // Find the distance between now and the count down date
+var pausedC = false; // is the clock paused?
-  var distance = fin - now;
+var time_left; // time left on the clock when paused
 
-  // Time calculations for days, hours, minutes and seconds
+function pause_clock(){
-  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+	if(!pausedC){
-  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    pausedC = true;
-  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+		clearInterval(timeinterval); // stop the clock
+		time_left = time_remaining(deadline).total; // preserve remaining time
+	}
+}
+
+function resume_clock(){
+	if(pausedC){
+		pausedC = false;
 
-  document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;
+		// 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);
 
-  // If the count down is over, write some text 
+		// start the clock
-  if (distance < 0) {
+		run_clock('timer',deadline);
-    clearInterval(x);
+	}
-    window.location.replace("./score.html?pts="+points);
+}
-  }
-}, 1000);
 
-function addTime(secs)
+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,3 +1,5 @@
+var difficulties=["easy","med","hard"];
+
 var canvasT = document.getElementById('canvasTotal');
 var ctxT = canvasT.getContext('2d');
 
@@ -24,30 +26,54 @@ tabTotal=[];
 tabObjCmp=[];
 mousePos=[];
 
-var displayType = getCookie("displayMode")=="" ? "both" : getCookie("displayMode");
+var pause=getCookie("pause");
+var won=false;
+
+var displayType = getCookie("displayMode")=="" ? "gems" : getCookie("displayMode");
 
 var dotsAmount= getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount");
 var colors=[];
-var colorsAvailable=["red","yellow","green","purple","lightblue","brown","cyan","orange"];
+var colorsAvailable=["red","yellow","green","purple","black","brown","cyan","orange"];
+var customColorsAvailable=[];
+
+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++)
 {
-    var pos = getRandomInt(colorsAvailable.length)-1;
+    if(displayType=="points")
-    var index=colorsAvailable.indexOf(colorsAvailable[pos]);
+    {
-    if(index>-1)
+        colors.push(customColorsAvailable[cpt]+"_"+cpt);
+    }
+    else
     {
-        colors.push(colorsAvailable[pos]);
+        colors.push(gemsSelected[cpt]+"_"+cpt);
-        colorsAvailable.splice(index,1);
     }
 }
 
-size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px
+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+"')");
@@ -70,7 +96,7 @@ function faireCercle(x,y,color,lectx){
     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);
 }
 
@@ -82,10 +108,17 @@ function drawImg(x,y,color,lectx)
     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(){
-        lectx.drawImage(img,nx,ny,size/6,size/6);   
+        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);  
+        }
     }
     
 }
@@ -95,7 +128,7 @@ function genVitraux()
     var mat = matrix(6,6);
     var x;
     var y;
-    var baseVitrail=[true];
+    var baseVitrail=[];
     var tries;
 
     for(var cpt=0;cpt<dotsAmount;cpt++)
@@ -103,43 +136,51 @@ function genVitraux()
         x=getRandomInt(6)-1;
         y=getRandomInt(6)-1;
 
-        console.log("mat :"+mat[x][y]);
-
         while(mat[x][y]!=0 && tries!=20)
         {
             x=getRandomInt(6)-1;
             y=getRandomInt(6)-1;
-            console.log("["+x+","+y+"] ->"+cpt);
 
             tries++;
         }
 
-        if(tries==20) console.log("trop long");
-
         mat[x][y]=1;
         x-=2;
         y-=2;
         baseVitrail.push([(x>0 ? x : x-1),(y>0 ? y : y-1),colors[cpt]]);
-        console.log("mat = "+mat);
         tries=0;
     }
-    //console.log("final : "+baseVitrail+" et :"+Array.isArray(baseVitrail));
     
     for(var i=1;i<5;i++)
     {
         eval("tab"+i+"=copyMDArray(baseVitrail)");
+        eval("tab"+i+".unshift(true)");
     }
 }
 
-function tourneG(letab,lecanvas,lectx)
+function tourneG(letab,lecanvas,lectx,sselem=null)
 {
-    letab.forEach(element => {
+    
-        tmp=element[0];
+    if(sselem==null){
-        element[0]=element[1];
+        letab.forEach(element => {
-        element[1]=-tmp;
+            tmp=element[0];
-    });
+            element[0]=element[1];
+            element[1]=-tmp;
+        });
+    }
+    
+    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);
-    empiler();
 }
 
 function tourneD(letab,lecanvas,lectx,sselem=null)
@@ -195,9 +236,8 @@ function empiler(obj=false)
         tabTotal=[];
         if(tab1[0])
         {
-            
             tab1.forEach(element => {
-                if(Array.isArray(element))
+                if(Array.isArray(element) && element.length!=0)
                 {
                     tabTotal.push(element);
                 }
@@ -206,7 +246,7 @@ function empiler(obj=false)
         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];
@@ -215,6 +255,7 @@ function empiler(obj=false)
                     })
                     if(!exists)
                     tabTotal.push(element);
+                    //console.log("tabtotal tab2 "+tabTotal+"|");
                     exists=false;
                 }
             })
@@ -223,7 +264,7 @@ function empiler(obj=false)
         {
             
             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)
@@ -238,7 +279,7 @@ function empiler(obj=false)
         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];
@@ -313,17 +354,17 @@ function copyMDArray(array) //permet la copie d'arrays sans copier les référen
 function generate(){
     tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
     tabObjCmp=[];
-    var actions=getRandomInt(4)+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;
+        actions+=getRandomInt(3)+3; //+4-6 6-12
         swapTreshold=8;
     }
     if(difficulty=="hard") //50% tournerD, 30% swap, 20% switch
     {
-        actions+=getRandomInt(5)+5;
+        actions+=getRandomInt(5)+5; //+6-10 12-22
         swapTreshold=6;
         switchTreshold=9;
     }
@@ -335,7 +376,7 @@ function generate(){
         act=getRandomInt(10);
         else
         act=1;
-        console.log("act="+act+" left:"+actions);
+        //console.log("act="+act+" left:"+actions);
         if(switchTreshold<=act && actions>3) // faire un switch
         {
             var from=getRandomInt(4)-1;
@@ -344,7 +385,7 @@ function generate(){
             to=getRandomInt(4)-1;
             
             [tabObj[from],tabObj[to]]=[tabObj[to],tabObj[from]];
-            console.log("switch "+from+"->"+to);
+            //console.log("switch "+from+"->"+to);
             actions-=3;
         }
         else if(swapTreshold<=act && actions>2)
@@ -352,7 +393,7 @@ function generate(){
             var from=getRandomInt(4)-1;
             var dir=getRandomInt(2)==1 ? "H":"V";
             swap(tabObj[from],null,ctxO,dir);
-            console.log("swap"+dir+" de "+from);
+            //console.log("swap"+dir+" de "+from);
             actions-=2;
         }
         else
@@ -362,6 +403,10 @@ function generate(){
         }
     }
     empiler(true);
+    if(checkAllOK(true)==true)
+    {
+        generate();
+    }
     toutDessiner(tabObjCmp,canvasO,ctxO);
     
 }
@@ -418,7 +463,7 @@ function rotationManager(e)
         {
             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);
         }
     }
@@ -477,7 +522,7 @@ function rotationManager(e)
 }
 
 
-function checkAllOK(){
+function checkAllOK(justChecking=false){
     //const condition = (val) => val.toString() == element.toString();
     var exists=true;
     //exists=!tabObjCmp.every(unique);
@@ -490,6 +535,7 @@ function checkAllOK(){
         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;
         }
     }
@@ -498,13 +544,48 @@ function checkAllOK(){
         exists=false;
     }
     
-    if(exists)
+    if(!tutoMode)
     {
-        var audio = new Audio('ress/Jewel4.mp3');
+        if(exists && !justChecking)
-        audio.play();
+        {
-        handleScore(1);
+            var audio = new Audio('ress/Jewel4.mp3');
-        generate();
+            audio.play();
+            handleScore(1);
+            if(pause)
+            {
+                chronoStop();
+                pause_clock();
+            }
+            won=true;
+        }
+        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)
@@ -512,16 +593,25 @@ 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();
+
         var pts = diff.getSeconds()+ (diff.getMinutes()*60) + ((diff.getHours()-1)*3600);
-        //console.log("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
         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");
     }
 }
 
@@ -604,6 +694,27 @@ function events() {
 
 function mdManager(e){
     mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+
+    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();
+    }
+
+    if(paused)
+    {
+        chronoContinue();
+        resume_clock();
+    }
+        
     document.getElementById(e.currentTarget.id).classList.add('vitrail-select');
 }
 
@@ -620,13 +731,12 @@ function mlManager(e) {
     document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover');
 }        
 
-//genVitraux();
+function index()
-
+{
-tab1.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
+    window.location.href="./index.php";
-tab2.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
+}
-tab3.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
-tab4.push(true,[-3,-3,colors[0]],[-3,2,colors[1]],[1,2,colors[2]],[3,-3,colors[3]]);
 
+genVitraux();
 
 toutDessiner(tab1,canvas1,ctx1);
 toutDessiner(tab2,canvas2,ctx2);
@@ -640,5 +750,9 @@ document.getElementById("stats").innerHTML = points+" points";
 
 events();
 
-generate();
+if(!tutoMode)
-chronoStart();
+{
+    generate();
+    chronoStart();
+}
+