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/topRail.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 web/src/topRail.js (limited to 'web/src/topRail.js') diff --git a/web/src/topRail.js b/web/src/topRail.js new file mode 100644 index 0000000..b6b50d7 --- /dev/null +++ b/web/src/topRail.js @@ -0,0 +1,114 @@ +import { LANGUAGE_ICON, FRIENDS_ICON } from './screens/icons.js'; +import { LANGUAGES, languageLabel } from './languages.js'; +import { getSettings, updateSettings } from './settings.js'; +import { renderThemeButton } from './themeButton.js'; +import { getUser, onAuthChange } from './auth.js'; +import { onCountsChange, getCounts } from './counts.js'; +import { attachTooltips } from './tooltip.js'; +import { escapeHtml } from './util.js'; + +// The top-right cluster: the typing language, the theme, and who you are -- +// Friends sits directly beside the account control because the two are the +// same thing, your identity and who it connects you to. These are the app's own chrome -- +// they belong together and away from the bottom rail's per-screen +// navigation. Screens with their own top-right controls (the typing screen's +// Restart and Zen Finish) pass them in as `extras` so everything shares one +// row instead of each fixed-positioning itself into a collision. +export function renderTopRail(root, { onShowAccount, onShowFriends, extras = [] } = {}) { + const wrap = document.createElement('div'); + wrap.className = 'top-rail'; + root.appendChild(wrap); + + for (const el of extras) wrap.appendChild(el); + + const langGroup = document.createElement('div'); + langGroup.className = 'lang-group'; + langGroup.innerHTML = ` + + + `; + wrap.appendChild(langGroup); + + const cleanupTheme = renderThemeButton(wrap); + + const friends = document.createElement('div'); + friends.className = 'friends-control'; + if (onShowFriends) { + friends.innerHTML = ``; + } + wrap.appendChild(friends); + + const auth = document.createElement('div'); + auth.className = 'auth-control'; + wrap.appendChild(auth); + + attachTooltips(wrap); + + // Language ------------------------------------------------------------ + const langPopover = langGroup.querySelector('.lang-popover'); + function paintLang() { + const current = getSettings().language || 'en'; + langGroup.querySelectorAll('.lang-item').forEach(item => { + item.classList.toggle('active', item.dataset.lang === current); + }); + langGroup.querySelector('[data-action="lang"]').dataset.tooltip = `Typing language: ${languageLabel(current)}`; + } + paintLang(); + langGroup.querySelector('[data-action="lang"]').addEventListener('click', e => { + e.stopPropagation(); + langPopover.hidden = !langPopover.hidden; + }); + langGroup.querySelectorAll('.lang-item').forEach(item => { + item.addEventListener('click', () => { + updateSettings({ language: item.dataset.lang }); + paintLang(); + langPopover.hidden = true; + }); + }); + + // Identity ------------------------------------------------------------ + function paintAuth() { + const user = getUser(); + auth.innerHTML = user + ? `` + : ` + `; + attachTooltips(auth); + auth.querySelectorAll('button').forEach(btn => { + btn.addEventListener('click', () => onShowAccount?.()); + }); + } + paintAuth(); + const unsubscribeAuth = onAuthChange(paintAuth); + + // Friends ------------------------------------------------------------ + const friendsBtn = friends.querySelector('[data-action="rail-friends"]'); + if (friendsBtn) friendsBtn.addEventListener('click', onShowFriends); + const friendsBadge = friends.querySelector('[data-badge="friends"]'); + function paintCounts({ friends: friendCount }) { + if (!friendsBadge) return; + friendsBadge.hidden = !friendCount; + friendsBadge.textContent = String(friendCount); + } + paintCounts(getCounts()); + const unsubscribeCounts = onCountsChange(paintCounts); + + const handleOutsideClick = e => { + if (!langPopover.hidden && !langGroup.contains(e.target)) langPopover.hidden = true; + }; + document.addEventListener('click', handleOutsideClick); + + return () => { + unsubscribeCounts(); + document.removeEventListener('click', handleOutsideClick); + unsubscribeAuth(); + cleanupTheme(); + wrap.remove(); + }; +} -- cgit v1.2.3