Sentence Sprint

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild a responsive single-page typing game titled “Sentence Sprint,” presented as a polished minimalist desktop/mobile web game. Use a warm off-white/beige background (#f6f2ea), dark charcoal text, cream-white cards with thin beige borders, rounded corners around 20–24px, and soft shadows. Use a bold heavy sans-serif brand header reading “Sentence” in charcoal and “Sprint” in coral-red, with the small uppercase subtitle “A TYPING RACE.” Keep the layout centered in a constrained shell, with the header above a race card and a large typing panel below; on narrow screens stack and resize controls cleanly.

At the top right show compact stat pills for ROUND (initially 1 / 5), WPM (initially 0), ERRORS (initially 0), and BEST (a persisted high score, initially 0). The race card contains setup controls: a player-name text input initially “player” (sanitize to letters/numbers/spaces/underscore/hyphen and limit to 14 characters), a pace select with easy, normal, and hard options (normal selected), and a challenge-mode select with standard and daily challenge (standard selected). Beneath these controls, show a horizontal two-lane race track with a subtle cream gradient, rounded border, dashed center divider, and a vertically striped finish line near the right edge. Label the upper lane “You” and the lower lane “Bot.” Represent the player as a coral circular runner with a small star symbol and the bot as a blue circular runner with a dot symbol; add a subtle shadow/foot-like shape below each. Center a dark “Start race” button over the track in a translucent blurred overlay before play.

The core game is a five-round typing race. Standard mode uses five sentences selected by difficulty. Easy sentences are short lowercase sentences such as “small steps make big changes.” and “you can do this.” Normal sentences are longer, such as “small steps every day turn into big adventures.” and “keep your eyes on the next word and trust your fingers.” Hard sentences include phrases such as “quick brown foxes jump over lazy dogs at sunrise.” and “the best typists balance speed, rhythm, and accuracy.” Every target is lowercase and includes punctuation. Daily challenge mode uses a pool of five daily-themed lowercase sentences, deterministically rotated according to the current YYYY-MM-DD date, and displays the date in the status line (for example, “daily challenge · 2025-01-01”).

Below the track, create a large cream typing panel. Render the current target sentence prominently in a large serif typeface. Each character is individually styled: correctly typed characters turn green, the current character is highlighted with a pale yellow/orange background, and untyped characters are muted gray. Spaces must remain visible as spacing. Under the prompt, provide a large multiline textarea with placeholder “Type the sentence here...”; it must be disabled until the race starts and have autocapitalize, autocorrect, and spellcheck disabled. As the player types, compare every new character against the target. If a character is wrong, increment the errors counter and immediately remove/reject the incorrect character back to the first mismatch, forcing exact sequential typing. Do not invent a backspace penalty; accuracy is encouraged by the hint “Tip: accuracy beats frantic backspacing.”

Show a coral progress bar beneath the textarea based on typed character count divided by the current sentence length. Beneath it show a status message and a character counter like “0 / 42.” Before starting, status says “Press Start, then type as fast as you can.” During a standard race say “Type the sentence exactly. Your rival is moving.” During daily mode show the daily challenge and date. Update WPM live using typed words divided by elapsed minutes, with a minimum elapsed time clamp so it begins at 0 and does not explode. The game’s displayed round advances from 1 / 5 through 5 / 5.

Animate the player runner along the upper lane according to typed character progress, while the blue bot advances continuously toward the finish independently of typing. Bot pace is difficulty-based: easy is slowest, normal is faster, hard is fastest, with a small random variation and a slight increase each round. If the player completes the current sentence, immediately proceed to the next round and reset the input, prompt progress, timer, and bot position. If the player completes all five sentences first, end in a win. If the bot reaches the finish before the player completes the current sentence, end in a loss. The race should stop input and animation at the result.

At game end, display a centered translucent result overlay inside the typing panel. On a win, title it with the sanitized player name followed by “wins!”, explain “Five sentences, one clean sprint.” or, for daily mode, “daily challenge complete · [date].” On a loss, title it “Photo finish — the bot got there first” and show “Accuracy is the shortcut. Try again and keep your rhythm.” Show the result WPM and total errors in the format “[number] WPM · [number] errors.” For wins, save the score locally and maintain a local top-five leaderboard sorted by highest WPM, breaking ties with fewer errors. Each leaderboard row shows player name, WPM, and either “daily” or the difficulty. Persist the best WPM locally and show “new high score!” when appropriate; otherwise show “best score: [number] WPM.” Include a dark “Race again” button, both in the panel action area and in the result overlay, which restarts setup/race while retaining the chosen controls. Use no external assets; the visual identity is entirely CSS, HTML controls, colored circular runners, typography, and subtle animation.