diff --git a/README.md b/README.md
index 2bb0d47..6f108ae 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,15 @@ Cette application est une interface web pour suivre des défis géolocalisés en
```bash
npm install
+Installation des dépendances
+Pour faire fonctionner le projet, utilisez npm pour installer express :
+
+
+```
+npm init -y
+npm install express
+```
Création d'un nouveau dépôt en ligne de commande
diff --git a/data/baptiste.yaml b/data/baptiste.yaml
index aac2529..0f24898 100755
--- a/data/baptiste.yaml
+++ b/data/baptiste.yaml
@@ -2,9 +2,9 @@ nom: Baptiste
progression: defi 3/6
avatar: static/img/bart.png
position_actuelle:
- longitude: 4.0750673
- latitude: 45.1420026
- last_update: '2024-12-15T18:35:09.072Z'
+ longitude: 4.0737720757147695
+ latitude: 45.13940712256047
+ last_update: '2024-12-17T16:52:19.548Z'
defis:
defi_1:
geolocalisation:
diff --git a/data/julien.yaml b/data/julien.yaml
index 3ee52c9..3b361a2 100755
--- a/data/julien.yaml
+++ b/data/julien.yaml
@@ -1,27 +1,74 @@
nom: Julien
-progression: defi 2/6
-avatar: "static/img/julien.jpg"
+progression: defi /6
+avatar: static/img/julien.png
position_actuelle:
- longitude: 4.075159
- latitude: 45.141956
+ longitude: 4.073772052242561
+ latitude: 45.13940731006235
+ last_update: '2024-12-17T17:10:00.056Z'
defis:
defi_1:
geolocalisation:
- longitude: 4.076159
- latitude: 45.142956
- image_1: "static/img/imageaaabb03.jpg"
- text_found_1: "XYZ"
+ longitude: 4.075368
+ latitude: 45.141916
+ image_1: static/img/imageaaabb01.png
+ text_found_1: AZERT
mode: reponse
resolu: oui
reception: 0
- contenu_reception: "réussi"
+ contenu_reception: ceci est un test
+ pin: static/img/pin1_j.png
defi_2:
geolocalisation:
- longitude: 4.077159
- latitude: 45.143956
- image_2: "static/img/imageaaabb04.jpg"
- text_found_2: "HELLO"
- mode: rien
+ longitude: 4.076953
+ latitude: 45.14198
+ image_1: static/img/imageaaabb02.png
+ text_found_1: QWERT
+ mode: message
+ resolu: oui
+ reception: 1
+ contenu_reception: un autre test
+ pin: static/img/pin2_j.png
+ defi_3:
+ geolocalisation:
+ longitude: 4.073995
+ latitude: 45.139302
+ image_1: static/img/imageaaabb01.png
+ text_found_1: AZERT
+ mode: reponse
resolu: non
reception: 0
- contenu_reception: ""
+ contenu_reception: ceci est un test
+ pin: static/img/pin3_j.png
+ defi_4:
+ geolocalisation:
+ longitude: 4.07935
+ latitude: 45.141932
+ image_1: static/img/imageaaabb02.jpg
+ text_found_1: QWERT
+ mode: message
+ resolu: non
+ reception: 1
+ contenu_reception: un autre test
+ pin: static/img/pin4_j.png
+ defi_5:
+ geolocalisation:
+ longitude: 4.074903
+ latitude: 45.140061
+ image_1: static/img/imageaaabb01.jpg
+ text_found_1: AZERT
+ mode: reponse
+ resolu: non
+ reception: 0
+ contenu_reception: ceci est un test
+ pin: static/img/pin5_j.png
+ defi_6:
+ geolocalisation:
+ longitude: 4.079286
+ latitude: 45.142316
+ image_1: static/img/imageaaabb02.jpg
+ text_found_1: QWERT
+ mode: message
+ resolu: non
+ reception: 1
+ contenu_reception: un autre test
+ pin: static/img/pin6_j.png
diff --git a/index_julien.html b/index_julien.html
new file mode 100644
index 0000000..352830a
--- /dev/null
+++ b/index_julien.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ Jeu Smartphone
+
+
+
+
+
+
--
+
défi n° : --
+
-- m
+
+
--
+
Latitude : --
+
Longitude : --
+
Distance : -- mètres
+
Progression : --
+
+
+
Défi n° : --
+
Latitude cible : --
+
Longitude cible : --
+
+
+
+
+
+ 
+ ![Avatar]()
+
+
+
+
+
diff --git a/package.json b/package.json
index 0b74aec..6718362 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,19 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
- "description": "",
+ "description": "Cette application est une interface web pour suivre des défis géolocalisés en temps réel. Elle utilise Node.js pour le backend et JavaScript/HTML/CSS pour le frontend.",
"dependencies": {
"express": "^4.21.2",
"js-yaml": "^4.1.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://10.0.0.20:3004/gilles/geocaching_js.git"
}
}
diff --git a/server.js b/server.js
index 74fe378..d2f51d5 100644
--- a/server.js
+++ b/server.js
@@ -25,29 +25,46 @@ app.get('/user/:username', (req, res) => {
}
});
-// Route pour mettre à jour la position dans baptiste.yaml
+// Route pour mettre à jour la position d'un utilisateur
app.post('/update-position', (req, res) => {
- const { longitude, latitude, last_update } = req.body; // Problème résolu ici
- const userFilePath = path.join(__dirname, config.userFile);
+ const { username, longitude, latitude, last_update } = req.body; // Extraction des données de la requête
+
+ if (!username || !longitude || !latitude || !last_update) {
+ console.error("Requête invalide : données manquantes");
+ return res.status(400).json({ error: "Les champs username, longitude, latitude et last_update sont requis." });
+ }
+
+ const userFilePath = path.join(__dirname, `data/${username}.yaml`);
+
+ // Vérification que le fichier existe
+ if (!fs.existsSync(userFilePath)) {
+ console.error(`Fichier utilisateur non trouvé : ${userFilePath}`);
+ return res.status(404).json({ error: `Utilisateur ${username} non trouvé.` });
+ }
try {
- console.log("Tentative de mise à jour des coordonnées :", longitude, latitude, last_update);
+ console.log(`Tentative de mise à jour des coordonnées pour ${username} :`, longitude, latitude, last_update);
const userData = yaml.load(fs.readFileSync(userFilePath, 'utf8'));
+
+ // Mise à jour des données utilisateur
userData.position_actuelle.longitude = longitude;
userData.position_actuelle.latitude = latitude;
userData.position_actuelle.last_update = last_update;
+ // Sauvegarde des données dans le fichier YAML
fs.writeFileSync(userFilePath, yaml.dump(userData), 'utf8');
- console.log("Mise à jour réussie de baptiste.yaml");
+ console.log(`Mise à jour réussie de ${userFilePath}`);
res.json({ success: true, message: "Position mise à jour", data: userData });
} catch (error) {
- console.error("Erreur lors de la mise à jour :", error.message);
- res.status(500).json({ error: "Impossible de mettre à jour la position" });
+ console.error(`Erreur lors de la mise à jour pour ${username} :`, error.message);
+ res.status(500).json({ error: "Impossible de mettre à jour la position." });
}
});
+
+
// Servir les fichiers statiques
app.use('/static', express.static(path.join(__dirname, 'static')));
@@ -79,3 +96,31 @@ userData.pin_offset = config.pin_offset;
res.status(500).json({ error: "Impossible de récupérer les données" });
}
});
+
+// Route pour la page de Julien
+app.get('/julien', (req, res) => {
+ res.sendFile(path.join(__dirname, 'index_julien.html'));
+});
+
+/// Route pour récupérer les données de Julien
+app.get('/data/julien.yaml', (req, res) => {
+ const userFilePath = path.join(__dirname, 'data/julien.yaml');
+ const configFilePath = path.join(__dirname, 'config.yaml');
+
+ try {
+ const userData = yaml.load(fs.readFileSync(userFilePath, 'utf8'));
+ const config = yaml.load(fs.readFileSync(configFilePath, 'utf8'));
+// Inclure le décalage des pins dans la réponse
+userData.pin_offset = config.pin_offset;
+
+ res.json(userData);
+ } catch (error) {
+ console.error("Erreur lors de la récupération des données :", error.message);
+ res.status(500).json({ error: "Impossible de récupérer les données" });
+ }
+});
+
+// Servir les fichiers statiques des tuiles
+app.use('/tiles', express.static(path.join(__dirname, 'tiles')));
+
+
diff --git a/static/css/style_julien.css b/static/css/style_julien.css
new file mode 100644
index 0000000..613f786
--- /dev/null
+++ b/static/css/style_julien.css
@@ -0,0 +1,134 @@
+body {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ /* Fond d'écran */
+ background: url('img/fond.jpg') no-repeat center center;
+ background-size: cover; /* Adapte l'image à la taille de l'écran */
+}
+#content0 {
+ position: fixed; /* Fixe le conteneur en haut de la page */
+ top: 0; /* Place l'élément tout en haut */
+ margin: 0; /* Supprime les marges par défaut */
+ right: 0; /* Aligne à gauche */
+ width: 50%; /* Prend toute la largeur */
+ background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
+ padding: 10px 10px; /* Espacement intérieur */
+ border-radius: 15px; /* Arrondit les angles */
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
+ text-align: center; /* Centrage du texte */
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
+ z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
+
+}
+
+#content {
+ position: relative; /* Nécessaire pour positionner des éléments enfants absolument */
+ background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
+ padding: 20px;
+ border-radius: 10px;
+ text-align: center;
+}
+#position {
+ font-size: 1.2em;
+ margin-top: 10px;
+}
+
+#distance {
+ margin-top: 10px;
+ font-size: 1.5em;
+}
+
+/* Style des flèches */
+.arrow {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ display: none; /* Masqué par défaut */
+}
+
+#arrow-approaching {
+ bottom: 10px;
+ left: 10px;
+}
+
+#arrow-moving-away {
+ bottom: 10px;
+ right: 10px;
+}
+
+/* Style de Avatar */
+#avatar {
+ position: absolute;
+ width: 130px;
+ height: 130px;
+ background-color: rgba(27, 28, 29, 0.6); /* Couleur de remplissage interne */
+ border-radius: 50%; /* Pour arrondir l'intérieur */
+ box-shadow: 0 0 20px 10px rgba(27, 28, 29, 0.6); /* Halo par défaut */
+ transition: all 0.5s ease-in-out; /* Transition douce pour les changements */
+}
+/* Conteneur de la flèche */
+#arrow-container {
+ position: relative;
+ width: 100px; /* Taille de la boîte de la flèche */
+ height: 100px;
+ margin: 20px auto; /* Centre horizontalement dans le div #content */
+}
+
+/* Flèche noire */
+#arrow-black {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform-origin: center center; /* Centre de rotation */
+ transform: rotate(0deg); /* Rotation initiale */
+ transition: transform 0.1s linear; /* Animation fluide pour les rotations */
+}
+#user-avatar {
+ position: absolute; /* Permet de positionner avec left et top */
+ width: 100px;
+ height: 100px;
+ border-radius: 50%; /* Cercle */
+ object-fit: cover; /* Ajuste l'image */
+ transition: left 0.2s ease, top 0.2s ease; /* Animation fluide */
+}
+
+[data-debug="true"] {
+ display: none;
+}
+
+#user-name {
+ font-weight: bold; /* Rend le texte en gras */
+ margin: 0; /* Supprime les marges par défaut */
+}
+
+#challenge-number , #distance {
+ margin: 0; /* Supprime les marges par défaut */
+}
+
+#arrow-approaching, #arrow-moving-away {
+ position: fixed; /* Fixe le conteneur en haut de la page */
+ bottom: 0; /* Place l'élément tout en haut */
+ margin: 0; /* Supprime les marges par défaut */
+ left: 0; /* Aligne à gauche */
+ width: 25%; /* Prend toute la largeur */
+ background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
+ padding: 10px 10px; /* Espacement intérieur */
+ border-radius: 15px; /* Arrondit les angles */
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
+ text-align: center; /* Centrage du texte */
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
+ z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
+
+
+}
\ No newline at end of file
diff --git a/static/css/supervise.css b/static/css/supervise.css
index 79349dd..f6b7b55 100644
--- a/static/css/supervise.css
+++ b/static/css/supervise.css
@@ -51,6 +51,16 @@ html, body {
border-radius: 5px;
}
+/* Section pour Baptiste */
+#section-top-right-baptiste {
+ background-color: #82c4f3; /* Couleur bleutée */
+}
+
+/* Section pour Julien */
+#section-top-right-julien {
+ background-color: #a379e6; /* Couleur rosée */
+}
+
/* Responsivité : Pour les tablettes */
@media (max-width: 1024px) {
#container {
@@ -76,7 +86,7 @@ html, body {
border: 2px solid #333;
}
/* Section 2 - Organisation en colonne */
-#section-top-right {
+#section-top-right, #section-top-right-baptiste, #section-top-right-julien {
display: flex; /* Active le flexbox */
flex-direction: column; /* Aligne les éléments en colonne */
align-items: center; /* Centre les éléments horizontalement */
diff --git a/static/img/julien.png b/static/img/julien.png
new file mode 100644
index 0000000..6786f31
Binary files /dev/null and b/static/img/julien.png differ
diff --git a/static/img/pin1_j.png b/static/img/pin1_j.png
new file mode 100644
index 0000000..409ef7d
Binary files /dev/null and b/static/img/pin1_j.png differ
diff --git a/static/img/pin2_j.png b/static/img/pin2_j.png
new file mode 100644
index 0000000..91bf939
Binary files /dev/null and b/static/img/pin2_j.png differ
diff --git a/static/img/pin3_j.png b/static/img/pin3_j.png
new file mode 100644
index 0000000..086064f
Binary files /dev/null and b/static/img/pin3_j.png differ
diff --git a/static/img/pin4_j.png b/static/img/pin4_j.png
new file mode 100644
index 0000000..4356667
Binary files /dev/null and b/static/img/pin4_j.png differ
diff --git a/static/img/pin5_j.png b/static/img/pin5_j.png
new file mode 100644
index 0000000..aa0aff6
Binary files /dev/null and b/static/img/pin5_j.png differ
diff --git a/static/img/pin6_j.png b/static/img/pin6_j.png
new file mode 100644
index 0000000..a03692a
Binary files /dev/null and b/static/img/pin6_j.png differ
diff --git a/static/js/script copy.js b/static/js/script copy.js
new file mode 100644
index 0000000..9ba17ca
--- /dev/null
+++ b/static/js/script copy.js
@@ -0,0 +1,389 @@
+const modeDebug = false; // Passez à true pour activer le mode debug
+
+document.addEventListener('DOMContentLoaded', () => {
+ toggleDebugMode(); // Appliquer le mode debug au chargement de la page
+});
+
+function toggleDebugMode() {
+ const debugElements = document.querySelectorAll('[data-debug="true"]');
+
+ debugElements.forEach(element => {
+ element.style.display = modeDebug ? 'block' : 'none';
+ });
+
+ console.log(`Mode debug ${modeDebug ? 'activé' : 'désactivé'}`);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Votre code ici
+
+});
+
+let wakeLock = null;
+
+async function enableWakeLock() {
+ try {
+ if ('wakeLock' in navigator) {
+ const wakeLock = await navigator.wakeLock.request('screen');
+ console.log('Verrouillage de l’écran activé.');
+ return wakeLock;
+ } else {
+ console.warn('API Wake Lock non prise en charge par ce navigateur.');
+ }
+ } catch (error) {
+ console.error('Erreur lors de l’activation du verrouillage de l’écran :', error);
+ }
+}
+
+// Fonction pour réactiver le Wake Lock si la page redevient visible
+function handleVisibilityChange() {
+ if (wakeLock !== null && document.visibilityState === 'visible') {
+ enableWakeLock();
+ }
+}
+
+// Activer le Wake Lock au chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ enableWakeLock();
+});
+
+function showPopup(challenge) {
+ if (!challenge) {
+ console.error("Aucune donnée de défi actif !");
+ return;
+ }
+
+ const { image, textFound, mode } = challenge;
+
+ // Créer l'élément popup
+ const popup = document.createElement('div');
+ popup.id = 'popup';
+ popup.style.position = 'fixed';
+ popup.style.top = '50%';
+ popup.style.left = '50%';
+ popup.style.transform = 'translate(-50%, -50%)';
+ popup.style.padding = '20px';
+ popup.style.backgroundColor = '#fff';
+ popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
+ popup.style.zIndex = '1000';
+
+ // Ajouter l'image
+ const img = document.createElement('img');
+ img.src = image;
+ img.alt = 'Défi actif';
+ img.style.width = '100%';
+ popup.appendChild(img);
+
+ // Ajouter le texte trouvé
+ const text = document.createElement('p');
+ text.textContent = `Texte à trouver : ${textFound}`;
+ popup.appendChild(text);
+
+ // Ajouter une action en fonction du mode
+ if (mode === 'message') {
+ const message = document.createElement('p');
+ message.textContent = "Mode : Message";
+ popup.appendChild(message);
+ } else if (mode === 'reponse') {
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.placeholder = 'Entrez votre réponse';
+ popup.appendChild(input);
+
+ const submitButton = document.createElement('button');
+ submitButton.textContent = 'Envoyer';
+ popup.appendChild(submitButton);
+ }
+
+ // Ajouter un bouton pour fermer
+ const closeButton = document.createElement('button');
+ closeButton.textContent = 'Fermer';
+ closeButton.onclick = () => document.body.removeChild(popup);
+ popup.appendChild(closeButton);
+
+ // Ajouter le popup au corps de la page
+ document.body.appendChild(popup);
+}
+
+// Fonction pour charger les données utilisateur
+async function fetchUserData() {
+ try {
+ const response = await fetch(`/user/${username}`);
+ const userData = await response.json();
+
+ console.log("Données utilisateur :", userData);
+
+ // Mettre à jour l'interface avec les données
+ document.getElementById('user-name').textContent = userData.nom;
+ document.getElementById('user-avatar').src = userData.avatar;
+ document.getElementById('user-progression').textContent = userData.progression;
+
+ // Trouver le premier défi non résolu
+ let firstUnresolvedChallenge = null;
+ let challengeNumber = null;
+
+ for (let i = 1; i <= 6; i++) {
+ const challengeKey = `defi_${i}`;
+ const challenge = userData.defis[challengeKey];
+
+ if (challenge.resolu === "non") {
+ firstUnresolvedChallenge = challenge;
+ challengeNumber = i;
+ break; // On arrête dès qu'on trouve le premier défi non résolu
+ }
+ }
+
+ if (firstUnresolvedChallenge) {
+ const { latitude, longitude } = firstUnresolvedChallenge.geolocalisation;
+ // Mettre à jour la variable globale target
+ target = { latitude, longitude };
+
+ // Extraire les informations du défi actif
+ const { image_1, text_found_1, mode } = firstUnresolvedChallenge;
+
+ // Stocker les informations du défi actif dans une variable globale
+ window.activeChallenge = {
+ image: image_1,
+ textFound: text_found_1,
+ mode: mode,
+ };
+
+ // Mettre à jour l'interface avec les coordonnées du défi
+ document.getElementById('target-latitude').textContent = latitude.toFixed(6);
+ document.getElementById('target-longitude').textContent = longitude.toFixed(6);
+ document.getElementById('challenge-number').textContent = `défi n°${challengeNumber}`;
+ } else {
+ console.log("Tous les défis sont résolus !");
+ target = null; // Réinitialisation de la cible
+ }
+
+ } catch (error) {
+ console.error("Erreur lors du chargement des données utilisateur :", error);
+ }
+}
+
+// Charger les données utilisateur dès le chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ fetchUserData(); // Charger les données au démarrage
+ setInterval(fetchUserData, 10000); // Actualiser toutes les 10 secondes
+});
+
+
+// Coordonnées de la cible
+//let target = { latitude: 45.141916, longitude: 4.075059 }; // Coordonnées de la cible
+//let currentHeading = 0; // Orientation actuelle de l'appareil
+let lastDistance = null;
+
+// Variables pour les coins de la droite virtuelle
+let topLeft = { x: 2, y: 2 }; // Coin supérieur gauche en pixels
+let bottomRight = { x: window.innerWidth - 100, y: window.innerHeight - 250 }; // Coin inférieur droit en pixels
+
+// Fonction pour recalculer les coins dynamiquement
+function updateCorners() {
+ bottomRight = {
+ x: window.innerWidth - 100,
+ y: window.innerHeight - 250
+ };
+}
+window.addEventListener('resize', updateCorners);
+
+// Fonction utilitaire pour définir le halo
+function setHaloColor(element, color) {
+ element.style.boxShadow = `0 0 20px 10px ${color}`;
+}
+
+// Fonction pour mettre à jour le style de Avatar
+function updateAvatarStyle(distance) {
+ const avatar = document.getElementById('user-avatar');
+
+ if (distance > 20) {
+ setHaloColor(avatar, 'rgba(0, 0, 255, 0.6)'); // Halo bleu
+ } else if (distance <= 10) {
+ setHaloColor(avatar, 'rgba(255, 0, 0, 0.6)'); // Halo rouge
+ } else {
+ setHaloColor(avatar, 'rgba(27, 28, 29, 0.6)'); // Halo gris
+ }
+}
+
+function positionAvatar(distance) {
+ const avatar = document.getElementById('user-avatar');
+ if (!avatar) {
+ console.error("L'élément 'user-avatar' n'existe pas dans le DOM.");
+ return;
+ }
+
+ if (distance > 25) {
+ avatar.style.left = `${topLeft.x}px`;
+ avatar.style.top = `${topLeft.y}px`;
+ } else if (distance <= 5) {
+ avatar.style.left = `${bottomRight.x}px`;
+ avatar.style.top = `${bottomRight.y}px`;
+ } else {
+ const ratio = (25 - distance) / 20;
+ const newX = topLeft.x + (bottomRight.x - topLeft.x) * ratio;
+ const newY = topLeft.y + (bottomRight.y - topLeft.y) * ratio;
+
+ avatar.style.left = `${newX}px`;
+ avatar.style.top = `${newY}px`;
+ }
+}
+
+// Fonction pour gérer les flèches directionnelles
+function updateArrows(distance) {
+ const arrowApproaching = document.getElementById('arrow-approaching');
+ const arrowMovingAway = document.getElementById('arrow-moving-away');
+
+ if (lastDistance !== null) {
+ if (distance < lastDistance) {
+ arrowApproaching.style.display = 'block';
+ arrowMovingAway.style.display = 'none';
+ } else {
+ arrowApproaching.style.display = 'none';
+ arrowMovingAway.style.display = 'block';
+ }
+ }
+}
+
+// Fonction pour calculer la direction vers la cible (bearing)
+function calculateBearing(lat1, lon1, lat2, lon2) {
+ const toRad = (value) => (value * Math.PI) / 180;
+ const toDeg = (value) => (value * 180) / Math.PI;
+
+ const dLon = toRad(lon2 - lon1);
+ const y = Math.sin(dLon) * Math.cos(toRad(lat2));
+ const x = Math.cos(toRad(lat1)) * Math.sin(toRad(lat2)) -
+ Math.sin(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.cos(dLon);
+
+ return (toDeg(Math.atan2(y, x)) + 360) % 360; // Angle en degrés, ajusté pour être positif
+}
+
+// Fonction pour mettre à jour l'orientation de la flèche
+function updateCompass(bearing) {
+ const arrow = document.getElementById('arrow-black');
+ const angle = (bearing - currentHeading + 360) % 360; // Ajuste selon l'orientation actuelle
+ arrow.style.transform = `rotate(${angle}deg)`; // Applique la rotation
+}
+
+// Écoute les changements d'orientation de l'appareil
+window.addEventListener('deviceorientation', (event) => {
+ currentHeading = event.alpha || 0; // Orientation absolue en degrés
+});
+
+// Fonction principale pour mettre à jour les éléments
+function updatePosition(position) {
+ const { latitude, longitude } = position.coords;
+
+ document.getElementById('latitude').textContent = latitude.toFixed(6);
+ document.getElementById('longitude').textContent = longitude.toFixed(6);
+
+ if (!target) {
+ console.warn("Aucune cible définie. Impossible de calculer la distance ou la direction.");
+ return;
+ }
+
+ const distance = calculateDistance(latitude, longitude, target.latitude, target.longitude);
+ document.getElementById('distance').textContent = `${distance.toFixed(0)} m`;
+
+
+ const bearing = calculateBearing(latitude, longitude, target.latitude, target.longitude);
+
+ positionAvatar(distance);
+ updateAvatarStyle(distance);
+ updateArrows(distance);
+ updateCompass(bearing);
+
+ // Afficher le popup si distance < 5m
+ if (distance < 4) {
+ showPopup(window.activeChallenge);
+ }
+
+ lastDistance = distance;
+}
+
+// Fonction pour calculer la distance entre deux points GPS (Haversine Formula)
+function calculateDistance(lat1, lon1, lat2, lon2) {
+ const R = 6371000; // Rayon de la Terre en mètres
+ const toRad = (value) => (value * Math.PI) / 180;
+ const dLat = toRad(lat2 - lat1);
+ const dLon = toRad(lon2 - lon1);
+ const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
+ Math.sin(dLon / 2) * Math.sin(dLon / 2);
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ return R * c;
+}
+
+// Gestion des erreurs de géolocalisation
+function handleError(error) {
+ const errorMessages = {
+ 1: "Permission refusée",
+ 2: "Position indisponible",
+ 3: "Délai dépassé"
+ };
+ alert("Erreur de géolocalisation : " + errorMessages[error.code] || "Erreur inconnue");
+}
+
+// Initialiser la géolocalisation en temps réel
+function startTracking() {
+ if (!navigator.geolocation) {
+ alert("La géolocalisation n'est pas prise en charge par votre navigateur.");
+ return;
+ }
+
+ navigator.geolocation.watchPosition(updatePosition, handleError, {
+ enableHighAccuracy: true,
+ maximumAge: 0,
+ timeout: 5000
+ });
+}
+
+// Démarrer le suivi dès le chargement de la page
+startTracking();
+
+const positionUpdateInterval = 1000 * 5; // 5 secondes (à récupérer dynamiquement depuis config.yaml)
+
+// Fonction pour envoyer les nouvelles coordonnées au serveur
+async function updateServerPosition(latitude, longitude) {
+
+ const now = new Date().toISOString(); // Format ISO 8601 pour last_update
+ const username = 'baptiste'; // Spécifiez le nom de l'utilisateur pour Julien
+ try {
+ const response = await fetch('/update-position', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ username: username, // Inclure le champ username
+ latitude: latitude,
+ longitude: longitude,
+ last_update: now // Inclure le champ last_update
+ })
+ });
+ const result = await response.json();
+ console.log("Position mise à jour :", result.message);
+ } catch (error) {
+ console.error("Erreur lors de la mise à jour de la position :", error);
+ }
+}
+
+// Mise à jour de la position toutes les X secondes
+function startPositionUpdates() {
+ setInterval(() => {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(position => {
+ const { latitude, longitude } = position.coords;
+ updateServerPosition(latitude, longitude);
+ });
+ } else {
+ console.error("La géolocalisation n'est pas prise en charge.");
+ }
+ }, positionUpdateInterval);
+}
+
+// Lancer le suivi dès le chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ startPositionUpdates();
+ startTracking(); // Fonction existante pour afficher les mises à jour côté client
+});
+
+
+
diff --git a/static/js/script.js b/static/js/script.js
index e6b6482..9ba17ca 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -346,11 +346,13 @@ const positionUpdateInterval = 1000 * 5; // 5 secondes (à récupérer dynamique
async function updateServerPosition(latitude, longitude) {
const now = new Date().toISOString(); // Format ISO 8601 pour last_update
+ const username = 'baptiste'; // Spécifiez le nom de l'utilisateur pour Julien
try {
const response = await fetch('/update-position', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
+ username: username, // Inclure le champ username
latitude: latitude,
longitude: longitude,
last_update: now // Inclure le champ last_update
diff --git a/static/js/script_julien.js b/static/js/script_julien.js
new file mode 100644
index 0000000..d94dff3
--- /dev/null
+++ b/static/js/script_julien.js
@@ -0,0 +1,389 @@
+const modeDebug = true; // Passez à true pour activer le mode debug
+
+document.addEventListener('DOMContentLoaded', () => {
+ toggleDebugMode(); // Appliquer le mode debug au chargement de la page
+});
+
+function toggleDebugMode() {
+ const debugElements = document.querySelectorAll('[data-debug="true"]');
+
+ debugElements.forEach(element => {
+ element.style.display = modeDebug ? 'block' : 'none';
+ });
+
+ console.log(`Mode debug ${modeDebug ? 'activé' : 'désactivé'}`);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Votre code ici
+
+});
+
+let wakeLock = null;
+
+async function enableWakeLock() {
+ try {
+ if ('wakeLock' in navigator) {
+ const wakeLock = await navigator.wakeLock.request('screen');
+ console.log('Verrouillage de l’écran activé.');
+ return wakeLock;
+ } else {
+ console.warn('API Wake Lock non prise en charge par ce navigateur.');
+ }
+ } catch (error) {
+ console.error('Erreur lors de l’activation du verrouillage de l’écran :', error);
+ }
+}
+
+// Fonction pour réactiver le Wake Lock si la page redevient visible
+function handleVisibilityChange() {
+ if (wakeLock !== null && document.visibilityState === 'visible') {
+ enableWakeLock();
+ }
+}
+
+// Activer le Wake Lock au chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ enableWakeLock();
+});
+
+function showPopup(challenge) {
+ if (!challenge) {
+ console.error("Aucune donnée de défi actif !");
+ return;
+ }
+
+ const { image, textFound, mode } = challenge;
+
+ // Créer l'élément popup
+ const popup = document.createElement('div');
+ popup.id = 'popup';
+ popup.style.position = 'fixed';
+ popup.style.top = '50%';
+ popup.style.left = '50%';
+ popup.style.transform = 'translate(-50%, -50%)';
+ popup.style.padding = '20px';
+ popup.style.backgroundColor = '#fff';
+ popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
+ popup.style.zIndex = '1000';
+
+ // Ajouter l'image
+ const img = document.createElement('img');
+ img.src = image;
+ img.alt = 'Défi actif';
+ img.style.width = '100%';
+ popup.appendChild(img);
+
+ // Ajouter le texte trouvé
+ const text = document.createElement('p');
+ text.textContent = `Texte à trouver : ${textFound}`;
+ popup.appendChild(text);
+
+ // Ajouter une action en fonction du mode
+ if (mode === 'message') {
+ const message = document.createElement('p');
+ message.textContent = "Mode : Message";
+ popup.appendChild(message);
+ } else if (mode === 'reponse') {
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.placeholder = 'Entrez votre réponse';
+ popup.appendChild(input);
+
+ const submitButton = document.createElement('button');
+ submitButton.textContent = 'Envoyer';
+ popup.appendChild(submitButton);
+ }
+
+ // Ajouter un bouton pour fermer
+ const closeButton = document.createElement('button');
+ closeButton.textContent = 'Fermer';
+ closeButton.onclick = () => document.body.removeChild(popup);
+ popup.appendChild(closeButton);
+
+ // Ajouter le popup au corps de la page
+ document.body.appendChild(popup);
+}
+
+// Fonction pour charger les données utilisateur
+async function fetchUserData() {
+ try {
+ const response = await fetch(`/user/${username}`);
+ const userData = await response.json();
+
+ console.log("Données utilisateur :", userData);
+
+ // Mettre à jour l'interface avec les données
+ document.getElementById('user-name').textContent = userData.nom;
+ document.getElementById('user-avatar').src = userData.avatar;
+ document.getElementById('user-progression').textContent = userData.progression;
+
+ // Trouver le premier défi non résolu
+ let firstUnresolvedChallenge = null;
+ let challengeNumber = null;
+
+ for (let i = 1; i <= 6; i++) {
+ const challengeKey = `defi_${i}`;
+ const challenge = userData.defis[challengeKey];
+
+ if (challenge.resolu === "non") {
+ firstUnresolvedChallenge = challenge;
+ challengeNumber = i;
+ break; // On arrête dès qu'on trouve le premier défi non résolu
+ }
+ }
+
+ if (firstUnresolvedChallenge) {
+ const { latitude, longitude } = firstUnresolvedChallenge.geolocalisation;
+ // Mettre à jour la variable globale target
+ target = { latitude, longitude };
+
+ // Extraire les informations du défi actif
+ const { image_1, text_found_1, mode } = firstUnresolvedChallenge;
+
+ // Stocker les informations du défi actif dans une variable globale
+ window.activeChallenge = {
+ image: image_1,
+ textFound: text_found_1,
+ mode: mode,
+ };
+
+ // Mettre à jour l'interface avec les coordonnées du défi
+ document.getElementById('target-latitude').textContent = latitude.toFixed(6);
+ document.getElementById('target-longitude').textContent = longitude.toFixed(6);
+ document.getElementById('challenge-number').textContent = `défi n°${challengeNumber}`;
+ } else {
+ console.log("Tous les défis sont résolus !");
+ target = null; // Réinitialisation de la cible
+ }
+
+ } catch (error) {
+ console.error("Erreur lors du chargement des données utilisateur :", error);
+ }
+}
+
+// Charger les données utilisateur dès le chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ fetchUserData(); // Charger les données au démarrage
+ setInterval(fetchUserData, 10000); // Actualiser toutes les 10 secondes
+});
+
+
+// Coordonnées de la cible
+//let target = { latitude: 45.141916, longitude: 4.075059 }; // Coordonnées de la cible
+//let currentHeading = 0; // Orientation actuelle de l'appareil
+let lastDistance = null;
+
+// Variables pour les coins de la droite virtuelle
+let topLeft = { x: 2, y: 2 }; // Coin supérieur gauche en pixels
+let bottomRight = { x: window.innerWidth - 100, y: window.innerHeight - 250 }; // Coin inférieur droit en pixels
+
+// Fonction pour recalculer les coins dynamiquement
+function updateCorners() {
+ bottomRight = {
+ x: window.innerWidth - 100,
+ y: window.innerHeight - 250
+ };
+}
+window.addEventListener('resize', updateCorners);
+
+// Fonction utilitaire pour définir le halo
+function setHaloColor(element, color) {
+ element.style.boxShadow = `0 0 20px 10px ${color}`;
+}
+
+// Fonction pour mettre à jour le style de Avatar
+function updateAvatarStyle(distance) {
+ const avatar = document.getElementById('user-avatar');
+
+ if (distance > 20) {
+ setHaloColor(avatar, 'rgba(0, 0, 255, 0.6)'); // Halo bleu
+ } else if (distance <= 10) {
+ setHaloColor(avatar, 'rgba(255, 0, 0, 0.6)'); // Halo rouge
+ } else {
+ setHaloColor(avatar, 'rgba(27, 28, 29, 0.6)'); // Halo gris
+ }
+}
+
+function positionAvatar(distance) {
+ const avatar = document.getElementById('user-avatar');
+ if (!avatar) {
+ console.error("L'élément 'user-avatar' n'existe pas dans le DOM.");
+ return;
+ }
+
+ if (distance > 25) {
+ avatar.style.left = `${topLeft.x}px`;
+ avatar.style.top = `${topLeft.y}px`;
+ } else if (distance <= 5) {
+ avatar.style.left = `${bottomRight.x}px`;
+ avatar.style.top = `${bottomRight.y}px`;
+ } else {
+ const ratio = (25 - distance) / 20;
+ const newX = topLeft.x + (bottomRight.x - topLeft.x) * ratio;
+ const newY = topLeft.y + (bottomRight.y - topLeft.y) * ratio;
+
+ avatar.style.left = `${newX}px`;
+ avatar.style.top = `${newY}px`;
+ }
+}
+
+// Fonction pour gérer les flèches directionnelles
+function updateArrows(distance) {
+ const arrowApproaching = document.getElementById('arrow-approaching');
+ const arrowMovingAway = document.getElementById('arrow-moving-away');
+
+ if (lastDistance !== null) {
+ if (distance < lastDistance) {
+ arrowApproaching.style.display = 'block';
+ arrowMovingAway.style.display = 'none';
+ } else {
+ arrowApproaching.style.display = 'none';
+ arrowMovingAway.style.display = 'block';
+ }
+ }
+}
+
+// Fonction pour calculer la direction vers la cible (bearing)
+function calculateBearing(lat1, lon1, lat2, lon2) {
+ const toRad = (value) => (value * Math.PI) / 180;
+ const toDeg = (value) => (value * 180) / Math.PI;
+
+ const dLon = toRad(lon2 - lon1);
+ const y = Math.sin(dLon) * Math.cos(toRad(lat2));
+ const x = Math.cos(toRad(lat1)) * Math.sin(toRad(lat2)) -
+ Math.sin(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.cos(dLon);
+
+ return (toDeg(Math.atan2(y, x)) + 360) % 360; // Angle en degrés, ajusté pour être positif
+}
+
+// Fonction pour mettre à jour l'orientation de la flèche
+function updateCompass(bearing) {
+ const arrow = document.getElementById('arrow-black');
+ const angle = (bearing - currentHeading + 360) % 360; // Ajuste selon l'orientation actuelle
+ arrow.style.transform = `rotate(${angle}deg)`; // Applique la rotation
+}
+
+// Écoute les changements d'orientation de l'appareil
+window.addEventListener('deviceorientation', (event) => {
+ currentHeading = event.alpha || 0; // Orientation absolue en degrés
+});
+
+// Fonction principale pour mettre à jour les éléments
+function updatePosition(position) {
+ const { latitude, longitude } = position.coords;
+
+ document.getElementById('latitude').textContent = latitude.toFixed(6);
+ document.getElementById('longitude').textContent = longitude.toFixed(6);
+
+ if (!target) {
+ console.warn("Aucune cible définie. Impossible de calculer la distance ou la direction.");
+ return;
+ }
+
+ const distance = calculateDistance(latitude, longitude, target.latitude, target.longitude);
+ document.getElementById('distance').textContent = `${distance.toFixed(0)} m`;
+
+
+ const bearing = calculateBearing(latitude, longitude, target.latitude, target.longitude);
+
+ positionAvatar(distance);
+ updateAvatarStyle(distance);
+ updateArrows(distance);
+ updateCompass(bearing);
+
+ // Afficher le popup si distance < 5m
+ if (distance < 4) {
+ showPopup(window.activeChallenge);
+ }
+
+ lastDistance = distance;
+}
+
+// Fonction pour calculer la distance entre deux points GPS (Haversine Formula)
+function calculateDistance(lat1, lon1, lat2, lon2) {
+ const R = 6371000; // Rayon de la Terre en mètres
+ const toRad = (value) => (value * Math.PI) / 180;
+ const dLat = toRad(lat2 - lat1);
+ const dLon = toRad(lon2 - lon1);
+ const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
+ Math.sin(dLon / 2) * Math.sin(dLon / 2);
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ return R * c;
+}
+
+// Gestion des erreurs de géolocalisation
+function handleError(error) {
+ const errorMessages = {
+ 1: "Permission refusée",
+ 2: "Position indisponible",
+ 3: "Délai dépassé"
+ };
+ alert("Erreur de géolocalisation : " + errorMessages[error.code] || "Erreur inconnue");
+}
+
+// Initialiser la géolocalisation en temps réel
+function startTracking() {
+ if (!navigator.geolocation) {
+ alert("La géolocalisation n'est pas prise en charge par votre navigateur.");
+ return;
+ }
+
+ navigator.geolocation.watchPosition(updatePosition, handleError, {
+ enableHighAccuracy: true,
+ maximumAge: 0,
+ timeout: 5000
+ });
+}
+
+// Démarrer le suivi dès le chargement de la page
+startTracking();
+
+const positionUpdateInterval = 1000 * 5; // 5 secondes (à récupérer dynamiquement depuis config.yaml)
+
+// Fonction pour envoyer les nouvelles coordonnées au serveur
+async function updateServerPosition(latitude, longitude) {
+
+ const now = new Date().toISOString(); // Format ISO 8601 pour last_update
+ const username = 'julien'; // Spécifiez le nom de l'utilisateur pour Julien
+ try {
+ const response = await fetch('/update-position', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ username: username, // Inclure le champ username
+ latitude: latitude,
+ longitude: longitude,
+ last_update: now // Inclure le champ last_update
+ })
+ });
+ const result = await response.json();
+ console.log("Position mise à jour :", result.message);
+ } catch (error) {
+ console.error("Erreur lors de la mise à jour de la position :", error);
+ }
+}
+
+// Mise à jour de la position toutes les X secondes
+function startPositionUpdates() {
+ setInterval(() => {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(position => {
+ const { latitude, longitude } = position.coords;
+ updateServerPosition(latitude, longitude);
+ });
+ } else {
+ console.error("La géolocalisation n'est pas prise en charge.");
+ }
+ }, positionUpdateInterval);
+}
+
+// Lancer le suivi dès le chargement de la page
+document.addEventListener('DOMContentLoaded', () => {
+ startPositionUpdates();
+ startTracking(); // Fonction existante pour afficher les mises à jour côté client
+});
+
+
+
diff --git a/static/js/supervise.js b/static/js/supervise.js
index 334f108..c1da1d0 100644
--- a/static/js/supervise.js
+++ b/static/js/supervise.js
@@ -1,161 +1,202 @@
+let map; // Carte unique
+let baptisteMarker = null; // Marker de Baptiste
+let julienMarker = null; // Marker de Julien
+// -------------------------------------
+// SECTION : Fonctions Utilitaires
+// -------------------------------------
+
+// Calcul du temps d'inactivité en secondes
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);
+ const lastUpdateTime = new Date(lastUpdate).getTime();
+ const currentTime = Date.now();
+ return Math.floor((currentTime - lastUpdateTime) / 1000);
}
-// 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();
+// Ajout d'un pin personnalisé
+function addCustomPin(coordinates, iconUrl, popupText, offsetX = 20, offsetY = 40) {
+ const customIcon = L.icon({
+ iconUrl: iconUrl,
+ iconSize: [40, 40],
+ iconAnchor: [offsetX, offsetY],
+ popupAnchor: [0, -40],
+ });
- // 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);
- }
+ return L.marker(coordinates, { icon: customIcon }).bindPopup(popupText);
}
-// 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 l'avatar
-
+// Initialisation de la carte
+function initializeMap(centerCoordinates = [45.141998, 4.0750724]) {
// Initialiser la carte
- const map = L.map('map').setView(centerCoordinates, 20);
+ map = L.map('map', {
+ center: centerCoordinates, // Coordonnées du centre
+ zoom: 18, // Niveau de zoom par défaut
+ minZoom: 15, // Zoom minimum autorisé
+ maxZoom: 20 // Zoom maximum autorisé
+ });
- // Définir les couches de carte
+ // Définir les différentes couches de la carte
const osmStandard = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© OpenStreetMap contributors'
+ attribution: '© OpenStreetMap contributors',
});
const cycleOSM = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
- attribution: '© CycleOSM'
+ attribution: '© CycleOSM',
});
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
- attribution: '© ESRI World Imagery'
+ attribution: '© ESRI World Imagery',
});
- // Ajouter la carte OpenStreetMap par défaut
- osmStandard.addTo(map);
+ // Nouvelle couche de tuiles personnalisées
+ const customTiles = L.tileLayer('https://jeu.maison43.duckdns.org/tiles/messinhac/{z}/{x}/{y}.png', {
+ attribution: '© Mes Tuiles Personnalisées',
+ maxZoom: 20, // Assure un zoom maximal compatible avec tes tuiles
+ });
- // Contrôle pour basculer entre les couches
+ // Ajouter OpenStreetMap comme layer par défaut
+ customTiles.addTo(map);
+
+ // Ajouter un contrôle pour basculer entre les couches
const baseLayers = {
"OpenStreetMap Standard": osmStandard,
"CycleOSM": cycleOSM,
- "Satellite": satellite
+ "Satellite": satellite,
+ "Tuiles Personnalisées": customTiles, // Ajout de la nouvelle couche ici
};
+
L.control.layers(baseLayers).addTo(map);
+}
- // 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
- });
+// -------------------------------------
+// SECTION : Gestion des Utilisateurs
+// -------------------------------------
- return L.marker(coordinates, { icon: customIcon }).bindPopup(popupText);
- }
+// Fonction générique pour mettre à jour un utilisateur
+async function updateAvatarPosition(username, markerRefName) {
+ try {
+ const response = await fetch(`/data/${username}.yaml`);
+ const userData = await response.json();
+ const newCoordinates = [
+ userData.position_actuelle.latitude,
+ userData.position_actuelle.longitude,
+ ];
+ // Référence globale au marker
+ let marker = markerRefName === 'baptiste' ? baptisteMarker : julienMarker;
- // 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();
+ if (marker) {
+ // Met à jour directement la position du marker
+ marker.setLatLng(newCoordinates);
+ } else {
+ // Créez le marker pour la première fois
+ const newMarker = addCustomPin(
+ newCoordinates,
+ userData.avatar || 'default-avatar.png',
+ `${username} : ${userData.progression}`
+ );
+ newMarker.addTo(map);
- 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);
+ // Met à jour la variable globale
+ if (markerRefName === 'baptiste') {
+ baptisteMarker = newMarker;
+ } else if (markerRefName === 'julien') {
+ julienMarker = newMarker;
}
-
- console.log("Position de l'avatar mise à jour :", newCoordinates);
- } catch (error) {
- console.error("Erreur lors de la mise à jour de la position :", error);
}
+
+ console.log(`Position de ${username} mise à jour :`, newCoordinates);
+ } catch (error) {
+ console.error(`Erreur lors de la mise à jour de la position de ${username} :`, 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();
+// Fonction générique pour charger les pins des défis
+async function loadChallengePins(username) {
+ try {
+ const response = await fetch(`/data/${username}.yaml`);
+ const userData = await response.json();
- const offsetX = userData.pin_offset?.x || 20;
- const offsetY = userData.pin_offset?.y || 40;
+ 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];
+ for (let i = 1; i <= 6; i++) {
+ const defi = userData.defis[`defi_${i}`];
+ if (!defi) continue;
- 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);
+ const defiMarker = addCustomPin(
+ [defi.geolocalisation.latitude, defi.geolocalisation.longitude],
+ defi.pin || 'default-pin.png',
+ `Défi ${i} - ${defi.contenu_reception}`,
+ offsetX,
+ offsetY
+ );
+ defiMarker.addTo(map);
}
+
+ console.log(`Pins des défis pour ${username} chargés avec succès.`);
+ } catch (error) {
+ console.error(`Erreur lors du chargement des défis pour ${username} :`, error);
}
+}
- // Charger les pins des défis (une seule fois)
- await loadChallengePins();
+// Fonction générique pour récupérer et afficher les données utilisateur
+async function fetchUserData(username, domElements) {
+ try {
+ const response = await fetch(`/data/${username}.yaml`);
+ const userData = await response.json();
- // Mettre à jour la position de l'avatar toutes les 3 secondes
- updateAvatarPosition(); // Premier appel pour l'initialisation
- setInterval(updateAvatarPosition, 3000);
-});
\ No newline at end of file
+ const lastUpdate = userData.position_actuelle.last_update;
+ const inactivitySeconds = calculateDeltaInSeconds(lastUpdate);
+
+ // Mise à jour des éléments HTML
+ document.getElementById(domElements.name).textContent = `${userData.nom}`;
+ document.getElementById(domElements.progression).textContent = `Progression : ${userData.progression}`;
+ document.getElementById(domElements.avatar).src = userData.avatar;
+ document.getElementById(domElements.longitude).textContent = userData.position_actuelle.longitude;
+ document.getElementById(domElements.latitude).textContent = userData.position_actuelle.latitude;
+ document.getElementById(domElements.inactive).textContent = `Inactif depuis : ${inactivitySeconds} s`;
+
+ console.log(`Données de ${username} mises à jour.`);
+ } catch (error) {
+ console.error(`Erreur lors de la récupération des données de ${username} :`, error);
+ }
+}
+
+// -------------------------------------
+// SECTION : Événements DOM
+// -------------------------------------
+
+document.addEventListener("DOMContentLoaded", async () => {
+ initializeMap();
+
+ // Charger les pins des défis
+ await loadChallengePins('baptiste');
+ await loadChallengePins('julien');
+ // Planifier les mises à jour des positions des utilisateurs
+ setInterval(() => updateAvatarPosition('baptiste', 'baptiste'), 3000);
+ setInterval(() => updateAvatarPosition('julien', 'julien'), 3000);
+
+ // Mettre à jour les avatars et les données utilisateur
+ setInterval(() => updateAvatarPosition('baptiste', { value: baptisteMarker }), 3000);
+ setInterval(() => updateAvatarPosition('julien', { value: julienMarker }), 3000);
+
+ setInterval(() => fetchUserData('baptiste', {
+ name: 'user-name',
+ progression: 'user-progression',
+ avatar: 'user-avatar',
+ longitude: 'user-longitude',
+ latitude: 'user-latitude',
+ inactive: 'user-inactive',
+ }), 3000);
+
+ setInterval(() => fetchUserData('julien', {
+ name: 'user-name-julien',
+ progression: 'user-progression-julien',
+ avatar: 'user-avatar-julien',
+ longitude: 'user-longitude-julien',
+ latitude: 'user-latitude-julien',
+ inactive: 'user-inactive-julien',
+ }), 3000);
+});
diff --git a/static/js/supervise_julien.js b/static/js/supervise_julien.js
new file mode 100644
index 0000000..c17bdaf
--- /dev/null
+++ b/static/js/supervise_julien.js
@@ -0,0 +1,269 @@
+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: '© OpenStreetMap contributors'
+ });
+
+ const cycleOSM = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', {
+ attribution: '© CycleOSM'
+ });
+
+ const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+ attribution: '© ESRI 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);
+});
diff --git a/supervise.html b/supervise.html
index ca560ff..61e2d6b 100644
--- a/supervise.html
+++ b/supervise.html
@@ -23,17 +23,23 @@
-
+
![Avatar]()
-
Nom : --
+
--
Progression : --
Longitude : --
Latitude : --
Inactif depuis : -- s
-
+
+
+
![Avatar Julien]()
+
--
+
Progression : --
+
Longitude : --
+
Latitude : --
+
Inactif depuis : -- s
+