Add a timer

js/map.js

@@ -15,6 +15,11 @@
 const currentFileName = window.location.pathname.split('/').pop()
 const codeCarte = currentFileName.split('.')[0]
 
+const startButton = document.getElementById('start')
+const restartButton = document.getElementById('restart')
+
+restartButton.setAttribute('disabled', true)
+
 /**
  * Définir le centre , le niveau de zoom et le style de la carte en fonction du code du département.
  */
@@ -54,42 +59,6 @@ switch (codeCarte) {
         zoomLevel = 9.5
 }
 
-/**
- * Initialise et configure la carte
- */
-const map = new maplibregl.Map({
-    container: 'map',
-    style: `../kat/styles/${styleFileName}`,
-    center: centerCoordinates,
-    zoom: zoomLevel
-})
-
-if (codeCarte !== '973') {
-    /**
-     * Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane.
-     */
-    map.scrollZoom.disable()
-    map.doubleClickZoom.disable()
-    map.dragPan.disable()
-} else {
-    /**
-     * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane.
-     */
-    map.addControl(new maplibregl.NavigationControl({showCompass: false}))
-    map.setMinZoom(7)
-    map.setMaxZoom(9.5)
-}
-
-if (codeCarte === 'KAMA') {
-    /**
-     * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour l'Afrique'.
-     */
-    map.addControl(new maplibregl.NavigationControl({showCompass: false}))
-    map.setMinZoom(2.4)
-    map.setMaxZoom(9)
-    map.dragPan.enable()
-}
-
 /**
  * Définit les décalages des popups en fonction de leur position.
  */
