Typo: Replace 'communes' by 'zones'

README.md

@@ -1,7 +1,7 @@
 # JWE
 
 <p align="center">
-Ce projet cartographique est une application Web simple qui vous permet de tester vos connaissances des communes des territoires proposés à l'aide de cartes interactives.
+Ce projet cartographique est une application Web simple qui vous permet de tester vos connaissances des communes ou des pays proposés à l'aide de cartes interactives.
 </p>
 
 <p align="center">

js/map.js

@@ -2,11 +2,18 @@
  * js/map.js
  */
 
+/**
+ * Typos
+ * 
+ * Après l'ajout de l'Afrique, on remplace "communes" par "zones"
+ * Zones = Communes ou Pays
+ */
+
 /**
  * Récupérer le nom du fichier actuel (ex: 971.php) et en extraire le code du département (ex: 971).
  */
 const currentFileName = window.location.pathname.split('/').pop()
-const codeDepartement = currentFileName.split('.')[0]
+const codeCarte = currentFileName.split('.')[0]
 
 /**
  * Définir le centre , le niveau de zoom et le style de la carte en fonction du code du département.
@@ -15,7 +22,7 @@ let centerCoordinates
 let zoomLevel
 let styleFileName
 
-switch (codeDepartement) {
+switch (codeCarte) {
     case 'KAMA':
         centerCoordinates = [21.21, 1.36] // Afrique
         zoomLevel = 2.7
@@ -57,7 +64,7 @@ const map = new maplibregl.Map({
     zoom: zoomLevel
 })
 
-if (codeDepartement !== '973') {
+if (codeCarte !== '973') {
     /**
      * Désactive le zoom, le double-clic, le déplacement de la carte pour les cartes autres que celle la Guyane.
      */
@@ -73,9 +80,9 @@ if (codeDepartement !== '973') {
     map.setMaxZoom(9.5)
 }
 
