JWE/js/map.js

/**
 * 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 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.
 */
let centerCoordinates
let zoomLevel
let styleFileName

switch (codeCarte) {
    case 'KAMA':
        centerCoordinates = [21.21, 1.36] // Afrique
        zoomLevel = 2.7
        styleFileName = 'ortho-jwe-KAMA.json'
        break
    case '971':
        centerCoordinates = [-61.4167, 16.25] // Guadeloupe
        zoomLevel = 9
        styleFileName = 'ortho.json'
        break
    case '972':
        centerCoordinates = [-61.01635, 14.60285] // Martinique
        zoomLevel = 9.5
        styleFileName = 'ortho.json'
        break
    case '973':
        centerCoordinates = [-53.1258, 3.9339] // Guyane française
        zoomLevel = 7
        styleFileName = 'ortho-jwe.json'
        break
    case '974':
        centerCoordinates = [55.52905, -21.13014] // La Réunion
        styleFileName = 'ortho.json'
        zoomLevel = 9.5
        break
    default:
        centerCoordinates = [-61.4167, 16.25] // Par défaut (Guadeloupe)
        styleFileName = 'ortho.json'
        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.
 */
const popupOffsets = {
    'top': [0, 0],
    'top-left': [0, 0],
    'top-right': [0, 0],
    'bottom': [0, -30],
    'bottom-left': [0, -50],
    'bottom-right': [0, -50],
    'left': [25, -25],
    'right': [-25, -25]
}

/**
 * Référence aux éléments HTML pour afficher le score.
 */
const ok = document.getElementById('OK')
const ko = document.getElementById('KO')

/**
 * État actuel de la commune survolée.
 */
let hoveredStateId = null

/**
 * Référence à la commune actuellement sélectionnée pour trouver.
 */
let currentZone = null

/**
 * Ensemble des codes des communes déjà trouvées correctement.
 */
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} codeCarte - Code de la carte.
 * @returns {Promise<Object[]>} Promesse résolue avec les propriétés des communes.
 */
async function getFile(codeCarte) {
    try {
        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}`)
        }

        data = await response.json()
        return data.features.map(({properties}) => properties)
    } catch (error) {
        console.error('Erreur:', error)
        throw new Error(error)
    }
}

/**
 * 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} 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 getZoneCenterCoordinates(codeCarte, codeZone) {
    try {
        // Utiliser fetch pour lire le fichier "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 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 : ${codeZone}`)
        }
    } catch (error) {
        console.error('Erreur lors de la récupération des coordonnées du centre de la commune :', error)
        throw new Error(error)
    }
}


/**
 * Met à jour le score en fonction de la réponse.
 * 
 * @param {boolean} isCorrect - Indique si la réponse est correcte.
 */
function updateScore(isCorrect) {
    if (isCorrect) {
        ok.innerText = Number.parseInt(ok.innerText, 10) + 1
    } else {
        ko.innerText = Number.parseInt(ko.innerText, 10) + 1
    }
}

/**
 * Sélectionne une commune au hasard parmi celles qui n'ont pas encore é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 pickRandomZone(zones) {
    const zonesRestantes = zones.filter(commune => !correctAnswers.has(commune.code))

    if (zonesRestantes.length === 0) {
        return null
    }

    const index = Math.floor(Math.random() * zonesRestantes.length)
    return zonesRestantes[index]
}

/**
 * Définit la zone actuelle à trouver et met à jour l'affichage.
 * 
 * @param {Object} zone - La zone à définir comme actuelle.
 */
function setZone(zone) {
    if (currentZone) {
        map.setFeatureState(
            {source: 'communes', id: currentZone.code},
            {current: false}
        )
    }

    currentZone = zone
    document.getElementById('commune').innerText = zone.nom

    map.setFeatureState(
        {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.
     */
    map.addSource('communes', {
        'type': 'geojson',
        'data': `../kat/data/${codeCarte}/contours-${codeCarte === 'KAMA' ? 'pays' : 'communes'}.geojson`,
        'promoteId': 'code'
    })

    /**
     * Ajouter une couche de remplissage pour les communes.
     */
    map.addLayer({
        'id': 'drom',
        'type': 'fill',
        'source': 'communes',
        'layout': {},
        'paint': {
            'fill-color': '#1F51FF',
            'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false],
                0.8,
                0
            ]
        }
    })

    /**
     * Ajouter une couche de remplissage pour les communes (2ème couche), en prenant en compte les réponses correctes et incorrectes.
     */
    map.addLayer({
        'id': 'drom-2',
        'type': 'fill',
        'source': 'communes',
        'layout': {},
        'paint': {
            'fill-color': [
                'case',
                ['boolean', ['feature-state', 'correct'], false], '#00FF00',
                ['boolean', ['feature-state', 'incorrect'], false], '#FF0000',
                'rgba(0,0,0,0)'
            ],
            'fill-opacity': [
                'case',
                ['boolean', ['feature-state', 'hover'], false], 0.5,
                0.8
            ]
        }
    })

    /**
     * Gère l'evenement mousemove (quand la souris survole la commune)
     */
    map.on('mousemove', 'drom', e => {
        map.getCanvas().style.cursor = 'pointer'
        if (e.features.length > 0) {
            if (hoveredStateId) {
                map.setFeatureState(
                    {source: 'communes', id: hoveredStateId},
                    {hover: false}
                )
            }
            hoveredStateId = e.features[0].id
            map.setFeatureState(
                {source: 'communes', id: hoveredStateId},
                {hover: true}
            )
        }
    })

    /**
     * Gère l'evenement mouseleave (quand la souris quitte la zone)
     */
    map.on('mouseleave', 'drom', () => {
        map.getCanvas().style.cursor = ''
        if (hoveredStateId) {
            map.setFeatureState(
                {source: 'communes', id: hoveredStateId},
                {hover: false}
            )
        }
        hoveredStateId = null
    })

    /**
     * Gère l'evenement click (quand on clique sur la zone)
     */
    map.on('click', 'drom', async e => {
        if (e.features.length > 0) {
            const clickedCodeZone = e.features[0].id
            const clickedZoneNom = e.features[0].properties.nom
            const isCorrect = checkAnswer(clickedCodeZone)

            if (isCorrect) {
                updateScore(true)
                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 ${clickedZoneNom}</h3>`)
                    .setMaxWidth('200px')
                    .addTo(map)

                setTimeout(() => {
                    popup.remove()
                }, 1500)

                correctAnswers.add(clickedCodeZone)
                zones.forEach(commune => {
                    map.setFeatureState(
                        {source: 'communes', id: commune.code},
                        {incorrect: false}
                    )
                })
                map.setFeatureState(
                    {source: 'communes', id: clickedCodeZone},
                    {correct: true, current: false}
                )

                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

                    alert(`Fin du jeu, ${Math.round(percentageCorrectAnswers)} % de bonnes réponses !`, )
                    setTimeout(() => {
                        location.reload()
                    }, 1500)
                }
            } else {
                updateScore(false)
                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 ${clickedZoneNom}</h3>`)
                    .setMaxWidth('200px')
                    .addTo(map)

                setTimeout(() => {
                    popup.remove()
                }, 1500)

                map.setFeatureState(
                    {source: 'communes', id: clickedCodeZone},
                    {incorrect: true}
                )
            }
        }
    })

    const zone = pickRandomZone(zones)
    setZone(zone)
})