TypeSprint

TypeSprint Used AI

4 devlogs
35h 41m
•  Ship certified
Created by PawiX25

A real-time multiplayer typing game built with vanilla JavaScript and WebRTC. Race against friends to see who can type faster with live progress tracking and instant feedback.

Timeline

Ship 1

1 payout of shell 265.0 shells

PawiX25

about 1 month ago

PawiX25 Covers 4 devlogs and 35h 41m

The biggest issue I tackled was a devastating error calculation bug that was completely ruining error detection. The original algorithm used a character-by-character comparison, which had a catastrophic flaw: after switching views or toggling the smooth cursor setting, typing anything would cause every subsequent character to be misaligned and counted as an error. This also caused the Net WPM to register as zero for the rest of the race. The bug was particularly problematic because it seemed like a UI issue when it was actually a fundamental calculation problem. I completely rewrote this using the Levenshtein distance algorithm, which properly calculates the edit distance and counts only actual mistakes rather than alignment issues. (The attached video demonstrates the first bug)

I also solved a frustrating cursor line-wrapping bug where text would flicker and wrap erratically during typing. I implemented a new smooth cursor system, eliminating layout interference entirely. Both cursor modes now use stable positioning logic.

For the AI text generation, I enhanced the prompts to be more specific and to strip unwanted formatting like quotes and introductory phrases. I also added an animated countdown system with scaling animations to make race starts more engaging and professional.

Finally, I created documentation with a detailed README covering features, and technical implementation

I transitioned the scoring system to Net Words Per Minute (Net WPM) to provide a more accurate and fair assessment of typing skill by factoring in errors. Alongside this, the post-race screen now clearly displays Net WPM and total errors, it gave it a complete overhaul. The old summary screen has been replaced with a much cleaner leaderboard that ranks players by performance. I also improved the personal performance chart. The hardest task I tackled was fixing a desynchronization bug that occurred when toggling the Scrolling View mid-race. My previous implementation would destroy and recreate the UI, causing the user's typed text to be lost visually and marking all subsequent characters as incorrect. To fix this, I refactored the logic to use a single, persistent text input that simply moves between two views. Now, instead of recreating everything, I just toggle the visibility of the views, which preserves the race state perfectly and makes the feature seamless and stable. Finally, I fixed a visual bug causing player cards to misalign. The issue stemmed from a conflict between grid styles in the static HTML and the dynamic JavaScript. I resolved it by removing the layout classes from the HTML, giving the JavaScript full control over the grid, which now aligns the cards correctly.

First, I updated the networking to support multi-player lobbies, so you can now race with more than just one friend. This involved creating a more robust system for the host to manage the game state and broadcast updates to everyone in the room.

I also added a fun new way to generate race texts. As the host, you can now write a prompt and use AI to generate a unique paragraph for everyone to type. Of course, you can still paste in your own text if you prefer.

The biggest new feature is the Scrolling View mode. You can enable it in the new settings panel. Instead of everyone having their own text box, all players now appear as cursors on a single, scrolling line of text, making it feel like a true head-to-head race.

Finally, to help you track your progress, I added a post-game performance graph. Once you finish a race, you'll see a chart showing how your WPM and accuracy changed over time.

Update attachment

First, I got the basic typing mechanics working.

Then, I knew it needed multiplayer to be fun, so I added a lobby system. Now you can create a game and have friends join with a code. Seeing everyone's progress in real-time was a key feature I added next.

The initial design was pretty basic, so I gave it a complete makeover with Tailwind CSS for a much cleaner, modern feel. I swapped out all the clunky browser alerts for sleek modals, added a proper game-over screen, and put in a countdown before each race to build anticipation.

After fixing a few bugs and polishing the gameplay, the project has evolved from a simple typing test into a fun, real-time multiplayer race.

Update attachment