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/screens/endScreen.js | 20 ++++++++++++++++---- web/src/screens/leaderboardScreen.js | 9 ++++++--- web/src/screens/mainMenu.js | 25 ++++++++++++++----------- web/src/screens/multiplayerScreen.js | 3 ++- web/src/screens/placeholderScreen.js | 2 +- web/src/screens/statsScreen.js | 30 ++++++++++++++++++++++++++++++ 6 files changed, 69 insertions(+), 20 deletions(-) (limited to 'web/src/screens') diff --git a/web/src/screens/endScreen.js b/web/src/screens/endScreen.js index 2b859bb..086407c 100644 --- a/web/src/screens/endScreen.js +++ b/web/src/screens/endScreen.js @@ -2,6 +2,7 @@ import { buildGraphPoints, buildErrorPoints, drawChart, hitTestError, hitTestLin import { escapeHtml } from '../util.js'; import { attachTooltips } from '../tooltip.js'; import { onThemeChange } from '../theme.js'; +import { renderSiteFooter } from '../siteFooter.js'; import { recordResult } from '../pb.js'; import { recordTest } from '../profileStats.js'; import { renderCornerRail } from '../cornerRail.js'; @@ -9,7 +10,7 @@ import { renderTopRail } from '../topRail.js'; import { submitTestResult } from '../auth.js'; import { detectDeviceType } from '../deviceDetect.js'; -export function renderEndScreen(root, { stats, text, attribution, explanation, standings, onStandingsUpdate, onLeaveRace, userInput, charTimings, keypressHistory, modeKey, onPlayAgain, onMainMenu, onShowStats, onShowPlaceholder, onShowAccount, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowStore }) { +export function renderEndScreen(root, { stats, text, attribution, explanation, standings, onShowPrivacy, onStandingsUpdate, onLeaveRace, userInput, charTimings, keypressHistory, modeKey, onPlayAgain, onMainMenu, onShowStats, onShowPlaceholder, onShowAccount, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowStore }) { // Monkeytype's four-way split. "Extra" is anything typed past the end of // the passage, "missed" is passage left untyped - neither is visible in // a plain correct/incorrect pair, and the two mean very different things @@ -82,7 +83,7 @@ export function renderEndScreen(root, { stats, text, attribution, explanation, s
` : ''}
- +
`; @@ -93,12 +94,20 @@ export function renderEndScreen(root, { stats, text, attribution, explanation, s const standingsRows = root.querySelector('.mp-standings-rows'); function paintStandings(list) { if (!standingsRows) return; - standingsRows.innerHTML = list.map(r => ` + // Place, who, speed, accuracy, time - the columns TypeRacer and + // 10FastFingers both show after a race. Anyone still typing has no + // place or time yet, so their row carries how far along they are. + standingsRows.innerHTML = ` +
+ RacerWPMAccTime +
+ ` + list.map(r => `
${r.place ? r.place : '·'} ${escapeHtml(r.name)}${r.me ? ' (you)' : ''} - ${Math.round(r.wpm)} wpm + ${Math.round(r.wpm)} ${r.place ? `${Math.round(r.accuracy)}%` : `${Math.round(r.percent)}%`} + ${r.place && r.time != null ? `${r.time.toFixed(1)}s` : 'racing'}
`).join(''); } @@ -129,6 +138,8 @@ export function renderEndScreen(root, { stats, text, attribution, explanation, s attachTooltips(root.querySelector('.end-screen-stat-row')); const cleanupTheme = renderTopRail(root, { onShowAccount, onShowFriends }); + // Share here carries the result just achieved, not just the site. + const cleanupFooter = renderSiteFooter(root, { result: stats, onShowPrivacy }); root.querySelectorAll('[data-action="menu"]').forEach(el => el.addEventListener('click', onMainMenu)); root.querySelector('[data-action="again"]').addEventListener('click', onPlayAgain); @@ -247,6 +258,7 @@ export function renderEndScreen(root, { stats, text, attribution, explanation, s offStandings?.(); onLeaveRace?.(); cleanupTheme(); + cleanupFooter(); window.removeEventListener('resize', redraw); offTheme(); canvas.removeEventListener('mousemove', handleMove); diff --git a/web/src/screens/leaderboardScreen.js b/web/src/screens/leaderboardScreen.js index 2288400..5d56a97 100644 --- a/web/src/screens/leaderboardScreen.js +++ b/web/src/screens/leaderboardScreen.js @@ -34,7 +34,8 @@ export function renderLeaderboardScreen(root, { onBack, onShowPublicProfile, onS ${state.entries.map((e, i) => `
#${i + 1}
- + + ${e.is_bot ? `bot` : ''} ${e.device_type === 'mobile' ? `mobile` : ''}
${Math.round(e.wpm)} wpm
${Math.round(e.accuracy)}%
@@ -51,9 +52,9 @@ export function renderLeaderboardScreen(root, { onBack, onShowPublicProfile, onS

Leaderboard

- ${MODES.map(m => ``).join('')} + ${MODES.map(m => ``).join('')}
- +
`; @@ -97,6 +98,8 @@ export function renderLeaderboardScreen(root, { onBack, onShowPublicProfile, onS deviceFilterBtn.addEventListener('click', () => { desktopOnly = !desktopOnly; deviceFilterBtn.textContent = `Devices: ${desktopOnly ? 'Desktop only' : 'All'}`; + // A filter that is doing something should look like it is. + deviceFilterBtn.classList.toggle('active', desktopOnly); deviceFilterBtn.classList.toggle('ghost', !desktopOnly); load(); }); diff --git a/web/src/screens/mainMenu.js b/web/src/screens/mainMenu.js index d0553c3..cc30bfa 100644 --- a/web/src/screens/mainMenu.js +++ b/web/src/screens/mainMenu.js @@ -6,6 +6,7 @@ import { getProfileStats } from '../profileStats.js'; import { attachTooltips } from '../tooltip.js'; import { wordListTiers } from '../wordGenerator.js'; import { renderTopRail } from '../topRail.js'; +import { renderSiteFooter } from '../siteFooter.js'; function label(m) { if (m === 'random') return 'Random'; @@ -67,7 +68,7 @@ function wordListTierLabel(tier) { } export function renderMainMenu(root, props) { - const { onStartGame, onPickAndStart, categories, selectedCategory, onSelectCategory, customText, onLoadCustom, onClearCustom, onStartCustom, onStartPassive, onShowStats, onShowPlaceholder, onShowAccount, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowLyrics, onShowStore, onSimulateTest } = props; + const { onStartGame, onPickAndStart, onShowPrivacy, categories, selectedCategory, onSelectCategory, customText, onLoadCustom, onClearCustom, onStartCustom, onStartPassive, onShowStats, onShowPlaceholder, onShowAccount, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowLyrics, onShowStore, onSimulateTest } = props; const modes = ['random', 'words', 'time', 'zen', 'practice', ...categories, 'custom']; // The picker used to be one flat list of 18 entries mixing two unrelated // things: how a test is generated (Random/Words/Timed/Zen/Practice/Custom) @@ -140,7 +141,7 @@ export function renderMainMenu(root, props) { Start directly into a game, skip this menu -
@@ -148,20 +149,20 @@ export function renderMainMenu(root, props) {
Rules
- ${isWords ? `` : ''} - ${isTime ? `` : ''} - - - + ${isWords ? `` : ''} + ${isTime ? `` : ''} + + +
` : ''}
Typing
- - - - + + + +
@@ -211,6 +212,7 @@ export function renderMainMenu(root, props) { attachTooltips(root); const cleanupTheme = renderTopRail(root, { onShowAccount, onShowFriends }); + const cleanupFooter = renderSiteFooter(root, { onShowPrivacy }); // Friends-online lives in the top rail beside the Friends control. @@ -514,6 +516,7 @@ export function renderMainMenu(root, props) { return () => { cleanupTheme(); + cleanupFooter(); document.removeEventListener('keydown', handleEnterToStart); outsideClickHandlers.forEach(h => document.removeEventListener('click', h)); }; diff --git a/web/src/screens/multiplayerScreen.js b/web/src/screens/multiplayerScreen.js index 59c4b3f..ba051c6 100644 --- a/web/src/screens/multiplayerScreen.js +++ b/web/src/screens/multiplayerScreen.js @@ -63,7 +63,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o
- +
or race friends
@@ -283,6 +283,7 @@ export function renderMultiplayerScreen(root, { onBack, onFinish, onShowStats, o place: done ? done.place : null, wpm: done ? done.wpm : (progressById[p.id]?.wpm || 0), accuracy: done ? done.accuracy : null, + time: done ? done.time : null, percent: done ? 100 : (progressById[p.id]?.percent || 0), }; }).sort((a, b) => { diff --git a/web/src/screens/placeholderScreen.js b/web/src/screens/placeholderScreen.js index 4375b8d..e03dabf 100644 --- a/web/src/screens/placeholderScreen.js +++ b/web/src/screens/placeholderScreen.js @@ -15,7 +15,7 @@ export function renderPlaceholderScreen(root, { title, description, onBack, onSh

${escapeHtml(title)}

-
${escapeHtml(description)}
+
${escapeHtml(description)}
`; diff --git a/web/src/screens/statsScreen.js b/web/src/screens/statsScreen.js index a76cbca..9b00181 100644 --- a/web/src/screens/statsScreen.js +++ b/web/src/screens/statsScreen.js @@ -1,6 +1,7 @@ import { CLOSE_ICON } from './icons.js'; import { getProfileStats } from '../profileStats.js'; import { getAllPersonalBests } from '../pb.js'; +import { getWeakCharDetails } from '../keyStats.js'; import { escapeHtml } from '../util.js'; import { drawProgressChart } from '../chart.js'; import { renderCornerRail } from '../cornerRail.js'; @@ -24,6 +25,19 @@ function formatDate(ts) { export function renderStatsScreen(root, { onBack, onShowPlaceholder, onShowAccount, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowStore }) { const profile = getProfileStats(); const bests = getAllPersonalBests(); + const weakKeys = getWeakCharDetails(8); + + // Derived from the stored history rather than kept as separate counters, + // so these stay correct for anyone who already has a history recorded. + const history = profile.history || []; + const recent = history.slice(-10); + const recentAvg = recent.length ? Math.round(recent.reduce((a, h) => a + h.wpm, 0) / recent.length) : 0; + const bestAcc = history.length ? Math.round(Math.max(...history.map(h => h.accuracy))) : 0; + const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000; + const thisWeek = history.filter(h => h.date && new Date(h.date).getTime() >= weekAgo).length; + // Recent form against the lifetime average: the single most useful thing + // a stats page can tell you is whether you are getting better. + const trend = recentAvg && profile.averageWpm ? recentAvg - profile.averageWpm : 0; root.innerHTML = `
@@ -39,6 +53,9 @@ export function renderStatsScreen(root, { onBack, onShowPlaceholder, onShowAccou + + +
` : `
No tests completed yet - finish a test to start tracking stats.
`} @@ -55,6 +72,19 @@ export function renderStatsScreen(root, { onBack, onShowPlaceholder, onShowAccou ` : `
No personal bests recorded yet.
`} + ${weakKeys.length ? ` +

Weakest keys

+
What Practice mode targets. Ranked by how often you mistype a key and how long you pause before it.
+
+ ${weakKeys.map(k => ` +
+ ${escapeHtml(k.char)} + ${Math.round(k.errorRate * 100)}% + ${Math.round(k.avgLatency)}ms +
+ `).join('')} +
` : ''} +

Progress

${profile.history.length > 1 ? `
` -- cgit v1.2.3