292 lines
11 KiB
HTML
292 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Défi 5</title>
|
|
<link rel="stylesheet" href="static/css/style_baptiste.css">
|
|
<script src="/html5-qrcode.min.js"></script>
|
|
<script>
|
|
const username = 'baptiste';
|
|
const defi = 5;
|
|
const _5meter = 800;
|
|
const _3meter = 3000;
|
|
let defiData = null; // Stockage des données du défi
|
|
|
|
async function chargerDonnees() {
|
|
try {
|
|
const response = await fetch(`/data/${username}.yaml`);
|
|
const data = await response.json();
|
|
|
|
// Afficher les données dans la console
|
|
console.log('Données utilisateur :', data);
|
|
|
|
defiData = data.defis[`defi_${defi}`];
|
|
if (defiData) {
|
|
console.log('Données du défi :', defiData);
|
|
document.getElementById('avatar-img').src = data.avatar; // Charger l'avatar
|
|
document.getElementById('defi').textContent = defiData.number; // Afficher le numéro du défi
|
|
} else {
|
|
console.error('Défi non trouvé dans les données utilisateur.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des données :', error);
|
|
}
|
|
}
|
|
|
|
function envoyerPosition(latitude, longitude) {
|
|
fetch('/update-position', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username,
|
|
latitude,
|
|
longitude,
|
|
}),
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
console.log(`Position mise à jour : Latitude ${latitude}, Longitude ${longitude}`);
|
|
} else {
|
|
console.error('Erreur lors de la mise à jour de la position sur le serveur.');
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Erreur réseau lors de la mise à jour de la position :', error);
|
|
});
|
|
//ferme la popup du qrcode et la popup image
|
|
}
|
|
|
|
function updateDefisAsResolved() {
|
|
const code = defiData.contenu_reception; // Utiliser contenu_reception comme code attendu
|
|
const previousPopup = document.getElementById('popup');
|
|
if (previousPopup) {
|
|
previousPopup.remove();
|
|
}
|
|
|
|
|
|
// Affiche une popup permettant de scanner un QR Code
|
|
const qrPopup = document.createElement('div');
|
|
qrPopup.id = 'qr-popup';
|
|
qrPopup.style.position = 'fixed';
|
|
qrPopup.style.top = '50%';
|
|
qrPopup.style.left = '50%';
|
|
qrPopup.style.transform = 'translate(-50%, -50%)';
|
|
qrPopup.style.background = 'white';
|
|
qrPopup.style.padding = '20px';
|
|
qrPopup.style.borderRadius = '10px';
|
|
qrPopup.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
|
|
qrPopup.innerHTML = `
|
|
<h2>Scannez le QR Code</h2>
|
|
<div id="qr-reader" style="width: 300px; margin-bottom: 20px;"></div>
|
|
<button id="close-qr">Annuler</button>
|
|
`;
|
|
|
|
document.body.appendChild(qrPopup);
|
|
|
|
const qrReader = new Html5Qrcode("qr-reader");
|
|
|
|
function onScanSuccess(decodedText) {
|
|
console.log(`QR Code détecté : ${decodedText}`);
|
|
|
|
// Vérifie si le QR Code correspond au contenu attendu
|
|
if (decodedText === code) {
|
|
console.log('QR Code valide');
|
|
qrReader.stop();
|
|
qrPopup.remove();
|
|
|
|
// Si le QR Code est correct, on passe à la suite
|
|
fetch(`/resolve-defi_b`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username,
|
|
defi,
|
|
}),
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
console.log('Défi marqué comme résolu');
|
|
window.location.href = 'https://jeu.maison43.duckdns.org/final1_b';
|
|
} else {
|
|
console.error('Erreur lors de la mise à jour du défi.');
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Erreur réseau lors de la mise à jour du défi :', error);
|
|
});
|
|
} else {
|
|
console.error('QR Code invalide');
|
|
// alert('QR Code incorrect. Veuillez réessayer.');
|
|
}
|
|
}
|
|
|
|
function onScanFailure(error) {
|
|
console.warn(`Erreur de scan : ${error}`);
|
|
}
|
|
|
|
qrReader.start(
|
|
{ facingMode: "environment" },
|
|
{ fps: 10, qrbox: 250 },
|
|
onScanSuccess,
|
|
onScanFailure
|
|
);
|
|
|
|
document.getElementById('close-qr').addEventListener('click', () => {
|
|
qrReader.stop();
|
|
qrPopup.remove();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
function calculerDistance(lat1, lon1, lat2, lon2) {
|
|
const R = 6371000; // Rayon de la Terre en mètres
|
|
const rad = Math.PI / 180;
|
|
const dLat = (lat2 - lat1) * rad;
|
|
const dLon = (lon2 - lon1) * rad;
|
|
const a =
|
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(lat1 * rad) * Math.cos(lat2 * rad) *
|
|
Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return R * c;
|
|
}
|
|
|
|
function afficherPosition() {
|
|
const latitudeElement = document.getElementById('latitude');
|
|
const longitudeElement = document.getElementById('longitude');
|
|
const distanceElement = document.getElementById('distance');
|
|
const avatarBubble = document.getElementById('avatar-bubble');
|
|
const popup = document.getElementById('popup');
|
|
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.watchPosition(
|
|
(position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
console.log(`Position actuelle : Latitude ${latitude}, Longitude ${longitude}`);
|
|
latitudeElement.textContent = latitude.toFixed(6);
|
|
longitudeElement.textContent = longitude.toFixed(6);
|
|
|
|
// Mettre à jour la position sur le serveur
|
|
envoyerPosition(latitude, longitude);
|
|
|
|
// Calculer la distance avec la position du défi
|
|
if (defiData && defiData.geolocalisation) {
|
|
const defiLatitude = defiData.geolocalisation.latitude;
|
|
const defiLongitude = defiData.geolocalisation.longitude;
|
|
const distance = calculerDistance(latitude, longitude, defiLatitude, defiLongitude);
|
|
console.log(`Distance au défi : ${distance.toFixed(2)} mètres`);
|
|
distanceElement.textContent = `${distance.toFixed(2)} mètres`;
|
|
|
|
// Mettre à jour la couleur de la bulle en fonction de la distance
|
|
if (distance < _5meter) {
|
|
avatarBubble.style.borderColor = 'red';
|
|
if (distance < _3meter) {
|
|
// Afficher la popup si distance < 3
|
|
popup.style.display = 'block';
|
|
document.getElementById('popup-image').src = defiData.image_1;
|
|
document.getElementById('popup-text').textContent = defiData.text_found_1;
|
|
}
|
|
} else if (distance > 20) {
|
|
avatarBubble.style.borderColor = 'darkblue';
|
|
popup.style.display = 'none';
|
|
} else {
|
|
avatarBubble.style.borderColor = 'orange';
|
|
popup.style.display = 'none';
|
|
}
|
|
}
|
|
},
|
|
(error) => {
|
|
console.error('Erreur lors de la récupération de la position :', error);
|
|
},
|
|
{ enableHighAccuracy: true, maximumAge: 0, timeout: 5000 }
|
|
);
|
|
} else {
|
|
console.error("La géolocalisation n'est pas supportée par ce navigateur.");
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
chargerDonnees();
|
|
afficherPosition();
|
|
});
|
|
</script>
|
|
<style>
|
|
#avatar-bubble {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 5px solid darkblue;
|
|
border-radius: 50%;
|
|
background-color: lightblue;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#avatar-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#popup {
|
|
display: none;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
text-align: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#popup img {
|
|
width: 340px;
|
|
height: auto;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#popup button {
|
|
padding: 10px 20px;
|
|
background-color: green;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#popup button:hover {
|
|
background-color: darkgreen;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<h2>Position actuelle du smartphone</h2>
|
|
<p>Latitude : <span id="latitude">--</span></p>
|
|
<p>Longitude : <span id="longitude">--</span></p>
|
|
<p>Distance au défi : <span id="distance">--</span></p>
|
|
<p>Défi : <span id="defi">--</p>
|
|
</div>
|
|
<div id="avatar-bubble">
|
|
<img id="avatar-img" src="" alt="Avatar utilisateur">
|
|
</div>
|
|
|
|
<div id="popup">
|
|
<img id="popup-image" src="" alt="Image du défi">
|
|
<p id="popup-text">--</p>
|
|
<button onclick="updateDefisAsResolved()">Trouvé</button>
|
|
</div>
|
|
</body>
|
|
</html>
|