display stopwatch

potain05/assets/jeu.js

@@ -4,29 +4,39 @@ const GAME_NOT_STARTED = 0;
 const GAME_STARTED = 1;
 const GAME_WON = 2;
 const GAME_LOST = 3;
+const CHEAT = false;
 
 let gameState = GAME_NOT_STARTED;
 
 let zones = undefined;
+let timer = undefined;
+
 let endTimeout = undefined;
 let roundTimeout = undefined;
+let timerInterval = undefined;
+
 let timeBetween = 2000;
 const MIN_TIME_BETWEEN = 1000;
 const ACCELERATION = 100;
+const DURATION = 60_500;
 
 let score = 0;
+let zonesCleared = 0;
+let startTime = undefined;
+
+function start() {
+    document.getElementsByTagName("button")[0].disabled = true;
+    gameState = GAME_STARTED;
+    startTime = new Date();
+    timer = document.getElementById("timer");
 
-(function () {
     zones = document.getElementsByClassName("zone");
     for (const zone of zones) {
         zone.addEventListener("click", event => {
             if (gameState !== GAME_STARTED) {
                 return;
             }
-            if (event.target.classList.contains("inactive")) {
+            if (!event.target.classList.contains("inactive")) {
-                gameState = GAME_LOST;
-                end();
-            } else {
                 event.target.style.transition = "";
                 event.target.classList.remove("fade-out");
                 event.target.classList.add("inactive");
@@ -34,15 +44,17 @@ let score = 0;
             }
         })
     }
-})();
 
-function start() {
+    endTimeout = setTimeout(end, DURATION);
-    document.getElementsByTagName("button")[0].disabled = true;
+    timerInterval = setInterval(updateTimer, 500);
-    gameState = GAME_STARTED;
-    endTimeout = setTimeout(end, 30_000);
     roundTimeout = setTimeout(round, 1);
 }
 
+function updateTimer() {
+    const now = new Date();
+    timer.innerText = Math.floor(Math.abs(startTime - now) / 1000).toString();
+}
+
 function round() {
     if (gameState !== GAME_STARTED) {
         end();
@@ -50,15 +62,25 @@ function round() {
     }
 
     let zone = zones[Math.floor(Math.random() * zones.length)];
-    zone.classList.remove("inactive");
+
+    zone.classList.remove("inactive", "fade-out");
+
+    if (CHEAT) {
+        setTimeout(() => {
+            zone.click();
+        }, 200);
+    }
+
     setTimeout(function() {
-        zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
+        zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms linear`;
     }, 100);
+
     setTimeout(function () {
         zone.classList.add("fade-out");
     }, MIN_TIME_BETWEEN / 2);
+
     let zoneTimeout = setTimeout(() => {
-        if (!zone.classList.contains("inactive")) {
+        if (!zone.classList.contains("inactive") && gameState === GAME_STARTED) {
             console.log("lost because didn't click fast enough", zone.id);
             gameState = GAME_LOST;
             end();
@@ -66,7 +88,7 @@ function round() {
     }, timeBetween);
     zone.addEventListener("click", () => {clearTimeout(zoneTimeout)})
 
-    // Recursive call
+    // Recursive call, sorta
     timeBetween -= ACCELERATION;
     if (timeBetween <= MIN_TIME_BETWEEN) {timeBetween = MIN_TIME_BETWEEN;}
     roundTimeout = setTimeout(round, timeBetween);
@@ -75,6 +97,7 @@ function round() {
 function end() {
     clearTimeout(roundTimeout);
     clearTimeout(endTimeout);
+    clearInterval(timerInterval);
     if (gameState === GAME_STARTED) {
         gameState = GAME_WON;
         document.getElementsByClassName("success stamp")[0].classList.remove("hidden");
@@ -84,6 +107,8 @@ function end() {
 }
 
 function increment() {
-    score += Math.floor(Math.random() * zones.length);
+    score += Math.floor(Math.random() * zones.length) + 1;
+    zonesCleared++;
     document.getElementById("score").innerText = score.toString();
+    document.getElementById("zonesCount").innerText = zonesCleared.toString();
 }

potain05/index.html

@@ -22,8 +22,9 @@
 <main>
     <h2>Jeu interactif</h2>
     <p>
-        Aide Pimpin le technicien à reboucher les fuites de fluide frigorigène ! <br>
+        Tu as <strong>une minute</strong> pour aider Pimpin le technicien à reboucher les fuites de fluide frigorigène ! <br>
-        Score : <span id="score">0</span> kg CO<sub>2</sub>e non rejetés dans l'atmosphère<br>
+        Score : <span id="score">0</span> kg CO<sub>2</sub>e non rejetés dans l'atmosphère (<span id="zonesCount">0</span> fuites).<br>
+        Temps écoulé : <span id="timer">0</span>s.
         <button onclick="start()">Commencer</button>
     </p>
     <div class="img-holder">
@@ -43,6 +44,7 @@
         <span class="success stamp hidden">FÉLICITATIONS 🎉</span>
         <span class="failure stamp hidden">PERDU 😞</span>
     </div>
+    <p>N'hésite pas à partager ton score sur Teams 😉</p>
 </main>
 <footer>
     <p>
@@ -52,7 +54,7 @@
     </p>
 </footer>
 <script src="assets/jeu.js"></script>
-<!--<script data-goatcounter="https://static.gc.augendre.info/count"-->
+<script data-goatcounter="https://static.gc.augendre.info/count"
-<!--        async src="https://static.gc.augendre.info/count.js"></script>-->
+        async src="https://static.gc.augendre.info/count.js"></script>
 </body>
 </html>