@@ -107,8 +76,16 @@ const popupOffsets = {
 /**
  * Référence aux éléments HTML pour afficher le score.
  */
-const ok = document.getElementById('OK')
+let ok
-const ko = document.getElementById('KO')
+let ko
+
+/**
+ * Gestion du temps écoulé
+ */
+let gameTime = 0
+let gameMinute = 0
+let gameSecond = 0
+let intervalId
 
 /**
  * État actuel de la commune survolée.
@@ -125,6 +102,107 @@ let currentZone = null
  */
 const correctAnswers = new Set()
 
+/**
+ * Permet de remettre le jeu à 0
+ */
+function resetGame() {
+    ok.innerText = 0
+    ko.innerText = 0
+    correctAnswers.clear()
+    clearInterval(intervalId)
+    gameTime = 0
+}
+
+/**
+ * Active le bouton "Commencer la partie" au chargement de la page
+ */
+window.onload = function() {
+    const startElement = document.getElementById('start')
+    startElement.removeAttribute('disabled')
+}
+
+function startGame() {
+    loadMap()
+
+    const question = document.getElementById('question')
+    const score = document.getElementById('score')
+    const chrono = document.getElementById('chrono')
+    
+    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>"
+
+    const communeElement = document.getElementById('commune')
+    const timeElement = document.getElementById('time')
+
+    communeObserver(communeElement, timeElement)
+
+    ok = document.getElementById('OK')
+    ko = document.getElementById('KO')
+
+    startButton.setAttribute('disabled', true)
+    restartButton.removeAttribute('disabled')
+
+    resetGame()
+}
+
+/**
+ * Observe le contenu de l'élément ayant pour id "commune"
+ * 
+ * @param {object} communeElement 
+ * @param {object} timeElement 
+ */
+function communeObserver(communeElement, timeElement) {
+     // Options de l'observateur (quelles sont les mutations à observer)
+     const config = {childList: true, subtree: true, characterData: true}
+
+     // Fonction callback à éxécuter quand une mutation est observée
+     const callback = function (mutationsList) {
+         for (const mutation of mutationsList) {
+           if (mutation.type == "childList" || mutation.type == "characterData") {
+             if (communeElement.textContent.trim() !== "...") {
+                updateTime(timeElement)
+             } else {
+                clearInterval(intervalId)
+                intervalId = null
+             }
+           }
+         }
+       }
+ 
+     // Crée une instance de l'observateur liée à la fonction de callback
+     const observer = new MutationObserver(callback)
+ 
+     // Commence à observer le noeud cible pour les mutations précédemment configurées
+     observer.observe(communeElement, config)
+}
+
+/**
+ * Mets à jour le contenu de l'élément ayant l'id "time"
+ * 
+ * @param {object} timeElement 
+ */
+function updateTime(timeElement) {
+    intervalId = setInterval(() => {
+        gameTime++
+
+        if (gameTime >= 60) {
+          gameMinute = String(gameTime / 60).split('.')[0]
+          gameSecond = gameTime % 60
+          timeElement.innerText = `${gameMinute} minute${gameMinute > 1 ? 's' : ''} ${gameSecond} seconde${gameSecond > 1 ? 's' : ''}`
+        } else {
+          timeElement.innerText = `${gameTime} seconde${gameTime > 1 ? 's' : ''}`
+        }
+      }, 1000)
+}
+
+/**
+ * Recommencer la partie
+ */
+function restartGame() {
+    startGame()
+}
+
 /**
  * Récupère les propriétés des communes depuis un fichier GeoJSON en fonction du code du département.
  * 
@@ -209,11 +287,67 @@ function pickRandomZone(zones) {
 }
 
 /**
+ * Vérifie si le code de la zone cliquée correspond à la commune actuelle à trouver.
+ * 
+ * @param {string} codeZone - code de la zone à vérifier.
+ * @returns {boolean} Résultat de la vérification.
+ */
+function checkAnswer(codeZone) {
+    return currentZone && codeZone === currentZone.code
+}
+
+/**
+ * Charge la carte
+ */
+function loadMap() {
+    /**
+     * Initialise et configure la carte
+     */
+    const map = new maplibregl.Map({
+        container: 'map',
+        style: `../kat/styles/${styleFileName}`,
+        center: centerCoordinates,
+        zoom: zoomLevel
+    })
+
+    if (codeCarte !== '973') {
+        /**
+         * Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane.
+         */
+        map.scrollZoom.disable()
+        map.doubleClickZoom.disable()
+        map.dragPan.disable()
+    } else {
+        /**
+         * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane.
+         */
+        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        map.setMinZoom(7)
+        map.setMaxZoom(9.5)
+    }
+    
+    if (codeCarte === 'KAMA') {
+        /**
+         * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour l'Afrique'.
+         */
+        map.addControl(new maplibregl.NavigationControl({showCompass: false}))
+        map.setMinZoom(2.4)
+        map.setMaxZoom(9)
+        map.dragPan.enable()
+    }
+
+    /**
+     * Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click).
+     */
+    map.on('load', async () => {
+        const zones = await getFile(codeCarte)
+
+        /**
          * Définit la zone actuelle à trouver et met à jour l'affichage.
          * 
          * @param {Object} zone - La zone à définir comme actuelle.
          */
-function setZone(zone) {
+        function setZone(zone) {
             if (currentZone) {
                 map.setFeatureState(
                     {source: 'communes', id: currentZone.code},
@@ -228,23 +362,7 @@ function setZone(zone) {
                 {source: 'communes', id: zone.code},
                 {current: true}
             )
-}
+        }
-
-/**
- * Vérifie si le code de la zone cliquée correspond à la commune actuelle à trouver.
- * 
- * @param {string} codeZone - code de la zone à vérifier.
- * @returns {boolean} Résultat de la vérification.
- */
-function checkAnswer(codeZone) {
-    return currentZone && codeZone === currentZone.code
-}
-
-/**
- * Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click).
- */
-map.on('load', async () => {
-    const zones = await getFile(codeCarte)
 
         /**
          * Ajouter une source de données pour les communes.
@@ -373,7 +491,16 @@ map.on('load', async () => {
                         const totalAnswers = Number.parseInt(ok.innerText, 10) + Number.parseInt(ko.innerText, 10)
                         const percentageCorrectAnswers = (Number.parseInt(ok.innerText, 10) / totalAnswers) * 100
 
-                    alert(`Fin du jeu, ${Math.round(percentageCorrectAnswers)} % de bonnes réponses !`, )
+                        let elapsedTime = `${gameTime} seconde${gameTime > 1 ? 's' : ''}`
+
+                        if (gameTime >= 60) {
+                            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}`)
+                        clearInterval(intervalId)
+                        gameTime = 0
+
                         setTimeout(() => {
                             location.reload()
                         }, 1500)
@@ -402,4 +529,5 @@ map.on('load', async () => {
 
         const zone = pickRandomZone(zones)
         setZone(zone)
-})
+    })
+}