From 760ec9cb5edc0fa02e5aef04e5fdb2f769649547 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Fri, 10 Apr 2026 17:55:55 +0700
Subject: [PATCH] fix(web-client): eliminate hover preview flicker on micro
 mouse movement

---
 web-client/src/scenes/game-scene.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/web-client/src/scenes/game-scene.js b/web-client/src/scenes/game-scene.js
index 319b4ab..da8a48b 100644
--- a/web-client/src/scenes/game-scene.js
+++ b/web-client/src/scenes/game-scene.js
@@ -123,18 +123,31 @@ export class GameScene extends Phaser.Scene {
 
   /**
    * Handle hover — show preview stone.
+   * Only clears/redraws when the target cell actually changes, otherwise the
+   * preview flickers on every micro-movement (clear + early-return without redraw).
    * @param {Phaser.Input.Pointer} pointer
    * @private
    */
   _handleHover(pointer) {
-    this.hoverGraphic.clear();
-    if (gameState.isSpectating || !gameState.isMyTurn()) return;
-    const pos = this.board.pixelToGrid(pointer.x, pointer.y);
-    if (!pos || gameState.isOccupied(pos.row, pos.col)) {
-      this.hoverPos = null;
+    if (gameState.isSpectating || !gameState.isMyTurn()) {
+      if (this.hoverPos) {
+        this.hoverGraphic.clear();
+        this.hoverPos = null;
+      }
       return;
     }
+    const pos = this.board.pixelToGrid(pointer.x, pointer.y);
+    if (!pos || gameState.isOccupied(pos.row, pos.col)) {
+      if (this.hoverPos) {
+        this.hoverGraphic.clear();
+        this.hoverPos = null;
+      }
+      return;
+    }
+    // Still on the same cell — keep existing preview drawn, nothing to do.
     if (this.hoverPos && this.hoverPos.row === pos.row && this.hoverPos.col === pos.col) return;
+    // Moved to a new cell — clear old preview and draw at new location.
+    this.hoverGraphic.clear();
     this.hoverPos = pos;
     const x = this.board.gridX(pos.col);
     const y = this.board.gridY(pos.row);