71 lines
3.3 KiB
HTML
71 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jeu Smartphone</title>
|
|
<link rel="stylesheet" href="static/css/style_julien.css">
|
|
<script>
|
|
const username = 'julien'; // Nom de l'utilisateur
|
|
const number = 2; // Numéro du défi
|
|
|
|
async function chargerDefi() {
|
|
try {
|
|
const response = await fetch(`/data/${username}.yaml`);
|
|
const data = await response.json();
|
|
|
|
// Vérifier que le défi existe
|
|
const defi = data.defis[`defi_${number}`];
|
|
if (defi) {
|
|
document.getElementById('user-name').textContent = data.nom;
|
|
document.getElementById('user-progression').textContent = `Défi ${defi.number}`;
|
|
document.getElementById('latitude').textContent = defi.geolocalisation.latitude;
|
|
document.getElementById('longitude').textContent = defi.geolocalisation.longitude;
|
|
document.getElementById('challenge-number').textContent = `Défi n° : ${defi.number}`;
|
|
document.getElementById('target-latitude').textContent = defi.geolocalisation.latitude;
|
|
document.getElementById('target-longitude').textContent = defi.geolocalisation.longitude;
|
|
document.getElementById('user-avatar').src = data.avatar;
|
|
document.getElementById('arrow-container').innerHTML = `<img src="${defi.pin}" alt="Pin Défi">`;
|
|
} else {
|
|
console.error('Défi non trouvé.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des données du défi :', error);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', chargerDefi);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="content0">
|
|
<p id="user-name">--</p>
|
|
<p >défi : <span id="user-progression">--</span></p>
|
|
<p id="distance">-- m</p>
|
|
</div>
|
|
<div data-debug="true" id="content">
|
|
<h1> <span id="user-name">--</span></h1>
|
|
<p data-debug="true">Latitude : <span id="latitude">--</span></p>
|
|
<p data-debug="true">Longitude : <span id="longitude">--</span></p>
|
|
<p>Distance : <span id="distance">--</span> mètres</p>
|
|
<p data-debug="true">Progression : <span id="user-progression">--</span></p>
|
|
|
|
<div data-debug="true" id="challenge-info">
|
|
<p id="challenge-number">Défi n° : --</p>
|
|
<p data-debug="true">Latitude cible : <span id="target-latitude">--</span></p>
|
|
<p data-debug="true">Longitude cible : <span id="target-longitude">--</span></p>
|
|
</div>
|
|
<div id="arrow-container">
|
|
<img id="arrow-black" src="static/img/fleche_noir.png" alt="Flèche directionnelle" data-debug="true" >
|
|
</div>
|
|
</div>
|
|
|
|
<img id="arrow-approaching" src="static/img/fleche_rouge.png" alt="Vous vous rapprochez">
|
|
<img id="arrow-moving-away" src="static/img/fleche_bleu.png" alt="Vous vous éloignez">
|
|
<img id="user-avatar" src="" alt="Avatar" style="width: 100px; border-radius: 50%;">
|
|
|
|
|
|
<script src="static/js/script_julien2.js" defer></script>
|
|
</body>
|
|
</html>
|