diff options
| author | srdusr <[email protected]> | 2025-09-13 21:11:00 +0200 |
|---|---|---|
| committer | srdusr <[email protected]> | 2025-09-13 21:11:00 +0200 |
| commit | 0d3864bcebcdba1b1743367d0f84389fd53e37e1 (patch) | |
| tree | 54a5c028b9fe9b965ffc0240f734b2b5ac81046b /web/src/app.js | |
| parent | 29992fe40703cf567177d70f152811bfedb0caad (diff) | |
| download | typerpunk-0d3864bcebcdba1b1743367d0f84389fd53e37e1.tar.gz typerpunk-0d3864bcebcdba1b1743367d0f84389fd53e37e1.zip | |
Rework the end screen figures, mode picker, corners and race view
End screen
- Every figure is now a dim label directly over its value, the two centred on
each other, grouped by what they qualify: RAW and PB under WPM, ERR and
CONSISTENCY under ACC, KEYSTROKES and CHARACTERS either side of TIME. The
row is a grid so TIME sits on the graph's exact centre line rather than
drifting with its neighbours' widths.
- Errors go back onto the wpm line. Their own y axis implied a magnitude a
mistake does not have; what matters is when one happened.
- Graph hover reads "wpm ... raw ... time" - the figures first, the second
they happened in as the qualifier.
Mode picker
- Opens from the Single Player button itself, and choosing a mode starts it:
picking what to type and starting it are one action. The control has now
been a chevron notched into that button, a caption between the two buttons,
a pill above them and a chip row below them; as the button's own menu it
needs no separate real estate at all.
Corners
- Settings and Store move to the bottom-left. The top-left is the wordmark's
alone.
- The global racer count is gone from the home screen - it is not something
you can act on there. The Friends control carries "N online" instead, which
is.
- Presence: users gain a last_seen column, touched at most once a minute per
active user on any authenticated request, and the friends list reports who
has been seen inside a five-minute window.
Multiplayer race view
- The standings move to the middle of the screen, the space the end screen's
graph occupies, and now include your own row rather than opponents only.
Pinned to the top-left corner they put what you are racing against in your
peripheral vision and left out the one bar you most need to see.
Programming mode
- Snippets carry an explanation of what the code does. Shown under the passage
while you type in single player; in multiplayer that space belongs to the
standings, so it waits for the end screen, where it appears either way.
Diffstat (limited to 'web/src/app.js')
| -rw-r--r-- | web/src/app.js | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/web/src/app.js b/web/src/app.js index fac89d4..cc4e0d2 100644 --- a/web/src/app.js +++ b/web/src/app.js @@ -104,6 +104,15 @@ export function startApp(root, localTexts) { try { localStorage.setItem('typerpunk:last_mode', cat); } catch {} showMainMenu(); }, + // Picking a mode from the Single Player menu starts that mode -- + // choosing what to type and starting it are one action now, not a + // selection followed by a second click on the same button. + onPickAndStart: cat => { + selectedCategory = cat; + try { localStorage.setItem('typerpunk:last_mode', cat); } catch {} + session = { type: 'random', customIndex: 0 }; + startGame(); + }, customText, onLoadCustom: loaded => { customText = loaded; @@ -228,6 +237,7 @@ export function startApp(root, localTexts) { teardown(); let content; let attribution; + let explanation; let language; let progress; let timeLimit; @@ -272,6 +282,7 @@ export function startApp(root, localTexts) { // Code snippets highlight themselves; prose packs have no language // and fall through as plain text. language = item.language || undefined; + explanation = item.explanation || undefined; modeKey = `quote-${selectedCategory || 'random'}`; } @@ -288,6 +299,7 @@ export function startApp(root, localTexts) { game, text: content, attribution, + explanation, language, progress, timeLimit, |