version mardi spoir

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

final2_b.html

@@ -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>

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 */
 }

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) {
+        if (
-            aimanterCarte(carte, rond);
+            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);