gilles/geocaching_js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version mardi spoir

Browse Source
This commit is contained in:
gilles soulier
2024-12-24 19:04:32 +01:00
parent d185b9a7f3
commit bfe292cb59
4 changed files with 133 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
data/baptiste_final.yaml
View File

@@ -4,61 +4,73 @@ liste_carte_defaut:
- numero: 1
image: static/css/img/cartes/X_j.webp
contenu: X
lettre: X
couleur: violet
donné: non
donné: oui
- numero: 2
image: static/css/img/cartes/E_b.webp
contenu: E
lettre: E
couleur: bleu
donné: non
- numero: 3
image: static/css/img/cartes/R_b.webp
contenu: R
lettre: R
couleur: bleu
donné: non
- numero: 4
image: static/css/img/cartes/P_j.webp
contenu: P
lettre: P
couleur: violet
donné: non
donné: oui
- numero: 5
image: static/css/img/cartes/T_b.webp
contenu: T
lettre: T
couleur: bleu
donné: non
- numero: 6
image: static/css/img/cartes/E_j.webp
contenu: E
lettre: E
couleur: violet
donné: non
donné: oui
liste_carte_échangé:
- numero: 7
image: static/css/img/cartes/R_b.webp
contenu: R
lettre: R
couleur: bleu
recupéré: non
recupéré: oui
- numero: 8
image: static/css/img/cartes/L_j.webp
contenu: L
lettre: L
couleur: violet
recupéré: non
- numero: 9
image: static/css/img/cartes/I_j.webp
contenu: I
lettre: I
couleur: violet
recupéré: non
- numero: 10
image: static/css/img/cartes/U_b.webp
contenu: U
lettre: U
couleur: bleu
recupéré: non
recupéré: oui
- numero: 11
image: static/css/img/cartes/S_j.webp
contenu: S
lettre: S
couleur: violet
recupéré: non
- numero: 12
image: static/css/img/cartes/O_b.webp
contenu: O
lettre: O
couleur: bleu
recupéré: non
recupéré: oui

2
final2_b.html
View File

@@ -15,6 +15,8 @@
<!-- Emplacements alignés en bas -->
<div id="emplacements"></div>
<div id="mot-forme" class="mot-forme"></div>
<!-- Script pour charger et gérer les cartes -->
<script src="static/js/script_final2_b.js"></script>
</body>

16
static/css/style_final2_b.css
View File

@@ -78,4 +78,20 @@ html, body {
transform: scale(1); /* Taille normale */
opacity: 1; /* Visible */
}
}
#mot-forme {
font-size: 18px;
font-weight: bold;
color: #000; /* Noir */
text-align: center;
background-color: rgba(255, 255, 255, 0.5); /* Blanc semi-transparent */
padding: 10px;
border-radius: 5px; /* Coins arrondis */
position: absolute; /* Position absolue */
top: 10px; /* Distance depuis le haut de la zone */
left: 10%; /* Centrer horizontalement */
transform: translateX(-50%); /* Centrer réellement en prenant en compte la largeur */
z-index: 10; /* S'assurer que l'élément est par-dessus les autres */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optionnel : ajout d'une ombre */
}

115
static/js/script_final2_b.js
View File

