MAJ du mode survie + ajout "patchnote"

+ correction logo pour adapter aux droits

.gitignore

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

code/bakery.js

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

code/button_displayer.js

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

code/chrono.js

@@ -0,0 +1,68 @@
+var startTime = 0
+var start = 0
+var end = 0
+var diff = 0
+var timerID = 0
+var paused=true;
+function chrono(){
+	end = new Date()
+	diff = end - start
+	diff = new Date(diff)
+	var msec = diff.getMilliseconds()
+	var sec = diff.getSeconds()
+	var min = diff.getMinutes()
+	var hr = diff.getHours()-1
+	if (min < 10){
+		min = "0" + min
+	}
+	if (sec < 10){
+		sec = "0" + sec
+	}
+	if(msec < 10){
+		msec = "00" +msec
+	}
+	else if(msec < 100){
+		msec = "0" +msec
+    }
+    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec
+    
+	timerID = setTimeout("chrono()", 10)
+}
+function chronoStart(){
+    /*
+	document.chronoForm.startstop.value = "stop!"
+	document.chronoForm.startstop.onclick = chronoStop
+    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(){
+	document.getElementById("chronotime").innerHTML = "0:00:00"
+	start = new Date()
+}
+function chronoStopReset(){
+	document.getElementById("chronotime").innerHTML = "0:00:00"
+	document.chronoForm.startstop.onclick = chronoStart
+}
+function chronoStop(){
+    /*
+	document.chronoForm.startstop.value = "start!"
+	document.chronoForm.startstop.onclick = chronoContinue
+    document.chronoForm.reset.onclick = chronoStopReset
+    */
+   	paused=true;
+	clearTimeout(timerID)
+}

code/game.css

