inclus page final
This commit is contained in:
291
defi3_j.html
Normal file
291
defi3_j.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Défi 3</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
const defi = 3;
|
||||
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`, {
|
||||
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_j';
|
||||
} 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>
|
||||
Reference in New Issue
Block a user