@@ -20,7 +20,7 @@ async function analyserModifications() {
if (Array.isArray(data.liste_carte_defaut)) {
data.liste_carte_defaut.forEach((carte) => {
if (carte.donné === "non" && !document.querySelector(`[data-numero="${carte.numero}"]`)) {
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero);
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero, carte.lettre);
}
});
}
@@ -29,7 +29,7 @@ async function analyserModifications() {
if (Array.isArray(data.liste_carte_échangé)) {
data.liste_carte_échangé.forEach((carte) => {
if (carte.recupéré === "oui" && !document.querySelector(`[data-numero="${carte.numero}"]`)) {
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero);
creerCarte(document.getElementById('zone_cartes'), carte.image, carte.numero, carte.lettre);
}
});
}
@@ -63,7 +63,7 @@ async function chargerCartes() {
if (Array.isArray(data.liste_carte_defaut)) {
data.liste_carte_defaut.forEach((carte) => {
if (carte.donné === "non") {
creerCarte(zoneCartes, carte.image, carte.numero);
creerCarte(zoneCartes, carte.image, carte.numero, carte.lettre);
}
});
}
@@ -72,7 +72,7 @@ async function chargerCartes() {
if (Array.isArray(data.liste_carte_échangé)) {
data.liste_carte_échangé.forEach((carte) => {
if (carte.recupéré === "oui") {
creerCarte(zoneCartes, carte.image, carte.numero);
creerCarte(zoneCartes, carte.image, carte.numero, carte.lettre);
}
});
}
@@ -90,7 +90,7 @@ async function chargerCartes() {
}
// Fonction pour créer une carte
function creerCarte(zone, image, numero) {
function creerCarte(zone, image, numero, lettre) {
const carte = document.createElement('div');
carte.className = 'carte';
carte.style.backgroundImage = `url(${image})`;
@@ -99,6 +99,11 @@ function creerCarte(zone, image, numero) {
} else {
console.error("Le numéro de la carte est undefined.");
}
if (lettre !== undefined) {
carte.dataset.lettre = lettre; // Ajoute l'attribut data-lettre
} else {
console.error("La lettre de la carte est undefined.");
}
positionAleatoire(zone, carte); // Positionner aléatoirement dans la partie haute
rendreDeplacable(carte); // Rendre la carte déplaçable
@@ -136,7 +141,7 @@ function rendreDeplacable(carte) {
let hasMoved = false; // Indique si la carte a été déplacée
carte.addEventListener('pointerdown', (e) => {
console.log("Pointer down : Début du déplacement.");
// console.log("Pointer down : Début du déplacement.");
offsetX = e.clientX - carte.getBoundingClientRect().left;
offsetY = e.clientY - carte.getBoundingClientRect().top;
@@ -144,7 +149,7 @@ function rendreDeplacable(carte) {
// Ajout de la classe pour zoom in
carte.classList.add('zoom-in');
console.log("Classe zoom-in ajoutée.");
// console.log("Classe zoom-in ajoutée.");
const pointerMove = (e) => {
carte.style.left = `${e.clientX - offsetX}px`;
@@ -155,16 +160,16 @@ function rendreDeplacable(carte) {
};
const pointerUp = () => {
console.log("Pointer up : Fin du déplacement.");
// console.log("Pointer up : Fin du déplacement.");
carte.style.cursor = 'grab';
// Retirer la classe pour zoom in
carte.classList.remove('zoom-in');
console.log("Classe zoom-in retirée.");
// console.log("Classe zoom-in retirée.");
if (carte.dataset.aimantee === "true") {
console.log("Carte reste aimantée");
// console.log("Carte reste aimantée");
} else {
console.log("Carte n'est plus aimantée");
// console.log("Carte n'est plus aimantée");
}
// Vérifier si la carte est dans la zone blanche
@@ -233,15 +238,20 @@ async function supprimerCarte(carte) {
// Supprimer la carte du DOM
carte.remove();
}
// Vérifier si une carte est au-dessus d'un rond
let lettresPlacees = Array(6).fill(null); // Tableau pour stocker les lettres placées
function verifierAimantation(carte) {
const emplacements = document.querySelectorAll('.emplacement');
const aimantationDistance = 50; // Augmenter la distance pour plus de tolérance
let aimantationEffectuee = false; // Initialisation de la variable
emplacements.forEach((rond) => {
// Si la carte est verrouillée, ignorer les nouvelles vérifications
if (carte.dataset.verrouAimantation === "true") {
return;
}
emplacements.forEach((rond, index) => {
const rondRect = rond.getBoundingClientRect();
const carteRect = carte.getBoundingClientRect();
@@ -255,16 +265,72 @@ function verifierAimantation(carte) {
const distanceX = Math.abs(carteCenterX - rondCenterX);
const distanceY = Math.abs(carteCenterY - rondCenterY);
if (distanceX <= aimantationDistance && distanceY <= aimantationDistance) {
aimanterCarte(carte, rond);
if (
distanceX <= aimantationDistance &&
distanceY <= aimantationDistance &&
!rond.dataset.lettre // Vérifie que l'emplacement n'est pas déjà occupé
) {
aimanterCarte(carte, rond,index);
carte.dataset.aimantee = "true"; // Marque la carte comme aimantée
rond.dataset.lettre = index; // Associe la lettre de la carte à l'emplacement
console.log(`Lettre ${carte.dataset.lettre} assignée à l'emplacement ${index}`);
aimantationEffectuee = true;
carte.classList.remove('zoom-in'); // Désactive le zoom après aimantation
}
});
if (!aimantationEffectuee) {
carte.dataset.aimantee = "false"; // La carte n'est plus aimantée
// Si la carte n'est plus aimantée, retirer la lettre uniquement si elle est actuellement associée à ce rond
emplacements.forEach((rond, index) => {
if (
rond.dataset.lettre === carte.dataset.lettre &&
carte.dataset.aimantee === "true" &&
rond.dataset.index == index // Vérifie que l'index correspond
) {
delete rond.dataset.lettre; // Supprime la lettre du rond
delete rond.dataset.index; // Supprime l'index associé
console.log(`Lettre ${carte.dataset.lettre} retirée de l'emplacement ${index}`);
}
});
carte.dataset.aimantee = "false"; // Marquer la carte comme non aimantée
}
// Vérifier le mot après chaque changement
verifierMotCache();
}
// Vérifie si le mot caché est formé
function verifierMotCache() {
const emplacements = document.querySelectorAll('.emplacement');
const motAttendu = "ROUTER"; // Mot à découvrir
let motForme = "";
emplacements.forEach((rond,index) => {
motForme += rond.dataset.lettre || "_"; // Ajouter la lettre ou "_" si l'emplacement est vide
});
console.log(`Mot formé : ${motForme}`);
const zoneMotForme = document.getElementById('mot-forme');
if (zoneMotForme) {
zoneMotForme.textContent = `Mot formé : ${motForme}`;
}
if (motForme === motAttendu) {
console.log("Bravo ! Vous avez trouvé le mot caché !");
const zoneMotForme = document.getElementById('mot-forme');
if (zoneMotForme) {
zoneMotForme.textContent = '${motForme}';
} else if (zoneMotForme) {
zoneMotForme.style.color = "#333"; // Réinitialiser la couleur si le mot n'est pas trouvé
}
}
}
// Faire glisser et pivoter une carte relâchée en dehors des zones d'aimantation
function lancerCarte(carte) {
@@ -328,7 +394,10 @@ function ajusterRotation(carte) {
}, 50);
}
function aimanterCarte(carte, rond) {
// Tableau global pour stocker les lettres associées à chaque rond
const rondLettres = Array(6).fill(null); // Initialise un tableau de 6 éléments avec `null`
function aimanterCarte(carte, rond, index) {
const rondRect = rond.getBoundingClientRect();
const zoneRect = document.getElementById('zone_cartes').getBoundingClientRect();
@@ -341,6 +410,16 @@ function aimanterCarte(carte, rond) {
// Ajouter une classe pour indiquer l'aimantation (optionnel)
carte.classList.add('aimantee');
// Ajouter l'index au dataset
rond.dataset.index = index;
console.log(`Carte assignée à l'emplacement ${index}`);
// Log pour vérifier l'association
}
// Charger les cartes au démarrage
document.addEventListener('DOMContentLoaded', chargerCartes);