End-of-game controls
API
| Hook | Contract |
|---|---|
useMatchEnd() |
{ startsNextMatch: boolean; nextMatchPending: boolean; nextMatch: () => void; returnToGames: () => void }. For GameOver. |
Game over
When the match is finished and the board has shown every step (usePlayback().status is now), Boardweaver renders GameOver after the board, if the game exports it. The replay of a finished match never renders GameOver. It covers the board itself (for example position: "fixed", inset: 0) and offers the end controls:
export function GameOver() {
const end = useMatchEnd();
return (
<div role="dialog" style={{ position: "fixed", inset: 0 }}>
{end.startsNextMatch && (
<button onClick={end.nextMatch} disabled={end.nextMatchPending}>Next match</button>
)}
<button onClick={end.returnToGames}>Return to games</button>
</div>
);
}
Without a GameOver export, Boardweaver shows its own end screen with the results and the next-match and return buttons. Its score columns have no names, because the game logic names none: export GameOver to show what each column means. With one, Boardweaver shows nothing at the end, so GameOver must show the result. A match can also end without a winner when it is locked by an error, or when a player leaves it: usePlayers() then marks who left with abandoned, and isGameOver may still be false. Write the end screen for those cases too.
