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/api.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 web/src/api.js

(limited to 'web/src/api.js')

diff --git a/web/src/api.js b/web/src/api.js
new file mode 100644
index 0000000..3651067
--- /dev/null
+++ b/web/src/api.js
@@ -0,0 +1,43 @@
+// Thin fetch wrapper for the typerpunk-server backend. Base URL is
+// same-origin by default (a reverse proxy is expected to route /api/* to the
+// backend in that setup); window.TYPERPUNK_API_URL overrides it for local
+// dev or any split frontend/backend hosting, mirroring the existing
+// window.TYPERPUNK_TEXTS_URL override pattern already used for the dataset.
+const BASE_URL = (typeof window !== 'undefined' && window.TYPERPUNK_API_URL) || '';
+
+export class ApiError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.status = status;
+    }
+}
+
+async function request(method, path, body) {
+    const res = await fetch(`${BASE_URL}${path}`, {
+        method,
+        credentials: 'include',
+        headers: body !== undefined ? { 'Content-Type': 'application/json' } : undefined,
+        body: body !== undefined ? JSON.stringify(body) : undefined,
+    });
+
+    let data = null;
+    try { data = await res.json(); } catch { /* empty body, e.g. logout */ }
+
+    if (!res.ok) {
+        throw new ApiError(res.status, (data && data.error) || `request failed (${res.status})`);
+    }
+    return data;
+}
+
+export const api = {
+    get: path => request('GET', path),
+    post: (path, body) => request('POST', path, body ?? {}),
+    delete: path => request('DELETE', path),
+};
+
+// For the rare case a caller needs a real page navigation instead of a
+// fetch - the Spotify OAuth login link has to be an actual top-level
+// navigation so the browser can load Spotify's own consent screen.
+export function apiUrl(path) {
+    return `${BASE_URL}${path}`;
+}
-- 
cgit v1.2.3