From 24f1eb6cc611f458c45f0ac4046efce51211d7d3 Mon Sep 17 00:00:00 2001 From: srdusr <99972264+srdusr@users.noreply.github.com> Date: Sat, 6 Dec 2025 00:58:00 +0200 Subject: Fix content packs, seed the leaderboard, and add the missing site furniture Naming - "Typing Test" removed from the browser tab, the crate description and the READMEs. The scope outgrew it: solo practice, live races, code drills and adaptive weak-key training. Content - Movies was prose *about* film, not film quotes - the same mistake the programming pack had. Replaced with 28 attributed lines. New anime pack, 28 lines across 24 series. - This follows the model TypeRacer states outright ("type quotes from popular music, songs, anime, comic books and more"): short excerpts attributed to the work they came from. The scalable half of their approach is user submission with moderation, which is a feature this does not have yet. Leaderboard - An empty board tells a new player nobody is here. Bots now race the eight fixed-length leaderboard modes, seeded with a fortnight of backdated results on first run and one new result every 90 seconds after. - They are ordinary users carrying is_bot, returned by the same query and labelled "bot" in the UI. Seeding a board is reasonable; passing synthetic scores off as human results is not, so the flag travels with the row. - Seeding is checked per mode. A single result from the live ticker used to satisfy an "any bot results" guard and leave every other mode empty forever. Stats - The per-key accuracy data Practice mode is built on was computed, used to generate text, and never shown. The screen now ranks your weakest keys with the error rate and pause length behind each one. - Added recent form against your lifetime average, best accuracy, and tests this week. Multiplayer standings - Now place, racer, WPM, accuracy and time, with column labels - the columns TypeRacer and 10FastFingers both show. Site furniture - Share (Web Share where available, clipboard otherwise - no third-party button, no tracking script), a GitHub link, and a real privacy page written from what the code actually stores rather than from a template. Button hierarchy - Everything was an outlined box of roughly equal weight, so a screen's one real action, a settings toggle and a filter chip looked alike. Three tiers now: primary (filled, one per screen), default (outlined), quiet (toggles and filters, bordered only when hovered or active). --- web/src/styles.css | 181 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 178 insertions(+), 3 deletions(-) (limited to 'web/src/styles.css') diff --git a/web/src/styles.css b/web/src/styles.css index f7879e6..6a04db2 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -2538,7 +2538,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { by how much. */ .mp-standings { width: 100%; - max-width: 460px; + max-width: 560px; margin: 1.75rem auto 0 auto; display: flex; flex-direction: column; @@ -2556,7 +2556,7 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { .mp-standings-row { display: grid; - grid-template-columns: 1.75rem 1fr auto auto; + grid-template-columns: 1.75rem 1fr 3rem 3rem 4rem; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; @@ -2585,9 +2585,30 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { } .mp-standings-wpm, -.mp-standings-acc { +.mp-standings-acc, +.mp-standings-time { font-family: 'JetBrains Mono', monospace; white-space: nowrap; + text-align: right; +} + +/* Column labels, so the three numeric columns are readable without guessing + which is which. */ +.mp-standings-head { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--sub-color); + padding-bottom: 0.15rem; + border: none; +} + +.mp-standings-head span:nth-child(n+3) { + text-align: right; +} + +.mp-standings-max-width { + max-width: 560px; } /* Still typing: no place yet, so the row shows how far along they are. */ @@ -2745,3 +2766,157 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar { .stats-screen { position: relative; } + +/* The per-key weakness data Practice mode is built on. It drove text + generation but was never shown, so nobody could see what it had learned + about their typing. */ +.weak-key-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + width: 100%; +} + +.weak-key { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.15rem; + min-width: 3.25rem; + padding: 0.5rem 0.4rem; + border: 1px solid var(--neutral-color); + border-radius: 6px; +} + +.weak-key-char { + font-family: 'JetBrains Mono', monospace; + font-size: 1.15rem; + color: var(--primary-color); +} + +.weak-key-err { + font-size: 0.7rem; + color: var(--error-color); +} + +.weak-key-lat { + font-size: 0.65rem; + color: var(--sub-color); +} + +/* Recent form against the lifetime average. */ +.stat-trend { + font-size: 0.7rem; + margin-left: 0.3rem; + vertical-align: middle; +} + +.stat-trend.up { color: var(--primary-color); } +.stat-trend.down { color: var(--error-color); } + +/* Marks a leaderboard row as a practice opponent rather than a human result. + The board is seeded so a new player has something to measure against, and + saying so is the difference between seeding it and faking it. */ +.leaderboard-bot-badge { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--sub-color); + border: 1px solid var(--neutral-color); + border-radius: 4px; + padding: 0.1rem 0.35rem; +} + +.leaderboard-name:disabled { + cursor: default; + opacity: 1; +} + +/* A longer body than a one-line placeholder: keep its line breaks and give it + a readable measure. */ +.stats-placeholder.prose { + white-space: pre-wrap; + text-align: left; + max-width: 46rem; + line-height: 1.6; +} + +/* Source, privacy and share, at the foot of the menu. One line rather than a + page: there is little to say and a whole screen would overstate it. */ +.site-footer { + position: fixed; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + z-index: 90; + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 0.75rem; + color: var(--sub-color); +} + +.site-footer-link { + background: none; + border: none; + padding: 0.25rem; + font-family: inherit; + font-size: 0.75rem; + color: var(--sub-color); + text-decoration: none; + cursor: pointer; + border-radius: 4px; + transition: color 0.15s ease; +} + +.site-footer-link:hover { + color: var(--primary-color); +} + +.site-footer-sep, +.site-footer-version { + opacity: 0.6; +} + +/* ---- Button hierarchy ------------------------------------------------- + Everything was .menu-button, .menu-button.small or .menu-button.ghost -- + three variants that all render as an outlined box of roughly equal weight. + A screen's one real action, a settings toggle and a filter chip were + indistinguishable at a glance. + + Three tiers instead: + .primary the single action a screen exists for. Filled. + (default) supporting actions. Outlined. + .quiet toggles and filters, which are settings rather than actions. + No border until hovered or active. */ +.menu-button.primary { + background: var(--primary-color); + color: var(--background-color); + border-color: var(--primary-color); + font-weight: 700; +} + +.menu-button.primary:hover:not(:disabled) { + background: var(--secondary-color); + border-color: var(--secondary-color); + color: var(--background-color); +} + +.menu-button.quiet { + border-color: transparent; + color: var(--sub-color); + min-width: 0; +} + +.menu-button.quiet:hover:not(:disabled) { + background: none; + color: var(--text-color); + border-color: color-mix(in srgb, var(--primary-color) 35%, transparent); +} + +/* A toggle that is currently on reads as selected, not as pressable. */ +.menu-button.quiet.active { + color: var(--primary-color); + border-color: var(--primary-color); +} -- cgit v1.2.3