Dead ends: a DeadEndPage with a board to play on for the not-found and error screens, and the recovery notices on AuthPage #458
Labels
No labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
spec
wayfinder:grilling
wayfinder:map
wayfinder:prototype
wayfinder:research
wayfinder:task
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
amaurycoudr/chess-project#458
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Problem Statement
A Player who follows a link to a Game or a profile the server does not hold, types an address no route matches, or hits a failure the router is left with, lands on a page that is almost empty. A short line sits in the middle of the window, or in its top-left corner for the last two cases, with no way onward except the navigation. At 1280 and 1920 px most of the screen is blank (spec #450, Further Notes > Layout audit).
The two notices of the password recovery have the same problem. A Player who asked for a reset link, or who opened one that no longer works, sees the "recovering" pitch and Morphy's board vanish. A narrow column is left on an empty page, so the screen jumps the moment the request goes through, and the next step is a muted link.
Solution
DeadEndPage, a fifth page template: an address that leads nowhere, or a failure. It shows a heading, why, the address the Player asked for when it helps, and the way onward. Beside it sits a board on which the Player can play a whole game of chess alone, from the starting position, kept nowhere. Game not found, Player not found, the page for an address no route matches, and the router's error screen all move onto it.AuthPage. The notice takes the form's place in the form column, under the same pitch and board. Its next step becomes a primary button, and its heading takes focus.The layout was settled with a three-variant prototype, and the owner picked A (Board split), with its still board replaced by a playable one. The variants live on the throwaway branch
prototype/dead-end-page; see Further Notes.User Stories
DeadEndPage screens
The board on a DeadEndPage
AuthPage notice states
Screens
Game not found (
/games/$id, a Game the server does not hold)Entry and exit: any link to a Game the server does not hold, such as a copied Game link cut short, an old link or a typed id. My games leads to
/games, Home leads to/. The site navigation stays as on every page.Template:
DeadEndPage. The board panel holds the playable board, and the text column holds the heading, the reason, the address asked for and the actions.Wireframe (1280 px, beside the 16 rem sidebar):
The panel (▓, the primary colour, as
AuthPage's pitch side) fills the full height. The board is as large asAuthPage's,min(28rem, 55dvh), centred in the panel. The text column is centred vertically, at most 28 rem wide. At 1920 px the split keeps its proportions and the board stops at its maximum, centred. On a phone the text block comes first and the panel follows with the board at full width.States:
Player not found (
/players/$username, a Username no Account uses)/.DeadEndPage, as Game not found.Unknown address (any address no route matches)
/.DeadEndPage, without the address asked for, since the address bar shows it.Error screen (a failure no route handles)
/.DeadEndPage. The text block is an alert, as today.Reset link sent (
/forgot-password, after the request went through)/sign-in.AuthPagewith the "recovering" pitch. The form column holds the notice in place of the form, and theelsewhereline is dropped because it would repeat the button.AuthPageas on the form, with the column reading "Reset your password", the sent notice and [ Back to sign in ]. On a phone, as the form: the pitch's line under the heading, no board.Reset link invalid (
/reset-password, a link that expired, was used or is unknown)/forgot-password.AuthPagewith the "recovering" pitch, the notice in the form column, noelsewhereline.Seams
apps/e2e: a Player opens a link to a Game that does not exist, sees Game not found and the id asked for, plays a move on the board, then follows My games. It covers the main story, story 1, from the browser's side, as well as through the view tests.The shared playable board gets no seam of its own. Morphy's finish keeps its existing tests on the sign-in page, which guard the extraction.
Implementation Decisions
DeadEndPageis a new template in the design system, next toPageFrame. It takes a heading, a reason, an optional address asked for, the actions (a primary one first), and the board panel as a slot. The design system imports no vertical, so a route or page fills the slot. Its heading is anh2, as the screens it replaces. Its root is the page'smain, and the error screen wraps its text block in an alert.game/from Morphy's finish: the board with click, drag and promotion resolution, and its legal-move, last-move and check marks, driven by a Game held in component state. Morphy's finish becomes a scripted use of it (its forced reply, its take-back of a move Morphy did not play). A free use plays both colours from the starting position, shows the ending's line and offers Play again. The ending's text reuses the Game-over wordinggame/already has, so a draw reads as on Local.useState: no Query, no zustand store, no procedure. Local's store is not reused.app/, built onDeadEndPage.AuthPagegains a notice state: the heading, the notice as a status region, and a primary action, in place of the form and theelsewhereline. The heading usesLandingHeadingwith focus asked.AuthNoticeis removed.game/has none.DeadEndPage, "an address that leads nowhere, or a failure: a heading, why, the way onward, and a board to play on". The rule edit is the owner's to make in a dedicated MR (CLAUDE.md); the implementing MR proposes it in its description.Testing Decisions
Out of Scope
/games/<malformed id>into the error screen for a stale Session: fixed separately in MR !558.PageFrameandGameScreen.Further Notes
DeadEndPage(A Board split, B Doors, C Centred notice) on the throwaway branchprototype/dead-end-page, switched with?variant=on Game not found, Player not found, the unknown address and the error screen. The owner picked A, with its still board of two bare kings replaced by a playable game from the starting position. The prototype's copy and its switcher are not to be folded in.PageFrameor the home's doors.AuthPagewith no prototype, since the template fits.game/serves Morphy's finish and the free board.implementon this spec.mentioned in commit
9e6fc7df2ementioned in merge request !559