PingRoom

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 responsive web app called “PingRoom,” a cozy dark social chat interface rather than an action game. Use a three-column desktop layout centered in the viewport: a left sidebar about 290px wide, a flexible central chat, and a right sidebar about 300px wide. On screens below 1000px hide the right sidebar; below 680px hide the left sidebar and use the chat full-screen. The overall visual style is dark navy/charcoal with subtle radial/linear gradients, thin blue-gray borders, rounded cards and controls, soft shadows, and mint/cyan/blue accents. Use a system sans-serif font, bright pale text, muted blue-gray secondary text, and glowing mint status dots.

Left sidebar: at the top show a gradient mint-to-blue rounded-square logo with a lightning-like “↯” mark, the title “PingRoom,” and subtitle “chat beyond the feed.” Below it show the current user card with generated/uploaded avatar, name “You,” green “online now” status, and an edit pencil button. Add a rounded room search input with a magnifying-glass glyph and placeholder “Search rooms.” Add a prominent “⌁ Discover people” button. Under the uppercase label “YOUR ROOMS,” list selectable room buttons with icon tiles, room name, one-line subtitle, and a glowing online dot. Include these initial rooms: “Lounge / general” / “A friendly place to share a thought” / ✦ / 12 members; “Art lab” / “Sketches, pixels, experiments” / ◈ / 8; “Sound check” / “Trade tracks and voice notes” / ♫ / 6; and “Cozy corner” / “Slow chat for late nights” / ☾ / 4. The active room has a darker blue highlighted background. Search filters rooms by name and subtitle, and clicking a room changes the center content.

Center chat: show a 76px header with the room icon, room title, room subtitle, and a pill at right reading “● Firebase offline” initially. Clicking that pill opens an optional Firebase connection modal; if valid Firebase web config, email, and password are supplied, support email/password sign-up or sign-in and Firestore real-time synchronization per room, changing the pill to “● Firebase live.” Without Firebase, everything remains a local browser demo. Below the header show a scrollable message timeline with a centered uppercase “TODAY” divider. Render chat messages as rounded bubbles with avatar, sender name, body, and small timestamp. Incoming bubbles are slate blue with a slightly asymmetric lower corner; messages from the current user are right-aligned, cyan/teal gradient bubbles with the mirrored corner treatment. The initial Lounge timeline must visibly contain: Mira at 10:14 saying “Welcome to PingRoom ✨ Share a thought, a picture, or a tiny audio note.”; Juno at 10:16 saying “This space feels like a little digital café.”; and You at 10:17 saying “That is exactly the vibe I was hoping for.” Use generated initial avatars with colored rounded-square backgrounds and initials when no profile image exists. Keep the timeline scrolled to the newest message.

At the bottom of the center column create a composer panel with buttons “▧ Image” and “◉ Record audio,” a hint “Your messages stay in this demo,” a multiline textarea placeholder “Write a message…,” and a gradient “Send ↗” button. Sending nonempty text adds a right-aligned message from the current profile with the current time, clears the textarea, and in offline Lounge mode causes Mira to automatically respond after about 700ms with “I like that. Keep going ✨”. Pressing Enter sends unless Shift is held. The Image button opens an image file picker; load the selected image as a data URL and post it as a user image message with its filename caption. The Record audio button requests microphone access and records with MediaRecorder; while recording, change its label to “■ Stop recording,” use a red/danger treatment, and show “Recording… tap stop when you are done.” On stop, post a playable audio-note bubble using the recorded blob URL and restore the button/hint. If microphone access fails, post an audio-note placeholder, show “Microphone access was unavailable — demo tone added,” and play a short 520Hz tone. Audio bubbles have a circular play button, a mint-to-light-blue waveform bar, and “audio note” label.

Right sidebar: show a centered profile card with a large rounded avatar, current display name, bio “Making little corners of the internet feel human.”, and buttons “Edit profile” and “Copy ID.” Below show uppercase “PEOPLE IN THIS ROOM” and member rows for Mira (“Tiny drawings, big feelings,” orange avatar, online), Juno (“collecting interesting sounds,” purple avatar, online), and Sol (“here for the cozy vibes,” pink avatar, away with yellow dot). Below that show “ROOM VIBES” and pill tags “friendly,” “creative,” and “low pressure.” The profile edit action should open a modal titled “Customize your profile” with display-name input (max 24), bio input (max 80), image file input, Cancel, and mint Save profile buttons. Saving updates all displayed avatars/name/bio and persists the profile locally. Copy ID copies an @ handle made from the lowercase name without spaces and temporarily changes its label to “Copied!”

Implement local persistence using browser localStorage for the profile, messages, and Firebase config. Seed additional rooms with these offline messages: Art lab has Sol at 09:42 saying “Post your weirdest color combo.”; Sound check has Juno at 09:12 saying “I left a voice note in the chat — tap play when you have a minute.” plus an audio note at 09:13; Cozy corner has Mira at 08:51 saying “Soft lighting, warm drinks, no pressure.” Each room begins with a centered TODAY divider. Support room switching and dynamic rendering.

Implement the “Discover people” modal as a tall rounded dark overlay titled “DISCOVER PEOPLE,” “Find your next chat,” and explanatory text about vertical swiping. Display a large portrait-style card with generated colored initial avatar/art, bottom dark gradient, person name and age, bio, and tag chips. Cycle through these local demo profiles: Ava, 22, “I make tiny games, collect odd stickers, and love rainy walks.” tags game maker/cozy/art; Leo, 24, “Music, street photography, and conversations that go somewhere.” tags music/photos/curious; Nori, 21, “Learning animation and looking for kind people to share ideas with.” tags animation/creative/kind; Sam, 26, “Coffee nerd. I will absolutely send you a voice note about my cat.” tags voice notes/cats/coffee. Include Pass and gradient “Say hi” buttons, a close X, and vertical pointer swipe behavior that advances the card. Pass advances to the next profile. Say hi creates a new local direct-chat room named after the selected person, with a ◉ icon and “Direct chat” subtitle, seeds a NEW CHAT divider plus two friendly greeting messages from that person, selects the new room, and closes the modal. Include the note “Demo profiles are local placeholders. Real people need a live account and server system.”

The Firebase modal should be a dark rounded dialog titled “Connect PingRoom to Firebase,” explain that entering config and credentials enables real-time text chat, provide email, password, Firebase config JSON textarea, Cancel, Create account, and Connect / sign in buttons, and show a setup hint. Keep all controls visibly interactive, preserve the calm low-pressure café-like atmosphere, and ensure the app is usable with mouse, keyboard, touch, responsive layout, scrolling, dialogs, local persistence, image posting, audio posting, profile editing, room search, room switching, discovery, and optional live chat.