Party Lobby

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 browser-based game titled “Party Lobby,” a local-only party lobby prototype with no networking or server. Use a full-screen Three.js scene behind a dark translucent UI overlay. The background scene should be a simple 3D environment: a large flat dark navy floor extending into the distance, a subtle blue perspective grid on the floor, dark blue-black fog, and soft basic hemisphere plus directional lighting. Use a third-person elevated perspective camera positioned around (0, 7, 12), looking toward the floor. Keep the visual style clean, minimal, dark, and modern, with blue-purple atmospheric colors and bright accent colors.

The application has two modes: Lobby and Game. Start in Lobby. Center a responsive rounded rectangular panel over the scene, roughly 92vw wide with a maximum width around 980px, dark navy gradient fill, subtle light border, and deep shadow. Its header reads “Party Lobby” and below it “Local-only lobby (no server) — up to 10 players.” Put three buttons in the header: “Add Player,” “Clear,” and “Start.” Add Player creates a new player in the next available slot, up to 10 total, with a generated id, default name “Player N,” a distinct preset color, and ready=false. Disable Add Player at 10 players. Clear asks for confirmation (“Clear all players?”), and on confirmation removes all players. Start is a green-accented button and remains disabled unless there is at least one player, every player has a non-empty trimmed name, and every player is marked Ready.

Below the header, show contextual helper text: with no players, “Add at least one player to start.” If any name is blank, “Give every player a name — it helps.” If players are not all ready, “Everyone needs to be READY before you can Start.” Otherwise show “All set. Hit Start.” Display exactly 10 visible player slots in a responsive one-column layout on narrow screens and two-column layout on wider screens. Filled slots are dark translucent rounded cards with a numbered badge (1 through 10), an editable name text field limited to 16 characters, a native color picker, a clickable readiness pill, and a red-accented “Remove” button. The readiness pill says “READY” with green styling when ready, or “NOT READY” with pink/red styling when not ready; clicking it toggles the player’s ready state. The color picker changes that player’s color. Remove deletes that player and the remaining player array shifts into the next positions. Empty slots are visibly dimmed, say “Empty slot,” and show “Next player will join here” only for the next sequential slot; each has an “Add” button that is enabled only on the next available slot. Use a dark UI palette with light text, muted blue-gray helper text, blue default controls, green ready/start accents, and pink-red warning/remove accents. Buttons should have rounded corners, thin translucent borders, hover states, and disabled opacity.

Persist the lobby array in browser localStorage under a stable key such as “partyLobby.players.v1,” loading up to 10 valid saved player records on startup and falling back to an empty lobby. Persist edits, colors, readiness, additions, removals, and clearing. Sanitize loaded names to 16 characters and validate six-digit hex colors. The default preset palette should include colors similar to light blue, green, yellow, pink, purple, cyan, orange, lime, pale pink, and pale green.

When Start is pressed, switch to Game mode without leaving the page. Rebuild the 3D scene tokens for the currently joined players. Represent each player by a small colored sphere token arranged in two rows of five: x positions spaced about 1.6 units across, with the first row around z=-1 and the second around z=0.8; tokens sit slightly above the floor. Under every sphere, place a thin torus ring on the floor. The ring is green/emissive for Ready players and pink/red/emissive for Not Ready players. In Game mode, rotate the complete token group slowly around the vertical axis so the scene feels alive, while leaving the floor, grid, fog, and camera otherwise still.

In Game mode, show a compact HUD in the upper-left: a translucent dark rounded panel with the heading “Players (N/10)” and one row for every player, including a small colored dot and text in the form “Name — Ready” or “Name — Not ready.” Add a small lower-left help label reading “Esc: Back to lobby.” Pressing Escape returns to Lobby, preserving the current in-memory/localStorage player state. The game is controlled primarily with mouse clicks on the lobby controls, text input for names, the native color picker, and Escape in the game scene. Make the canvas full-screen, resize the Three.js renderer and camera responsively, and ensure the UI remains above the canvas and is only interactive where controls are visible.