diff --git a/data/baptiste_final.yaml b/data/baptiste_final.yaml index 080eb09..e0cc963 100755 --- a/data/baptiste_final.yaml +++ b/data/baptiste_final.yaml @@ -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 diff --git a/final2_b.html b/final2_b.html index 84a6814..660aca8 100644 --- a/final2_b.html +++ b/final2_b.html @@ -15,6 +15,8 @@
+
+ diff --git a/static/css/style_final2_b.css b/static/css/style_final2_b.css index 8c787b6..5302eb3 100644 --- a/static/css/style_final2_b.css +++ b/static/css/style_final2_b.css @@ -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 */ } \ No newline at end of file diff --git a/static/js/script_final2_b.js b/static/js/script_final2_b.js index 41a61c2..a6b59e7 100644 --- a/static/js/script_final2_b.js +++ b/static/js/script_final2_b.js @@ -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);