inclus page final
This commit is contained in:
@@ -1,74 +1,86 @@
|
||||
nom: Baptiste
|
||||
progression: defi 3/6
|
||||
avatar: static/img/bart.png
|
||||
progression: 1
|
||||
avatar: static/img/bat.webp
|
||||
position_actuelle:
|
||||
longitude: 4.0737720757147695
|
||||
latitude: 45.13940712256047
|
||||
last_update: '2024-12-17T16:52:19.548Z'
|
||||
latitude: 45.1420003
|
||||
longitude: 4.0750539
|
||||
last_update: '2024-12-23T21:37:16.646Z'
|
||||
defis:
|
||||
defi_1:
|
||||
numero: 1
|
||||
geolocalisation:
|
||||
longitude: 4.075068
|
||||
latitude: 45.141916
|
||||
image_1: static/img/imageaaabb01.png
|
||||
text_found_1: AZERT
|
||||
mode: reponse
|
||||
longitude: 4.076651
|
||||
latitude: 45.141981
|
||||
image_1: static/img/photo_b_1.png
|
||||
text_found_1: BLABLA
|
||||
mode: simple
|
||||
resolu: oui
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin1.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi1_b
|
||||
pin: static/img/pin1.webp
|
||||
defi_2:
|
||||
numero: 2
|
||||
geolocalisation:
|
||||
longitude: 4.076653
|
||||
latitude: 45.14198
|
||||
image_1: static/img/imageaaabb02.png
|
||||
longitude: 4.076798
|
||||
latitude: 45.142154
|
||||
image_1: static/img/photo_b_2.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: oui
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin2.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi2_b
|
||||
pin: static/img/pin2.webp
|
||||
defi_3:
|
||||
numero: 3
|
||||
geolocalisation:
|
||||
longitude: 4.073695
|
||||
latitude: 45.139302
|
||||
image_1: static/img/imageaaabb01.png
|
||||
text_found_1: AZERT
|
||||
mode: reponse
|
||||
longitude: 4.076408
|
||||
latitude: 45.141927
|
||||
image_1: static/img/photo_b_3.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: non
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin3.png
|
||||
reception: 1
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi3_b
|
||||
pin: static/img/pin3.webp
|
||||
defi_4:
|
||||
numero: 4
|
||||
geolocalisation:
|
||||
longitude: 4.07735
|
||||
latitude: 45.141932
|
||||
image_1: static/img/imageaaabb02.jpg
|
||||
longitude: 4.077379
|
||||
latitude: 45.142038
|
||||
image_1: static/img/photo_b_4.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: non
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin4.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi4_b
|
||||
pin: static/img/pin4.webp
|
||||
defi_5:
|
||||
numero: 5
|
||||
geolocalisation:
|
||||
longitude: 4.073903
|
||||
latitude: 45.140061
|
||||
image_1: static/img/imageaaabb01.jpg
|
||||
longitude: 4.076526
|
||||
latitude: 45.142241
|
||||
image_1: static/img/photo_b_5.png
|
||||
text_found_1: AZERT
|
||||
mode: reponse
|
||||
resolu: non
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin5.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi5_b
|
||||
pin: static/img/pin5.webp
|
||||
defi_6:
|
||||
numero: 6
|
||||
geolocalisation:
|
||||
longitude: 4.077286
|
||||
latitude: 45.142316
|
||||
image_1: static/img/imageaaabb02.jpg
|
||||
longitude: 4.077064
|
||||
latitude: 45.142132
|
||||
image_1: static/img/photo_b_6.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: non
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin6.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_b
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi6_b
|
||||
pin: static/img/pin6.webp
|
||||
|
||||
64
data/baptiste_final.yaml
Executable file
64
data/baptiste_final.yaml
Executable file
@@ -0,0 +1,64 @@
|
||||
antnom: Baptiste
|
||||
fond: static/css/img/fond_mystere2_b.webp
|
||||
liste_carte_defaut:
|
||||
- numero: 1
|
||||
image: static/css/img/cartes/X_j.webp
|
||||
contenu: X
|
||||
couleur: violet
|
||||
donné: non
|
||||
- numero: 2
|
||||
image: static/css/img/cartes/E_b.webp
|
||||
contenu: E
|
||||
couleur: bleu
|
||||
donné: non
|
||||
- numero: 3
|
||||
image: static/css/img/cartes/R_b.webp
|
||||
contenu: R
|
||||
couleur: bleu
|
||||
donné: non
|
||||
- numero: 4
|
||||
image: static/css/img/cartes/P_j.webp
|
||||
contenu: P
|
||||
couleur: violet
|
||||
donné: non
|
||||
- numero: 5
|
||||
image: static/css/img/cartes/T_b.webp
|
||||
contenu: T
|
||||
couleur: bleu
|
||||
donné: non
|
||||
- numero: 6
|
||||
image: static/css/img/cartes/E_j.webp
|
||||
contenu: E
|
||||
couleur: violet
|
||||
donné: non
|
||||
liste_carte_échangé:
|
||||
- numero: 7
|
||||
image: static/css/img/cartes/R_b.webp
|
||||
contenu: R
|
||||
couleur: bleu
|
||||
recupéré: non
|
||||
- numero: 8
|
||||
image: static/css/img/cartes/L_j.webp
|
||||
contenu: L
|
||||
couleur: violet
|
||||
recupéré: non
|
||||
- numero: 9
|
||||
image: static/css/img/cartes/I_j.webp
|
||||
contenu: I
|
||||
couleur: violet
|
||||
recupéré: non
|
||||
- numero: 10
|
||||
image: static/css/img/cartes/U_b.webp
|
||||
contenu: U
|
||||
couleur: bleu
|
||||
recupéré: non
|
||||
- numero: 11
|
||||
image: static/css/img/cartes/S_j.webp
|
||||
contenu: S
|
||||
couleur: violet
|
||||
recupéré: non
|
||||
- numero: 12
|
||||
image: static/css/img/cartes/O_b.webp
|
||||
contenu: O
|
||||
couleur: bleu
|
||||
recupéré: non
|
||||
39
data/defi_b.yaml
Executable file
39
data/defi_b.yaml
Executable file
@@ -0,0 +1,39 @@
|
||||
defis:
|
||||
fond: static/css/img/fond_mystere_b.webp
|
||||
tout_resolu: non
|
||||
defi_1:
|
||||
number: 1
|
||||
image_found: static/css/img/cartes/X_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi1_b
|
||||
resolu: oui
|
||||
defi_2:
|
||||
number: 2
|
||||
image_found: static/css/img/cartes/E_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi2_b
|
||||
resolu: oui
|
||||
defi_3:
|
||||
number: 3
|
||||
image_found: static/css/img/cartes/R_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi3_b
|
||||
resolu: non
|
||||
defi_4:
|
||||
number: 4
|
||||
image_found: static/css/img/cartes/P_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi4_b
|
||||
resolu: non
|
||||
defi_5:
|
||||
number: 5
|
||||
image_found: static/css/img/cartes/T_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi5_b
|
||||
resolu: non
|
||||
defi_6:
|
||||
number: 6
|
||||
image_found: static/css/img/cartes/E_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi6_b
|
||||
resolu: non
|
||||
39
data/defi_j.yaml
Executable file
39
data/defi_j.yaml
Executable file
@@ -0,0 +1,39 @@
|
||||
defis:
|
||||
fond: static/css/img/fond_mystere_j.webp
|
||||
tout_resolu: non
|
||||
defi_1:
|
||||
number: 1
|
||||
image_found: static/css/img/cartes/R_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi1_j
|
||||
resolu: non
|
||||
defi_2:
|
||||
number: 2
|
||||
image_found: static/css/img/cartes/L_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi2_j
|
||||
resolu: non
|
||||
defi_3:
|
||||
number: 3
|
||||
image_found: static/css/img/cartes/I_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi3_j
|
||||
resolu: non
|
||||
defi_4:
|
||||
number: 4
|
||||
image_found: static/css/img/cartes/U_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi4_j
|
||||
resolu: non
|
||||
defi_5:
|
||||
number: 5
|
||||
image_found: static/css/img/cartes/S_j.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi5_j
|
||||
resolu: non
|
||||
defi_6:
|
||||
number: 6
|
||||
image_found: static/css/img/cartes/O_b.webp
|
||||
image_not_found: static/css/img/cartes/not_found.webp
|
||||
link: https://jeu.maison43.duckdns.org/defi6_j
|
||||
resolu: non
|
||||
@@ -1,74 +1,86 @@
|
||||
nom: Julien
|
||||
progression: defi /6
|
||||
avatar: static/img/julien.png
|
||||
progression: '1'
|
||||
avatar: static/img/julien.webp
|
||||
position_actuelle:
|
||||
longitude: 4.073772052242561
|
||||
latitude: 45.13940731006235
|
||||
last_update: '2024-12-17T17:10:00.056Z'
|
||||
latitude: 45.1420148
|
||||
longitude: 4.0750878
|
||||
last_update: '2024-12-22T21:21:30.037Z'
|
||||
defis:
|
||||
defi_1:
|
||||
number: 1
|
||||
geolocalisation:
|
||||
longitude: 4.075368
|
||||
latitude: 45.141916
|
||||
image_1: static/img/imageaaabb01.png
|
||||
text_found_1: AZERT
|
||||
mode: reponse
|
||||
longitude: 4.076904
|
||||
latitude: 45.142027
|
||||
image_1: static/img/photo_j_1.png
|
||||
text_found_1: Distribuer le cadeau
|
||||
mode: simple
|
||||
resolu: oui
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin1_j.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi1_j
|
||||
pin: static/img/pin1_j.webp
|
||||
defi_2:
|
||||
number: 2
|
||||
geolocalisation:
|
||||
longitude: 4.076953
|
||||
latitude: 45.14198
|
||||
image_1: static/img/imageaaabb02.png
|
||||
text_found_1: QWERT
|
||||
longitude: 4.076564
|
||||
latitude: 45.142144
|
||||
image_1: static/img/photo_j_2.png
|
||||
text_found_1: BBBB
|
||||
mode: message
|
||||
resolu: oui
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin2_j.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi2_j
|
||||
pin: static/img/pin2_j.webp
|
||||
defi_3:
|
||||
number: 3
|
||||
geolocalisation:
|
||||
longitude: 4.073995
|
||||
latitude: 45.139302
|
||||
image_1: static/img/imageaaabb01.png
|
||||
text_found_1: AZERT
|
||||
longitude: 4.077047
|
||||
latitude: 45.142158
|
||||
image_1: static/img/photo_j_3.png
|
||||
text_found_1: CCCC
|
||||
mode: reponse
|
||||
resolu: non
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin3_j.png
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi3_j
|
||||
pin: static/img/pin3_j.webp
|
||||
defi_4:
|
||||
number: 4
|
||||
geolocalisation:
|
||||
longitude: 4.07935
|
||||
latitude: 45.141932
|
||||
image_1: static/img/imageaaabb02.jpg
|
||||
longitude: 4.076775
|
||||
latitude: 45.141850
|
||||
image_1: static/img/photo_j_4.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: non
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin4_j.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi4_j
|
||||
pin: static/img/pin4_j.webp
|
||||
defi_5:
|
||||
number: 5
|
||||
geolocalisation:
|
||||
longitude: 4.074903
|
||||
latitude: 45.140061
|
||||
image_1: static/img/imageaaabb01.jpg
|
||||
longitude: 4.076841
|
||||
latitude: 45.142272
|
||||
image_1: static/img/photo_j_5.png
|
||||
text_found_1: AZERT
|
||||
mode: reponse
|
||||
resolu: non
|
||||
reception: 0
|
||||
contenu_reception: ceci est un test
|
||||
pin: static/img/pin5_j.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi5_j
|
||||
pin: static/img/pin5_j.webp
|
||||
defi_6:
|
||||
number: 6
|
||||
geolocalisation:
|
||||
longitude: 4.079286
|
||||
latitude: 45.142316
|
||||
image_1: static/img/imageaaabb02.jpg
|
||||
longitude: 4.075977
|
||||
latitude: 45.141852
|
||||
image_1: static/img/photo_j_6.png
|
||||
text_found_1: QWERT
|
||||
mode: message
|
||||
resolu: non
|
||||
reception: 1
|
||||
contenu_reception: un autre test
|
||||
pin: static/img/pin6_j.png
|
||||
chemin_web: https://jeu.maison43.duckdns.org/final1_j
|
||||
contenu_reception: https://jeu.maison43.duckdns.org/defi6_j
|
||||
pin: static/img/pin6_j.webp
|
||||
|
||||
64
data/julien_final.yaml
Executable file
64
data/julien_final.yaml
Executable file
@@ -0,0 +1,64 @@
|
||||
nom: Julien
|
||||
fond: static/css/img/fond_mystere2_j.webp
|
||||
liste_carte_defaut:
|
||||
- numero: 1
|
||||
image: static/css/img/cartes/R_b.webp
|
||||
contenu: "R"
|
||||
couleur: "bleu"
|
||||
recupéré: "non"
|
||||
- numero: 2
|
||||
image: static/css/img/cartes/L_j.webp
|
||||
contenu: "L"
|
||||
couleur: "violet"
|
||||
recupéré: "non"
|
||||
- numero: 3
|
||||
image: static/css/img/cartes/I_j.webp
|
||||
contenu: "I"
|
||||
couleur: "violet"
|
||||
recupéré: "non"
|
||||
- numero: 4
|
||||
image: static/css/img/cartes/U_b.webp
|
||||
contenu: "U"
|
||||
couleur: "bleu"
|
||||
recupéré: "non"
|
||||
- numero: 5
|
||||
image: static/css/img/cartes/S_j.webp
|
||||
contenu: "S"
|
||||
couleur: "violet"
|
||||
recupéré: "non"
|
||||
- numero: 6
|
||||
image: static/css/img/cartes/O_b.webp
|
||||
contenu: "O"
|
||||
couleur: "bleu"
|
||||
recupéré: "non"
|
||||
liste_carte_échangé:
|
||||
- numero: 1
|
||||
image: static/css/img/cartes/X_j.webp
|
||||
contenu: "X"
|
||||
couleur: "violet"
|
||||
donné: "non"
|
||||
- numero: 2
|
||||
image: static/css/img/cartes/E_b.webp
|
||||
contenu: "E"
|
||||
couleur: "bleu"
|
||||
donné: "non"
|
||||
- numero: 3
|
||||
image: static/css/img/cartes/R_b.webp
|
||||
contenu: "R"
|
||||
couleur: "bleu"
|
||||
donné: "non"
|
||||
- numero: 4
|
||||
image: static/css/img/cartes/P_j.webp
|
||||
contenu: "P"
|
||||
couleur: "violet"
|
||||
donné: "non"
|
||||
- numero: 5
|
||||
image: static/css/img/cartes/T_b.webp
|
||||
contenu: "T"
|
||||
couleur: "bleu"
|
||||
donné: "non"
|
||||
- numero: 6
|
||||
image: static/css/img/cartes/E_j.webp
|
||||
contenu: "E"
|
||||
couleur: "violet"
|
||||
donné: "non"
|
||||
292
defi1_b.html
Normal file
292
defi1_b.html
Normal file
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Défi 1</title>
|
||||
<link rel="stylesheet" href="static/css/style_baptiste.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'baptiste';
|
||||
const defi = 1;
|
||||
const _5meter = 800;
|
||||
const _3meter = 300;
|
||||
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
|
||||
|
||||
} 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 defi = document.getElementById('defi');
|
||||
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>
|
||||
292
defi1_j.html
Normal file
292
defi1_j.html
Normal file
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Défi 1</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
const defi = 1;
|
||||
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
|
||||
|
||||
} 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 defi = document.getElementById('defi');
|
||||
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>
|
||||
290
defi2_b.html
Normal file
290
defi2_b.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Défi 2</title>
|
||||
<link rel="stylesheet" href="static/css/style_baptiste.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'baptiste'; const defi = 2;
|
||||
const _5meter = 8;
|
||||
const _3meter = 4;
|
||||
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>
|
||||
291
defi2_j.html
Normal file
291
defi2_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 2</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
const defi = 2;
|
||||
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>
|
||||
291
defi3_b.html
Normal file
291
defi3_b.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_baptiste.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'baptiste';
|
||||
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_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>
|
||||
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>
|
||||
291
defi4_b.html
Normal file
291
defi4_b.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 4</title>
|
||||
<link rel="stylesheet" href="static/css/style_baptiste.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'baptiste';
|
||||
const defi = 4;
|
||||
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>
|
||||
291
defi4_j.html
Normal file
291
defi4_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 4</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
const defi = 4;
|
||||
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>
|
||||
291
defi5_b.html
Normal file
291
defi5_b.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 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>
|
||||
291
defi5_j.html
Normal file
291
defi5_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 5</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
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`, {
|
||||
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>
|
||||
291
defi6_b.html
Normal file
291
defi6_b.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 6</title>
|
||||
<link rel="stylesheet" href="static/css/style_baptiste.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'baptiste';
|
||||
const defi = 6;
|
||||
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>
|
||||
291
defi6_j.html
Normal file
291
defi6_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 6</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const username = 'julien';
|
||||
const defi = 6;
|
||||
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>
|
||||
117
final1_b.html
Normal file
117
final1_b.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mystère !</title>
|
||||
<link rel="stylesheet" href="static/css/mystere_b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-container" style="background-image: url('static/css/img/fond_mystere_b.webp');">
|
||||
<!-- Texte en haut -->
|
||||
<div class="header-text" id="header-text">
|
||||
Je ne suis pas débutant, ni apprenti,<br />
|
||||
Dans mon domaine, je suis aguerri.<br />
|
||||
On me consulte pour mes compétences,<br />
|
||||
Et je réponds avec assurance.<br />
|
||||
Qui suis-je ?
|
||||
</div>
|
||||
|
||||
<!-- Conteneur des défis -->
|
||||
<div id="defis-container" class="defis-container"></div>
|
||||
|
||||
<!-- Champ de réponse -->
|
||||
<input type="text" id="reponse" placeholder="Votre réponse">
|
||||
<button id="valide" onclick="myFunction()">Valider</button>
|
||||
|
||||
<!-- Popup -->
|
||||
<div id="popup" class="popup">
|
||||
<img id="img" src="" alt="Popup Image">
|
||||
<p id="popup-message">Vous pouvez aller chercher les cadeaux !!!</p>
|
||||
<button class="close" onclick="document.getElementById('popup').style.display='none';">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/js/final_b.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
async function chargerDefis() {
|
||||
try {
|
||||
const response = await fetch('/defis_b');
|
||||
const data = await response.json();
|
||||
// verifie pour chaque data.defi1.resolu ... data.defi6.resolu = oui alors data.tout_resolu = oui sinon data.tout_resolu = non
|
||||
let tout_resolu = 'oui';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
if (data[`defi_${i}`].resolu === 'non') {
|
||||
tout_resolu = 'non';
|
||||
break;
|
||||
}
|
||||
}
|
||||
data.tout_resolu = tout_resolu;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Vérification si tout est résolu
|
||||
if (data.tout_resolu === 'oui') {
|
||||
document.getElementById('header-text').style.display = 'block';
|
||||
document.getElementById('reponse').style.display = 'block';
|
||||
document.getElementById('valide').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('header-text').style.display = 'none';
|
||||
document.getElementById('reponse').style.display = 'none';
|
||||
document.getElementById('valide').style.display = 'none';
|
||||
}
|
||||
|
||||
// Charger les défis dynamiquement
|
||||
const defisContainer = document.getElementById('defis-container');
|
||||
if (defisContainer) {
|
||||
// Effacer les images existantes
|
||||
defisContainer.innerHTML = '';
|
||||
|
||||
// Ajouter les nouvelles images
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (key.startsWith('defi_')) {
|
||||
const defi = data[key];
|
||||
const imgSrc = defi.resolu === 'oui' ? defi.image_found : defi.image_not_found;
|
||||
|
||||
const imgElement = document.createElement('img');
|
||||
imgElement.src = imgSrc;
|
||||
imgElement.alt = `Défi ${defi.number}`;
|
||||
imgElement.classList.add('defi-image', `defi-${defi.number}`);
|
||||
imgElement.style.cursor = defi.resolu === 'non' ? 'pointer' : 'default';
|
||||
|
||||
// Ajoutez un gestionnaire de clic uniquement si l'image est "not_found"
|
||||
if (defi.resolu === 'non') {
|
||||
imgElement.addEventListener('click', () => {
|
||||
window.location.href = defi.link;
|
||||
});
|
||||
}
|
||||
|
||||
defisContainer.appendChild(imgElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des défis :', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Charger les données au démarrage
|
||||
chargerDefis();
|
||||
|
||||
// Actualiser les données toutes les 10 secondes (par exemple)
|
||||
setInterval(chargerDefis, 2000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
117
final1_j.html
Normal file
117
final1_j.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mystère !</title>
|
||||
<link rel="stylesheet" href="static/css/mystere_j.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-container" style="background-image: url('static/css/img/fond_mystere_j.webp');">
|
||||
<!-- Texte en haut -->
|
||||
<div class="header-text" id="header-text">
|
||||
Je fais osciller à gauche et à droite,<br />
|
||||
Sur la mer agitée, je mène la danse.<br />
|
||||
Je ne suis pas le tangage, mais son cousin,<br />
|
||||
Et sur un bateau, on me ressent sans fin.<br />
|
||||
Qui suis-je ?
|
||||
</div>
|
||||
|
||||
<!-- Conteneur des défis -->
|
||||
<div id="defis-container" class="defis-container"></div>
|
||||
|
||||
<!-- Champ de réponse -->
|
||||
<input type="text" id="reponse" placeholder="Votre réponse">
|
||||
<button id="valide" onclick="myFunction()">Valider</button>
|
||||
|
||||
<!-- Popup -->
|
||||
<div id="popup" class="popup">
|
||||
<img id="img" src="" alt="Popup Image">
|
||||
<p id="popup-message">Vous pouvez aller chercher les cadeaux !!!</p>
|
||||
<button class="close" onclick="document.getElementById('popup').style.display='none';">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/js/final_j.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
async function chargerDefis() {
|
||||
try {
|
||||
const response = await fetch('/defis');
|
||||
const data = await response.json();
|
||||
// verifie pour chaque data.defi1.resolu ... data.defi6.resolu = oui alors data.tout_resolu = oui sinon data.tout_resolu = non
|
||||
let tout_resolu = 'oui';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
if (data[`defi_${i}`].resolu === 'non') {
|
||||
tout_resolu = 'non';
|
||||
break;
|
||||
}
|
||||
}
|
||||
data.tout_resolu = tout_resolu;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Vérification si tout est résolu
|
||||
if (data.tout_resolu === 'oui') {
|
||||
document.getElementById('header-text').style.display = 'block';
|
||||
document.getElementById('reponse').style.display = 'block';
|
||||
document.getElementById('valide').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('header-text').style.display = 'none';
|
||||
document.getElementById('reponse').style.display = 'none';
|
||||
document.getElementById('valide').style.display = 'none';
|
||||
}
|
||||
|
||||
// Charger les défis dynamiquement
|
||||
const defisContainer = document.getElementById('defis-container');
|
||||
if (defisContainer) {
|
||||
// Effacer les images existantes
|
||||
defisContainer.innerHTML = '';
|
||||
|
||||
// Ajouter les nouvelles images
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (key.startsWith('defi_')) {
|
||||
const defi = data[key];
|
||||
const imgSrc = defi.resolu === 'oui' ? defi.image_found : defi.image_not_found;
|
||||
|
||||
const imgElement = document.createElement('img');
|
||||
imgElement.src = imgSrc;
|
||||
imgElement.alt = `Défi ${defi.number}`;
|
||||
imgElement.classList.add('defi-image', `defi-${defi.number}`);
|
||||
imgElement.style.cursor = defi.resolu === 'non' ? 'pointer' : 'default';
|
||||
|
||||
// Ajoutez un gestionnaire de clic uniquement si l'image est "not_found"
|
||||
if (defi.resolu === 'non') {
|
||||
imgElement.addEventListener('click', () => {
|
||||
window.location.href = defi.link;
|
||||
});
|
||||
}
|
||||
|
||||
defisContainer.appendChild(imgElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des défis :', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Charger les données au démarrage
|
||||
chargerDefis();
|
||||
|
||||
// Actualiser les données toutes les 10 secondes (par exemple)
|
||||
setInterval(chargerDefis, 2000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
22
final2_b.html
Normal file
22
final2_b.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Final 2B</title>
|
||||
<link rel="stylesheet" href="static/css/style_final2_b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="zone-blanche"></div>
|
||||
|
||||
<!-- Conteneur principal -->
|
||||
<div id="zone_cartes"></div>
|
||||
|
||||
<!-- Emplacements alignés en bas -->
|
||||
<div id="emplacements"></div>
|
||||
|
||||
<!-- Script pour charger et gérer les cartes -->
|
||||
<script src="static/js/script_final2_b.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
0
final2_j.html
Normal file
0
final2_j.html
Normal file
21
gagne_b.html
Normal file
21
gagne_b.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gagné !</title>
|
||||
<link rel="stylesheet" href="static/css/gagne_b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-container">
|
||||
<!-- Texte en haut -->
|
||||
<div class="header-text">Vous avez gagné !!!</div>
|
||||
<!-- Image centrale -->
|
||||
<img src="static/css/img/gagne.webp" alt="Gagné">
|
||||
<!-- Bouton en bas -->
|
||||
<div class="button-container">
|
||||
<a href="http://jeu.maison43.duckdns.org/final1_b" class="continue-button">Continuer >></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
gagne_j.html
Normal file
21
gagne_j.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gagné !</title>
|
||||
<link rel="stylesheet" href="static/css/gagne_j.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-container">
|
||||
<!-- Texte en haut -->
|
||||
<div class="header-text">Vous avez gagné !!!</div>
|
||||
<!-- Image centrale -->
|
||||
<img src="static/css/img/gagne.webp" alt="Gagné">
|
||||
<!-- Bouton en bas -->
|
||||
<div class="button-container">
|
||||
<a href="https://jeu.maison43.duckdns.org/final1_j" class="continue-button">Continuer >></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
html5-qrcode.min.js
vendored
Normal file
1
html5-qrcode.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -6,13 +6,41 @@
|
||||
<title>Jeu Smartphone</title>
|
||||
<link rel="stylesheet" href="static/css/style_julien.css">
|
||||
<script>
|
||||
const username = 'julien'; // Charge les données de Baptiste
|
||||
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 id="challenge-number">défi n° : --</p>
|
||||
<p >défi : <span id="user-progression">--</span></p>
|
||||
<p id="distance">-- m</p>
|
||||
</div>
|
||||
<div data-debug="true" id="content">
|
||||
@@ -37,6 +65,6 @@
|
||||
<img id="user-avatar" src="" alt="Avatar" style="width: 100px; border-radius: 50%;">
|
||||
|
||||
|
||||
<script src="static/js/script_julien.js" defer></script>
|
||||
<script src="static/js/script_julien2.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
23
perdu.html
Normal file
23
perdu.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Perdu</title>
|
||||
<link rel="stylesheet" href="static/css/perdu.css">
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<div class="fullscreen-container">
|
||||
<!-- Texte en haut -->
|
||||
<div class="header-text">Vous avez perdu !!!</div>
|
||||
<!-- Image centrale -->
|
||||
<img src="static/css/img/perdu.webp" alt="perdu">
|
||||
<!-- Bouton en bas -->
|
||||
<div class="button-container">
|
||||
<a href="http://jeu.maison43.duckdns.org/supervise" class="continue-button">>></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
1
public/html5-qrcode.min.js
vendored
Normal file
1
public/html5-qrcode.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
73
public/qrcode_reader.html
Executable file
73
public/qrcode_reader.html
Executable file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lecteur de QR Code</title>
|
||||
<script src="/html5-qrcode.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
#qr-reader {
|
||||
width: 300px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#result {
|
||||
font-size: 1.2rem;
|
||||
width: 80%;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
/* Styles multiligne */
|
||||
white-space: pre-wrap; /* Permet le retour à la ligne automatique */
|
||||
word-wrap: break-word; /* Casse les mots trop longs pour éviter les débordements */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Lecteur de QR Code</h1>
|
||||
<div id="qr-reader"></div>
|
||||
<p id="result">Scannez un QR Code</p>
|
||||
|
||||
<script>
|
||||
function onScanSuccess(decodedText, decodedResult) {
|
||||
// Afficher le contenu du QR Code
|
||||
console.log(`QR Code détecté : ${decodedText}`);
|
||||
document.getElementById('result').textContent = `QR Code : ${decodedText}`;
|
||||
}
|
||||
|
||||
function onScanFailure(error) {
|
||||
// Gestion des erreurs de scan
|
||||
console.warn(`Erreur de scan : ${error}`);
|
||||
}
|
||||
|
||||
// Initialisation du lecteur de QR Code avec caméra arrière
|
||||
const html5QrcodeScanner = new Html5QrcodeScanner(
|
||||
"qr-reader",
|
||||
{
|
||||
fps: 10,
|
||||
qrbox: 250,
|
||||
experimentalFeatures: {
|
||||
useBarCodeDetectorIfSupported: true
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
// Configuration pour la caméra arrière
|
||||
html5QrcodeScanner.render(onScanSuccess, onScanFailure, {
|
||||
facingMode: { exact: "user" }
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
331
server.js
331
server.js
@@ -27,39 +27,24 @@ app.get('/user/:username', (req, res) => {
|
||||
|
||||
// Route pour mettre à jour la position d'un utilisateur
|
||||
app.post('/update-position', (req, res) => {
|
||||
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é.` });
|
||||
}
|
||||
const { username, latitude, longitude } = req.body;
|
||||
const filePath = `./data/${username}.yaml`;
|
||||
|
||||
try {
|
||||
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 ${userFilePath}`);
|
||||
res.json({ success: true, message: "Position mise à jour", data: userData });
|
||||
if (fs.existsSync(filePath)) {
|
||||
const data = yaml.load(fs.readFileSync(filePath, 'utf8'));
|
||||
data.position_actuelle = {
|
||||
latitude,
|
||||
longitude,
|
||||
last_update: new Date().toISOString(),
|
||||
};
|
||||
fs.writeFileSync(filePath, yaml.dump(data));
|
||||
res.status(200).json({ message: 'Position mise à jour avec succès.' });
|
||||
} else {
|
||||
res.status(404).json({ error: 'Fichier utilisateur introuvable.' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Erreur lors de la mise à jour pour ${username} :`, error.message);
|
||||
res.status(500).json({ error: "Impossible de mettre à jour la position." });
|
||||
res.status(500).json({ error: 'Erreur lors de la mise à jour de la position.' });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -124,3 +109,289 @@ userData.pin_offset = config.pin_offset;
|
||||
app.use('/tiles', express.static(path.join(__dirname, 'tiles')));
|
||||
|
||||
|
||||
// Route pour marquer un défi comme résolu
|
||||
app.post('/mark-challenge-resolved', (req, res) => {
|
||||
const { username, challengeKey, } = req.body; // Extraction des données de la requête
|
||||
|
||||
if (!username || !challengeKey) {
|
||||
console.error("Requête invalide : données manquantes");
|
||||
return res.status(400).json({ error: "Les champs username et challengeKey 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 marquer comme résolu pour ${username}, défi : ${challengeKey}`);
|
||||
|
||||
const userData = yaml.load(fs.readFileSync(userFilePath, 'utf8'));
|
||||
|
||||
// Vérification de l'existence du défi
|
||||
if (!userData.defis || !userData.defis[challengeKey]) {
|
||||
console.error(`Défi ${challengeKey} non trouvé pour ${username}`);
|
||||
return res.status(400).json({ error: `Défi ${challengeKey} non trouvé.` });
|
||||
}
|
||||
|
||||
// Mise à jour du statut "resolu" pour le défi
|
||||
userData.defis[challengeKey].resolu = "oui";
|
||||
|
||||
// Sauvegarde des données dans le fichier YAML
|
||||
fs.writeFileSync(userFilePath, yaml.dump(userData), 'utf8');
|
||||
|
||||
console.log(`Défi ${challengeKey} mis à jour avec succès pour ${username}`);
|
||||
res.json({ success: true, message: `Défi ${challengeKey} marqué comme résolu.` });
|
||||
} catch (error) {
|
||||
console.error(`Erreur lors de la mise à jour du défi pour ${username} :`, error.message);
|
||||
res.status(500).json({ error: "Impossible de mettre à jour le défi." });
|
||||
}
|
||||
});
|
||||
|
||||
// Route pour la page "perdu"
|
||||
app.get('/perdu', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'perdu.html'));
|
||||
});
|
||||
|
||||
// Route pour la page "gagne_b"
|
||||
app.get('/gagne_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'gagne_b.html'));
|
||||
});
|
||||
|
||||
// Route pour la page "gagne_j"
|
||||
app.get('/gagne_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'gagne_j.html'));
|
||||
});
|
||||
|
||||
// Route pour la page "defi1_b"
|
||||
app.get('/defi1_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi1_b.html'));
|
||||
}
|
||||
);
|
||||
|
||||
// Route pour la page "defi2_b"
|
||||
app.get('/defi2_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi2_b.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi3_b"
|
||||
app.get('/defi3_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi3_b.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi4_b"
|
||||
app.get('/defi4_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi4_b.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi5_b"
|
||||
app.get('/defi5_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi5_b.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi6_b"
|
||||
app.get('/defi6_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi6_b.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi1_j"
|
||||
app.get('/defi1_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi1_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi2_j"
|
||||
app.get('/defi2_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi2_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi3_j"
|
||||
app.get('/defi3_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi3_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi4_j"
|
||||
app.get('/defi4_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi4_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi5_j"
|
||||
app.get('/defi5_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi5_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "defi6_j"
|
||||
app.get('/defi6_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'defi6_j.html'));
|
||||
}
|
||||
);
|
||||
|
||||
// Route pour la page "final1_j"
|
||||
app.get('/final1_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'final1_j.html'));
|
||||
}
|
||||
);
|
||||
// Route pour la page "final1_b"
|
||||
app.get('/final1_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'final1_b.html'));
|
||||
}
|
||||
);
|
||||
|
||||
// Route pour récupérer les données du fichier YAML
|
||||
app.get('/defis', (req, res) => {
|
||||
try {
|
||||
const data = yaml.load(fs.readFileSync('./data/defi_j.yaml', 'utf8'));
|
||||
console.log('Données chargées depuis YAML :', data);
|
||||
res.json(data.defis);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: 'Erreur lors de la lecture du fichier YAML.' });
|
||||
}
|
||||
});
|
||||
|
||||
// Route pour récupérer les données du fichier YAML
|
||||
app.get('/defis_b', (req, res) => {
|
||||
try {
|
||||
const data = yaml.load(fs.readFileSync('./data/defi_b.yaml', 'utf8'));
|
||||
console.log('Données chargées depuis YAML :', data);
|
||||
res.json(data.defis);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: 'Erreur lors de la lecture du fichier YAML.' });
|
||||
}
|
||||
});
|
||||
|
||||
app.use(express.static('static'));
|
||||
|
||||
// Charger les données d'un utilisateur
|
||||
app.get('/data/:username.yaml', (req, res) => {
|
||||
const username = req.params.username;
|
||||
const filePath = `./data/${username}.yaml`; // Chemin vers le fichier YAML
|
||||
|
||||
try {
|
||||
if (fs.existsSync(filePath)) {
|
||||
const userData = yaml.load(fs.readFileSync(filePath, 'utf8'));
|
||||
res.json(userData);
|
||||
} else {
|
||||
res.status(404).json({ error: 'Fichier utilisateur non trouvé' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: 'Erreur lors de la lecture du fichier utilisateur' });
|
||||
}
|
||||
});
|
||||
|
||||
function updateDefisAsResolved() {
|
||||
fetch(`/resolve-defi`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
defi,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
console.log(`Défi ${defi} pour l'utilisateur ${username} marqué comme résolu.`);
|
||||
console.log('Mise à jour effectuée sur le serveur.');
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
app.post('/resolve-defi', (req, res) => {
|
||||
const { username, defi } = req.body;
|
||||
const userFile = `./data/${username}.yaml`;
|
||||
const globalFile = './data/defi_j.yaml';
|
||||
|
||||
try {
|
||||
// Charger et modifier julien.yaml
|
||||
const userData = yaml.load(fs.readFileSync(userFile, 'utf8'));
|
||||
userData.defis[`defi_${defi}`].resolu = 'oui';
|
||||
fs.writeFileSync(userFile, yaml.dump(userData));
|
||||
console.log(`Fichier ${userFile} mis à jour pour le défi ${defi}.`);
|
||||
|
||||
// Charger et modifier defi_j.yaml
|
||||
const globalData = yaml.load(fs.readFileSync(globalFile, 'utf8'));
|
||||
globalData.defis[`defi_${defi}`].resolu = 'oui';
|
||||
fs.writeFileSync(globalFile, yaml.dump(globalData));
|
||||
console.log(`Fichier ${globalFile} mis à jour pour le défi ${defi}.`);
|
||||
|
||||
res.status(200).send({ message: 'Défi résolu.' });
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la mise à jour des fichiers :', error);
|
||||
res.status(500).send({ error: 'Erreur lors de la mise à jour.' });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/resolve-defi_b', (req, res) => {
|
||||
const { username, defi } = req.body;
|
||||
const userFile = `./data/${username}.yaml`;
|
||||
const globalFile = './data/defi_b.yaml';
|
||||
|
||||
try {
|
||||
// Charger et modifier baptiste.yaml
|
||||
const userData = yaml.load(fs.readFileSync(userFile, 'utf8'));
|
||||
userData.defis[`defi_${defi}`].resolu = 'oui';
|
||||
fs.writeFileSync(userFile, yaml.dump(userData));
|
||||
console.log(`Fichier ${userFile} mis à jour pour le défi ${defi}.`);
|
||||
|
||||
// Charger et modifier defi_j.yaml
|
||||
const globalData = yaml.load(fs.readFileSync(globalFile, 'utf8'));
|
||||
globalData.defis[`defi_${defi}`].resolu = 'oui';
|
||||
fs.writeFileSync(globalFile, yaml.dump(globalData));
|
||||
console.log(`Fichier ${globalFile} mis à jour pour le défi ${defi}.`);
|
||||
|
||||
res.status(200).send({ message: 'Défi résolu.' });
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la mise à jour des fichiers :', error);
|
||||
res.status(500).send({ error: 'Erreur lors de la mise à jour.' });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Servir les fichiers statiques
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// Route pour la page de lecture de QR Code
|
||||
app.get('/qrcode-reader', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'qrcode_reader.html'));
|
||||
});
|
||||
|
||||
// Route pour la page final2_b.html
|
||||
app.get('/final2_b', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'final2_b.html'));
|
||||
});
|
||||
|
||||
// Route pour la page final2_j.html
|
||||
app.get('/final2_j', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'final2_j.html'));
|
||||
});
|
||||
|
||||
// Route pour mettre à jour le fichier YAML
|
||||
app.post('/update_yaml', (req, res) => {
|
||||
const data = req.body;
|
||||
console.log('--- Requête reçue pour mise à jour du YAML ---');
|
||||
console.log('Données reçues :', JSON.stringify(data, null, 2));
|
||||
|
||||
try {
|
||||
// Convertir les données JSON en YAML
|
||||
const yamlData = yaml.dump(data);
|
||||
console.log('Données converties en YAML :');
|
||||
console.log(yamlData);
|
||||
|
||||
// Écrire dans le fichier YAML
|
||||
fs.writeFileSync('data/baptiste_final.yaml', yamlData, 'utf8');
|
||||
console.log('Fichier YAML mis à jour avec succès.');
|
||||
res.status(200).send({ message: 'Fichier YAML mis à jour avec succès' });
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la mise à jour du fichier YAML:', error);
|
||||
res.status(500).send({ message: 'Erreur lors de la mise à jour du fichier YAML' });
|
||||
}
|
||||
});
|
||||
|
||||
64
static/css/carte_b.css
Normal file
64
static/css/carte_b.css
Normal file
@@ -0,0 +1,64 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none; /* Empêche les glissements */
|
||||
touch-action: none; /* Désactive les gestes tactiles */
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Bloque le défilement */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: #79d2d8;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 2px 2px 5px #000;
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: #79d2d8;
|
||||
}
|
||||
64
static/css/carte_j.css
Normal file
64
static/css/carte_j.css
Normal file
@@ -0,0 +1,64 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none; /* Empêche les glissements */
|
||||
touch-action: none; /* Désactive les gestes tactiles */
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Bloque le défilement */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: #b19cd5;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 2px 2px 5px #000;
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: #b19cd5;
|
||||
}
|
||||
25
static/css/gagne.css
Normal file
25
static/css/gagne.css
Normal file
@@ -0,0 +1,25 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
64
static/css/gagne_b.css
Normal file
64
static/css/gagne_b.css
Normal file
@@ -0,0 +1,64 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none; /* Empêche les glissements */
|
||||
touch-action: none; /* Désactive les gestes tactiles */
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Bloque le défilement */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: #79d2d8;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 2px 2px 5px #000;
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: #79d2d8;
|
||||
}
|
||||
64
static/css/gagne_j.css
Normal file
64
static/css/gagne_j.css
Normal file
@@ -0,0 +1,64 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none; /* Empêche les glissements */
|
||||
touch-action: none; /* Désactive les gestes tactiles */
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Bloque le défilement */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: #b19cd5;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 2px 2px 5px #000;
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: #b19cd5;
|
||||
}
|
||||
BIN
static/css/img/cartes/E_b.png
Normal file
BIN
static/css/img/cartes/E_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/E_b.webp
Executable file
BIN
static/css/img/cartes/E_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/css/img/cartes/E_j.png
Normal file
BIN
static/css/img/cartes/E_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/E_j.webp
Executable file
BIN
static/css/img/cartes/E_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/css/img/cartes/I_j.png
Normal file
BIN
static/css/img/cartes/I_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/I_j.webp
Executable file
BIN
static/css/img/cartes/I_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
static/css/img/cartes/L_j.png
Normal file
BIN
static/css/img/cartes/L_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/L_j.webp
Executable file
BIN
static/css/img/cartes/L_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
static/css/img/cartes/O_b.png
Normal file
BIN
static/css/img/cartes/O_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/O_b.webp
Executable file
BIN
static/css/img/cartes/O_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/css/img/cartes/P_j.png
Normal file
BIN
static/css/img/cartes/P_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/P_j.webp
Executable file
BIN
static/css/img/cartes/P_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
static/css/img/cartes/R_b.png
Normal file
BIN
static/css/img/cartes/R_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/R_b.webp
Executable file
BIN
static/css/img/cartes/R_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/css/img/cartes/R_b2.png
Normal file
BIN
static/css/img/cartes/R_b2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/R_b2.webp
Executable file
BIN
static/css/img/cartes/R_b2.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
static/css/img/cartes/S_j.png
Normal file
BIN
static/css/img/cartes/S_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/S_j.webp
Executable file
BIN
static/css/img/cartes/S_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
static/css/img/cartes/T_b.png
Normal file
BIN
static/css/img/cartes/T_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/T_b.webp
Executable file
BIN
static/css/img/cartes/T_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
static/css/img/cartes/U_b.png
Normal file
BIN
static/css/img/cartes/U_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/U_b.webp
Executable file
BIN
static/css/img/cartes/U_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
static/css/img/cartes/X_j.png
Normal file
BIN
static/css/img/cartes/X_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/X_j.webp
Executable file
BIN
static/css/img/cartes/X_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
static/css/img/cartes/not_found.png
Normal file
BIN
static/css/img/cartes/not_found.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/css/img/cartes/not_found.webp
Executable file
BIN
static/css/img/cartes/not_found.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
static/css/img/fond_mystere2_b.webp
Executable file
BIN
static/css/img/fond_mystere2_b.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
BIN
static/css/img/fond_mystere2_j.webp
Executable file
BIN
static/css/img/fond_mystere2_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
static/css/img/fond_mystere_b.webp
Normal file
BIN
static/css/img/fond_mystere_b.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
BIN
static/css/img/fond_mystere_j.webp
Normal file
BIN
static/css/img/fond_mystere_j.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
BIN
static/css/img/fond_mystere_violet_1.webp
Normal file
BIN
static/css/img/fond_mystere_violet_1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
BIN
static/css/img/gagne.webp
Executable file
BIN
static/css/img/gagne.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
BIN
static/css/img/perdu.webp
Executable file
BIN
static/css/img/perdu.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
147
static/css/mystere_b.css
Normal file
147
static/css/mystere_b.css
Normal file
@@ -0,0 +1,147 @@
|
||||
/* Style global */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.fullscreen-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: url('../img/fond_mystere_b.webp'); /* Corrigez le chemin ici */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Texte en haut */
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
width: 350px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Conteneur des défis */
|
||||
.defis-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
height: 80%; /* Ajustez la hauteur du conteneur */
|
||||
}
|
||||
|
||||
/* Style des images des défis */
|
||||
.defi-image {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
border: 2px solid white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
/* Exemple de positionnement des défis */
|
||||
.defi-1 { top: 00px; left: 50px; }
|
||||
.defi-2 { top: 00px; left: 180px; }
|
||||
.defi-3 { top: 00px; left: 300px; }
|
||||
.defi-4 { top: 120px; left: 50px; }
|
||||
.defi-5 { top: 120px; left: 180px; }
|
||||
.defi-6 { top: 120px; left: 300px; }
|
||||
|
||||
/* Champ de réponse */
|
||||
#reponse {
|
||||
position: absolute;
|
||||
|
||||
bottom: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Bouton de validation */
|
||||
#valide {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 10px 20px;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
background-color: #007BFF;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Style de la popup */
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.popup img {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.popup .close {
|
||||
margin-top: 10px;
|
||||
padding: 10px 20px;
|
||||
background-color: #FF5722;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Adaptations pour écrans mobiles */
|
||||
@media (max-width: 768px) {
|
||||
.defi-image {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#reponse {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#valide {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
147
static/css/mystere_j.css
Normal file
147
static/css/mystere_j.css
Normal file
@@ -0,0 +1,147 @@
|
||||
/* Style global */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.fullscreen-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-image: url('../img/fond_mystere_j.webp'); /* Corrigez le chemin ici */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Texte en haut */
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
width: 350px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Conteneur des défis */
|
||||
.defis-container {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
height: 80%; /* Ajustez la hauteur du conteneur */
|
||||
}
|
||||
|
||||
/* Style des images des défis */
|
||||
.defi-image {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
border: 2px solid white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
/* Exemple de positionnement des défis */
|
||||
.defi-1 { top: 00px; left: 50px; }
|
||||
.defi-2 { top: 00px; left: 180px; }
|
||||
.defi-3 { top: 00px; left: 300px; }
|
||||
.defi-4 { top: 120px; left: 50px; }
|
||||
.defi-5 { top: 120px; left: 180px; }
|
||||
.defi-6 { top: 120px; left: 300px; }
|
||||
|
||||
/* Champ de réponse */
|
||||
#reponse {
|
||||
position: absolute;
|
||||
|
||||
bottom: 200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Bouton de validation */
|
||||
#valide {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 10px 20px;
|
||||
font-size: 1.2rem;
|
||||
color: white;
|
||||
background-color: #007BFF;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
/* Style de la popup */
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.popup img {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.popup .close {
|
||||
margin-top: 10px;
|
||||
padding: 10px 20px;
|
||||
background-color: #FF5722;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Adaptations pour écrans mobiles */
|
||||
@media (max-width: 768px) {
|
||||
.defi-image {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#reponse {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#valide {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
64
static/css/perdu.css
Normal file
64
static/css/perdu.css
Normal file
@@ -0,0 +1,64 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none; /* Empêche les glissements */
|
||||
touch-action: none; /* Désactive les gestes tactiles */
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden; /* Bloque le défilement */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fullscreen-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
text-align: center;
|
||||
color: red;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
text-decoration: none;
|
||||
color: rgb(148, 163, 206);
|
||||
background-color: #141414;
|
||||
padding: 5px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.5rem;
|
||||
box-shadow: 2px 2px 5px #000;
|
||||
}
|
||||
|
||||
.continue-button:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
134
static/css/style_baptiste.css
Normal file
134
static/css/style_baptiste.css
Normal file
@@ -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 */
|
||||
|
||||
|
||||
}
|
||||
58
static/css/style_final2_b.css
Normal file
58
static/css/style_final2_b.css
Normal file
@@ -0,0 +1,58 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('./img/fond_mystere2_b.webp') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#zone_cartes {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carte {
|
||||
position: absolute;
|
||||
width: 15vw; /* Taille des cartes */
|
||||
height: calc(15vw * 1.4); /* Respecte le ratio */
|
||||
background-size: cover;
|
||||
z-index: 10; /* Au-dessus des ronds */
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
#emplacements {
|
||||
position: absolute;
|
||||
bottom: 150px; /* Augmente la distance par rapport au bas de l'écran */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%; /* Largeur totale de la rangée */
|
||||
height: 50px; /* Hauteur totale */
|
||||
z-index: 1; /* Sous les cartes */
|
||||
}
|
||||
|
||||
.emplacement {
|
||||
width: 5vw; /* Taille des ronds */
|
||||
height: 5vw;
|
||||
background-color: #34b115; /* Nouvelle couleur */
|
||||
border: 2px solid black;
|
||||
border-radius: 50%; /* Forme ronde */
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zone-blanche {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100px; /* Ajustez la taille selon vos besoins */
|
||||
height: 100px; /* Ajustez la taille selon vos besoins */
|
||||
background-color: white;
|
||||
border: 2px solid black;
|
||||
z-index: 5;
|
||||
}
|
||||
@@ -82,8 +82,8 @@ html, body {
|
||||
|
||||
#user-avatar {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
border: 2px solid #333;
|
||||
margin: 5px auto;
|
||||
border: 0px solid #333;
|
||||
}
|
||||
/* Section 2 - Organisation en colonne */
|
||||
#section-top-right, #section-top-right-baptiste, #section-top-right-julien {
|
||||
@@ -104,13 +104,21 @@ html, body {
|
||||
}
|
||||
|
||||
#user-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%; /* Avatar en forme de cercle */
|
||||
object-fit: cover;
|
||||
border: 2px solid #333; /* Bordure autour de l'avatar */
|
||||
/* border: 2px solid #333; /* Bordure autour de l'avatar */
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#user-avatar-julien {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%; /* Avatar en forme de cercle */
|
||||
object-fit: cover;
|
||||
/*border: 2px solid #333; /* Bordure autour de l'avatar */
|
||||
}
|
||||
|
||||
BIN
static/img/bat.png
Executable file
BIN
static/img/bat.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
static/img/bat.webp
Executable file
BIN
static/img/bat.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
static/img/cryptex.jpg
Executable file
BIN
static/img/cryptex.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
static/img/julien - Copie.png
Executable file
BIN
static/img/julien - Copie.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 127 KiB |
BIN
static/img/julien.webp
Executable file
BIN
static/img/julien.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
static/img/photo_b_1.png
Executable file
BIN
static/img/photo_b_1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 838 KiB |
BIN
static/img/photo_b_2.png
Executable file
BIN
static/img/photo_b_2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 885 KiB |
BIN
static/img/photo_b_3.png
Executable file
BIN
static/img/photo_b_3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 696 KiB |
BIN
static/img/photo_b_4.png
Executable file
BIN
static/img/photo_b_4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
BIN
static/img/photo_b_5.png
Executable file
BIN
static/img/photo_b_5.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
BIN
static/img/photo_b_6.png
Executable file
BIN
static/img/photo_b_6.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
BIN
static/img/photo_j_1.png
Executable file
BIN
static/img/photo_j_1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 838 KiB |
BIN
static/img/photo_j_2.png
Executable file
BIN
static/img/photo_j_2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 885 KiB |
BIN
static/img/photo_j_3.png
Executable file
BIN
static/img/photo_j_3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 696 KiB |
BIN
static/img/photo_j_4.png
Executable file
BIN
static/img/photo_j_4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
BIN
static/img/photo_j_5.png
Executable file
BIN
static/img/photo_j_5.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
BIN
static/img/photo_j_6.png
Executable file
BIN
static/img/photo_j_6.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
BIN
static/img/pin1.webp
Executable file
BIN
static/img/pin1.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
static/img/pin1_j.webp
Executable file
BIN
static/img/pin1_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/pin2.webp
Executable file
BIN
static/img/pin2.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
static/img/pin2_j.webp
Executable file
BIN
static/img/pin2_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/pin3.webp
Executable file
BIN
static/img/pin3.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
static/img/pin3_j.webp
Executable file
BIN
static/img/pin3_j.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/pin4.webp
Executable file
BIN
static/img/pin4.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user