fonctionne : aiamntation et zone blanche

static/js/script_final2_b.js

@@ -19,10 +19,18 @@ 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);
+                    creerCarte(zoneCartes, carte.image, carte.numero);
                 }
             });
         }
+
+        // Créer les points d'aimantation
+        for (let i = 0; i < 6; i++) {
+            const rond = document.createElement('div');
+            rond.className = 'emplacement';
+            rond.dataset.index = i; // Identifier chaque rond
+            emplacements.appendChild(rond);
+        }
     } catch (error) {
         console.error("Erreur lors du chargement des cartes :", error);
     }
@@ -77,16 +85,19 @@ function rendreDeplacable(carte) {
         const pointerMove = (e) => {
             carte.style.left = `${e.clientX - offsetX}px`;
             carte.style.top = `${e.clientY - offsetY}px`;
+
+            // Vérifier l'aimantation pendant le déplacement
+            verifierAimantation(carte);
         };
 
         const pointerUp = () => {
             carte.style.cursor = 'grab';
-
+        
             // Vérifier si la carte est dans la zone blanche
             if (isInZoneBlanche(carte)) {
                 supprimerCarte(carte); // Supprimer la carte
             }
-
+        
             window.removeEventListener('pointermove', pointerMove);
             window.removeEventListener('pointerup', pointerUp);
         };
@@ -101,19 +112,22 @@ function isInZoneBlanche(carte) {
     const zoneBlanche = document.querySelector('.zone-blanche');
     if (!zoneBlanche) {
         console.error("Zone blanche non trouvée dans le DOM.");
-        return false; // Retourne false si la zone blanche n'existe pas
+        return false;
     }
 
     // Obtenir les dimensions et la position de la zone blanche
     const zoneRect = zoneBlanche.getBoundingClientRect();
     const carteRect = carte.getBoundingClientRect();
 
-    // Vérifier si la carte est entièrement dans la zone blanche
+    // Vérifier si le centre de la carte est dans la zone blanche
+    const carteCenterX = carteRect.left + carteRect.width / 2;
+    const carteCenterY = carteRect.top + carteRect.height / 2;
+
     return (
-        carteRect.left >= zoneRect.left &&
-        carteRect.right <= zoneRect.right &&
-        carteRect.top >= zoneRect.top &&
-        carteRect.bottom <= zoneRect.bottom
+        carteCenterX >= zoneRect.left &&
+        carteCenterX <= zoneRect.right &&
+        carteCenterY >= zoneRect.top &&
+        carteCenterY <= zoneRect.bottom
     );
 }
 
@@ -150,35 +164,27 @@ async function supprimerCarte(carte) {
 // Vérifier si une carte est au-dessus d'un rond
 function verifierAimantation(carte) {
     const emplacements = document.querySelectorAll('.emplacement');
-    const aimantationDistance = 20;
-    let aimantationEffectuee = false;
+    const aimantationDistance = 50; // Augmenter la distance pour plus de tolérance
 
     emplacements.forEach((rond) => {
         const rondRect = rond.getBoundingClientRect();
         const carteRect = carte.getBoundingClientRect();
 
-        const tampon = {
-            left: rondRect.left - aimantationDistance,
-            right: rondRect.right + aimantationDistance,
-            top: rondRect.top - aimantationDistance,
-            bottom: rondRect.bottom + aimantationDistance,
-        };
+        // Calculer les centres
+        const carteCenterX = carteRect.left + carteRect.width / 2;
+        const carteCenterY = carteRect.top + carteRect.height / 2;
+        const rondCenterX = rondRect.left + rondRect.width / 2;
+        const rondCenterY = rondRect.top + rondRect.height / 2;
 
-        if (
-            carteRect.left + carteRect.width / 2 > tampon.left &&
-            carteRect.left + carteRect.width / 2 < tampon.right &&
-            carteRect.top + carteRect.height / 2 > tampon.top &&
-            carteRect.top + carteRect.height / 2 < tampon.bottom
-        ) {
-            ajusterRotation(carte);
+        // Vérifier si le centre de la carte est proche du centre du rond
+        const distanceX = Math.abs(carteCenterX - rondCenterX);
+        const distanceY = Math.abs(carteCenterY - rondCenterY);
+
+        if (distanceX <= aimantationDistance && distanceY <= aimantationDistance) {
             aimanterCarte(carte, rond);
-            aimantationEffectuee = true;
         }
     });
-
-    return aimantationEffectuee;
 }
-
 // Faire glisser et pivoter une carte relâchée en dehors des zones d'aimantation
 function lancerCarte(carte) {
     const zone = document.getElementById('zone_cartes');
@@ -241,13 +247,19 @@ function ajusterRotation(carte) {
     }, 50);
 }
 
-// Aimanter une carte sur un rond
 function aimanterCarte(carte, rond) {
     const rondRect = rond.getBoundingClientRect();
     const zoneRect = document.getElementById('zone_cartes').getBoundingClientRect();
 
+    // Centrer la carte sur le rond
     carte.style.left = `${rondRect.left - zoneRect.left + rondRect.width / 2 - carte.offsetWidth / 2}px`;
     carte.style.top = `${rondRect.top - zoneRect.top + rondRect.height / 2 - carte.offsetHeight / 2}px`;
+
+    // Réinitialiser la rotation de la carte
+    carte.style.transform = `rotate(0deg)`;
+
+    // Ajouter une classe pour indiquer l'aimantation (optionnel)
+    carte.classList.add('aimantee');
 }
 // Charger les cartes au démarrage
 document.addEventListener('DOMContentLoaded', chargerCartes);