Lobby Prototype

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 front-end-only Three.js game titled “Lobby Prototype,” with an offline simulated multiplayer lobby that transitions into a simple playable 3D arena. Use a full-screen WebGL canvas behind a clean dark HUD. The visual style is polished sci-fi UI: near-black/navy background, translucent blue-black panels with rounded 18px corners, subtle borders, blur, soft shadows, white text, muted gray secondary text, blue primary accents, yellow not-ready indicators, green ready indicators, and pink/red danger actions.

Lobby screen: keep a top-left pill badge reading “OFFLINE (SIM)” and a small top-right “?” help button. Center a large responsive translucent panel. Its header reads “LOBBY” in spaced uppercase lettering, with subtitle “Create or join a room,” and a room-code display on the right showing an em dash when no room exists. Below are two fields labeled “Your name” and “Room code”; default values are Player and an example placeholder/value ABCD. Add buttons “Create room,” “Join room,” and, when not currently in a room, a blue-accented “Start solo.” Also include “Copy invite link,” disabled until in a room.

Implement the local lobby state exactly as a simulation, not real networking. The user name is trimmed, defaults to Player, and is limited to 16 characters. Create Room generates a random four-character uppercase room code using letters/numbers that avoid ambiguous characters, marks the user as host, resets readiness, and adds simulated players Nova and Rook. Join Room accepts a nonempty alphanumeric code, uppercases it, and adds simulated Host (ready and host), the user, and Kite. Show toast messages for create/join/leave/copy/error actions. The room code can also be prefilled from a URL query parameter named room. Copy Invite Link copies the current URL with ?room=XXXX when possible.

Below a divider, show a two-column lobby area. The left section is titled “PLAYERS” and contains a bordered list of rows. Each player row has a small circular status dot, player name, “(you)” for the local player, a host star for the host, and a pill tag reading READY or NOT READY. Add the explanatory hint “This lobby simulates other players so the UX feels real.” The right section is titled “YOU” and contains a card with the user status dot, name, “Ready” or “Not ready,” and a “Ready” toggle button. Under it place a “Start (solo)” or “Start game” button as appropriate and a disabled-until-in-room “Leave room” danger button. In this offline prototype, starting is always allowed: outside a room the button says “Start (solo),” a host in a room sees “Start game” if everyone is ready or “Start anyway” otherwise, and a non-host sees “Start game.” Remote readiness should gently simulate over time: approximately every 700ms randomly flip one remote player’s ready state, with a small chance for host rooms to gain additional named simulated players up to five and a tiny chance for remote players to leave.

Behind the lobby, render an animated Three.js environment visible through the translucent panel: a very dark circular floor, a glowing electric-blue torus ring near the floor, and roughly 70 small floating faceted icosahedron crystals distributed around the scene at varying radii/heights. Give them blue-violet metallic/emissive materials, slight bobbing and rotation, and slowly rotate the background group. Use a dark foggy scene, soft hemisphere and directional lighting, and a very subtle drifting lobby camera.

The top-right help button opens a centered blurred modal titled “How this works,” with a Close button and explanatory copy that this is a front-end lobby prototype, room state is local, other players are simulated, Create generates a room and fake players, Join accepts a room code, and Start switches to a basic Three.js game scene. Clicking the backdrop closes the modal.

Game transition: clicking any start button hides the lobby panel and shows an “IN GAME” HUD. Build a simple dark-blue arena: a large flat square ground plane, a glowing/dark blue circular boundary torus around radius 18, and 14 evenly spaced dark cylindrical pillars around the perimeter at roughly radius 11.5–12.7. Place a single light-blue metallic/emissive rectangular cube avatar at the center. Add a centered white crosshair. Initially show a full-screen dim/blurred cutscene overlay with a small card reading “CUTSCENE,” “Entering the arena…,” and “Click / Space to skip” on desktop or “Tap to skip” on touch devices. The short entering overlay may be skipped by click, tap, Space, or Enter.

Desktop gameplay controls: WASD moves the cube relative to the camera view, mouse look is enabled by clicking to lock the pointer, and Shift increases movement speed. Show HUD text “Esc: Lobby” and “Arrow keys move · Mouse look · Shift sprint” (the implementation may accept WASD as the actual movement keys while retaining this displayed control hint). Movement speed is about 5.5, or 9 while sprinting, and clamp the player inside the circular arena at radius about 17.2. Use a smooth third-person camera following behind and above the cube, with a dark atmospheric fog. Escape returns to the lobby, restores the animated lobby background and camera, hides the game HUD, and exits pointer lock. Display brief rounded toast notifications such as “Click to lock mouse,” “Mouse locked,” and “Mouse unlocked.”

Touch/mobile gameplay: detect coarse pointer/touch devices, hide desktop pointer-lock behavior, show a lower-left four-button D-pad with ▲, ◀, ▶, ▼ for forward/left/right/back movement, and display “Drag anywhere to look.” Dragging on the canvas rotates the camera with constrained pitch. Show a “Lobby” button in the game HUD to return to the lobby. Use responsive layout: the lobby fields stack vertically on narrow screens, while the lobby remains centered and readable; preserve touch-action handling so dragging looks rather than scrolling. Keep all UI interactive elements above the canvas and use rounded translucent controls consistent with the dark sci-fi aesthetic.