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/README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 web/README.md (limited to 'web/README.md') diff --git a/web/README.md b/web/README.md new file mode 100644 index 0000000..afe57aa --- /dev/null +++ b/web/README.md @@ -0,0 +1,67 @@ +# TyperPunk Web + +A modern web-based typing test application, in plain HTML, CSS, and JavaScript, backed by the shared Rust/WASM game core. No npm packages, no bundler, no build step. This avoids pulling in the npm dependency tree entirely, which removes the main supply-chain attack surface a typical React/Vite frontend carries. + +Features: + +- Real-time WPM and accuracy tracking +- Ghost text typing interface +- Light/dark mode support +- Responsive design +- Modern UI with cyberpunk-inspired theme + +## Prerequisites + +- Rust and `cargo` (for the WASM game core) +- `wasm-pack` (installed automatically by `launch.sh` if missing) +- Node.js (used only to run the zero-dependency dev server and dataset scripts; no npm packages are installed) + +## Getting Started + +```bash +# From repo root: builds WASM, merges the dataset, and starts the dev server +./web/launch.sh +``` + +Opens http://localhost:4173 + +## Project Structure + +``` +web/ +├── src/ +│ ├── screens/ # Screen renderers (main menu, typing game, end screen) +│ ├── app.js # Top-level screen controller +│ ├── game.js # WASM game instance lifecycle +│ ├── chart.js # Canvas-based WPM/accuracy graph +│ ├── stats.js # WPM/accuracy calculation +│ ├── theme.js # Light/dark theme state +│ ├── main.js # Application entry point +│ └── styles.css # Global styles +├── wasm/ # WASM bindings, copied here by launch.sh (gitignored) +├── index.html # HTML entry point +└── serve.mjs # Zero-dependency static file server +``` + +## Development + +The project uses: + +- Vanilla JavaScript (ES modules), no framework or bundler +- The browser's native `` API for the results graph +- Node's built-in `http` module for local serving (`serve.mjs`) +- Plain CSS for styling + +Because there is no build step, editing a file under `src/` and reloading the page is the whole workflow. + +## Contributing + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add some amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request + +## License + +This project is licensed under the MIT License - see the LICENSE file for details. -- cgit v1.2.3