ajouter un zoom out lorsqu'une carte apparait sur l'ecran ( conserver la taille finalle actuelle

data/baptiste_final.yaml

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

static/js/script_final2_b.js

@@ -1,3 +1,56 @@
+let dernierHash = null;
+
+async function obtenirHashFichier() {
+    try {
+        const response = await fetch('/data/baptiste_final.yaml');
+        const contenu = await response.text();
+        return btoa(contenu); // Encodage en Base64 comme hash simplifié
+    } catch (error) {
+        console.error("Erreur lors de la récupération du contenu du fichier :", error);
+        return null;
+    }
+}
+
+async function analyserModifications() {
+    try {
+        const response = await fetch('/data/baptiste_final.yaml');
+        const data = await response.json();
+
+        // Vérifier les cartes ajoutées dans `liste_carte_defaut`
+        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);
+                }
+            });
+        }
+
+        // Vérifier les cartes ajoutées dans `liste_carte_échangé`
+        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);
+                }
+            });
+        }
+    } catch (error) {
+        console.error("Erreur lors de l'analyse des modifications :", error);
+    }
+}
+async function surveillerModifications() {
+    try {
+        const nouveauHash = await obtenirHashFichier();
+
+        if (dernierHash && nouveauHash !== dernierHash) {
+            console.log("Fichier modifié. Analyse des modifications...");
+            analyserModifications(); // Vérifie les changements dans le fichier
+        }
+
+        dernierHash = nouveauHash;
+    } catch (error) {
+        console.error("Erreur lors de la surveillance des modifications :", error);
+    }
+}
 async function chargerCartes() {
     try {
         const response = await fetch('/data/baptiste_final.yaml');
@@ -10,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);
+                    creerCarte(zoneCartes, carte.image, carte.numero);
                 }
             });
         }
@@ -37,10 +90,15 @@ async function chargerCartes() {
 }
 
 // Fonction pour créer une carte
-function creerCarte(zone, image) {
+function creerCarte(zone, image, numero) {
     const carte = document.createElement('div');
     carte.className = 'carte';
     carte.style.backgroundImage = `url(${image})`;
+    if (numero !== undefined) {
+        carte.dataset.numero = numero; // Ajoute l'attribut data-numero uniquement si numero est défini
+    } else {
+        console.error("Le numéro de la carte est undefined.");
+    }
 
     positionAleatoire(zone, carte); // Positionner aléatoirement dans la partie haute
     rendreDeplacable(carte); // Rendre la carte déplaçable
@@ -263,3 +321,7 @@ function aimanterCarte(carte, rond) {
 }
 // Charger les cartes au démarrage
 document.addEventListener('DOMContentLoaded', chargerCartes);
+document.addEventListener('DOMContentLoaded', async () => {
+    dernierHash = await obtenirHashFichier(); // Initialisation du hash
+    setInterval(surveillerModifications, 2000); // Surveiller les modifications toutes les 2 secondes
+});