From 05aa15cec0a49ee93ad5fc81a7530b229af1f2da Mon Sep 17 00:00:00 2001 From: Valentin ROBIN Date: Mon, 24 Aug 2026 01:01:25 +0200 Subject: [PATCH] =?UTF-8?q?Corrige=20la=20marge=20excessive=20de=20l=C3=A2?= =?UTF-8?q?cher=20pr=C3=A8s=20des=20bords=20du=20bac?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le calcul de position ajoutait WALL_THICKNESS (20px) en plus du rayon de la pièce, alors que les murs physiques sont déjà à ras des bords visuels du bac. Cette marge fixe pénalisait surtout les petites pièces, qui ne pouvaient pas s'approcher des bords. Seul le rayon compte désormais. Co-Authored-By: Claude Sonnet 5 --- src/app/corne/melon-game.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/corne/melon-game.tsx b/src/app/corne/melon-game.tsx index d26cb12..da729fc 100644 --- a/src/app/corne/melon-game.tsx +++ b/src/app/corne/melon-game.tsx @@ -98,7 +98,13 @@ export function MelonGame({ citizens, onFinish }: { citizens: MemberRow[]; onFin const setDropX = useCallback( (x: number) => { const radius = tierRadii[nextTierRef.current]; - const clamped = Math.min(CONTAINER_WIDTH - WALL_THICKNESS - radius, Math.max(WALL_THICKNESS + radius, x)); + // Pas de WALL_THICKNESS ici : les murs physiques sont déjà à ras des + // bords visuels du bac (leur face intérieure est exactement à x=0 et + // x=CONTAINER_WIDTH), donc seul le rayon de la pièce limite jusqu'où + // son centre peut aller. Ajouter WALL_THICKNESS en plus créait une + // marge fixe de 20px des deux côtés — disproportionnée pour les + // petits paliers, qui ne pouvaient plus s'approcher des bords. + const clamped = Math.min(CONTAINER_WIDTH - radius, Math.max(radius, x)); dropXRef.current = clamped; if (previewRef.current) { previewRef.current.style.transform = `translateX(${clamped - radius}px)`; @@ -144,8 +150,11 @@ export function MelonGame({ citizens, onFinish }: { citizens: MemberRow[]; onFin const tier = nextTierRef.current; const radius = tierRadii[tier]; - const minX = WALL_THICKNESS + radius; - const maxX = CONTAINER_WIDTH - WALL_THICKNESS - radius; + // Même borne que setDropX (pas de WALL_THICKNESS en trop, voir + // là-bas) — dropXRef est déjà clampé de la même façon, ce recalcul ne + // fait que se protéger d'un dropXRef obtenu autrement (clavier, etc.). + const minX = radius; + const maxX = CONTAINER_WIDTH - radius; const x = Math.min(maxX, Math.max(minX, dropXRef.current)); // spawnPiece a des effets de bord (crée un vrai corps matter-js, // incrémente le compteur d'id) : appelé une seule fois ici, jamais