| name | masoi-ui-review |
| description | Review or improve Ma Sói UI for phase clarity, role visibility, hidden-information safety, target selection, timers, chat, reconnect state, mobile layout, and game-result screens. Use when editing client/src/pages, client/src/components, client/src/hooks/useGame.js, or user-facing text for roles and actions. |
Ma Sói UI Review
Workflow
- Read phase routing in
client/src/App.jsx.
- Read state contract in
client/src/hooks/useGame.js.
- Inspect relevant page/component:
NightPhase.jsx for role actions.DayPhase.jsx and PlayerGrid.jsx for vote/day.WaitingRoom.jsx for room config.ResultScreen.jsx for reveal/end game.
- Check UI against
references/ui-checklist.md.
- Build after edits:
cd client && npm run build.
UI Rules
- Show the player's own role clearly in every active phase.
- Do not reveal hidden roles through target filtering, labels, or spectator data.
- For wolves, show teammates and current shared target.
- For Doctor, make self-save clear by labeling self as
(Bạn).
- For Witch, show potion availability and one-action-per-night rule.
- Disable or hide impossible actions instead of relying only on server errors.
- Timer labels and configured durations must match server phase timing.
- Keep buttons readable on mobile; avoid overlapping fixed elements.
References
Load references/ui-checklist.md when reviewing or changing UI.
