diff --git a/css/map.css b/css/map.css index 259cf09..dba478c 100644 --- a/css/map.css +++ b/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; diff --git a/js/map.js b/js/map.js index 3723024..ecba4f9 100644 --- a/js/map.js +++ b/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 = `
Trouve ${codeCarte === 'KAMA' ? 'le pays' : 'la commune'}
...
` score.innerHTML = "Correct ✅ : 0
Faux ❌ : 0
" - chrono.innerHTML = "Temps écoulé :
" + chrono.innerHTML = "Temps écoulé :
" 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)