display score

potain05/assets/jeu.js

@@ -14,6 +14,8 @@ let timeBetween = 2000;
 const MIN_TIME_BETWEEN = 1000;
 const ACCELERATION = 100;
 
+let score = 0;
+
 (function () {
     zones = document.getElementsByClassName("zone");
     for (const zone of zones) {
@@ -21,7 +23,6 @@ const ACCELERATION = 100;
             if (gameState !== GAME_STARTED) {
                 return;
             }
-            console.log(event.target.classList);
             if (event.target.classList.contains("inactive")) {
                 gameState = GAME_LOST;
                 end();
@@ -29,13 +30,13 @@ const ACCELERATION = 100;
                 event.target.style.transition = "";
                 event.target.classList.remove("fade-out");
                 event.target.classList.add("inactive");
+                increment();
             }
         })
     }
 })();
 
 function start() {
-    console.log("start!");
     document.getElementsByTagName("button")[0].disabled = true;
     gameState = GAME_STARTED;
     endTimeout = setTimeout(end, 30_000);
@@ -51,9 +52,7 @@ function round() {
     let zone = zones[Math.floor(Math.random() * zones.length)];
     zone.classList.remove("inactive");
     setTimeout(function () {
-        zone.style.transition = `background-color ${timeBetween}ms`;
-    }, 100);
-    setTimeout(function () {
+        zone.style.transition = `background-color ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
         zone.classList.add("fade-out");
     }, MIN_TIME_BETWEEN / 2);
     let zoneTimeout = setTimeout(() => {
@@ -81,3 +80,8 @@ function end() {
         document.getElementsByClassName("failure stamp")[0].classList.remove("hidden");
     }
 }
+
+function increment() {
+    score++;
+    document.getElementById("score").innerText = score.toString();
+}

potain05/assets/style.css

@@ -38,17 +38,16 @@ main, footer {
 }
 
 .success.stamp {
-    top: 120px;
-    left: 60px;
+    top: 110px;
+    left: 85px;
     color: #0f5132;
     background-color: #d1e7dd;
     border: 3px solid #859a99;
 }
 
 .failure.stamp {
-    /* TODO center the stamp */
-    top: 120px;
-    left: 60px;
+    top: 110px;
+    left: 200px;
     color: #510f0f;
     background-color: #e7d1d1;
     border: 3px solid #9a8585;

potain05/index.html

@@ -23,6 +23,7 @@
     <h2>Jeu interactif</h2>
     <p>
         Aide Pimpin le technicien à reboucher les fuites ! <br>
+        Score : <span id="score">0</span> <br>
         <button onclick="start()">Commencer</button>
     </p>
     <div class="img-holder">