From 12fbe7944a0a9575ad5311311748e4d9c89ec37f Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Sun, 14 Jun 2020 12:03:15 +0200
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20de=20la=20popup=20de=20fin,?=
 =?UTF-8?q?=20et=20calcul=20du=20temps=20total/score=20total/niveau=20max?=
 =?UTF-8?q?=20...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/vue/css/style.css |  16 +++++-
 site/vue/index.html    | 116 ++++++++++++++++++++++++++++-------------
 site/vue/jeu.html      |  24 +++++++--
 site/vue/js/const.js   |   9 +++-
 site/vue/js/func.js    |  28 ++++++++--
 site/vue/js/lang.js    |  11 ++--
 site/vue/js/main.js    |  38 ++++++++++++--
 site/vue/js/timer.js   |  57 ++++++++++----------
 8 files changed, 218 insertions(+), 81 deletions(-)

diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 97b25ff..562333a 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -230,7 +230,6 @@ hr{
     height: 30vh;
     width: 90%;
 }
-
 .close{
     position: absolute;
     right:33px;
@@ -253,4 +252,19 @@ hr{
 .secret{
     cursor: pointer;
     color:#fe8a71;
+}
+#niveauGameOver{
+    color:#fe8a71;
+}
+#scoreTotGameOver{
+    color:#fe8a71;
+}
+#TempsTotGameOver{
+    color:#fe8a71;
+}
+.timer_bar{
+    height: 15px;
+    max-width: 95%;
+    margin:2%;
+    transition: 1.5s;
 }
\ No newline at end of file
diff --git a/site/vue/index.html b/site/vue/index.html
index 2aaf9bf..db3144f 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -22,7 +22,7 @@
                         <a class="txt dys" id="playSelection">Je veux jouer a </a>
                         <select id="jeu-select" class="background">
                             <option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option>
-                            <option value="perso" class="txt background dys" id="mode2">Niveau Perso</option>
+                            <option value="perso" class="txt background dys" id="mode2"></option>
                         </select>
                     </div>
                 </li>
@@ -38,7 +38,7 @@
         <a onclick="openModal('infoModal')"><i class="fa fa-info" id="setting" aria-hidden="true"></i></a>
         <div id="myModal" class="modal">
             <div class="modal-content">
-    
+
                 <div id="setting_int" class="modal-body border background" align=center>
                     <span class="close" onclick="closeModal('myModal')">&times;</span>
                     <h1 class="txt dys" id="settingTitle">Parametres</h1>
@@ -67,12 +67,12 @@
                             id="inactive_end_picker" name="head" value="#9a9a9a"></p>
                     <hr id="hr">
                     <div class="setting_play" id="setting_container">
-    
+
                     </div>
                 </div>
             </div>
         </div>
-    
+
         <div id="scoreModal" class="modal">
             <div class="modal-content score-content">
                 <div class="modal-body border background">
@@ -80,7 +80,7 @@
                     <h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
                     <hr id="hr">
                     <div class="scoreOne border" align=center>
-                        <p class="dys">Mode de jeu 1</p>
+                        <p class="dys txt" id="mode1">Aleatoire</p>
                         <hr id="hr">
                         <p class="dys">Pseudo | Score</p>
                         <p class="dys">Pseudo | Score</p>
@@ -88,7 +88,7 @@
                         <p class="dys">Pseudo | Score</p>
                     </div>
                     <div class="scoreTwo border" align=center>
-                        <p class="dys">Mode de jeu 2</p>
+                        <p class="dys txt" id="mode2">Cameleon</p>
                         <hr id="hr">
                         <p class="dys">Pseudo | Score</p>
                         <p class="dys">Pseudo | Score</p>
@@ -98,63 +98,108 @@
                 </div>
             </div>
         </div>
+        <div id="gameOver" class="modal">
+            <div class="modal-content score-content">
+                <div class="modal-body border background">
+                    <span class="close" onclick="closeModal('gameOver')">&times;</span>
+                    <h1 align=center class="txt dys" id="gameOverTitle">Game Over</h1>
+                    <hr id="hr">
+                    <br><br>
+                    <div align=center>
+                        <p><a class="dys">Vous avez fait un score total de </a><a class="dys" id="scoreTotGameOver">140</a></p>
+                        <p><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
+                        <p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
+                        <hr id="hr">
+                        <p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p>
+                        
+                    </div>
+                    
+                    
+                </div>
+            </div>
+        </div>
         <div id="infoModal" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background" align=center>
                     <span class="close" onclick="closeModal('infoModal')">&times;</span>
                     <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
                     <hr id="hr">
