don't fail if missed

potain05/assets/jeu.js

@@ -21,7 +21,8 @@ const ACCELERATION = 100;
 const DURATION = 60_500;
 
 let score = 0;
-let zonesCleared = 0;
+let zonesCount = 0;
+let zonesTotal = 0;
 let startTime = undefined;
 
 function start() {
@@ -40,7 +41,7 @@ function start() {
                 event.target.style.transition = "";
                 event.target.classList.remove("fade-out");
                 event.target.classList.add("inactive");
-                increment();
+                incrementScore();
             }
         })
     }
@@ -63,7 +64,10 @@ function round() {
 
     let zone = zones[Math.floor(Math.random() * zones.length)];
 
+    incrementTotal();
+
     zone.classList.remove("inactive", "fade-out");
+    zone.style.transition = "";
 
     if (CHEAT) {
         setTimeout(() => {
@@ -79,15 +83,6 @@ function round() {
         zone.classList.add("fade-out");
     }, MIN_TIME_BETWEEN / 2);
 
-    let zoneTimeout = setTimeout(() => {
-        if (!zone.classList.contains("inactive") && gameState === GAME_STARTED) {
-            console.log("lost because didn't click fast enough", zone.id);
-            gameState = GAME_LOST;
-            end();
-        }
-    }, timeBetween);
-    zone.addEventListener("click", () => {clearTimeout(zoneTimeout)})
-
     // Recursive call, sorta
     timeBetween -= ACCELERATION;
     if (timeBetween <= MIN_TIME_BETWEEN) {timeBetween = MIN_TIME_BETWEEN;}
@@ -106,9 +101,14 @@ function end() {
     }
 }
 
-function increment() {
+function incrementScore() {
     score += Math.floor(Math.random() * zones.length) + 1;
-    zonesCleared++;
+    zonesCount++;
     document.getElementById("score").innerText = score.toString();
-    document.getElementById("zonesCount").innerText = zonesCleared.toString();
+    document.getElementById("zonesCount").innerText = zonesCount.toString();
+}
+
+function incrementTotal() {
+    zonesTotal++;
+    document.getElementById("zonesTotal").innerText = zonesTotal.toString();
 }

potain05/assets/style.css

@@ -39,31 +39,16 @@ main, footer {
 
 .success.stamp {
     top: 110px;
-    left: 85px;
+    left: 220px;
     color: #0f5132;
     background-color: #d1e7dd;
     border: 3px solid #859a99;
 }
 
-.failure.stamp {
-    top: 110px;
-    left: 200px;
-    color: #510f0f;
-    background-color: #e7d1d1;
-    border: 3px solid #9a8585;
-}
-
 .hidden {
     display: none;
 }
 
-.failure {
-    color: #a71717;
-}
-
-.success {
-    color: green;
-}
 
 h2 {
     margin-top: 0;

potain05/index.html

@@ -22,8 +22,8 @@
 <main>
     <h2>Jeu interactif</h2>
     <p>
-        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 (<span id="zonesCount">0</span> fuites).<br>
+        Tu as <strong>une minute</strong> pour aider Pimpin le technicien à reboucher un maximum de 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 (<span id="zonesCount">0</span>/<span id="zonesTotal">0</span> fuites).<br>
         Temps écoulé : <span id="timer">0</span>s.
         <button onclick="start()">Commencer</button>
     </p>
@@ -41,8 +41,7 @@
         <div id="bureau-13" class="zone inactive" style="width: 85px; height: 60px; top: 105px; left: 630px;"></div>
         <div id="bureau-14" class="zone inactive" style="width: 40px; height: 90px; top: 185px; left: 589px;"></div>
         <div id="bureau-15" class="zone inactive" style="width: 63px; height: 90px; top: 185px; left: 524px;"></div>
-        <span class="success stamp hidden">FÉLICITATIONS 🎉</span>
-        <span class="failure stamp hidden">PERDU 😞</span>
+        <span class="success stamp hidden">BRAVO 🎉</span>
     </div>
     <p>N'hésite pas à partager ton score sur Teams 😉</p>
 </main>