Fix Chessground mouse hitbox desync after responsive layout shift

[Tortue95]

Fix Chessground mouse hitbox desync after responsive layout shift

Closes #303

Problem

Chessground caches board bounds lazily via a memoized getBoundingClientRect() call. This cache is used for all mouse-to-square coordinate conversions. It is invalidated by window.resize and re-populated on the next call to bounds() — which happens during piece rendering and on user interactions.

After each move, React re-renders several components (fen [most impacted], stats panel, move list). If those updates change the width of a sibling panel, the flex row reflows and the board shifts position.

The same mechanism causes a mismatch at initial page load, before the responsive layout has fully settled.

Fix

Chessground registers a permanent window.resize → bounds.clear() listener at initialization.
Dispatching window.resize invalidate this cache.

A single useEffect keyed on currentNode dispatches window.resize 50ms after every position change (mount, player move, opponent response). By the time the user can click, the cache has been cleared and Chessground re-measures from the correct DOM position.

Changes

src/components/Board/GameBoard.tsx

Added one useEffect:

useEffect(() => {
  const timeout = window.setTimeout(() => {
    window.dispatchEvent(new Event('resize'))
  }, 50)
  return () => window.clearTimeout(timeout)
}, [currentNode])

The 50ms delay also acts as a debounce: if currentNode changes multiple times in quick succession, the cleanup function cancels the pending timeout and only the last change dispatches the event.

This workaround ensures the board always has correct click mapping regardless of any unexpected layout shift — even if the board moves when it should not.

[vercel]

@Tortue95 is attempting to deploy a commit to the Maia Platform Team on Vercel.

A member of the Team first needs to authorize it.