From 67b44873bcff0ebcebdb045a288b8b331ba11612 Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Sat, 27 Jun 2020 21:32:55 +0200
Subject: [PATCH] graphique + timer

---
 site/vue/css/style.css      | 21 +++++++++++
 site/vue/index.html         |  8 +++--
 site/vue/js/func.js         |  6 ++++
 site/vue/js/generateGame.js | 25 ++++++++++++-
 site/vue/js/timer.js        | 72 ++++++++++++++++++++-----------------
 5 files changed, 95 insertions(+), 37 deletions(-)

diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index fbc10d0..7a1908b 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -575,4 +575,25 @@ input[type=color] {
     width: 99%;
     display: none;
     z-index: 80;
+}
+
+@keyframes progressbar-countdown {
+    0% {
+        width: 0%;
+    }
+
+    100% {
+        width: 95%;
+    }
+}
+
+.progress_bar {
+    height: 10px;
+    margin: 20px;
+    animation: progressbar-countdown;
+    animation-duration: 40s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-play-state: paused;
+    animation-timing-function: linear;
 }
\ No newline at end of file
diff --git a/site/vue/index.html b/site/vue/index.html
index 484cfa8..62593a5 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -116,7 +116,7 @@
         <div id="firstTimeet" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background" align=center>
-                    <span class="close" onclick="closeModal('firstTimeet');timer.start()">&times;</span>
+                    <span class="close" onclick="closeModal('firstTimeet');demarrerTimer();">&times;</span>
                     <h1 class="txt dys" id="infoFirstTimeEt"></h1>
                     <hr id="hr">
                     <p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
@@ -158,7 +158,7 @@
         <div id="firstTimeou" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background" align=center>
-                    <span class="close" onclick="closeModal('firstTimeou');timer.start()">&times;</span>
+                    <span class="close" onclick="closeModal('firstTimeou');demarrerTimer();">&times;</span>
                     <h1 class="txt dys" id="infoFirstTimeOu"></h1>
                     <hr id="hr">
                     <p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
@@ -200,7 +200,7 @@
         <div id="firstTimeinv" class="modal">
             <div class="modal-content info-content">
                 <div class="modal-body border background" align=center>
-                    <span class="close" onclick="closeModal('firstTimeinv');timer.start()">&times;</span>
+                    <span class="close" onclick="closeModal('firstTimeinv');demarrerTimer();">&times;</span>
                     <h1 class="txt dys" id="infoFirstTimeinv"></h1>
                     <hr id="hr">
                     <p class="dys txt margin-global" id="infoFirstTimeinvInfo1"></p>
@@ -235,7 +235,9 @@
                 </div>
 
                 <div class="timer_show dys border"><span class="timer_txt"></span></div>
+
             </div>
