From d185b9a7f30df36a632051fde9a80fa508c288d7 Mon Sep 17 00:00:00 2001 From: gilles Date: Tue, 24 Dec 2024 02:53:21 +0100 Subject: [PATCH] il faudrait ajouter la verification du mot de passe --- data/baptiste_final.yaml | 12 ++++++------ static/css/style_final2_b.css | 23 +++++++++++++++++++++++ static/js/script_final2_b.js | 23 +++++++++++++++++++++++ 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/data/baptiste_final.yaml b/data/baptiste_final.yaml index f055008..080eb09 100755 --- a/data/baptiste_final.yaml +++ b/data/baptiste_final.yaml @@ -10,12 +10,12 @@ liste_carte_defaut: image: static/css/img/cartes/E_b.webp contenu: E couleur: bleu - donné: oui + donné: non - numero: 3 image: static/css/img/cartes/R_b.webp contenu: R couleur: bleu - donné: oui + donné: non - 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é: oui + donné: non - 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é: oui + recupéré: non - numero: 9 image: static/css/img/cartes/I_j.webp contenu: I couleur: violet - recupéré: oui + recupéré: non - 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é: oui + recupéré: non - numero: 12 image: static/css/img/cartes/O_b.webp contenu: O diff --git a/static/css/style_final2_b.css b/static/css/style_final2_b.css index 45e13b9..8c787b6 100644 --- a/static/css/style_final2_b.css +++ b/static/css/style_final2_b.css @@ -15,6 +15,7 @@ html, body { } .carte { + animation: zoomOut 0.4s ease-out; /* Applique l'animation à chaque carte */ position: absolute; width: 15vw; /* Taille des cartes */ height: calc(15vw * 1.4); /* Respecte le ratio */ @@ -24,6 +25,16 @@ html, body { touch-action: none; } + + +#zone_cartes .carte.zoom-in { + transform: scale(1.8) !important; + z-index: 20 !important; + transition: transform 0.2s ease-in-out !important; +} + + + #emplacements { position: absolute; bottom: 150px; /* Augmente la distance par rapport au bas de l'écran */ @@ -56,3 +67,15 @@ html, body { border: 2px solid black; z-index: 5; } + +/* Animation de zoom */ +@keyframes zoomOut { + from { + transform: scale(10); /* Taille initiale (double) */ + opacity: 0; /* Invisible */ + } + to { + transform: scale(1); /* Taille normale */ + opacity: 1; /* Visible */ + } +} \ No newline at end of file diff --git a/static/js/script_final2_b.js b/static/js/script_final2_b.js index c6d689b..41a61c2 100644 --- a/static/js/script_final2_b.js +++ b/static/js/script_final2_b.js @@ -133,12 +133,18 @@ function positionAleatoire(zone, carte) { function rendreDeplacable(carte) { let offsetX, offsetY; + 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."); offsetX = e.clientX - carte.getBoundingClientRect().left; offsetY = e.clientY - carte.getBoundingClientRect().top; carte.style.cursor = 'grabbing'; + + // Ajout de la classe pour zoom in + carte.classList.add('zoom-in'); + console.log("Classe zoom-in ajoutée."); const pointerMove = (e) => { carte.style.left = `${e.clientX - offsetX}px`; @@ -149,7 +155,17 @@ function rendreDeplacable(carte) { }; const pointerUp = () => { + 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."); + + if (carte.dataset.aimantee === "true") { + console.log("Carte reste aimantée"); + } else { + console.log("Carte n'est plus aimantée"); + } // Vérifier si la carte est dans la zone blanche if (isInZoneBlanche(carte)) { @@ -223,6 +239,7 @@ async function supprimerCarte(carte) { 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) => { const rondRect = rond.getBoundingClientRect(); @@ -240,8 +257,14 @@ function verifierAimantation(carte) { if (distanceX <= aimantationDistance && distanceY <= aimantationDistance) { aimanterCarte(carte, rond); + carte.dataset.aimantee = "true"; // Marque la carte comme aimantée + 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 + } } // Faire glisser et pivoter une carte relâchée en dehors des zones d'aimantation function lancerCarte(carte) {