-                    <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. Morbi
+                    <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus.
+                        Morbi
                         imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat
-                        facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend porta.
+                        facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend
+                        porta.
                         Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum
                         sapien.
-    
-                        Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper urna
-                        sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-                        posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor. Aenean
+
+                        Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper
+                        urna
+                        sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et
+                        ultrices
+                        posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor.
+                        Aenean
                         imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
-    
+
                         Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec
-                        laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. Sed
+                        laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia.
+                        Sed
                         sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare
-                        elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a augue
-                        aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit at
+                        elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a
+                        augue
+                        aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit
+                        at
                         risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec
-                        finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue. Interdum et
+                        finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
+                        Interdum et
                         malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
-    
+
                         Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis
-                        porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et leo
-                        ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada tincidunt,
+                        porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et
+                        leo
+                        ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
+                        tincidunt,
                         sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra
-                        vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. Aenean
+                        vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo.
+                        Aenean
                         quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio
-                        efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies lobortis,
+                        efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
+                        lobortis,
                         odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie
                         sollicitudin.
-    
-                        Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis tortor,
-                        vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et est.
+
+                        Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis
+                        tortor,
+                        vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et
+                        est.
                         Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut
                         iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum
-                        varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis malesuada
-                        eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel finibus
-                        mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam aliquam.
+                        varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
+                        malesuada
+                        eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel
+                        finibus
+                        mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
+                        aliquam.
                         Vivamus maximus justo eu fermentum hendrerit.</p>
-    
+
                 </div>
             </div>
         </div>
+        
     </div>
     <!--Play Page-->
     <div id="playPage">
-        <div class="menu border" align=center>
-            <a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
-            <p id="modeDeJeu" class="txt dys">Mode de jeu</p>
-            <p id="niveau" class="txt dys">Niveau 14</p>
-            <p id="temps" class="txt dys">Temps :</p>
-        </div><br>
+        <div class="menu border">
+            <div align=center>
+                <a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
+                <p id="modeDeJeu" class="txt dys">Mode de jeu</p>
+                <p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
+                <p class="dys"><a id="temps" class="txt">Temps : </a><a id="timer">0 s</a><a id="timerend">0 s</a></p>
+            </div>
+            <div class="timer_bar border">
+
+            </div>
+        </div>
+        <br>
         <div id="play_container" class="border">
 
         </div>
@@ -165,6 +210,7 @@
 <script src="js/lang.js"></script>
 <script src="js/func.js"></script>
 <script src="js/createElement.js"></script>
+<script src="js/easytimer.min.js"></script>
 <script src="js/logique.js"></script>
 <script src="js/init.js"></script>
 <script src="js/main.js"></script>
diff --git a/site/vue/jeu.html b/site/vue/jeu.html
index 334dbba..a3d8bee 100644
--- a/site/vue/jeu.html
+++ b/site/vue/jeu.html
@@ -65,7 +65,7 @@
   <a onclick="reset()" style="cursor:pointer;">Click</a>
   <script>
     var mobile = false;
