From a726d9f5fb56e1fd7983c5ac806d408ad78daa86 Mon Sep 17 00:00:00 2001 From: srdusr <99972264+srdusr@users.noreply.github.com> Date: Thu, 11 Sep 2025 21:53:00 +0200 Subject: Add multiplayer bots, typing languages, and rework the UI layout Multiplayer - Quick match: POST /api/multiplayer/quickmatch returns whichever room is still filling, or opens one. Players never see a room code; joining by code stays for racing specific people. - Bots fill quick-match rooms after a short wait so a new game is never an empty lobby. They only ever join quick-match rooms, never a room opened by code. One or two per room, drawn from separate ~40 and ~80 WPM tiers so two bots are never near each other's pace, and they stall to correct mistakes rather than typing a clean straight line. - Live player count via GET /api/multiplayer/online, shown on the Multiplayer control and under the main menu's Multiplayer button. - Per-racer colours: you are the theme accent, opponents take distinct hues that stay the same from lobby to race. - The countdown no longer holds the room lock for its full three seconds, which is what reset clients mid-countdown. Typing languages - 16 languages for the generated-word modes, each with its own high-frequency vocabulary rather than a translation of the English list. - Picker in the top-right rail; non-English uses its own list at every difficulty tier instead of falling back to English words. Fix UTF-8 accuracy in the game core - update_game_state mixed byte and character counts: total_characters_typed accumulated byte-length deltas while total_correct_characters compared a char index against that byte count. Equal on ASCII, so it went unnoticed; a correctly typed Spanish passage scored 6%. The old byte slicing would also have panicked if an index landed inside a multi-byte character. Rewritten char-based, with regression tests. Programming mode - Replaced prose about programming with real code: 26 syntax-highlighted snippets across JavaScript, Python, Rust, C/Go/Java and shell. Single-line by necessity, since the typing input is a single-line field. Layout and readability - One icon rail arrangement on every screen: Settings/Store under the wordmark, Language/Theme/Friends/Account top-right, Stats/Leaderboard/ Multiplayer bottom-right. - Main menu: mode picker moved out of the Single Player button, which it was notching a divider through and pushing the label off-centre. - Escape returns to the menu, closing any open popover first, and confirms before abandoning a live race. - Split --text-color and --sub-color per theme; they shared one value that measured 3.65:1 against the background, below the 4.5:1 body-text floor. - Semantic colours used in exactly one place each: gold for a personal best, amber for the race countdown and the mobile-result badge. - Passage now sits in the same place on the typing and end screens, and its column is a whole number of characters wide so wrapping cannot leave a permanent gap on the right. - End screen: keystrokes and a correct/wrong/extra/missed split, attribution carried over from the typing screen, and a graph with a separate error axis, axis titles including seconds, and smoothed lines. --- web/src/theme.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 web/src/theme.js (limited to 'web/src/theme.js') diff --git a/web/src/theme.js b/web/src/theme.js new file mode 100644 index 0000000..686572b --- /dev/null +++ b/web/src/theme.js @@ -0,0 +1,66 @@ +export const Theme = { Light: 'light', Dark: 'dark' }; + +// Full theme catalog for the gallery. Light/Dark stay the two the corner +// toggle button cycles between; the rest are only reachable from the +// gallery, matching how most typing sites treat "light vs dark" as the +// quick switch and everything else as a deliberate pick. +export const THEMES = [ + { id: 'dark', label: 'Dark', dark: true, primary: '#00ff9d' }, + { id: 'light', label: 'Light', dark: false, primary: '#067a4e' }, + { id: 'dracula', label: 'Dracula', dark: true, primary: '#bd93f9' }, + { id: 'nord', label: 'Nord', dark: true, primary: '#88c0d0' }, + { id: 'solarized', label: 'Solarized', dark: true, primary: '#268bd2' }, + { id: 'gruvbox', label: 'Gruvbox', dark: true, primary: '#fabd2f' }, + { id: 'monokai', label: 'Monokai', dark: true, primary: '#a6e22e' }, +]; + +export function isDarkTheme(id) { + return THEMES.find(t => t.id === id)?.dark ?? true; +} + +const STORAGE_KEY = 'theme'; +const listeners = new Set(); + +let theme = localStorage.getItem(STORAGE_KEY) || Theme.Dark; + +// The custom cursor is a per-theme accent, not a fixed brand mark - a +// hardcoded color would sit oddly on Dracula/Nord/etc, so it's regenerated +// from each theme's own primary color instead. Plus-reticle crosshair, not a +// circle - the rest of the UI (buttons, icons.js's angular sun/moon) is all +// sharp corners, and a round cursor read as off-brand next to it. The gap at +// the center (arms don't meet) is what makes it read as a scope reticle +// rather than a plain plus sign. +function cursorDataUri(color) { + const svg = ``; + return `url("data:image/svg+xml;base64,${btoa(svg)}") 10 10, auto`; +} + +function apply(value) { + document.documentElement.setAttribute('data-theme', value); + if (document.body) { + const t = THEMES.find(x => x.id === value); + document.body.style.cursor = cursorDataUri(t ? t.primary : '#00ff9d'); + } +} +apply(theme); + +export function getTheme() { + return theme; +} + +export function setTheme(id) { + if (!THEMES.some(t => t.id === id)) return; + theme = id; + localStorage.setItem(STORAGE_KEY, theme); + apply(theme); + for (const fn of listeners) fn(theme); +} + +export function toggleTheme() { + setTheme(theme === Theme.Light ? Theme.Dark : Theme.Light); +} + +export function onThemeChange(fn) { + listeners.add(fn); + return () => listeners.delete(fn); +} -- cgit v1.2.3