diff --git a/static/js/script_final2_b.js b/static/js/script_final2_b.js index 5a4a9a1..d736775 100644 --- a/static/js/script_final2_b.js +++ b/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);