-    var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
+    var switchs = new Array(), lineCount = new Array(), logiques = new Array(),lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
 
     var niveauActuel = localStorage.getItem("niveau");
     if(niveauActuel == null){
@@ -99,8 +99,24 @@
     checkAllSortieLogique();
 
     function reset(){
-      console.log("reset");
-      switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
+      clearArray(switchs);
+      clearArray(lineCount);
+      clearArray(logiques);
+      console.log(logiques);
+      clearArray(lines);
+      clearArray(endLines);
+      clearArray(switchsInfo);
+      clearArray(switchsInfoCopy);
+      clearArray(lineRemove);
+      timeEnd = 70;
+
+      //switch
+      numberOfSwitch = 0;
+
+      //grid
+      colonneTot = 0;
+      numberPerColonne = [];
+      liveColonneNumber = [];
       stage = new Konva.Stage({
       container: 'play-container',
       /*rotation: -90,
@@ -109,8 +125,10 @@
       width: width,
       height: height,
     });
+    
     layer.destroyChildren();
     stage.add(layer);
+    
 
     initLayer();
 
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index 140c33c..ca94706 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -28,7 +28,8 @@ var colorSwitchInnactiveBackground = "red";
 var colorSwitchActiveBackground = "green";
 
 //timer
-var timeEnd = 70;
+var timeEnd = 10;
+var timeTot = 0;
 
 //switch
 var numberOfSwitch = 0;
@@ -36,4 +37,8 @@ var numberOfSwitch = 0;
 //grid
 var colonneTot = 4;
 var numberPerColonne = [];
-var liveColonneNumber = [];
\ No newline at end of file
+var liveColonneNumber = [];
+
+var niveauActuel = 1;
+
+var isTuto = true;
\ No newline at end of file
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index ef1d253..8e9bfdb 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -41,7 +41,6 @@ function setColor(color) {
             element.style.backgroundColor = blackColor;
         });
         document.body.style.color = whiteColor;
-        
         document.getElementById("setting_int").style.color = whiteColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
@@ -244,11 +243,16 @@ function checkEnd() {
 
         }
     });
-    if (ter) {
-        setTimeout(() => { localStorage.setItem("niveau", parseInt(niveauActuel) + 1); document.location.reload(true); }, 100);
+    if (ter && !isTuto) {
+        setTimeout(() => { nextLevel(); }, 100);
     }
 }
 
+function nextLevel(){
+    niveauActuel++;
+    timeTot = timeTot + timer.getTimeValues().seconds;
+    launchGameOne();
+}
 
 function calculNombreSwitch() {
     var entrelibre = 0;
@@ -354,14 +358,30 @@ function changeAllLineColorInActive(color){
 }
 
 function play(){
-    console.log("oui");
+    niveauActuel = 1;
     document.querySelector("#mainPage").style.display = 'none';
     document.querySelector("#playPage").style.display = 'block';
+    timeTot = 0;
+    launchGameOne();
+}
+
+function launchGameOne(){
+    document.querySelector(".niveau").innerHTML = niveauActuel;
+    timer.stop();
+    timer.reset();
     resetAllTabs();
     gameOne();
 }
 
+function clearArray(arr){
+    while(arr.length > 0) {
+        arr.pop();
+    }
+    return arr.splice(0,arr.length);
+}
+
 function closeGame(){
+    timer.stop();
     document.querySelector("#mainPage").style.display = 'block';
     document.querySelector("#playPage").style.display = 'none';
     resetAllTabs();
diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js
index 5b010d5..cb49753 100644
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@@ -4,7 +4,7 @@ const lang = {
         settingTitle: "Parametres",
         playSelection: "Je veux jouer a",
         mode1: "Aleatoire",
-        mode2: "Niveau Perso",
+        mode2: "Cameleon",
         themeDark: "Theme Dark :",
         retour: "Retour",
         dysfont: "Dyslexie :",
@@ -15,17 +15,19 @@ const lang = {
         inactive_switch_setting : "Couleur switchs innactif : ",
         scoreTitle: "Tableau des scores",
         infoTitle: "Comment jouer ?",
+        gameOverTitle: "Perdu",
         inactive_end_setting: "Couleur fin : ",
         modeDeJeu : "Mode de jeu",
-        niveau : "Niveau 24",
+        niveau : "Niveau ",
         temps: "Temps : ",
+        
     },
     en: {
         titleGame: "Make It True",
         settingTitle: "Settings",
         playSelection: "I want to play ",
         mode1: "Random",
-        mode2: "Perso Level",
+        mode2: "Chameleon",
         themeDark: "Dark Theme :",
         retour: "Back",
         dysfont:"Dyslexia :",
@@ -38,7 +40,8 @@ const lang = {
         infoTitle: "How to play ?",
         inactive_end_setting: "End color : ",
         modeDeJeu : "Gamemode",
-        niveau : "Level 24",
+        niveau : "Level ",
         temps: "Time : ",
+        gameOverTitle: "Game Over",
     }
 }
\ No newline at end of file
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index 7875266..fa1da70 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -18,6 +18,7 @@ var layer = new Konva.Layer();
 tutoCreateLayer();
 
 function tutoCreateLayer() {
+    isTuto = true;
     width = window.innerWidth - window.innerWidth / 100 * 30;
     stage = new Konva.Stage({
         container: 'setting_container',
@@ -47,11 +48,19 @@ function resetAllTabs() {
     switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
     width = window.innerWidth - window.innerWidth / 100 * 10;
     height = window.innerHeight /1.5;
+    timeEnd = 5;
+
+    numberOfSwitch = 0;
+
+    colonneTot = 0;
+    numberPerColonne = [];
+    liveColonneNumber = [];
+
     layer.destroyChildren();
 }
 
 function gameOne() {
-
+    isTuto = false;
     stage = new Konva.Stage({
         container: 'play_container',
         /*rotation: -90,
@@ -61,7 +70,7 @@ function gameOne() {
         height: height,
     });
     stage.add(layer);
-
+    initTimer();
     colonneTot = 2;
     numberPerColonne = [2,1];
     var logiqueCount = 0;
@@ -69,9 +78,28 @@ function gameOne() {
     for (let i = 0; i < colonneTot; i++) {
         liveColonneNumber.push([]);
     }
-    insertLogiqueColonne("logique1", "et", 0);
-    insertLogiqueColonne("logique2", "et", 0);
-    insertLogiqueColonne("logique3", "et", 1);
+    for (let i = 0; i < colonneTot; i++) {
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let type = null;
+            switch (getRandomArbitrary(0, 4)) {
+                case 0:
+                    type = "et";
+                    break;
+                case 1:
+                    type = "ou";
+                    break;
+                case 2:
+                    type = "etnon";
+                    break;
+                case 3:
+                    type = "nonou";
+                    break;
+            }
+            insertLogiqueColonne("logique" + logiqueCount, type, i);
+        }
+    }
+    
     logiques.forEach(function (element) {
         createLinkAuto(element.name);
     });
diff --git a/site/vue/js/timer.js b/site/vue/js/timer.js
index 5e24dbe..84fda48 100644
--- a/site/vue/js/timer.js
+++ b/site/vue/js/timer.js
@@ -1,35 +1,38 @@
-function initTimer(){
-    /*var TimerElem = document.getElementById("progressBar");
-    TimerElem.style.width = "0%";
-    let seconds = timeEnd;
-    let minutes = 0;
-    while(seconds - 60 > 0){
-      minutes++;
-      seconds = seconds - 60;
-    }
-    document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";*/
+function initTimer() {
+  var TimerElem = document.querySelector(".timer_bar");
+  TimerElem.style.width = "0%";
+  let seconds = timeEnd;
+  document.getElementById("timerend").innerHTML = " / "  + seconds + " s";
 }
 
 function move() {
-    var lapsPerSecond = 100/timeEnd;
-    var TimerElem = document.getElementById("progressBar");
-    TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
+  var lapsPerSecond = 100 / timeEnd;
+  var TimerElem = document.querySelector(".timer_bar");
+  TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond) + "%";
 }
 
 
 
 var timer = new easytimer.Timer();
-    timer.start();
-    timer.addEventListener('secondsUpdated', function (e) {
-      if(timer.getTimeValues().seconds <= timeEnd){
-        document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
-        move();
-      }else{
-        endTime();
-        timer.stop();
-      }
-    });
-    function endTime(){
-        var modal = document.getElementById("myModal");
-        modal.style.display = "block";
-    }
\ No newline at end of file
+timer.start();
+timer.addEventListener('secondsUpdated', function (e) {
+  if (timer.getTimeValues().seconds <= timeEnd) {
+    document.getElementById("timer").innerHTML = timer.getTimeValues().seconds.toString() + " s";
+    move();
+  } else {
+    timeTot = timeTot + timer.getTimeValues().seconds;
+    endTime();
+    timer.stop();
+  }
+});
+function endTime() {
+  if(!isTuto){
+    document.querySelector("#mainPage").style.display = 'block';
+  document.querySelector("#playPage").style.display = 'none';
+  document.querySelector("#scoreTotGameOver").innerHTML = (niveauActuel * (50 / timeTot)).toFixed(2);
+  document.querySelector("#niveauGameOver").innerHTML = niveauActuel;
+  document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
+  openModal('gameOver');
+  }
+  
+}
\ No newline at end of file