-if (codeDepartement === 'KAMA') {
+if (codeCarte === 'KAMA') {
     /**
-     * Ajoute les contrôles de navigation à la carte, et définit les niveaux de zoom minimum et maximum pour la Guyane.
+     * 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)
@@ -111,7 +118,7 @@ let hoveredStateId = null
 /**
  * Référence à la commune actuellement sélectionnée pour trouver.
  */
-let currentCommune = null
+let currentZone = null
 
 /**
  * Ensemble des codes des communes déjà trouvées correctement.
@@ -122,12 +129,12 @@ const correctAnswers = new Set()
  * Récupère les propriétés des communes depuis un fichier GeoJSON en fonction du code du département.
  * 
  * @async
- * @param {string} codeDepartement - Numéro du département.
+ * @param {string} codeCarte - Code de la carte.
  * @returns {Promise<Object[]>} Promesse résolue avec les propriétés des communes.
  */
-async function getFile(codeDepartement) {
+async function getFile(codeCarte) {
     try {
-        const response = await fetch(`../kat/data/${codeDepartement}/contours-${codeDepartement === 'KAMA' ? 'pays' : 'communes'}.geojson`)
+        const response = await fetch(`../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`)
         if (!response.ok) {
             throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`)
         }
@@ -143,26 +150,26 @@ async function getFile(codeDepartement) {
 /**
  * Récupère les coordonnées du centre de la commune depuis le fichier "centres.json" en fonction du code du département.
  * 
- * @param {string} codeDepartement - Numéro du département.
+ * @param {string} codeCarte - Code de la carte.
- * @param {string} communeCode - Code de la commune.
+ * @param {string} codeZone - Code de la zone.
  * @returns {Promise<number[]>} Promesse résolue avec les coordonnées du centre de la commune.
  */
-async function getCommuneCenterCoordinates(codeDepartement, communeCode) {
+async function getZoneCenterCoordinates(codeCarte, codeZone) {
     try {
         // Utiliser fetch pour lire le fichier "centres.json"
-        const response = await fetch(`../kat/data/${codeDepartement}/centres.json`)
+        const response = await fetch(`../kat/data/${codeCarte}/centres.json`)
         if (!response.ok) {
             throw new Error(`Échec du chargement du fichier JSON : ${response.statusText}`)
         }
         
         const centerData = await response.json()
         
-        // Vérifier si le code de la commune existe dans les données
+        // Vérifier si le code de la zone existe dans les données
-        if (communeCode in centerData) {
+        if (codeZone in centerData) {
-            const coordinates = centerData[communeCode]
+            const coordinates = centerData[codeZone]
             return coordinates
         } else {
-            throw new Error(`Aucune donnée de centre trouvée pour la commune : ${communeCode}`)
+            throw new Error(`Aucune donnée de centre trouvée pour la commune : ${codeZone}`)
         }
     } catch (error) {
         console.error('Erreur lors de la récupération des coordonnées du centre de la commune :', error)
@@ -187,64 +194,64 @@ function updateScore(isCorrect) {
 /**
  * Sélectionne une commune au hasard parmi celles qui n'ont pas encore été trouvées.
  * 
- * @param {Array} communes - Liste de toutes les communes.
+ * @param {Array} zones - Liste de toutes les zones.
- * @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les communes ont été trouvées.
+ * @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les zones ont été trouvées.
  */
-function pickRandomCommune(communes) {
+function pickRandomZone(zones) {
-    const communesRestantes = communes.filter(commune => !correctAnswers.has(commune.code))
+    const zonesRestantes = zones.filter(commune => !correctAnswers.has(commune.code))
 
-    if (communesRestantes.length === 0) {
+    if (zonesRestantes.length === 0) {
         return null
     }
 
-    const index = Math.floor(Math.random() * communesRestantes.length)
+    const index = Math.floor(Math.random() * zonesRestantes.length)
-    return communesRestantes[index]
+    return zonesRestantes[index]
 }
 
 /**
- * Définit la commune actuelle à trouver et met à jour l'affichage.
+ * Définit la zone actuelle à trouver et met à jour l'affichage.
  * 
- * @param {Object} commune - La commune à définir comme actuelle.
+ * @param {Object} zone - La zone à définir comme actuelle.
  */
-function setCommune(commune) {
+function setZone(zone) {
-    if (currentCommune) {
+    if (currentZone) {
         map.setFeatureState(
-            {source: 'communes', id: currentCommune.code},
+            {source: 'communes', id: currentZone.code},
             {current: false}
         )
     }
 
-    currentCommune = commune
+    currentZone = zone
-    document.getElementById('commune').innerText = commune.nom
+    document.getElementById('commune').innerText = zone.nom
 
     map.setFeatureState(
-        {source: 'communes', id: commune.code},
+        {source: 'communes', id: zone.code},
         {current: true}
     )
 }
 
 /**
- * Vérifie si le code de la commune cliquée correspond à la commune actuelle à trouver.
+ * Vérifie si le code de la zone cliquée correspond à la commune actuelle à trouver.
  * 
- * @param {string} communeCode - Code de la commune à vérifier.
+ * @param {string} codeZone - code de la zone à vérifier.
  * @returns {boolean} Résultat de la vérification.
  */
-function checkAnswer(communeCode) {
+function checkAnswer(codeZone) {
-    return currentCommune && communeCode === currentCommune.code
+    return currentZone && codeZone === currentZone.code
 }
 
 /**
  * Code pour la gestion des événements de la carte (load, mousemove, mouseleave, click).
  */
 map.on('load', async () => {
-    const communes = await getFile(codeDepartement)
+    const zones = await getFile(codeCarte)
 
     /**
      * Ajouter une source de données pour les communes.
      */
     map.addSource('communes', {
         'type': 'geojson',
-        'data': `../kat/data/${codeDepartement}/contours-${codeDepartement === 'KAMA' ? 'pays' : 'communes'}.geojson`,
+        'data': `../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`,
         'promoteId': 'code'
     })
 
@@ -311,7 +318,7 @@ map.on('load', async () => {
     })
 
     /**
-     * Gère l'evenement mouseleave (quand la souris quitte la commune)
+     * Gère l'evenement mouseleave (quand la souris quitte la zone)
      */
     map.on('mouseleave', 'drom', () => {
         map.getCanvas().style.cursor = ''
@@ -325,21 +332,21 @@ map.on('load', async () => {
     })
 
     /**
-     * Gère l'evenement click (quand on clique sur la commune)
+     * Gère l'evenement click (quand on clique sur la zone)
      */
     map.on('click', 'drom', async e => {
         if (e.features.length > 0) {
-            const clickedCommuneCode = e.features[0].id
+            const clickedCodeZone = e.features[0].id
-            const clickedCommuneNom = e.features[0].properties.nom
+            const clickedZoneNom = e.features[0].properties.nom
-            const isCorrect = checkAnswer(clickedCommuneCode)
+            const isCorrect = checkAnswer(clickedCodeZone)
 
             if (isCorrect) {
                 updateScore(true)
-                const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode)
+                const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone)
 
                 const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ok'})
                     .setLngLat([centerCoordinates[0], centerCoordinates[1]])
-                    .setHTML(`<h3>Bravo, c'est ${clickedCommuneNom}</h3>`)
+                    .setHTML(`<h3>Bravo, c'est ${clickedZoneNom}</h3>`)
                     .setMaxWidth('200px')
                     .addTo(map)
 
@@ -347,21 +354,21 @@ map.on('load', async () => {
                     popup.remove()
                 }, 1500)
 
-                correctAnswers.add(clickedCommuneCode)
+                correctAnswers.add(clickedCodeZone)
-                communes.forEach(commune => {
+                zones.forEach(commune => {
                     map.setFeatureState(
                         {source: 'communes', id: commune.code},
                         {incorrect: false}
                     )
                 })
                 map.setFeatureState(
-                    {source: 'communes', id: clickedCommuneCode},
+                    {source: 'communes', id: clickedCodeZone},
                     {correct: true, current: false}
                 )
 
-                const newCommune = pickRandomCommune(communes)
+                const newZone = pickRandomZone(zones)
-                if (newCommune) {
+                if (newZone) {
-                    setCommune(newCommune)
+                    setZone(newZone)
                 } else {
                     const totalAnswers = Number.parseInt(ok.innerText, 10) + Number.parseInt(ko.innerText, 10)
                     const percentageCorrectAnswers = (Number.parseInt(ok.innerText, 10) / totalAnswers) * 100
@@ -373,11 +380,11 @@ map.on('load', async () => {
                 }
             } else {
                 updateScore(false)
-                const centerCoordinates = await getCommuneCenterCoordinates(codeDepartement, clickedCommuneCode)
+                const centerCoordinates = await getZoneCenterCoordinates(codeCarte, clickedCodeZone)
 
                 const popup = new maplibregl.Popup({offset: popupOffsets, closeButton: false, className: 'popup-ko'})
                     .setLngLat([centerCoordinates[0], centerCoordinates[1]])
-                    .setHTML(`<h3>Faux, c'est ${clickedCommuneNom}</h3>`)
+                    .setHTML(`<h3>Faux, c'est ${clickedZoneNom}</h3>`)
                     .setMaxWidth('200px')
                     .addTo(map)
 
@@ -386,13 +393,13 @@ map.on('load', async () => {
                 }, 1500)
 
                 map.setFeatureState(
-                    {source: 'communes', id: clickedCommuneCode},
+                    {source: 'communes', id: clickedCodeZone},
                     {incorrect: true}
                 )
             }
         }
     })
 
-    const commune = pickRandomCommune(communes)
+    const zone = pickRandomZone(zones)
-    setCommune(commune)
+    setZone(zone)
 })