+            <div id="progress_bar" class="progress_bar border backgroundInv"></div>
         </div>
         <br>
         <div id="play_container" class="border">
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index 55a1ebf..ea41232 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -41,6 +41,9 @@ function setColor(color) {
         backgroundToChange.forEach(function (element) {
             element.style.backgroundColor = blackColor;
         });
+        document.querySelectorAll(".backgroundInv").forEach(function (element) {
+            element.style.backgroundColor = whiteColor;
+        });
         document.body.style.color = whiteColor;
         document.getElementById("setting_int").style.color = whiteColor;
         var hr = document.querySelectorAll("#hr");
@@ -61,6 +64,9 @@ function setColor(color) {
         backgroundToChange.forEach(function (element) {
             element.style.backgroundColor = whiteColor;
         });
+        document.querySelectorAll(".backgroundInv").forEach(function (element) {
+            element.style.backgroundColor = blackColor;
+        });
         document.getElementById("setting_int").style.color = blackColor;
         var hr = document.querySelectorAll("#hr");
         hr.forEach(function (item) {
diff --git a/site/vue/js/generateGame.js b/site/vue/js/generateGame.js
index 570a751..2e538f5 100644
--- a/site/vue/js/generateGame.js
+++ b/site/vue/js/generateGame.js
@@ -303,13 +303,36 @@ function generateFromBottom() {
     var NombrecolonneTest = 2;
     var numberPerColonneTest = [3, 2];
     var porteBool = [[true, "et"], [true, "ou"], [true, "inv"]];
+    var logiquesTest = [];
 
     for (let i = NombrecolonneTest; i > 0; i--) {
         for (let j = 0; j < numberPerColonneTest[i - 1]; j++) {
             let numberRandom = getRandomArbitrary(0, porteBool.length);
+            logiquesTest.push([porteBool[numberRandom][1], i, j, (j + 1) * 10]);
+
         }
     }
+    createLink(logiquesTest, numberPerColonneTest[numberPerColonneTest.length - 1]);
+}
 
+function createLinkTest(listeLogique, colonneMax) {
+    listeLogique.forEach(function (element) {
+        if (element[1] !== colonneMax) {
+            console.log(element);
+            listeLogique.forEach(function (item) {
+                if (item[1] !== colonneMax) {
+                    console.log(item);
+                }
+            });
+        }
+    });
+}
 
-
+function isValid(listeLogique, colonneMax) {
+    listeLogique.forEach(function (element) {
+        //derniere colonne donc fin
+        if (element[1] == colonneMax) {
+            console.log(element);
+        }
+    });
 }
\ No newline at end of file
diff --git a/site/vue/js/timer.js b/site/vue/js/timer.js
index 75dd2d9..54cd4da 100644
--- a/site/vue/js/timer.js
+++ b/site/vue/js/timer.js
@@ -4,7 +4,7 @@ function initTimer() {
 
 function move() {
   document.querySelector(".timer_txt").innerHTML = timeEnd - timer.getTimeValues().seconds;
-  switch(timeEnd - timer.getTimeValues().seconds){
+  switch (timeEnd - timer.getTimeValues().seconds) {
     case 5:
     case 4:
       document.querySelector(".timer_txt").style.color = "#eca1a6";
@@ -16,10 +16,16 @@ function move() {
       document.querySelector(".timer_txt").style.color = "#c94c4c";
       break;
     default:
-      document.querySelector(".timer_txt").style.color =  document.querySelector("#modeDeJeu").style.color;
+      document.querySelector(".timer_txt").style.color = document.querySelector("#modeDeJeu").style.color;
   }
 }
 
+function demarrerTimer() {
+  timer.start();
+  document.querySelector(".progress_bar").style.animationDuration = timeEnd + "s";
+  document.querySelector(".progress_bar").style.animationPlayState = 'running';
+}
+
 var timer = new easytimer.Timer();
 timer.start();
 timer.addEventListener('secondsUpdated', function (e) {
@@ -32,44 +38,44 @@ timer.addEventListener('secondsUpdated', function (e) {
   }
 });
 function endTime() {
-  if(!isTuto){
+  if (!isTuto) {
     closeGame();
     var score = (niveauActuel * (50 / timeTot)).toFixed(2);
     document.querySelector("#scoreTotGameOver").innerHTML = score;
     document.querySelector("#niveauGameOver").innerHTML = niveauActuel;
     document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
-  //calcul stars
-  resetStar();
-  if(score < 10){
-    document.querySelector("#star1").style.color = "#fe8a71";
-  }else if(score > 10 || score < 50){
-    document.querySelector("#star1").style.color = "#fe8a71";
-    document.querySelector("#star2").style.color = "#fe8a71";
-  }else if(score > 50 || score < 200){
-    document.querySelector("#star1").style.color = "#fe8a71";
-    document.querySelector("#star2").style.color = "#fe8a71";
-    document.querySelector("#star3").style.color = "#fe8a71";
-  }
-  else if(score > 200 || score < 400){
-    document.querySelector("#star1").style.color = "#fe8a71";
-    document.querySelector("#star2").style.color = "#fe8a71";
-    document.querySelector("#star3").style.color = "#fe8a71";
-    document.querySelector("#star4").style.color = "#fe8a71";
-  }else{
-    document.querySelector("#star1").style.color = "#fe8a71";
-    document.querySelector("#star2").style.color = "#fe8a71";
-    document.querySelector("#star3").style.color = "#fe8a71";
-    document.querySelector("#star4").style.color = "#fe8a71";
-    document.querySelector("#star5").style.color = "#fe8a71";
+    //calcul stars
+    resetStar();
+    if (score < 10) {
+      document.querySelector("#star1").style.color = "#fe8a71";
+    } else if (score > 10 || score < 50) {
+      document.querySelector("#star1").style.color = "#fe8a71";
+      document.querySelector("#star2").style.color = "#fe8a71";
+    } else if (score > 50 || score < 200) {
+      document.querySelector("#star1").style.color = "#fe8a71";
+      document.querySelector("#star2").style.color = "#fe8a71";
+      document.querySelector("#star3").style.color = "#fe8a71";
+    }
+    else if (score > 200 || score < 400) {
+      document.querySelector("#star1").style.color = "#fe8a71";
+      document.querySelector("#star2").style.color = "#fe8a71";
+      document.querySelector("#star3").style.color = "#fe8a71";
+      document.querySelector("#star4").style.color = "#fe8a71";
+    } else {
+      document.querySelector("#star1").style.color = "#fe8a71";
+      document.querySelector("#star2").style.color = "#fe8a71";
+      document.querySelector("#star3").style.color = "#fe8a71";
+      document.querySelector("#star4").style.color = "#fe8a71";
+      document.querySelector("#star5").style.color = "#fe8a71";
+    }
+    openModal('gameOver');
   }
-  openModal('gameOver');
-  } 
 }
 
-function resetStar(){
+function resetStar() {
   document.querySelector("#star1").style.color = document.body.style.color;
-    document.querySelector("#star2").style.color = document.body.style.color;
-    document.querySelector("#star3").style.color = document.body.style.color;
-    document.querySelector("#star4").style.color = document.body.style.color;
-    document.querySelector("#star5").style.color = document.body.style.color;
+  document.querySelector("#star2").style.color = document.body.style.color;
+  document.querySelector("#star3").style.color = document.body.style.color;
+  document.querySelector("#star4").style.color = document.body.style.color;
+  document.querySelector("#star5").style.color = document.body.style.color;
 }
\ No newline at end of file