Skip to content

feat(frontend): fullscreen toggle, move indicators, material advantage & move-history rewind - #214

Merged
chiscookeke11 merged 1 commit into
Kaycee276:masterfrom
Yilkash:feature/frontend-history-and-indicators
Aug 28, 2026
Merged

feat(frontend): fullscreen toggle, move indicators, material advantage & move-history rewind#214
chiscookeke11 merged 1 commit into
Kaycee276:masterfrom
Yilkash:feature/frontend-history-and-indicators

Conversation

@Yilkash

@Yilkash Yilkash commented Aug 27, 2026

Copy link
Copy Markdown

Summary

Batched frontend enhancement for four assigned issues on a single branch. All changes are in the React/Vite/TypeScript frontend.

#124 — Fullscreen Mode Toggle

  • Added a fullscreen toggle button (Maximize2 / Minimize2) to the game action bar using the HTML5 Fullscreen API.
  • Added the f keyboard shortcut (ignored while typing in inputs).
  • State tracks fullscreenchange so the icon reflects the real state.

#123 — Legal Move Dot Indicators & Capture Ring Highlights

  • Empty legal-move squares now render the small dot marker.
  • Capturable enemy pieces render a circular ring highlight instead of a dot.

#109 — Captured Pieces & Material Advantage

  • Both player bars now show captured-piece icons (previously only the current player's bar had icons, keyed to the live turn).
  • Added a real-time material point differential badge next to each player's avatar (e.g. +3, −5), computed from captured piece values in chessUtils.ts.

#112 — Interactive Move History Navigation / Board Playback Rewind

  • Move history is fetched from GET /api/games/:code/moves and kept in the Zustand store (moveHistory, viewingIndex), refreshed after moves, on join/rejoin, and kept in sync via move_count.
  • Playback controls in the action bar: jump-to-start, previous, next, and return-to-live, plus a "Move N of M" readout.
  • Keyboard / rewind/advance the board (ignored while typing).
  • Clicking any earlier move in the history list rewinds the board; the last-move highlight follows the viewed move.
  • The floating panel (was chat-only) now has Chat and Moves tabs — the Moves tab lists every move in algebraic notation (with +/# suffixes) and is fully clickable.
  • While reviewing, the board is read-only (moves blocked) and a "Move N of M · Live" banner appears over the board.

Verification

  • npm run lint passes on all touched files.
  • npx tsc --noEmit passes with zero errors.
  • npm test (Vitest) passes.
  • Note: eslint . on the whole frontend/ still reports one pre-existing parsing error in src/pages/SpectatorPage.tsx:193 that also exists on master (it was merged broken in a previous PR) — left untouched per contribution scope.

Closes #124
Closes #123
Closes #112
Closes #109

…rs, fullscreen

- Kaycee276#124: fullscreen toggle button in action bar + 'f' keyboard shortcut
- Kaycee276#123: legal-move dot markers on empty squares, capture rings on enemy pieces
- Kaycee276#109: captured-piece icons and real-time material point differential for both players
- Kaycee276#112: move-history board playback with arrow-key/button rewind, clickable move list in chat panel, and movable last-move highlight

Closes Kaycee276#124
Closes Kaycee276#123
Closes Kaycee276#112
Closes Kaycee276#109
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@dimka90 is attempting to deploy a commit to the kaycee276's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Aug 27, 2026

Copy link
Copy Markdown

@Yilkash Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@chiscookeke11
chiscookeke11 merged commit 798e3b5 into Kaycee276:master Aug 28, 2026
5 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment