WPM Graph, Daily Streaks, and a Few Other Things
Big results screen update this week. The game-over modal used to show four numbers and a "Try Again" button. Now there's a graph, a streak tracker, a share button, and the whole thing scrolls so you can actually see everything on mobile.
WPM Graph
After every typing test, the results screen now shows a line graph of your WPM over time. There's a faint accuracy line behind it in orange. The whole thing is canvas-drawn, theme-aware, with a gradient fill under the WPM curve and smooth quadratic interpolation between data points.
A flat "67 WPM" number doesn't tell you much. The graph shows you the slow first few seconds while your fingers found the rhythm, the dip where you hit a hard word, the recovery. It turns a score into something you can actually read.
Every second, the timer pushes current WPM and accuracy into arrays. When the test ends, a canvas function draws the data with proper DPI scaling so it looks sharp on retina screens. X-axis is time, Y-axis auto-scales to your peak WPM. About 120 lines of drawing code total.
Daily Streak
Play at least one game per day and your streak counter goes up. Miss a day, it resets. Shows up in the results modal with a fire icon next to the count, plus your all-time longest streak for reference.
Stored in localStorage as a single key with three fields: last play date, current streak, longest streak. Uses your local timezone. If you play three games on Tuesday, it counts as one day. If you play Wednesday, it goes to 2. Skip Thursday, back to 1.
Personal Best Challenge
When you finish a game and didn't beat your record, a line shows up: "Your best was 67 WPM. Beat it." Mode-specific and difficulty-specific. Your Words/Standard record doesn't appear when you're playing Sentences/Hard. Doesn't show when you just set a new record because that would be weird.
Welcome Back Message
Open TypeVelocity after being away and you'll see a toast: "Yesterday you hit 71 WPM. Today?" Uses the existing encouragement toast system, shows 2 seconds after page load, only appears when your last session was on a different day. Small touch.
Rank-Up Celebrations
Ranking up used to just change the badge text. Now it does three things: a seven-note ascending arpeggio through Web Audio (C5 to C7 with a shimmer chord), a colored glow pulse on the modal matching your new rank, and confetti raining through the results screen. Thirty particles in six colors with random rotation and fall speed.
I went back and forth on the confetti. Kept it. Ranking up from Walker to Jogger should feel different from a normal game ending.
Shareable Result Card
There's a "Share Result" button now. Generates a 600x340 dark-themed PNG with your name, WPM, accuracy, streak, rank, and the TypeVelocity URL. On mobile it opens the native share sheet so you can send it to X, Discord, WhatsApp, wherever. Desktop downloads the image.
The card always uses the dark theme regardless of your setting. Dark cards just look better when shared.
Scrollable Results
With all this new stuff, the modal got tall. On shorter screens it was clipping off the bottom. The results modal now scrolls with a minimal scrollbar. Graph, stats, streak, share button, countdown toggle, try again button -- all accessible regardless of screen height.
Should have done this earlier honestly. Even before the graph, the expanded "Show More" stats section was pushing the reset button off-screen on some phones.
What's Next
The results screen is in a good place now. Next priority is probably the typing experience itself. I've been looking at the word generation for Hard mode and thinking the 6% hard word rate could use some tuning. We'll see.
If you want to follow along or have opinions about what should ship next, the Discord is open.