Stage 17 round 5 — board interaction & UI polish
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 11s
CI / ui (pull_request) Successful in 29s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m17s

- Even zoom: interpolate the board scroll toward a pre-clamped target as the real width
  grows/shrinks, so it magnifies A->B in one motion instead of lurching and snapping back
  near the edges/centre. Recentre only on a zoom toggle, never on a focus change — so a
  2nd+ placed tile and a hovered dragged tile no longer jump the board.
- Drag: highlight the aimed-at empty cell as a drop target; hover-hold auto-zoom now
  fires only for the first (zoom-in) hold.
- Pinch zoom: two-finger spread/close toggles zoom toward the pinch midpoint (preventDefault
  only for two touches, so one-finger scroll stays native); a second finger aborts a drag.
- Shuffle hop capped at 0.3s and disabled under reduce-motion.
- Make-move is a borderless icon button, disabled while the pending word is known illegal.
- Variant display names: english & russian_scrabble -> Scrabble/Скрэббл, erudit ->
  Erudite/Эрудит; the in-game title shows the variant name (was always 'Scrabble').
This commit is contained in:
Ilia Denisov
2026-06-07 09:34:07 +02:00
parent 3899ffda0f
commit 29d1193a0a
6 changed files with 171 additions and 39 deletions
+4 -3
View File
@@ -26,8 +26,9 @@
// hop flies a tile to its shuffled position along a low parabola (apogee ≈ half a tile
// height). The duration scales with the horizontal distance — i.e. the arc length — so
// the longest swap (slot 1 ↔ 7) takes ~0.5s and shorter swaps land sooner. It runs only
// while a shuffle is in progress; ordinary reflow (placing/recalling a tile) is instant.
// the longest swap (slot 1 ↔ 7) takes ~0.3s and shorter swaps land sooner. It runs only
// while a shuffle is in progress (and motion is not reduced); ordinary reflow
// (placing/recalling a tile) is instant.
function hop(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, active: boolean) {
const dx = from.left - to.left;
const dy = from.top - to.top;
@@ -36,7 +37,7 @@
const span = node.parentElement?.getBoundingClientRect().width || dist;
const lift = (to.height || from.height) * 0.5;
return {
duration: Math.max(160, Math.min(500, (dist / span) * 560)),
duration: Math.max(120, Math.min(300, (dist / span) * 340)),
css: (t: number, u: number) =>
`transform: translate(${dx * u}px, ${dy * u - Math.sin(Math.PI * t) * lift}px);`,
};