| Age | Commit message (Collapse) | Author | Files | Lines |
|---|
|
The store read its catalogue from the server and rendered nothing without
one: a heading, a sign-in prompt and an empty page, which reads as a fault
rather than as a shop that needs an account.
It now falls back to a copy that ships with the client, the same arrangement
the text packs already use: bundled here, served from the database, and the
served copy wins. With no server the store shows all 26 cosmetics, 4 bundles
and 6 merchandise items at their real prices.
Nothing pretends to work. The buy controls become a "Soon" label rather than
a button, because offline there is nothing to buy with and nowhere to sign in
to: sending someone to the account screen would be sending them to another
screen that needs the server they have not got. A line at the top says the
shop is not open yet.
scripts/export_store.js regenerates the file. Run it after changing prices or
adding items. It shells out to psql so it needs no dependencies, matching the
other scripts here.
Verified both ways. With no backend: 26 items, 4 bundles, 6 merch, 36 Soon
labels, no live buy controls, no page errors. With the backend running: the
same catalogue, 37 live buy controls, no Soon labels, no offline notice. 3
browser tests pass.
|
|
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.
|
|
Merchandise. Shirts, mugs and deskmats, sold through the same hosted
checkout. Physical goods differ from cosmetics in three ways the schema had
to carry: they have a size to choose, they need an address, and payment
unlocks nothing. What a paid order produces is an obligation to pack and post
something.
The address is collected by Stripe on its own page and arrives here on the
webhook, so no postal detail is ever entered on this site. Postage is a
separate line item rather than folded into the price. A size is checked
against the sizes the item actually comes in, on the server as well as in the
browser, so a request naming anything else is refused rather than quietly
posted as a medium.
/api/admin/orders lists what has been paid for and not yet sent, and the
Contribute screen shows an administrator the same list with the address and a
button to mark each one posted. Without that the list of what is owed lives
only in the processor's dashboard. Shipping is limited to 21 countries, which
is a list of places somebody is willing to post to, not a technical limit.
The race view. The sprite sat still at the left of a 6px bar, which made the
one thing a player owns and can see the least visible part of the race. It
rides the track now, moving with progress, on a dashed line that reads as
road ahead with the trail behind it. The field is 1040px wide rather than
680, the sprites are 30px rather than 18, and each row carries its own
percentage as well as its speed.
Advertising. Two 160x600 rails in the page margins, shown only above 1424px,
which is the width at which they fit beside the widest content column without
crowding it. Below that they do not exist. They follow the same rules as the
banner: never while typing, never for a supporter.
--border-color was used in five places and defined in none. An undefined
custom property invalidates the whole declaration at computed-value time, so
every one of those borders fell back to currentColor: bundle cards, merch
cards, the size buttons and the settings checkbox all had borders that were
either invisible or faint text-coloured lines. It is defined now, derived
from each theme's neutral so it tracks the palette.
.settings-hint caps itself at 340px, which is right under a heading and wrong
for a line introducing a full-width grid.
Verified against a real database: the catalogue endpoint, a shirt refused
without a size, a shirt refused with a size it does not come in, a valid size
and a no-variant mug both reaching checkout, 404 on an unknown item, 401
unauthenticated, and 401 on the admin orders list without the role.
24 Rust tests, 3 browser tests, and all 21 screen and viewport combinations
clean.
|
|
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.
|
|
The dataset's median passage was 69 characters, about twelve words, which is
over in twelve seconds at an ordinary speed. Some packs were worse: shell had
a median of 46 and a shortest entry of 17. That is the reason packs felt
small. It was not the number of entries, which was 15 to 37 per pack, but the
length of each one.
Multiplayer had already hit this and worked around it: load_race_texts
filters to 120 characters or more. That filter left only 61 of 350 passages
eligible, 38 of them from two packs, so races repeated constantly and four
packs could never come up at all.
Both halves are fixed.
Content: 104 longer passages added across every pack. The command packs get
whole pipelines rather than single flags, which is how the tools are actually
used and what the explanations were always for. Prose packs get passages that
run 150 to 320 characters.
Selection: a floor of 120 characters. Prose packs draw from their long
entries where a pack holds at least five, so no pack is reduced to the same
few passages. The command packs chain consecutive entries into one drill,
which is the natural shape for them, and the explanations are collected so
each line is still described.
Measured over 400 draws per pack, every category now runs a median of 146 to
218 characters with a shortest draw of 120. The race pool went from 61 of 350
to 130 of 454.
Attribution: 24 passages had none and displayed nothing at all under the
text. They now say Unknown, which is the honest answer for a fact written for
the pack, and the pangram is credited as one. The results and typing screens
both fall back to Unknown rather than rendering an empty line, and the pack
name is shown beside the source.
Multiplayer results, three fixes:
- PB never appeared. A race has no mode of its own, so modeKey was undefined,
so recordResult never ran. Races share one key, because the passage is
whatever the server dealt and a per-passage best would never be beaten.
- Play Again started a solo test. A race carries standings and a solo run does
not, so the results screen can tell them apart and now queues for another
race. The end screen's own cleanup leaves the old room first.
- CONSISTENCY was the longest label on the screen and made the accuracy
column wider than the WPM column opposite it. It reads CON.
RaceText carries the pack name so the results can show it for a race the same
way single player does.
24 Rust tests and 3 browser tests pass.
|
|
The catalogue served every price as $0.00. The Cosmetic struct typed
price_cents as i64 against an INTEGER column, so sqlx refused the decode and
unwrap_or_default turned the failure into a zero. Nothing was logged. The
whole store read as free while the database held the real prices.
Decode errors are now returned rather than defaulted away, and create_session
refuses any amount at or below zero, so a price that fails to decode cannot
become a session that grants an item without charging.
Layout, all measured in a real browser at 1280, 820 and 390 pixels:
- The close button sat underneath the fixed top rail. The rail reaches into
the content column on any viewport under about 1350px, so the overlap was
there for nearly every visitor. The button starts below the rail now.
- The wordmark and the top rail overlapped by 75px at 390px. Both are fixed
to the top of the viewport and neither knew about the other. Both give
ground on narrow screens, and Sign Up drops out of the rail because Sign In
reaches the same screen.
- Store rows were 93px tall for one line of content, because .menu-button
carries a vertical margin meant for a stacked menu. Twenty six items came
to 2400px of scrolling. Rows are 47px and the page is 2467px rather than
3784px.
- .stats-screen centres its children, so any child without a declared width
shrink-wraps. That left the sign-in box at 415px, the bundle grid at 488px
(which collapsed it to a single column) and the leaderboard table at 498px,
all inside a 636px column. Every screen was swept for the same defect.
.account-panel is the one narrow child that is deliberate: it declares
max-width 360px because a sign-in form should not be 636px wide.
- Leaderboard rows had a hard 461px minimum from fixed column widths, so at
390px the row ran from x=-36 to x=426 and the date column was cut off the
side of the screen. The date is hidden on narrow viewports.
- The profile links in the leaderboard were 21px tall, under the 24x24
minimum target size, and they are the only route to a player's profile.
Sprites never showed as equipped: the store compared the equipped caret and
flair but not the sprite.
The store test bought items by clicking Buy, which used to grant them for
nothing. It now asserts that Buy does not grant, then grants the items the
way a signature-verified webhook would, and goes on to check that an equipped
caret colour reaches the typing screen.
All 21 screen and viewport combinations are clean for overlap, overflow,
clipped content and target size. 3/3 browser tests pass.
|
|
The store had 26 items, a price on each and a working equip flow, but the
purchase endpoint granted ownership without taking any money. Anyone signed
in could take the whole catalogue for nothing. That endpoint is now gone.
Payment goes through Stripe Checkout, which is hosted by Stripe. The buyer is
redirected there and comes back, so no card details reach this server and it
stays outside PCI scope.
Three rules hold the money path together:
- The price comes from the server's own catalogue row. The client sends an
item id and never an amount.
- Nothing is granted at checkout. The item appears only when a webhook
arrives with a valid HMAC-SHA256 signature, checked in constant time
against a 5 minute timestamp window.
- Fulfilment keys off the processor's session id, which is UNIQUE, so a
webhook delivered twice cannot grant the same item twice.
Prices now vary by item. Every caret cost the same as every other because
they are the same thing in a different colour, which left nothing to save
for. Carets run 149 to 349, flair 129 to 299, and sprites 249 to 399, since a
sprite is the one cosmetic every other racer sees.
Four bundles sit above the catalogue, each priced below the sum of its parts:
Starter Kit, Neon Set, Racer Set and The Lot. The saving is computed from the
current item prices rather than asserted, so it cannot drift. The Lot is
defined as every cosmetic rather than a fixed list, so it stays complete as
items are added.
Three bugs found while wiring this up:
- Sprites never showed as equipped. The store compared the equipped caret and
flair but not the sprite.
- Supporter status was a stored boolean that was set on payment and never
cleared, so a 30 day subscription lasted forever. Both read paths now
derive it from the expiry.
- sqlx::migrate! reads the migrations directory at compile time, but cargo
watches source files only. Adding a migration did not trigger a rebuild, so
the binary shipped the old migration set and the schema change never ran.
A build.rs now declares the dependency.
Verified against a real database: bundle maths, the grant statement and its
replay, 401 unauthenticated, 404 on unknown ids, 501 with no Stripe keys, and
both already-owned refusals.
|
|
Design tokens
- The stylesheet had five corner radii in use with no rule for which applied
where, so a button was square while the input beside it was rounded and the
icon button next to that was something else again. Two tokens now: --radius
for controls, --radius-panel for the surfaces they sit on.
- One border weight. Buttons were 2px and inputs 1px, which made a field and
its own button read as different weights of the same idea. The two start
buttons keep 2px, where it is doing work.
- Letter-spacing was 1px, 2px, 3px and 4px with no rule behind it. Now 1px
for small caps labels and 2px for button text.
- Removed the .ghost modifier. After the hierarchy pass it rendered
identically to .quiet, so the two were one control under two names. Its
uses were toggles, which .quiet plus .active already expresses.
Racer sprites
- Six sprites in the same angular language as the rest of the icon set, one
per racer in the lobby and the race. A race reads as characters moving
rather than as coloured lines with names attached. Assigned from the
server's player order, so every client draws the same person as the same
character without needing to agree on anything.
Store
- Six items to twenty-six, across three slots. Race sprites join carets and
flair as a third slot, with the equipped sprite stored per user. Nothing is
required to race: an unequipped player keeps the sprite their position in
the room assigns.
Advertising space
- Reserved, empty, and loading nothing. The slot exists so that adding a
network later cannot push the page around when the tag loads. Shown to
signed-out visitors and to accounts without the supporter flag, on the end
screen only: interrupting somebody mid-test is the one placement that would
cost more than it earns.
- No ad code is included, and none can be added without three deliberate
changes recorded in adSlot.js: the CSP forbids third-party script, frame
and image sources; the privacy page states there is no advertising and no
third-party script; and an ad network brings consent requirements that this
app has no mechanism for. Verified after this change that the only external
request the page makes is still fonts.googleapis.com.
|
|
- The room code field was a 94px box with a clipped placeholder: twice the
height of the name field above it, and the largest control on the screen
for the smallest input on it. align-items: stretch was inflating it from a
natural 46px, and the field was sized to whatever width was going rather
than to the five characters a code actually is. It is now 9ch wide and
matches the height of the Join button beside it, which is sized to match it
in turn rather than being a full-size action.
- The multiplayer screen was the only one reachable from the rails without a
close control. Both of its views have one now.
|
|
End screen
- There was an auto-fit routine that forced this screen into one viewport: it
shrank the graph to a 120px floor, trimmed the Play Again margin, then
capped the passage box at 80px with its own scrollbar. On a 650px window
that left the passage 80px tall and clipped, and the graph 120px, which are
the two things the screen exists to show. Removed. The page scrolls
instead, which is the right trade for a screen that is read rather than
acted on under time pressure.
- The screen is a flex column, so its children also shrank by default once
the content was taller than the viewport. The passage, graph, stat row and
standings no longer shrink, and the chart has a floor below which it stops
carrying information.
Bottom chrome
- The keyboard hint and the footer links were both fixed at bottom centre and
overlapped at every window size. The hint now sits above the footer.
- Normal-flow content could end up underneath the fixed footer and the corner
rails. One --bottom-chrome variable reserves that space on every screen.
- On a narrow screen the footer grows to the full width once its links wrap,
so at 375px it ran through both corner rails and covered Play Again, which
made the button unclickable. The chrome stacks there instead: rails on the
bottom line, footer above them, hint above that.
Mode picker
- It ran to the last pixel of the window at every size. It now keeps clear of
the bottom edge, and opens upward when a short window leaves more room
above than below.
Responsive
- Checked at nine viewports from 1920x1080 down to 375x667: no horizontal
overflow and nothing off-screen on the menu, the typing screen or the end
screen.
Configuration
- dotenvy searches upward from the working directory, so crates/server/.env
was only found when starting the server from that directory. The repository
root is tried as well, which is where it is usually started from.
- .env.example and the README explain where secrets belong: the environment,
a gitignored .env for local work, and EnvironmentFile or a platform secret
store in production. Also what to do if one is exposed.
- TYPERPUNK_ADMIN_USERNAME and TYPERPUNK_ENV are documented rather than left
to be discovered in the source.
|
|
Dependencies
- The server build carried 37 known advisories, including RUSTSEC-2024-0363
in sqlx 0.7, which is the database layer. sqlx moved to 0.8 with
default-features off, which also drops the MySQL and SQLite drivers and
with them rsa and RUSTSEC-2023-0071. reqwest moved to 0.12, which brings
hyper 1.x and was the sole source of every remaining advisory: h2 0.3,
rustls-webpki 0.101, rustls-pemfile 1.0 and idna 0.3.
- The server build now reports no known vulnerabilities against OSV. cargo
audit itself would not compile, so the check queries OSV with the crate
versions cargo tree reports for the server binary.
- Cargo.lock is committed. This workspace produces binaries, so the lockfile
is what makes a deployed build reproducible and the audit above meaningful.
Headers
- The application sent no security headers at all. The static server now
sends a Content-Security-Policy, nosniff, frame options, a referrer policy
and a permissions policy; the API sends a policy of its own, since it
serves JSON and should load and frame nothing.
- The one inline script in index.html moved to a file so script-src needs no
unsafe-inline. WebAssembly needs wasm-unsafe-eval, without which nothing
types at all, so that is present and explained.
- Five style attributes moved to the CSSOM rather than adding unsafe-inline
for styles. A style attribute in markup is refused by the policy; the same
property set through element.style is not.
Production configuration
- With TYPERPUNK_ENV=production the server refuses to start if COOKIE_SECURE
is off, if DATABASE_URL is still the development default, or if
FRONTEND_ORIGIN is http on a non-local host. These were warnings, and a
warning in a log nobody reads is not a safeguard.
Administration
- Moderators were appointed with psql. There is now an admin role,
bootstrapped from TYPERPUNK_ADMIN_USERNAME at startup, and a UI to appoint
and remove moderators. An administrator's own role cannot be changed
through the API, so a mistake cannot lock everyone out of moderation.
Corpus
- scripts/export_approved.js writes approved submissions back into
data/packs/community-*.json. Approved passages are served from the database
and merged at startup, so without this the repository dataset and the live
corpus drift apart, and a fresh checkout or the TUI sees only what shipped.
Documentation
- README rewritten for the repository: what it does, how to run it, the pack
format, the server variables, deployment, and what the security posture
actually is. Plain English, no em dashes, no emoji.
Checked and found already correct: every private endpoint refuses anonymous
callers, session cookies are HttpOnly and SameSite=Lax, CORS names a single
origin, internal errors are logged rather than returned, and every query is
parameterised.
|
|
Submissions
- POST /api/texts proposes a passage; nothing reaches players until a
moderator approves it. GET /api/texts serves the approved set, which the
client merges on top of its bundled packs at startup.
- Validation the server enforces rather than trusts: category from a fixed
list, 40 to 600 characters, no control characters (a newline makes a
passage untypeable in a single-line input), attribution length, and a
unique index on md5(lower(btrim(content))) so the same passage cannot be
submitted twice under different whitespace or casing.
- Moderation is a flag on users. The queue and the review endpoint both
refuse a non-moderator, and reviewing an already-reviewed submission is a
404 rather than a silent second write.
- Submissions are rate limited per user: enough for a real contributor, not
enough to fill the queue from a script.
- A Contribute screen carries the form, your own submissions with their
status, and - for moderators only - the review queue.
This is the half of TypeRacer's model the packs could not reach by authoring:
their corpus is roughly twelve thousand passages, grown by submission.
Custom text as a study tool
- Imported documents are kept between visits, with how far through each one
you are. Custom text lived only in memory, so importing a set of notes and
reloading the page lost them - fine for pasting a paragraph to race,
useless for working through a file over several sittings.
- Position is recorded when a segment is finished, not when the next is
started, so closing the tab after a segment does not lose it.
- Markdown is chunked as markdown: fenced code blocks are kept whole and
typed line by line, and the decoration - hashes, asterisks, backticks,
link brackets, table pipes - is stripped so what you retype is the
material rather than the punctuation around it.
- Everything stays on the device. Notes are not uploaded anywhere.
Fixed while doing it: a chunk could contain a newline, which cannot be typed
in a single-line input at all. Any paragraph with a line break inside it --
ordinary in notes and in wrapped prose - produced an unfinishable segment.
Whitespace inside a chunk is now flattened.
|
|
PostgreSQL
- sqlx switched from the sqlite feature to postgres; the server now runs on
Postgres 18 and the SQLite file is gone.
- 95 placeholders renumbered from ? to $N.
- REAL widened to DOUBLE PRECISION: Postgres REAL is float4 and will not
decode into the f64 the code reads.
- flagged and is_bot are real BOOLEANs rather than 0/1 integers, with the
decode side reading bool.
- The leaderboard's derived table gained the alias Postgres requires, its
flag comparisons became boolean predicates, and INSERT OR IGNORE became
ON CONFLICT DO NOTHING.
- u32 binds cast to i64; Postgres has no unsigned integer types.
- Integration tests run against a real database - Postgres has no in-memory
mode - each in a throwaway schema, with search_path set per connection
because it is session state and the pool opens more than one.
- Timestamps stay TEXT for now and LISTEN/NOTIFY is still unused; both are
recorded in TODO-postgres.md rather than left implied.
Custom text and lyrics, checked rather than assumed
- Custom files never reach the server: they are read in the browser through
the File API, so there is no upload, no path handling and no remote file
inclusion to have. Verified by driving a hostile file - markup in the body
and in the filename - all the way onto the typing screen: it renders as
literal characters, no nodes are created, nothing executes, and the
filename is escaped in the attribution too.
- That test found a real regression: picking Custom from the new mode picker
selected it without ever starting it, so the mode was unstartable.
- /api/lyrics fixes its upstream host, so it cannot be pointed elsewhere, but
it was an unbounded relay: now rate limited per IP, with length caps on
artist and track and a ceiling on the response body it will read.
Hacking mode
- 22 single-line drills across recon, web, memory safety, exploit
development, crypto, post-exploitation and defence, each syntax
highlighted and each explaining what the line actually does.
All 19 modes verified to start, render and be typable.
|
|
Naming
- "Typing Test" removed from the browser tab, the crate description and the
READMEs. The scope outgrew it: solo practice, live races, code drills and
adaptive weak-key training.
Content
- Movies was prose *about* film, not film quotes - the same mistake the
programming pack had. Replaced with 28 attributed lines. New anime pack,
28 lines across 24 series.
- This follows the model TypeRacer states outright ("type quotes from popular
music, songs, anime, comic books and more"): short excerpts attributed to
the work they came from. The scalable half of their approach is user
submission with moderation, which is a feature this does not have yet.
Leaderboard
- An empty board tells a new player nobody is here. Bots now race the eight
fixed-length leaderboard modes, seeded with a fortnight of backdated results
on first run and one new result every 90 seconds after.
- They are ordinary users carrying is_bot, returned by the same query and
labelled "bot" in the UI. Seeding a board is reasonable; passing synthetic
scores off as human results is not, so the flag travels with the row.
- Seeding is checked per mode. A single result from the live ticker used to
satisfy an "any bot results" guard and leave every other mode empty forever.
Stats
- The per-key accuracy data Practice mode is built on was computed, used to
generate text, and never shown. The screen now ranks your weakest keys with
the error rate and pause length behind each one.
- Added recent form against your lifetime average, best accuracy, and tests
this week.
Multiplayer standings
- Now place, racer, WPM, accuracy and time, with column labels - the columns
TypeRacer and 10FastFingers both show.
Site furniture
- Share (Web Share where available, clipboard otherwise - no third-party
button, no tracking script), a GitHub link, and a real privacy page written
from what the code actually stores rather than from a template.
Button hierarchy
- Everything was an outlined box of roughly equal weight, so a screen's one
real action, a settings toggle and a filter chip looked alike. Three tiers
now: primary (filled, one per screen), default (outlined), quiet (toggles
and filters, bordered only when hovered or active).
|
|
Countdown
- Five seconds instead of three, and shown over the passage on the race
screen rather than in an empty lobby. New ServerMessage::RaceText carries
the text (and its attribution) just before the countdown starts, so every
client can put it on screen and let players read the opening words while
the numbers run - what TypeRacer and 10FastFingers both do. Typing is
locked until Start lifts the gate.
- Two subscriptions had to move with it. Building the race view tears the
lobby down, and the lobby owned the only handlers for Countdown and Start,
so the count stopped arriving exactly when it was needed and the gate would
never have lifted.
- The TUI and Steam clients match ServerMessage exhaustively, so both gained
an arm for the new variant; whole workspace checks clean.
Multiplayer attribution
- Race passages now carry who wrote them, so a race shows its source the way
single player always has. Previously the server sent bare strings and both
the race and its end screen showed nothing.
Navigation
- Every screen's full-width "Back" button becomes a close control at the top
of the content. The wordmark and Escape already went back, so it was a
third way to do the same thing and the least reachable of them.
- The multiplayer screen had a Back button on top of that; gone.
Fixes
- The end screen graph is drawn into a canvas, so it cannot inherit a theme
change the way the rest of the page does. It now redraws on one - switching
theme used to leave the chart in the old palette.
- .stats-empty was align-self:flex-start inside a centred column, so "Sign in
to add friends" sat on a different axis from its own Sign In button.
- The store showed a sign-in prompt instead of its catalogue, so nobody could
see what signing in would get them. The catalogue now renders signed out,
with prices, behind a sign-in note.
- The room code field is sized for the five characters a code actually is,
and Join carries the same weight as the field it belongs to.
|
|
Standings on the end screen
- A race used to end on your own numbers alone. The end screen now shows the
whole field, filling in live as the slower racers come home.
- Two teardown paths were killing the feed it depends on. app.js tears the
race screen down before rendering the end screen, and that ran both the
inner cleanup (unsubscribing progress and finished) and the outer one
(closing the socket). Your own PlayerFinished arrives from the server a
moment after your finish callback runs, so nobody - including you - ever
got a place. The screen now marks the feed as handed off and leaves it to
the end screen, which drops it on its own teardown.
More racers
- Up to four bots per room instead of two, biased towards a fuller lobby.
With four, picking one of two speed tiers put pairs on top of each other,
so a bot now takes a pace at least 9 wpm clear of every other bot in the
room, drawn from the whole slow-to-fast span. Accuracy tracks speed rather
than being rolled independently, which had been pairing 80 wpm with 88% and
35 wpm with 99%.
Lobby
- The countdown is the whole screen for its three seconds, instead of a small
number under a large disabled button. Quick match says "Finding a race"
rather than offering a room code to share that nobody needs.
Controls
- Keyboard focus was invisible almost everywhere: only two inputs and the
theme toggle had a :focus rule, and four other controls set outline:none
outright. A :focus-visible ring now covers every interactive control,
drawn as a box-shadow so it survives those declarations.
- Disabled buttons no longer keep the filled hover state of a live primary
action, placeholders have a defined colour rather than a per-engine
default, inputs gained hover feedback and a consistent width, and pressed
controls acknowledge the press.
|
|
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.
|
|
- Settings and Store move onto the wordmark's own line. Stacked beneath it
they pushed into the space the passage needs and read as a second,
unrelated column.
- The live player count moves to the bottom-left beside a Multiplayer icon,
as readable text ("5 racing") rather than a corner badge. As a badge it was
a bare digit with nothing saying what it counted, sharing a corner with two
other buttons.
- Bottom-right is now just Stats and Leaderboard.
- Mode selection becomes a row of chips below both start buttons. It has been
three things before this: a chevron notched into the Single Player button,
a caption wedged between the two buttons, and a pill sitting on top of them.
As its own row it reads as a setting for the run rather than part of the
button stack, and every common mode is one click instead of a dropdown
away. The eleven topic packs stay behind a "Text" chip.
- "Multiplayer" becomes "Multi-Player", so the two buttons read as a pair.
|
|
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.
|