Add penalty

css/map.css

@@ -45,6 +45,11 @@ html, body, #map {
     text-align: center;
 }
 
+#penalty {
+    opacity: 1;
+    transition: opacity 1s ease;
+}
+
 .popup-ko .maplibregl-popup-content {
     background-color: rgba(255, 0, 0, 0.9);
     border-radius: 10px;

js/map.js

@@ -78,6 +78,7 @@ const popupOffsets = {
  */
 let ok
 let ko
+let penaltyElement
 
 /**
  * Gestion du temps écoulé
@@ -85,6 +86,7 @@ let ko
 let gameTime = 0
 let gameMinute = 0
 let gameSecond = 0
+let gamePenalty = 0
 let intervalId
 
 /**
@@ -111,6 +113,7 @@ function resetGame() {
     correctAnswers.clear()
     clearInterval(intervalId)
     gameTime = 0
+    gamePenalty = 0
 }
 
 /**
@@ -130,12 +133,14 @@ function startGame() {
     
     question.innerHTML = `<p style='font-weight: bold;'>Trouve ${codeCarte === 'KAMA' ? 'le pays' : 'la commune'}</p><p id='commune' style='font-size: 30px; font-weight: bold; color: #1F51FF'>...</p>`
     score.innerHTML = "<p style='color: green; font-weight: bold; margin-right: 2em;'>Correct ✅ : <span style='color: black;' id='OK'>0</span></p><p style='color: red; font-weight: bold;'>Faux ❌ : <span style='color: black;' id='KO'>0</span></p>"
-    chrono.innerHTML = "<p>Temps écoulé : <span id='time'></span></p>"
+    chrono.innerHTML = "<p>Temps écoulé : <span id='time'></span><span style='margin-left: 1em;color: red; font-weight: bold;' id='penalty'></span></p>"
 
     communeObserver()
 
     ok = document.getElementById('OK')
     ko = document.getElementById('KO')
+    penaltyElement = document.getElementById('penalty')
+
 
     startButton.setAttribute('disabled', true)
     restartButton.removeAttribute('disabled')
@@ -255,6 +260,16 @@ function updateScore(isCorrect) {
         ok.innerText = Number.parseInt(ok.innerText, 10) + 1
     } else {
         ko.innerText = Number.parseInt(ko.innerText, 10) + 1
+        gameTime += 5
+        gamePenalty += 5
+
+        penaltyElement.style.opacity = 1
+        penaltyElement.innerText = '+ 5 secondes'
+
+        setTimeout(() => {
+            penaltyElement.style.opacity = 0
+            penaltyElement.innerText = ''
+        }, 2000)
     }
 }
 
@@ -486,13 +501,15 @@ function loadMap() {
                             elapsedTime = `${gameMinute} minute${gameMinute > 1 ? 's' : ''} ${gameSecond} seconde${gameSecond > 1 ? 's' : ''}`
                         }
 
-                        alert(`Fin du jeu, ${Math.round(percentageCorrectAnswers)} % de bonnes réponses ! Temps écoulé : ${elapsedTime}`)
+                        alert(`${Math.round(percentageCorrectAnswers)}% de bonnes réponses !
+                            \nTemps écoulé : ${elapsedTime} ! ${gamePenalty ? `
+                            \nPénalité : ${gamePenalty} secondes` : ''}`)
                         clearInterval(intervalId)
                         gameTime = 0
 
                         setTimeout(() => {
                             location.reload()
-                        }, 1500)
+                        }, 1000)
                     }
                 } else {
                     updateScore(false)