srdusr
aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/app.js
diff options
context:
space:
mode:
authorsrdusr <[email protected]>2025-09-13 21:11:00 +0200
committersrdusr <[email protected]>2025-09-13 21:11:00 +0200
commit0d3864bcebcdba1b1743367d0f84389fd53e37e1 (patch)
tree54a5c028b9fe9b965ffc0240f734b2b5ac81046b /web/src/app.js
parent29992fe40703cf567177d70f152811bfedb0caad (diff)
downloadtyperpunk-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.js12
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,