From 34eaf1b2a73807f9a287b514f8e35ef66bf06edc Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Sat, 11 Apr 2026 22:55:02 +0700
Subject: [PATCH] fix(ui): make buttons reliably clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the scale-on-press animation from the shared button factory. Scaling
the container also scaled its hit rectangle, so any small pointer drift
between pointerdown and pointerup landed outside the shrunken hitbox and
the click was silently dropped. Releasing off the button also left it
visually stuck at 0.96 scale.

Fire the callback on pointerdown instead — snappy, no release tracking,
identical behaviour for mouse, touch, and fast clicks. Hover colour change
still provides press feedback.
---
 src/game/ui/button-factory.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/game/ui/button-factory.js b/src/game/ui/button-factory.js
index df2d7b1..c6e2856 100644
--- a/src/game/ui/button-factory.js
+++ b/src/game/ui/button-factory.js
@@ -29,6 +29,9 @@ export function createButton(scene, x, y, label, onClick, opts = {}) {
     const text = scene.add.text(0, 0, label, textStyle).setOrigin(0.5);
     container.add([bg, text]);
     container.setSize(width, height);
+    // Hit area is defined in the container's LOCAL coordinates and never
+    // scales with the container — this keeps clicks reliable even while the
+    // button is visually animating.
     container.setInteractive(
         new Phaser.Geom.Rectangle(-width / 2, -height / 2, width, height),
         Phaser.Geom.Rectangle.Contains
@@ -42,11 +45,10 @@ export function createButton(scene, x, y, label, onClick, opts = {}) {
         drawBg(fill);
         scene.input.setDefaultCursor('default');
     });
-    container.on('pointerdown', () => container.setScale(0.96));
-    container.on('pointerup', () => {
-        container.setScale(1);
-        onClick?.();
-    });
+    // Fire on pointerdown for a snappy, reliable click. No press-scale
+    // animation, no release tracking — touch, mouse, and fast clicks all
+    // behave the same way.
+    container.on('pointerdown', () => onClick?.());
 
     container.setLabel = (txt) => text.setText(txt);
     return container;