270 lines
10 KiB
JavaScript
270 lines
10 KiB
JavaScript
let map; // Déclaration globale
|
|
function calculateDeltaInSeconds(lastUpdate) {
|
|
// Convertir la date de mise à jour en UTC
|
|
const lastUpdateTime = new Date(lastUpdate).getTime(); // En millisecondes
|
|
const currentTime = Date.now(); // Temps actuel en UTC (automatique)
|
|
|
|
const deltaInMilliseconds = currentTime - lastUpdateTime;
|
|
|
|
// Retourner la différence en secondes
|
|
return Math.floor(deltaInMilliseconds / 1000);
|
|
}
|
|
|
|
// Fonction pour ajouter un pin personnalisé
|
|
function addCustomPin(coordinates, iconUrl, popupText, offsetX = 20, offsetY = 40) {
|
|
const customIcon = L.icon({
|
|
iconUrl: iconUrl,
|
|
iconSize: [40, 40], // Taille de l'icône
|
|
iconAnchor: [offsetX, offsetY], // Décalage en X et Y
|
|
popupAnchor: [0, -40] // Position du popup
|
|
});
|
|
|
|
return L.marker(coordinates, { icon: customIcon }).bindPopup(popupText);
|
|
}
|
|
|
|
// Fonction pour récupérer les données et mettre à jour l'interface
|
|
async function fetchUserData() {
|
|
try {
|
|
// Appel à l'API pour récupérer les données
|
|
const response = await fetch('/data/baptiste.yaml');
|
|
const userData = await response.json();
|
|
|
|
// Calculer le temps d'inactivité
|
|
const lastUpdate = userData.position_actuelle.last_update; // Récupération du champ "last_update"
|
|
const inactivitySeconds = calculateDeltaInSeconds(lastUpdate); // Calcul du delta en secondes
|
|
|
|
// Vérification des données reçues
|
|
console.log("Données utilisateur :", userData);
|
|
|
|
// Mise à jour des éléments HTML
|
|
document.getElementById('user-name').textContent = `Nom : ${userData.nom}`;
|
|
document.getElementById('user-progression').textContent = `Progression : ${userData.progression}`;
|
|
document.getElementById('user-avatar').src = userData.avatar;
|
|
document.getElementById('user-longitude').textContent = userData.position_actuelle.longitude;
|
|
document.getElementById('user-latitude').textContent = userData.position_actuelle.latitude;
|
|
document.getElementById('user-inactive').textContent = `Inactif depuis : ${inactivitySeconds} s`;
|
|
|
|
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des données :", error);
|
|
}
|
|
}
|
|
|
|
// Actualiser les données toutes les 3 secondes
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
fetchUserData(); // Appel initial pour charger les données au démarrage
|
|
setInterval(fetchUserData, 3000); // Appels périodiques toutes les 3 secondes
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Coordonnées par défaut pour centrer la carte
|
|
const centerCoordinates = [45.141998, 4.0750724];
|
|
let userMarker; // Variable pour stocker le pin de baptiste
|
|
|
|
|
|
// Initialiser la carte
|
|
const map = L.map('map').setView(centerCoordinates, 20);
|
|
|
|
// Définir les couches de carte
|
|
const osmStandard = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
});
|
|
|
|
const cycleOSM = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.cyclosm.org/">CycleOSM</a>'
|
|
});
|
|
|
|
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
attribution: '© <a href="https://www.esri.com/">ESRI</a> World Imagery'
|
|
});
|
|
|
|
// Ajouter la carte OpenStreetMap par défaut
|
|
osmStandard.addTo(map);
|
|
|
|
// Contrôle pour basculer entre les couches
|
|
const baseLayers = {
|
|
"OpenStreetMap Standard": osmStandard,
|
|
"CycleOSM": cycleOSM,
|
|
"Satellite": satellite
|
|
};
|
|
L.control.layers(baseLayers).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
// Fonction pour mettre à jour la position de l'avatar
|
|
async function updateAvatarPosition() {
|
|
try {
|
|
const response = await fetch('/data/baptiste.yaml');
|
|
const userData = await response.json();
|
|
|
|
const newCoordinates = [
|
|
userData.position_actuelle.latitude,
|
|
userData.position_actuelle.longitude
|
|
|
|
|
|
];
|
|
|
|
const lastUpdate = userData.position_actuelle.last_update;
|
|
const inactivitySeconds = calculateDeltaInSeconds(lastUpdate);
|
|
|
|
// Si le pin existe déjà, on met à jour sa position
|
|
if (userMarker) {
|
|
userMarker.setLatLng(newCoordinates);
|
|
} else {
|
|
// Ajouter le pin de l'avatar pour la première fois
|
|
userMarker = addCustomPin(newCoordinates, userData.avatar, `Baptiste : ${userData.progression}`);
|
|
userMarker.addTo(map);
|
|
}
|
|
|
|
console.log("Position de l'avatar mise à jour :", newCoordinates);
|
|
} catch (error) {
|
|
console.error("Erreur lors de la mise à jour de la position :", error);
|
|
}
|
|
}
|
|
|
|
// Ajouter les pins pour les défis (chargement initial uniquement)
|
|
async function loadChallengePins() {
|
|
try {
|
|
const response = await fetch('/data/baptiste.yaml');
|
|
const userData = await response.json();
|
|
|
|
const offsetX = userData.pin_offset?.x || 20;
|
|
const offsetY = userData.pin_offset?.y || 40;
|
|
|
|
for (let i = 1; i <= 6; i++) {
|
|
const defiKey = `defi_${i}`;
|
|
const defi = userData.defis[defiKey];
|
|
|
|
const defiCoordinates = [
|
|
defi.geolocalisation.latitude,
|
|
defi.geolocalisation.longitude
|
|
];
|
|
|
|
const pinIcon = defi.pin;
|
|
const popupText = `Défi ${i} - ${defi.contenu_reception}`;
|
|
|
|
const defiMarker = addCustomPin(defiCoordinates, pinIcon, popupText, offsetX, offsetY);
|
|
defiMarker.addTo(map);
|
|
}
|
|
|
|
console.log("Pins des défis chargés avec succès !");
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement des défis :", error);
|
|
}
|
|
}
|
|
|
|
// Charger les pins des défis (une seule fois)
|
|
await loadChallengePins();
|
|
|
|
// Mettre à jour la position de l'avatar toutes les 3 secondes
|
|
updateAvatarPosition(); // Premier appel pour l'initialisation
|
|
setInterval(updateAvatarPosition, 3000);
|
|
});
|
|
|
|
|
|
// JULIEN
|
|
|
|
|
|
// Fonction pour récupérer et afficher les données de Julien
|
|
async function fetchUserDataJulien() {
|
|
try {
|
|
const response = await fetch('/data/julien.yaml');
|
|
const userData = await response.json();
|
|
|
|
const lastUpdate = userData.position_actuelle.last_update;
|
|
const inactivitySeconds = calculateDeltaInSeconds(lastUpdate);
|
|
|
|
// Mise à jour des éléments HTML pour Julien
|
|
document.getElementById('user-name-julien').textContent = `Nom : ${userData.nom}`;
|
|
document.getElementById('user-progression-julien').textContent = `Progression : ${userData.progression}`;
|
|
document.getElementById('user-avatar-julien').src = userData.avatar;
|
|
document.getElementById('user-longitude-julien').textContent = userData.position_actuelle.longitude;
|
|
document.getElementById('user-latitude-julien').textContent = userData.position_actuelle.latitude;
|
|
document.getElementById('user-inactive-julien').textContent = `Inactif depuis : ${inactivitySeconds} s`;
|
|
|
|
console.log("Données de Julien mises à jour !");
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des données de Julien :", error);
|
|
}
|
|
}
|
|
|
|
// Déclaration globale pour le marker de Julien
|
|
let julienMarker; // Variable pour gérer l'avatar de Julien sur la carte
|
|
|
|
// Fonction pour mettre à jour la position de l'avatar de Julien
|
|
async function updateAvatarPositionJulien() {
|
|
try {
|
|
const response = await fetch('/data/julien.yaml');
|
|
const userData = await response.json();
|
|
|
|
const newCoordinates = [
|
|
userData.position_actuelle.latitude,
|
|
userData.position_actuelle.longitude
|
|
];
|
|
|
|
const lastUpdate = userData.position_actuelle.last_update;
|
|
const inactivitySeconds = calculateDeltaInSeconds(lastUpdate);
|
|
|
|
// Si le pin existe déjà, mettez à jour sa position
|
|
if (julienMarker) {
|
|
julienMarker.setLatLng(newCoordinates); // Met à jour la position du pin existant
|
|
} else {
|
|
// Ajoutez le pin de l'avatar pour la première fois
|
|
julienMarker = addCustomPin(newCoordinates, userData.avatar, `Julien : ${userData.progression}`);
|
|
julienMarker.addTo(map); // Ajoutez le pin à la carte
|
|
}
|
|
|
|
console.log("Position de l'avatar de Julien mise à jour :", newCoordinates);
|
|
} catch (error) {
|
|
console.error("Erreur lors de la mise à jour de la position de Julien :", error);
|
|
}
|
|
}
|
|
|
|
|
|
// Fonction pour charger les pins des défis de Julien
|
|
async function loadChallengePinsJulien() {
|
|
try {
|
|
const response = await fetch('/data/julien.yaml');
|
|
const userData = await response.json();
|
|
|
|
const offsetX = userData.pin_offset?.x || 20;
|
|
const offsetY = userData.pin_offset?.y || 40;
|
|
|
|
for (let i = 1; i <= 6; i++) {
|
|
const defiKey = `defi_${i}`;
|
|
const defi = userData.defis[defiKey];
|
|
|
|
const defiCoordinates = [
|
|
defi.geolocalisation.latitude,
|
|
defi.geolocalisation.longitude
|
|
];
|
|
|
|
const pinIcon = defi.pin;
|
|
const popupText = `Défi ${i} - ${defi.contenu_reception}`;
|
|
|
|
const defiMarker = addCustomPin(defiCoordinates, pinIcon, popupText, offsetX, offsetY);
|
|
defiMarker.addTo(map);
|
|
}
|
|
|
|
console.log("Pins des défis de Julien chargés avec succès !");
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement des défis de Julien :", error);
|
|
}
|
|
}
|
|
|
|
// Mettre à jour les données et pins pour Julien
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Charger les pins des défis de Julien (une seule fois)
|
|
await loadChallengePinsJulien();
|
|
|
|
// Mettre à jour la position de Julien toutes les 3 secondes
|
|
updateAvatarPositionJulien(); // Premier appel
|
|
setInterval(updateAvatarPositionJulien, 3000);
|
|
|
|
// Mettre à jour les données de Julien toutes les 3 secondes
|
|
fetchUserDataJulien(); // Premier appel
|
|
setInterval(fetchUserDataJulien, 3000);
|
|
});
|