@@ -0,0 +1,141 @@
+@font-face {
+  font-family: Segoe; src: url('ress/Segoepr.ttf');
+}
+
+.all-container {
+    display : flex; 
+    justify-content: center;
+}
+
+.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+.lightButton {
+  position: absolute;
+  right: 5px;
+}
+
+.flex-container {
+    display : flex;
+    align-items: baseline;
+    width : min-content;
+    
+    margin: 20px;
+
+    flex-direction: column;
+  }
+
+  .vitraux {
+    display : flex;
+    align-items: baseline;
+    width : min-content;
+    margin: 20px;
+
+    flex-direction: column;
+  }
+  
+  .vitrail-plein {
+    margin: 3px;
+    padding: 6px;
+    background-image: url(ress/fond_fin.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .vitrail-vide {
+    margin: 3px;
+    padding: 6px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .vitrail-select {
+    -webkit-box-shadow:inset 0px 0px 0px 5px red;
+    -moz-box-shadow:inset 0px 0px 0px 5px red;
+    box-shadow:inset 0px 0px 0px 5px red;
+  }
+
+  .vitrail-hover {
+    -webkit-box-shadow:inset 0px 0px 0px 5px blue;
+    -moz-box-shadow:inset 0px 0px 0px 5px blue;
+    box-shadow:inset 0px 0px 0px 5px blue;
+    
+  }
+
+  .stats {
+    width: 150px;
+    padding: 10px;
+    font-size: large;
+    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

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<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="vitraux stats">
+            <div id="obj_box" class="parent">
+                <h1 class="child" id="obj_text" >Objectif</h1>
+            </div>
+            
+            <div id="res_box" class="parent">
+                <h1 class="child" id="res_text" >R&eacute;sultat</h1>
+            </div>
+
+        </ul>
+
+        <ul id="obj-container" class="vitraux">
+            <canvas id="canvasObj" class="vitrail-plein"></canvas>
+            <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>
+            
+            <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 class="stats">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>
+    
+    <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,69 +1,175 @@
+@font-face {
+  font-family: Segoe; src: url('ress/segoepr.ttf');
+}
 
 .all-container {
-    display : flex; 
+    margin-left: auto;
-    justify-content: space-between;
+    margin-right: auto;
-    /*
+    align-items: center;
-    align-items: baseline;
+    }
-    width : min-content;
+
-    flex-direction: row;
+.mode-container {
-    flex-wrap: wrap;*/
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bd {
+  
+  border-style: solid;
+  border-width: 5px;
+}
+.bd2 {
+  border-color: mediumblue;
+  border-style: solid;
+  border-width: 5px;
+}
+
+.ad {
+  width: min-content;
+  margin-left: auto;
+  margin-right: auto;
+
+}
 
+.z {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.flex-container {
+.day   { background: #eee; color: black; }
-    /* We first create a flex layout context */
+.night { background: #333; color: white; }
-    display : flex;
-    align-items: baseline;
-    width : min-content;
-    /* 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;
-     */
 
+.button {
+    padding: 2px;
+}
+
+.selectedDay {
+  -webkit-box-shadow:inset 0px 0px 0px 5px black;
+  -moz-box-shadow:inset 0px 0px 0px 5px black;
+  box-shadow:inset 0px 0px 0px 5px black;
+}
 
-    /* Then we define how is distributed the remaining space */
+.selectedNight {
+  -webkit-box-shadow:inset 0px 0px 0px 5px #eee;
+  -moz-box-shadow:inset 0px 0px 0px 5px #eee;
+  box-shadow:inset 0px 0px 0px 5px #eee;
+}
+  /* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    /*background-color: rgb(0,0,0); /* Fallback color */
+    /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
   
-    flex-direction: column;
+  /* Modal Content */
+  .modal-content {
+    /*background-color: #fefefe;*/
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
   }
-  /*
   
-  .flex-item {
+  /* The Close Button */
-    padding: 5px;
+  .close {
-    width: 200px;
+    color: #aaaaaa;
-    height: 150px;
+    float: right;
-    margin-top: 10px;
+    font-size: 28px;
-    line-height: 150px;
-    color: white;
     font-weight: bold;
-    font-size: 3em;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .dot {
+    background-color: green;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .both {
+    background-image: url("ress/green.png");
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .pickr {
+    width: 30px;
+    height: 30px;
+  }
+
+  .logo {
     text-align: center;
-  }*/
+  }
 
-  .vitraux {
+  .lightButton {
-    /* We first create a flex layout context */
+    position: absolute;
-    display : flex;
+    right: 5px;
-    align-items: baseline;
+  }
-    width : min-content;
-    /* 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;
-     */
 
+  .settingsButton {
+    position: absolute;
+    left: 5px;
+  }
 
-    /* Then we define how is distributed the remaining space */
+  .slot {
+    display: inline-block;
+    position: relative;
+  }
 
-    flex-direction: column;
+  .gem {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
-  .vitrail {
+  .texte {
-    margin: 3px;
+    font-size: medium;
-    padding: 6px;
+    font-family: Segoe;
-    background-image: url(ress/fond_fin.png);
+  }
-    background-repeat: no-repeat;
+
-    background-position: center;
+  .texteG {
-    background-size: cover;
+    font-size: xx-large;
+    /*font-weight: bold;*/
+    font-family: Segoe;
+  }
+
+  ul {
+    padding-inline-start: 0px;
   }
+
+  .player {
+    position: absolute;
+    left: 5px;
+  }
+  .rad {
+    display: none;
+}
+
+.mid {
+  margin: 5px;
+}
+
+.bg {
+  position: absolute;
+  bottom: 5px;
+}
+
+.patchnote {
+  border: none;
+  width: 100%;
+}

code/index.html

@@ -1,495 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>On The Dot</title>
-    <link rel="stylesheet" type="text/css" href="index.css"/>
-</head>
-<body>
-    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
-        <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
-            <h1>R&eacute;sultat</h1>
-            <canvas id="canvasTotal" class="vitrail"></canvas>
-            <h1>Objectif</h1>
-            <canvas id="canvasObj" class="vitrail"></canvas>
-            <button onclick="generateEasy()">gen easy</button>
-        </ul>
-        <ul id="vitraux" class="vitraux" style="border:2px solid purple">
-            <canvas id="canvas1" class="vitrail"></canvas>
-            
-            <canvas id="canvas2" class="vitrail"></canvas>
-            
-            <canvas id="canvas3" class="vitrail"></canvas>
-            
-            <canvas id="canvas4" class="vitrail"></canvas>
-        </ul>
-        
-        <ul id="canvasR" class="flex-container" style="border:1px solid violet">
-            <h1>R&eacute;serve</h1>
-            <canvas id="canvasR1" class="vitrail"></canvas>
-            <canvas id="canvasR2" class="vitrail"></canvas>
-            <canvas id="canvasR3" class="vitrail"></canvas>
-            <canvas id="canvasR4" class="vitrail"></canvas>
-            
-        </ul>
-        
-    </ul>
-    <script>
-        var canvas1 = document.getElementById('canvas1');
-        var ctx1 = canvas1.getContext('2d');
-        
-        var canvas2 = document.getElementById('canvas2');
-        var ctx2 = canvas2.getContext('2d');
-        
-        var canvas3 = document.getElementById('canvas3');
-        var ctx3 = canvas3.getContext('2d');
-        
-        var canvas4 = document.getElementById('canvas4');
-        var ctx4 = canvas4.getContext('2d');
-        
-        var canvasT = document.getElementById('canvasTotal');
-        var ctxT = canvasT.getContext('2d');
-        
-        var canvasO = document.getElementById('canvasObj');
-        var ctxO = canvasO.getContext('2d');
-        
-        var canvasR = document.getElementById('canvasR');
-        //var ctxR = canvasR.getContext('2d');
-        
-        tab1=[];
-        tab2=[];
-        tab3=[];
-        tab4=[];
-        tabR=[];
-        tabTotal=[];
-        tabObjCmp=[];
-        mousePos=[];
-        colors=["red","yellow","green","purple"];
-        
-        width=120; // 6 lignes de 50px
-        height=120; // 6 colonnes de 50px
-        canvas1.width=width;
-        canvas2.width=width;
-        canvas3.width=width;
-        canvas4.width=width;
-        canvasT.width=width;
-        canvasO.width=width;
-        
-        canvas1.height=height;
-        canvas2.height=height;
-        canvas3.height=height;
-        canvas4.height=height;
-        canvasT.height=height;
-        canvasO.height=height;
-        
-        function faireCercle0(x,y,color,lectx){
-            var cercle = new Path2D();
-            
-            
-            
-            nx=(width/6)*(x>0 ? x+2 : x+3);
-            ny=(height/6)*(y>0 ? y+2 : y+3);
-            
-            cercle.moveTo(nx, ny);
-            cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
-            
-            lectx.fillStyle = color;
-            lectx.fill(cercle);
-        }
-
-        function drawImg(x,y,color,lectx)
-        {
-            var img= new Image();
-            
-            //lectx2=eval(lectx);
-            
-            var nx=(width/6)*(x>0 ? x+2 : x+3);
-            var ny=(height/6)*(y>0 ? y+2 : y+3);
-            
-            img.src="ress/"+color+".png";
-
-            img.onload = function(){
-                console.log("x:"+x+" y:"+y+" col:"+color);
-                lectx.drawImage(img,nx,ny,width/6,height/6);   
-            }
-            
-        }
-        
-        function tourneG(letab,lecanvas,lectx)
-        {
-            letab.forEach(element => {
-                tmp=element[0];
-                element[0]=element[1];
-                element[1]=-tmp;
-            });
-            toutDessiner(letab,lecanvas,lectx);
-            empiler();
-        }
-        
-        function tourneD(letab,lecanvas,lectx,sselem=null)
-        {
-            if(sselem==null){
-                letab.forEach(element => {
-                    tmp=element[1];
-                    element[1]=element[0];
-                    element[0]=-tmp;
-                });
-            }
-            else {
-                letab[sselem].forEach(element => {
-                    tmp=element[1];
-                    element[1]=element[0];
-                    element[0]=-tmp;
-                });
-            }
-            toutDessiner(letab,lecanvas,lectx);
-            if(sselem==null)
-            empiler();
-        }
-        
-        function toutDessiner(pts,lecanvas,lectx)
-        {
-            lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
-            if(pts[0])
-            {
-                
-                for(i=1;i<pts.length;i++)
-                {
-                    if(Array.isArray(pts[i]))
-                    {
-                        drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
-                    }
-                    //else
-                        //drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
-                }
-            }
-        }
-        
-        function empiler(obj=false)
-        {
-            const unique = (val) => val.toString() != test.toString();
-            exists=false;
-            
-            if(!obj)
-            {
-                tabTotal=[];
-                if(tab1[0])
-                {
-                    
-                    tab1.forEach(element => {
-                        tabTotal.push(element);
-                    })
-                }
-                if(tab2[0]){
-                    
-                    tab2.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
-                            if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
-                    })
-                }
-                if(tab3[0])
-                {
-                    
-                    tab3.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
-                            if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
-                    })
-                }
-                if(tab4[0]){
-                    
-                    tab4.forEach(element => {
-                        colors.forEach(col => {
-                            test=[element[0],element[1],col];
-                            if(!exists)
-                            exists=!tabTotal.every(unique);
-                        })
-                        if(!exists)
-                        tabTotal.push(element);
-                        exists=false;
-                    })
-                }
-                checkAllOK();
-                toutDessiner(tabTotal,canvasT,ctxT);
-            }
-            else{
-                tabObj[0].forEach(element => {
-                    tabObjCmp.push(element);
-                })
-                
-                tabObj[1].forEach(element => {
-                    colors.forEach(col => {
-                        test=[element[0],element[1],col];
-                        if(!exists)
-                        exists=!tabObjCmp.every(unique);
-                    })
-                    if(!exists)
-                    tabObjCmp.push(element);
-                    exists=false;
-                })
-            }
-        }
-        
-        function swap(letab, lecanvas, lectx,ladir){
-            if(ladir=="H"){
-                letab.forEach(element=> {
-                    element[1]=-element[1];
-                })
-            }
-            else {
-                letab.forEach(element=> {
-                    element[0]=-element[0];
-                })
-            }
-            
-            toutDessiner(letab,lecanvas,lectx);
-            empiler();
-        }
-        
-        function getRandomInt(max) {
-            return Math.floor(Math.random() * Math.floor(max))+1;
-        }
-        
-        function generateEasy(){
-            tabObj=[Array.from(tab1),Array.from(tab2),Array.from(tab3),Array.from(tab4)];
-            tabObjCmp=[];
-            actions=getRandomInt(8);
-            
-            while(actions>0){
-                tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
-                actions--;
-            }
-            empiler(true);
-            toutDessiner(tabObjCmp,canvasO,ctxO);
-            
-        }
-        
-        function getMousePosition(lecanvas, event, lectx, letab) { 
-            let rect = lecanvas.getBoundingClientRect(); 
-            let x = event.clientX - rect.left; 
-            let y = event.clientY - rect.top; 
-            let dir = compas(x,y,lecanvas);
-            
-            if(x<lecanvas.width/2)
-            tourneG(letab,lecanvas,lectx);
-            else
-            tourneD(letab,lecanvas,lectx);
-        } 
-        
-        /// renvoie le point cardianl où se trouve le point
-        
-        function compas(x,y,lecanvas)
-        {
-            rect = lecanvas.getBoundingClientRect(); 
-            x = event.clientX - rect.left; 
-            y = event.clientY - rect.top; 
-            ne = x>y;
-            se = x>lecanvas.height-y;
-            
-            if(ne && se ) return "E";
-            if(ne && !se ) return "N";
-            if(!ne && se ) return "S";
-            if(!ne && !se ) return "O";
-        }
-        
-        
-        /*
-        6 cas : v1 vis->v1 vis
-        
-        */
-        function rotationManager(e)
-        {
-            canvasNumber=e.currentTarget.id.substring(6);
-            if(mousePos[0]=="R" && canvasNumber!="R")
-            {
-                if(!isVisible(canvasNumber))
-                {
-                    toggleVisible(canvasNumber);
-                }
-            }
-            else
-            {
-                if(isVisible(mousePos[0]))
-                {
-                    if(canvasNumber=="R")
-                    {
-                        /*
-                        eval("tab"+mousePos[0]+"[0]=!tab"+mousePos[0]+"[0];");
-                        empiler();
-                        toutDessiner(eval("tab"+mousePos[0]),eval("canvas"+mousePos[0]),eval("ctx"+mousePos[0]));
-                        toutDessiner(tabTotal,canvasT,ctxT);
-                        */
-                        toggleVisible(mousePos[0]);
-                        tabR.push(eval("tab"+mousePos[0]));
-                    }
-                    else
-                    {
-                        lecanvas=eval("canvas"+canvasNumber);
-                        letab=eval("tab"+canvasNumber);
-                        lectx=lecanvas.getContext('2d');
-                        dir = compas(e.clientX,e.clientY,e.currentTarget);
-                        if(mousePos[0]==canvasNumber)
-                        {
-                            if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
-                            {
-                                tourneG(letab,lecanvas,lectx);
-                            }
-                            else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
-                            {
-                                tourneD(letab,lecanvas,lectx);
-                            }
-                            else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
-                            {
-                                swap(letab,lecanvas,lectx,"V");
-                            }
-                            else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
-                            {
-                                swap(letab,lecanvas,lectx,"H");
-                            }
-                        }
-                        else
-                        {
-                            changeOrder(mousePos[0],canvasNumber);
-                        }
-                    }
-                }
-            }
-        }
-        
-        
-        function checkAllOK(){
-            //const condition = (val) => val.toString() == element.toString();
-            exists=true;
-            //exists=!tabObjCmp.every(unique);
-            
-            if(tabTotal.length==tabObjCmp.length)
-            {
-                for(i=0;i>tabTotal.length;i++)
-                {
-                    exists*tabTotal[i].toString()==tabObjCmp[i].toString();
-                }
-            }
-            else
-            exists=false;
-            
-            if(exists)
-            {
-                console.log("OK");
-                generateEasy();
-            }
-        }
-        
-        function changeOrder(from, to)
-        {
-            fromTab=eval("tab"+from);
-            toTab=eval("tab"+to);
-            for(i=0;i<toTab.length;i++)
-            {
-                
-                [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
-            }
-            //[fromTab,toTab]=[toTab,fromTab];
-            toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
-            toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
-            toutDessiner(tabTotal,canvasT,ctxT);
-            empiler();
-            
-            
-        }
-        
-        function isVisible(what)
-        {
-            return eval("tab"+what+"[0]");
-        }
-        
-        function toggleVisible(where)
-        {
-            eval("tab"+where+"[0]=!tab"+where+"[0];");
-            empiler();
-            toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
-            toutDessiner(tabTotal,canvasT,ctxT);
-        }
-        
-        
-        canvas1.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
-        
-        canvas1.addEventListener("mouseup",function(e){
-            rotationManager(e);
-        })
-        
-        canvas2.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
-        
-        canvas2.addEventListener("mouseup",function(e){
-            rotationManager(e);
-        })
-        
-        canvas3.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
-        
-        canvas3.addEventListener("mouseup",function(e){
-            rotationManager(e);
-        })
-        
-        canvas4.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
-        
-        canvas4.addEventListener("mouseup",function(e){
-            rotationManager(e);
-        })
-        
-        canvasR.addEventListener("mousedown",function(e){
-            mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
-        })
-        
-        canvasR.addEventListener("mouseup",function(e){
-            rotationManager(e);
-        })
-        
-        
-        
-        tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
-        tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[1,1,"purple"]);
-        
-        /*
-        tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
-        */
-        
-        toutDessiner(tab1,canvas1,ctx1);
-        toutDessiner(tab2,canvas2,ctx2);
-        toutDessiner(tab3,canvas3,ctx3);
-        toutDessiner(tab4,canvas4,ctx4);
-        
-        
-        
-        
-        
-        
-        
-        
-        
-    </script>
-</body>
-
-</html>

code/index.php

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

code/infoDisplayer.js

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

code/modals.js

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

code/options.js

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

code/patchnote.js

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

code/patchnote1.txt

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

code/phpinfo.php

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

code/score.php

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

code/selecteur.js

@@ -0,0 +1,47 @@
+function $_GET(param) {
+	var vars = {};
+	window.location.href.replace( location.hash, '' ).replace( 
+		/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
+		function( m, key, value ) { // callback
+			vars[key] = value !== undefined ? value : '';
+		}
+	);
+
+	if ( param ) {
+		return vars[param] ? vars[param] : null;	
+	}
+	return vars;
+}
+
+var get=$_GET();
+
+if(document.getElementById("canvasR")!=null)
+{
+    document.getElementById("canvasR").style.display="none";
+    document.getElementById("reserveText").style.display="none";
+}
+if(document.getElementById("canvasTotal")!=null)
+{
+	if (get['mode'].includes('p'))
+	{
+		objPts=get['mode'].substring(0,get['mode'].length-1);
+		document.getElementById("timer").style.display="none";
+	}
+	else if(get['mode'].includes('m'))
+	{
+		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

@@ -0,0 +1,66 @@
+
+//---------------
+var time_in_minutes = tpsRem[1];
+var current_time = Date.parse(new Date());
+var deadline = new Date(current_time + time_in_minutes*60*1000);
+
+
+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);
+
+
+var pausedC = false; // is the clock paused?
+var time_left; // time left on the clock when paused
+
+function pause_clock(){
+	if(!pausedC){
+    pausedC = true;
+		clearInterval(timeinterval); // stop the clock
+		time_left = time_remaining(deadline).total; // preserve remaining time
+	}
+}
+
+function resume_clock(){
+	if(pausedC){
+		pausedC = false;
+
+		// update the deadline to preserve the amount of time remaining
+		console.log("tl"+time_left);
+		deadline = new Date(Date.parse(new Date()) + time_left);
+		console.log("dl"+deadline);
+
+		// start the clock
+		run_clock('timer',deadline);
+	}
+}
+
+function addTime(sec)
+{
+	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

@@ -0,0 +1,758 @@
+var difficulties=["easy","med","hard"];
+
+var canvasT = document.getElementById('canvasTotal');
+var ctxT = canvasT.getContext('2d');
+
+var canvasO = document.getElementById('canvasObj');
+var ctxO = canvasO.getContext('2d');
+
+var canvasR = document.getElementById('canvasR');
+//var ctxR = canvasR.getContext('2d');
+
+tab1=[];
+tab2=[];
+tab3=[];
+tab4=[];
+
+tabR=[[],[],[],[],[]];
+
+tabR1=[];
+tabR2=[];
+tabR3=[];
+tabR4=[];
+
+points=0;
+tabTotal=[];
+tabObjCmp=[];
+mousePos=[];
+
+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","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++)
+{
+    if(displayType=="points")
+    {
+        colors.push(customColorsAvailable[cpt]+"_"+cpt);
+    }
+    else
+    {
+        colors.push(gemsSelected[cpt]+"_"+cpt);
+    }
+}
+
+size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50x
+canvasT.width=size;
+canvasO.width=size;
+
+canvasT.height=size;
+canvasO.height=size;
+
+document.getElementById("btn_back").width=size;
+document.getElementById("obj_box").style.width=size+"px";
+document.getElementById("obj_box").style.height=size+"px";
+document.getElementById("res_box").style.width=size+"px";
+document.getElementById("res_box").style.height=size+"px";
+
+for(var a=1;a<5;a++)
+{
+    eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
+    eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
+    eval("canvas"+a+".width=size");
+    eval("canvas"+a+".height=size");
+    
+    eval("var canvasR"+ a +"= document.getElementById('canvasR"+a+"')");
+    eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
+    eval("canvasR"+a+".width=size");
+    eval("canvasR"+a+".height=size");
+}
+
+function faireCercle(x,y,color,lectx){
+    var cercle = new Path2D();
+    
+    nx=(size/6)*(x>0 ? x+2 : x+3);
+    ny=(size/6)*(y>0 ? y+2 : y+3);
+    
+    cercle.moveTo(nx, ny);
+    cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
+    
+    lectx.fillStyle = color.substring(0, color.length-2);
+    lectx.fill(cercle);
+}
+
+function drawImg(x,y,color,lectx)
+{
+    var img= new Image();
+    
+    
+    var nx=(size/6)*(x>0 ? x+2 : x+3);
+    var ny=(size/6)*(y>0 ? y+2 : y+3);
+    
+    img.src="ress/"+color.substring(0, color.length-2)+".png";
+    
+    img.onload = function(){
+        if(displayType=="gems")
+        {
+            lectx.drawImage(img,nx,ny,size/6,size/6); 
+        }
+        else
+        {
+            lectx.drawImage(img,nx+(size/48),ny+(size/48),size/8,size/8);  
+        }
+    }
+    
+}
+
+function genVitraux()
+{
+    var mat = matrix(6,6);
+    var x;
+    var y;
+    var baseVitrail=[];
+    var tries;
+
+    for(var cpt=0;cpt<dotsAmount;cpt++)
+    {
+        x=getRandomInt(6)-1;
+        y=getRandomInt(6)-1;
+
+        while(mat[x][y]!=0 && tries!=20)
+        {
+            x=getRandomInt(6)-1;
+            y=getRandomInt(6)-1;
+
+            tries++;
+        }
+
+        mat[x][y]=1;
+        x-=2;
+        y-=2;
+        baseVitrail.push([(x>0 ? x : x-1),(y>0 ? y : y-1),colors[cpt]]);
+        tries=0;
+    }
+    
+    for(var i=1;i<5;i++)
+    {
+        eval("tab"+i+"=copyMDArray(baseVitrail)");
+        eval("tab"+i+".unshift(true)");
+    }
+}
+
+function tourneG(letab,lecanvas,lectx,sselem=null)
+{
+    
+    if(sselem==null){
+        letab.forEach(element => {
+            tmp=element[0];
+            element[0]=element[1];
+            element[1]=-tmp;
+        });
+    }
+    
+    else {
+        letab[sselem].forEach(element => {
+            tmp=element[1];
+            element[1]=element[0];
+            element[0]=-tmp;
+        });
+    }
+    //console.log("pre-empiler :"+tabTotal);
+    empiler(sselem!=null);
+    //console.log("post-empiler :"+tabTotal);
+    if(sselem==null)
+    toutDessiner(letab,lecanvas,lectx);
+}
+
+function tourneD(letab,lecanvas,lectx,sselem=null)
+{
+    if(sselem==null){
+        letab.forEach(element => {
+            tmp=element[1];
+            element[1]=element[0];
+            element[0]=-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);
+}
+
+function toutDessiner(pts,lecanvas,lectx)
+{
+    lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
+    if(pts[0])
+    {
+        var i=1*(typeof pts[0]==="boolean");
+        for(i;i<pts.length;i++)
+        {
+            if(Array.isArray(pts[i]))
+            {
+                if(displayType=="points" || displayType=="both")
+                    faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
+                if(displayType=="gems" || displayType=="both")
+                    drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
+            }
+        }
+    }
+}
+
+function empiler(obj=false)
+{
+    const unique = (val) => val.toString() != test.toString();
+    var exists=false;
+    
+    if(!obj)
+    {
+        tabTotal=[];
+        if(tab1[0])
+        {
+            tab1.forEach(element => {
+                if(Array.isArray(element) && element.length!=0)
+                {
+                    tabTotal.push(element);
+                }
+            })
+        }
+        if(tab2[0]){
+            
+            tab2.forEach(element => {
+                if(Array.isArray(element) && element.length!=0)
+                {
+                    colors.forEach(col => {
+                        test=[element[0],element[1],col];
+                        if(!exists)
+                        exists=!tabTotal.every(unique);
+                    })
+                    if(!exists)
+                    tabTotal.push(element);
+                    //console.log("tabtotal tab2 "+tabTotal+"|");
+                    exists=false;
+                }
+            })
+        }
+        if(tab3[0])
+        {
+            
+            tab3.forEach(element => {
+                if(Array.isArray(element) && element.length!=0){
+                    colors.forEach(col => {
+                        test=[element[0],element[1],col];
+                        if(!exists)
+                        exists=!tabTotal.every(unique);
+                    })
+                    if(!exists)
+                    tabTotal.push(element);
+                    exists=false;
+                }
+            })
+        }
+        if(tab4[0]){
+            
+            tab4.forEach(element => {
+                if(Array.isArray(element) && element.length!=0)
+                {
+                    colors.forEach(col => {
+                        test=[element[0],element[1],col];
+                        if(!exists)
+                        exists=!tabTotal.every(unique);
+                    })
+                    if(!exists)
+                    tabTotal.push(element);
+                    exists=false;
+                }
+            })
+        }
+        checkAllOK();
+        toutDessiner(tabTotal,canvasT,ctxT);
+    }
+    else{
+        tabObjCmp=[];
+        for(count=1;count<tabObj[0].length;count++)
+        {
+            tabObjCmp.push(tabObj[0][count]);
+        }
+        for(tabCount=1;tabCount<tabObj.length;tabCount++)
+        {
+            for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
+            {
+                element=tabObj[tabCount][elmCount];
+                colors.forEach(col => {
+                    test=[element[0],element[1],col];
+                    if(!exists)
+                    exists=!tabObjCmp.every(unique);
+                })
+                if(!exists)
+                tabObjCmp.push(element);
+                exists=false; 
+            }
+        }
+    }
+}
+
+function swap(letab, lecanvas, lectx,ladir){
+    if(ladir=="H"){
+        letab.forEach(element=> {
+            element[1]=-element[1];
+        })
+    }
+    else {
+        letab.forEach(element=> {
+            element[0]=-element[0];
+        })
+    }
+    if(lecanvas!=null)
+    {
+        
+        toutDessiner(letab,lecanvas,lectx);
+        empiler();
+    }
+}
+
+function getRandomInt(max) { //rng entier [1;max]
+    return Math.floor(Math.random() * Math.floor(max))+1;
+}
+
+function copyMDArray(array) //permet la copie d'arrays sans copier les références
+{
+    var newArray = [];
+    array.forEach(element => {
+        newArray.push(Array.from(element))
+    });
+    return newArray
+}
+
+function generate(){
+    tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
+    tabObjCmp=[];
+    var actions=getRandomInt(4)+1; //2-6
+    var swapTreshold=11;
+    var switchTreshold=11;
+    if(difficulty=="med") //70% tournerD, 30% swap
+    {
+        actions+=getRandomInt(3)+3; //+4-6 6-12
+        swapTreshold=8;
+    }
+    if(difficulty=="hard") //50% tournerD, 30% swap, 20% switch
+    {
+        actions+=getRandomInt(5)+5; //+6-10 12-22
+        swapTreshold=6;
+        switchTreshold=9;
+    }
+    
+    console.log("actions : "+actions+" difficulty="+difficulty);
+    
+    while(actions>0){
+        if(difficulty!="easy")
+        act=getRandomInt(10);
+        else
+        act=1;
+        //console.log("act="+act+" left:"+actions);
+        if(switchTreshold<=act && actions>3) // faire un switch
+        {
+            var from=getRandomInt(4)-1;
+            var to=getRandomInt(4)-1;
+            while(from==to)
+            to=getRandomInt(4)-1;
+            
+            [tabObj[from],tabObj[to]]=[tabObj[to],tabObj[from]];
+            //console.log("switch "+from+"->"+to);
+            actions-=3;
+        }
+        else if(swapTreshold<=act && actions>2)
+        {
+            var from=getRandomInt(4)-1;
+            var dir=getRandomInt(2)==1 ? "H":"V";
+            swap(tabObj[from],null,ctxO,dir);
+            //console.log("swap"+dir+" de "+from);
+            actions-=2;
+        }
+        else
+        {
+            tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
+            actions-=1;
+        }
+    }
+    empiler(true);
+    if(checkAllOK(true)==true)
+    {
+        generate();
+    }
+    toutDessiner(tabObjCmp,canvasO,ctxO);
+    
+}
+
+function getMousePosition(lecanvas, event, lectx, letab) { 
+    let rect = lecanvas.getBoundingClientRect(); 
+    let x = event.clientX - rect.left; 
+    let y = event.clientY - rect.top; 
+    let dir = compas(x,y,lecanvas);
+    
+    if(x<lecanvas.width/2)
+    tourneG(letab,lecanvas,lectx);
+    else
+    tourneD(letab,lecanvas,lectx);
+} 
+
+/// renvoie le point cardianl où se trouve le point
+
+function compas(x,y,lecanvas)
+{
+    rect = lecanvas.getBoundingClientRect(); 
+    x = event.clientX - rect.left; 
+    y = event.clientY - rect.top; 
+    ne = x>y;
+    se = x>lecanvas.height-y;
+    
+    if(ne && se ) return "E";
+    if(ne && !se ) return "N";
+    if(!ne && se ) return "S";
+    if(!ne && !se ) return "O";
+}
+
+
+function rotationManager(e)
+{
+    var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
+    canvasNumber=e.currentTarget.id.substring(6);
+    document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
+    
+    console.log(mousePos[0]+" vers "+canvasNumber+", mouseOnRes?"+mouseOnRes);
+    
+    var firstAv=1;
+    for(i=1;i<4;i++) //détermine la 1° place libre dans la réserve
+    {
+        if(typeof tabR[i][0]=="boolean")
+        firstAv++;
+        else
+        break;
+    }
+    
+    if(mouseOnRes && !canvasNumber.includes("R")) //clic dans la réserve, relâche sur la pile en jeu
+    {
+        if(!isVisible(canvasNumber)) //relâche sur emplacement vide au centre
+        {
+            toggleVisible(canvasNumber);
+            tabR[canvasNumber]=[];
+            //console.log("contenu du tabR[cn] : "+tabR[canvasNumber]);
+            toggleVisible(mousePos[0].substring(1),true);
+        }
+    }
+    else
+    {
+        if(isVisible(mousePos[0])) //clic sur un vitrail présent
+        {
+            if(canvasNumber.includes("R")) //relâche dans réserve
+            {
+                if(tabR[canvasNumber]==null) //emplacement de réserve vide
+                {
+                    toggleVisible(mousePos[0]); //inverser tag du canvas du centre
+                    tabR[firstAv]=copyMDArray(eval("tab"+mousePos[0])); //mettre le canvas dans la réserve
+                    tabR[firstAv][0]=eval("tab"+mousePos[0]+"[0]"); //transférer le tag du canvas dans la réserve
+                    toggleVisible(firstAv,true); //inverser tag du canvas de réesrve
+                    toutDessiner(tabR[firstAv],eval("canvasR"+firstAv),eval("ctxR"+firstAv)); //afficher canvas dans réserve
+                    //console.log(eval("tabR["+(mousePos[0]-1)+"]"));
+                }
+                else //emplacement de réserve occupé
+                {
+                    changeOrder(mousePos[0],canvasNumber);
+                }
+            }
+            else
+            {
+                lecanvas=eval("canvas"+canvasNumber);
+                letab=eval("tab"+canvasNumber);
+                lectx=lecanvas.getContext('2d');
+                dir = compas(e.clientX,e.clientY,e.currentTarget);
+                if(mousePos[0]==canvasNumber)
+                {
+                    if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
+                    {
+                        tourneG(letab,lecanvas,lectx);
+                    }
+                    else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
+                    {
+                        tourneD(letab,lecanvas,lectx);
+                    }
+                    else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
+                    {
+                        swap(letab,lecanvas,lectx,"V");
+                    }
+                    else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
+                    {
+                        swap(letab,lecanvas,lectx,"H");
+                    }
+                }
+                else
+                {
+                    changeOrder(mousePos[0],canvasNumber);
+                }
+            }
+        }
+    }
+}
+
+
+function checkAllOK(justChecking=false){
+    //const condition = (val) => val.toString() == element.toString();
+    var exists=true;
+    //exists=!tabObjCmp.every(unique);
+    if(tabTotal.length==tabObjCmp.length)
+    {
+        var verifTab=[];
+        verifTab=copyMDArray(tabTotal);
+        
+        
+        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;
+        }
+    }
+    else
+    {
+        exists=false;
+    }
+    
+    if(!tutoMode)
+    {
+        if(exists && !justChecking)
+        {
+            var audio = new Audio('ress/Jewel4.mp3');
+            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)
+{
+    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);
+        window.location.replace("./score.php?pts="+pts+"&mode="+get['mode']+"&diff="+get['diff']+"&pseudo="+get['pseudo']);
+    }
+    else if(get['mode'].includes("s"))
+    {
+        addTime(handleSurvival());
+        console.log("add time");
+    }
+}
+
+function changeOrder(from, to)
+{
+    if(from.includes("R"))
+    fromTab=tabR[from];
+    else
+    fromTab=eval("tab"+from);
+    
+    if(to.includes("R"))
+    toTab=tabR[to];
+    else
+    toTab=eval("tab"+to);
+    
+    for(i=0;i<toTab.length;i++)
+    {
+        
+        [fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
+    }
+    //[fromTab,toTab]=[toTab,fromTab];
+    toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
+    toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
+    empiler();
+    toutDessiner(tabTotal,canvasT,ctxT);
+    
+    
+}
+
+function isVisible(what)
+{
+    if(what.includes("R"))
+    {
+        if(tabR[what.substring(1)]==null)
+        return null;
+        return tabR[what.substring(1)][0];
+    }
+    
+    return eval("tab"+what+"[0]");
+}
+
+function toggleVisible(where,reserve=false)
+{
+    if(!reserve)
+    {
+        eval("tab"+where+"[0]=!tab"+where+"[0];");
+        empiler();
+        toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
+        toutDessiner(tabTotal,canvasT,ctxT);
+    }
+    else
+    {
+        tabR[where][0]=!tabR[where][0];
+        toutDessiner(tabR[where],eval("canvasR"+where),eval("ctxR"+where));
+    }
+}
+
+function matrix(m, n) {
+    var result = []
+    for(var i = 0; i < n; i++) {
+        result.push(new Array(m).fill(0))
+    }
+    return result
+}
+
+function events() {
+    for(var i=1;i<5;i++)
+    {
+        eval("canvas"+i).addEventListener("mousedown",function(e){mdManager(e);});
+        eval("canvas"+i).addEventListener("mouseup",function(e){muManager(e);});
+        eval("canvas"+i).addEventListener("mouseenter",function(e){meManager(e);});
+        eval("canvas"+i).addEventListener("mouseleave",function(e){mlManager(e);});
+        
+        eval("canvasR"+i).addEventListener("mousedown",function(e){mdManager(e);});
+        eval("canvasR"+i).addEventListener("mouseup",function(e){muManager(e);});
+        eval("canvasR"+i).addEventListener("mouseenter",function(e){meManager(e);});
+        eval("canvasR"+i).addEventListener("mouseleave",function(e){mlManager(e);});
+    }
+}
+
+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');
+}
+
+function muManager(e){
+    rotationManager(e);
+    mousePos=[];
+}
+
+function meManager(e) {
+    document.getElementById(e.currentTarget.id).classList.add('vitrail-hover');
+}
+
+function mlManager(e) {
+    document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover');
+}        
+
+function index()
+{
+    window.location.href="./index.php";
+}
+
+genVitraux();
+
+toutDessiner(tab1,canvas1,ctx1);
+toutDessiner(tab2,canvas2,ctx2);
+toutDessiner(tab3,canvas3,ctx3);
+toutDessiner(tab4,canvas4,ctx4);
+
+empiler();
+toutDessiner(tabTotal,canvasT,ctxT);
+
+document.getElementById("stats").innerHTML = points+" points";
+
+events();
+
+if(!tutoMode)
+{
+    generate();
+    chronoStart();
+}
+