Rust + WASM typing game. https://srdusr.com/git/typerpunk/atom?h=main 2026-03-05T14:54:00+00:00 2026-03-05T14:54:00+00:00 srdusr 99972264+srdusr@users.noreply.github.com 2026-03-05T14:54:00+00:00 urn:sha1:e3e7969c793fe6e20614e770e9ca5021246333a2 The banner. It was a full-width bar with its own background and border, which read as a second layer of chrome stretching past the content on both sides, and because it reserved height at the top of the page it pushed the wordmark out of the top-left corner and the icon rail down out of the top-right. It is just the unit now, centred, sharing that line with both of them. It is also thinner: a 468x60 full banner rather than a 728x90 leaderboard, and 320x50 rather than 320x100 on a phone. Both are standard units. At 90px the banner was deeper than the icon rail beside it, so it decided how far down the whole page began; at 60px it is shorter than the rail and the content offset is the rail's, not the banner's. The page below is unaffected by whether an advert is there at all. Below 980px the wordmark, the unit and the rail no longer fit on one line, so the banner drops beneath them and the content clears both. The mark. It was five shapes in a 32 pixel square: a chevron, an offset ghost copy of that chevron, a full-width baseline, and a large filled block. That is a drawing, not a mark, and the parts crowded each other so none of them read. It is two shapes now, a chevron and the underscore cursor after it, which is a shell prompt and the gesture anyone who has used a terminal recognises. The cursor blink faded to 0.15 opacity over an uneven 45/55 split, so it ghosted rather than blinked. A terminal cursor is a hard square wave: fully on, fully off, 530ms each way. Only the menu's title blinks now, because something blinking in the corner of every screen is a distraction. The menu title sat 16px right of the buttons underneath it. Centring the mark and the name together as one box put the name off-centre, and the absolutely-positioned mark overflowed the menu's padding, which moved the box itself. It is a three column grid now, the third empty and the same width as the first, so the wordmark is in the exact centre by construction with the mark to its left. Measured 0px offset at six widths. The corner wordmark is back on the menu. Leaving it off to avoid showing the name twice made it look like it had gone missing, and it is the way back to the menu from everywhere else, so it should be in the same place on every screen. Sound. The engine worked: one oscillator per keystroke, verified by counting them. It was off by default and its only control was a line inside the settings dialog, so the usual way to find it was to be told it existed. It is a speaker in the top rail now, cycling off, click and mechanical, and it defaults to mechanical. A browser will not start an audio context before a user gesture and the first keystroke is one, so the first tone plays with the first character: confirmed with a fresh profile under the default autoplay policy, context running, six tones for six keystrokes. The copies in the two settings panels are gone. One setting, one control. 3 browser tests pass, all 21 screen and viewport combinations clean, and the margin rails still appear only above 1424px. 2026-02-25T07:23:00+00:00 srdusr 99972264+srdusr@users.noreply.github.com 2026-02-25T07:23:00+00:00 urn:sha1:d7c1c7b35e9d0995eed41d437404d5255529cf17 Branding. The name was set in the body typeface and that was the whole of it. There is a mark now: a chevron, a baseline, and a block cursor resting on it, which reads as text being entered at a prompt and stays legible at 16 pixels. The chevron is drawn twice, the lower copy offset and in the secondary colour, which is the one stylistic note. The wordmark is split so the accent falls on the second half. Everything is drawn in the theme's own variables, so the mark follows the palette rather than carrying its own, and the favicon is the same drawing. The menu carried the name twice, as its own title and as the fixed corner mark. The corner mark exists for screens with no title of their own, so the menu keeps only the title, now the full lockup at size. The settings panel. Measured at 1280x900 it opened at y=506 with a height of 437, so it ran 140px past the bottom of a 900px window, and .app is overflow:hidden so there was nothing to scroll. It had no background either, so the fixed footer links rendered through the middle of it and, sitting higher in the stacking order, took the clicks: Playwright could not press the panel's own Close button because the footer intercepted every attempt. Both it and the custom text panel are dialogs now. Centred, opaque, above the fixed chrome, scrolling internally, with the page dimmed behind them. Their controls are buttons, but .quiet removes a button's border, so a panel of them read as a list of plain text labels with nothing to suggest any of it could be clicked. They keep an outline inside these panels. The checkbox was the browser's default control in a panel where nothing else was, and its border was too dark to see against the panel. Escape did not close either of them. The handler looked for .rail-settings-panel, which is a different panel on a different screen. A Dev section with a button that jumps straight to the results screen with invented figures was shipping to every visitor. It is limited to localhost. The top rail. The account control has moved into the icon row, right of Friends, and is the account's own picture once signed in: there is no avatar upload, so it is the initial over a colour hashed from the whole username, which gives every account a stable and distinct mark. Sign In and Sign Up sit on their own row beneath. The friends count is a badge under its icon rather than the words "2 online" beside it. That took the rail from 307px wide to 189px, which is what had been overlapping the wordmark by 75px at 390px. But it also made the rail taller, which put the close button back underneath it, so the rail now publishes its measured height and the content column starts below whatever that is. The rail is one row signed in and two signed out, so this is not a constant the stylesheet could hold. The wordmark was inline-flex, which blockified its two halves, so the name read as two lines to innerText: a screen reader, a copy-paste, or a test. The advertising slot has moved from inside the results screen to a banner across the top of the page, where a navigation bar usually goes. The header moves down to make room rather than being covered by it. It stays off the typing screen, the passive reader and the race lobby. Custom text: the panel had no title, and its hint was centred at 340px inside a 480px panel, which broke one sentence into three ragged lines. 3 browser tests pass. The store test now asserts the avatar replaces the sign-in links rather than expecting a button that has moved. 2025-09-13T19:11:00+00:00 srdusr 99972264+srdusr@users.noreply.github.com 2025-09-13T19:11:00+00:00 urn:sha1:0d3864bcebcdba1b1743367d0f84389fd53e37e1 End screen - Every figure is now a dim label directly over its value, the two centred on each other, grouped by what they qualify: RAW and PB under WPM, ERR and CONSISTENCY under ACC, KEYSTROKES and CHARACTERS either side of TIME. The row is a grid so TIME sits on the graph's exact centre line rather than drifting with its neighbours' widths. - Errors go back onto the wpm line. Their own y axis implied a magnitude a mistake does not have; what matters is when one happened. - Graph hover reads "wpm ... raw ... time" - the figures first, the second they happened in as the qualifier. Mode picker - Opens from the Single Player button itself, and choosing a mode starts it: picking what to type and starting it are one action. The control has now been a chevron notched into that button, a caption between the two buttons, a pill above them and a chip row below them; as the button's own menu it needs no separate real estate at all. Corners - Settings and Store move to the bottom-left. The top-left is the wordmark's alone. - The global racer count is gone from the home screen - it is not something you can act on there. The Friends control carries "N online" instead, which is. - Presence: users gain a last_seen column, touched at most once a minute per active user on any authenticated request, and the friends list reports who has been seen inside a five-minute window. Multiplayer race view - The standings move to the middle of the screen, the space the end screen's graph occupies, and now include your own row rather than opponents only. Pinned to the top-left corner they put what you are racing against in your peripheral vision and left out the one bar you most need to see. Programming mode - Snippets carry an explanation of what the code does. Shown under the passage while you type in single player; in multiplayer that space belongs to the standings, so it waits for the end screen, where it appears either way. 2025-09-11T19:53:00+00:00 srdusr 99972264+srdusr@users.noreply.github.com 2025-09-11T19:53:00+00:00 urn:sha1:a726d9f5fb56e1fd7983c5ac806d408ad78daa86 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.