graphique + timer

site/vue/css/style.css

@@ -576,3 +576,24 @@ input[type=color] {
     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;
+}

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">

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) {

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);
+        }
+    });
 }

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";
@@ -20,6 +20,12 @@ function move() {
   }
 }
 
+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,7 +38,7 @@ timer.addEventListener('secondsUpdated', function (e) {
   }
 });
 function endTime() {
-  if(!isTuto){
+  if (!isTuto) {
     closeGame();
     var score = (niveauActuel * (50 / timeTot)).toFixed(2);
     document.querySelector("#scoreTotGameOver").innerHTML = score;
@@ -40,22 +46,22 @@ function endTime() {
     document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
     //calcul stars
     resetStar();
-  if(score < 10){
+    if (score < 10) {
       document.querySelector("#star1").style.color = "#fe8a71";
-  }else if(score > 10 || score < 50){
+    } else if (score > 10 || score < 50) {
       document.querySelector("#star1").style.color = "#fe8a71";
       document.querySelector("#star2").style.color = "#fe8a71";
-  }else if(score > 50 || score < 200){
+    } 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){
+    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{
+    } else {
       document.querySelector("#star1").style.color = "#fe8a71";
       document.querySelector("#star2").style.color = "#fe8a71";
       document.querySelector("#star3").style.color = "#fe8a71";
@@ -66,7 +72,7 @@ function endTime() {
   }
 }
 
-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;