Lobby20

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.

Recreate "Lobby20" as a lightweight browser-based 3D multiplayer lobby, using a full-screen Three.js/WebGL canvas with a dark, minimalist first-person room and an HTML overlay HUD. The game is serverless: synchronize tabs/windows in the same browser profile with BroadcastChannel channels named from the lobby code; support up to 20 peers, presence, chat, heartbeat cleanup, and approximate position/orientation synchronization. Do not imply internet multiplayer or a backend.

When not connected, show a translucent dark rounded panel in the upper-left titled "Lobby20". Include a Name text input (maximum 18 characters), a Lobby code input (maximum 12 characters), and Create and Join buttons. Create generates a five-character uppercase lobby code using letters/numbers excluding ambiguous characters, fills the code field, and joins. Join uses the entered code and name, defaulting a blank name to "Player". Include the explanatory hint that this is a serverless demo and multiple tabs can simulate multiple people.

After joining, replace the join panel with a translucent lobby panel in the upper-left. Its top bar shows "Lobby", the current "Code: XXXXX", a Copy code button, and a red-accent Leave button. Below, use a two-column layout: a Players section with a live count formatted like 1/20 and a scrollable player list; each player row has a small hue-colored circular indicator, the name, "(you)" for the local player, and an online/idle badge based on recent heartbeat activity. The Chat section has a scrollable log with timestamp, sender name, and plain-text message, plus a text input capped at 200 characters and a Send button. Enter sends chat as well. Show system messages such as joining, leaving, copied code, and a full-lobby warning. Treat user strings as plain text, not HTML.

Render a simple enclosed 3D room behind the HUD. Use a 22 by 22 nearly black-blue floor at y=0 and four dark blue walls around x/z +/-11, approximately 8 units high. Use a dark navy background, subtle hemisphere lighting and a white directional key light with soft shadows. Add a faint glowing blue circular ring on the floor centered in the room, with radius approximately 3.5 to 4.1 and gently pulsing opacity. The visual style is sparse, moody, low-poly/blocky, and Minecraft-like rather than detailed or realistic; the reference view should feel like a dark empty room with the blue floor ring prominent.

Use a first-person camera with approximately 70-degree perspective, eye height 1.65, and hide the local avatar. A connected player spawns randomly on a ring roughly 3–5 units from the center and initially faces inward. Keep movement inside the room bounds around +/-10.2. On desktop, clicking the canvas requests pointer lock; mouse movement turns the camera, with yaw and pitch sensitivity, pitch clamped to about +/-1.2 radians, and Escape releasing pointer lock. Keyboard movement is intentionally disabled in this version, including desktop WASD and arrow keys. On touch/mobile devices, allow dragging on the 3D canvas to look around and show four on-screen hold buttons with arrows: up, left, down, right. The arrows move forward/back/strafe; movement is smooth with acceleration and speed around 4.2 units/second. Also show those controls on narrow viewports up to 900px wide. Do not add jumping, weapons, objectives, scoring, or combat.

Represent every remote peer as a simple block avatar made from shadow-casting boxes: a skin-colored 0.55 cube head around y=1.62, a colored 0.6 x 0.75 x 0.3 torso, two dark 0.25 x 0.65 x 0.25 legs, and a tiny skin-colored cube nose projecting forward. Give each remote avatar a shirt color based on a per-player random hue and a floating name label above it around y=2.35. Labels are canvas-texture sprites that face the camera, with a translucent dark rounded rectangle, subtle light border, small matching colored dot, and the player name in light bold text. Add simple alternating leg motion to remote avatars. Do not render the local body in first person.

Implement BroadcastChannel lobby behavior faithfully: announce hello with id, name, hue, position and yaw; send heartbeats roughly every 200ms; accept sync requests/responses for recently joined tabs; announce bye when leaving; soft-reject new peers when the roster reaches 20; remove remote peers after about 4.5 seconds without a heartbeat. Keep a persistent local client id and remember the last entered name in localStorage. On leaving, close the channel, clear players and chat, hide mobile controls, restore the join panel, and release pointer lock. Make the interface responsive: on screens under 640px stack the player and chat sections vertically, while retaining the dark translucent glass-like panels, rounded borders, muted light text, blue accent buttons, and red leave button.