Type Clash

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.

Create a polished browser typing-race game titled “Type Clash,” presented as a single-page app with four views: lobby, room, race, and results. Use a dark navy/indigo visual theme with a subtle radial-gradient background, cyan and pink accents, pale text, muted blue-gray secondary text, rounded 18px panels, thin translucent borders, and soft shadows. The layout should be responsive and fit within a centered app frame. The header stays visible with the cyan uppercase brand “TYPE CLASH” on the left and the small uppercase label “PEER TYPING ARENA” on the right (hide the label on narrow screens).

Lobby view: show a large centered hero inside a dark rounded panel. The headline reads “Type fast.” on the first line and “Clash live.” on the second, with the second line in bright pink. Beneath it, explain that the player creates a room, shares the code, and types the same sentence faster than the other player. Provide a username text field and a room-code field, plus “Create room” and outlined “Join room” buttons. Use a small notice explaining that the match is intended for peer/WebRTC-style play and that typing data travels directly between browsers. Creating a room assigns the player host status and generates a short uppercase alphanumeric room code; joining validates an uppercase alphanumeric code 4–8 characters long and assigns guest status.

Room view: display the room code prominently in cyan, a “Copy invite” outlined button, and two player slots in a two-column card layout: host and guest, each showing player name and connection state. Show a status such as “Waiting for another player…” until both slots are occupied, then indicate that both players are connected. Include Leave and Start match buttons; Start match is disabled unless the current player is the host and a guest is present. Include a WebRTC connection status card with explanatory text. Support local room discovery/message exchange using the room identity and a direct data-channel/WebRTC-style connection concept; synchronize the selected phrase, player progress, names, and finish state between the two peers. The host selects one phrase at random from these exact options: “speed is a habit built one clean keystroke at a time”; “the fastest route is focus patience and a steady rhythm”; “every letter counts when the finish line is one sentence away”; or “small wins stack into momentum and momentum wins races”.

Race view: after starting, reset both players and show a short 450ms preparation delay, then begin the timer and focus the typing field. Present a compact three-part top bar: the player’s WPM, elapsed time in seconds, and accuracy percentage. Below it, show a large arena panel with two horizontal progress lanes. The first lane is YOU with a cyan gradient fill; the second is the opponent/PEER with a pink gradient fill. Each lane has a rounded dark track, a percentage at the right, and a small state label such as ready or typing. Update progress based on typed character count divided by the exact phrase length, capped at 100%, and send the opponent’s progress live so the rival bar moves independently.

Render the full selected phrase above the input, character by character. Characters correctly matching the typed prefix are green, the current character is bright with a pink underline, untyped characters are dim blue-gray, and mismatched typed characters are red. Provide a large dark text input with cyan border, disabled autocorrect/autocapitalization/spellcheck behavior, and placeholder “Type the sentence exactly…”. The player may type normally, including mistakes; do not prevent incorrect characters. Track typed count as input length and correct count by comparing each typed character to the corresponding phrase character. Display feedback: initially “Both players type the same sentence. First exact match wins.”, “Nice rhythm.” during normal typing, “Mistake detected — keep going.” when the newest character is wrong, and “Finished — waiting for the result.” when the exact phrase is entered. Continuously calculate WPM as corrected characters divided by five over elapsed minutes, accuracy as correct characters divided by typed characters (100% before typing), and elapsed time to one decimal place.

A player finishes only when their input exactly equals the complete phrase. Stop their animation loop, blur the input, send a finish message, and immediately show the results for the local winner; if the opponent’s finish arrives first, show the loss result. The win screen headline is “You win.” with a message that the opponent was close, while the loss headline is “You were beaten.” and says the opponent finished first. Show a three-column summary for WPM, accuracy, and time, and an emphasized “Back to room” button. Pressing Enter from results also returns to the room. Leaving a room returns to the lobby and clears the active room/connection state.

Keep the experience desktop-friendly but responsive: on small screens stack the setup cards and player cards, adapt the race top bar to two columns with the time centered above, reduce lane label widths and panel padding, and keep controls usable. The overall art direction is a clean competitive typing arena: no game-world characters or 3D camera, just high-contrast dashboard UI, glowing cyan/pink progress bars, typography-focused feedback, and a live head-to-head race presentation.