ORGANISATION-KA-INTERNATIONALE/JWE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Typo: Replace 'communes' by 'zones'

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2024-05-04 19:18:12 +04:00
parent 5788c1644c
commit 27d8247a45
2 changed files with 64 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/map.js
+63 -56
View File
@@ -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} communeCode - Code de la commune.
* @param {string} codeCarte - Code de la carte.
* @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
if (communeCode in centerData) {
const coordinates = centerData[communeCode]
// Vérifier si le code de la zone existe dans les données
if (codeZone in centerData) {
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.
* @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les communes ont été trouvées.
* @param {Array} zones - Liste de toutes les zones.
* @returns {Object|null} Retourne la commune sélectionnée ou null si toutes les zones ont été trouvées.
*/
function pickRandomCommune(communes) {
const communesRestantes = communes.filter(commune => !correctAnswers.has(commune.code))
function pickRandomZone(zones) {
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)
return communesRestantes[index]
const index = Math.floor(Math.random() * zonesRestantes.length)
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) {
if (currentCommune) {
function setZone(zone) {
if (currentZone) {
map.setFeatureState(
{source: 'communes', id: currentCommune.code},
{source: 'communes', id: currentZone.code},
{current: false}
)
}
currentCommune = commune
document.getElementById('commune').innerText = commune.nom
currentZone = zone
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) {
return currentCommune && communeCode === currentCommune.code
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 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 clickedCommuneNom = e.features[0].properties.nom
const isCorrect = checkAnswer(clickedCommuneCode)
const clickedCodeZone = e.features[0].id
const clickedZoneNom = e.features[0].properties.nom
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)
communes.forEach(commune => {
correctAnswers.add(clickedCodeZone)
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)
if (newCommune) {
setCommune(newCommune)
const newZone = pickRandomZone(zones)
if (newZone) {
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)
setCommune(commune)
const zone = pickRandomZone(zones)
setZone(zone)
})