Playyard Hub

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 a responsive dark-themed browser game discovery hub titled “Playyard Hub,” not a single standalone game. Build it as a polished local-only web app with a deep navy background and subtle blue radial glow, purple/teal accents, rounded cards, thin blue borders, soft shadows, and clean system sans-serif typography.

Layout and presentation:
- Full viewport app with a 76px desktop header and a two-column main area; on mobile use a compact 68px header and a narrow icon-style sidebar.
- Header: left Playyard brand with a purple-to-pink rounded-square logo containing a white play triangle, “Playyard” text, and small “community game hub” subtitle. Center/expanding search field with magnifying-glass icon and placeholder “Search 36 custom games...”. Right side shows pills for total plays and liked count, an “✨ AI Maker” button, and a “Sign in” button.
- Left sidebar has Browse and Your hub sections. Navigation items are Discover, Trending, Liked games, New releases, Quick plays, AI game maker, and Sign in, each with emoji icons. Active navigation uses a darker blue pill and a purple inset bar.
- Main content is scrollable. Hero text reads “A tiny universe of big ideas,” “Find your next favorite game.” and “Play original browser mini-games, rate the ones you love, and build your own personal arcade shelf.” Include a Sort by select with Featured, Most played, Most liked, and Newest.
- Under the hero, show rounded category chips: All, Arcade, Action, Casual, Puzzle, Adventure, Racing, Strategy, Party, Sports, Music, Shooter, Sim. Active chip is bright purple.
- Render a responsive auto-fill grid of game cards, approximately 220px minimum width desktop and smaller cards on mobile. Each card has a colorful gradient thumbnail, large emoji icon, category badge in the top-right, title, “by Creator,” stats for plays, likes, and a star rating, then a purple “Play now” button plus heart-like and dislike/dropdown reaction buttons. Cards lift slightly and brighten their border on hover.

Seed the hub with these visible game entries and metadata: Skyline Sprint (Arcade, 🏙️, “Run across rooftops and keep your combo alive.”, MiraByte); Bubble Bandits (Action, 🫧, “Pop the golden bubbles before the timer runs out.”, BubbleWorks); Pixel Pantry (Casual, 🍳, “Stack the weirdest sandwich in the neighborhood.”, ToastGoblin); Orbit Raiders (Shooter, 🪐); Drift District (Racing, 🏎️); Moonlight Mahjong (Puzzle, 🌙); Dungeon Dash (Adventure, 🗝️); Frostbite Fishing (Casual, 🎣); Color Clash (Party, 🎨); Tiny Tower Tycoon (Sim, 🏗️); Robo Rumble (Action, 🤖); Garden Guardians (Strategy, 🌱); Neon Noodles (Casual, 🍜); Cloud Catcher (Arcade, ☁️); Mystery Manor (Adventure, 🕯️); Astro Golf (Sports, ⛳); Beat Street (Music, 🎵); Volcano Vault (Puzzle, 🌋); Critter Crew (Strategy, 🦊); Treasure Tide (Adventure, 🏴‍☠️); Magnet Mayhem (Action, 🧲); Snack Stack (Casual, 🍩); Prism Pong (Sports, 🔷); Witchy Words (Puzzle, 🔮); Mech Mail (Sim, 📦); Jelly Joust (Party, 🟣); Starship Salvage (Shooter, 🚀); Echo Elevator (Adventure, 🛗); Rooftop Ramen (Casual, 🥢); Castle Clicker (Strategy, 🏰); Deep Sea Dig (Adventure, 🐚); Laser Labyrinth (Puzzle, 🔺); Bumper Bloom (Racing, 🌼); Ghostlight Theater (Music, 🎭); Pocket Pirates (Party, 🦜); Thunder Track (Racing, ⚡). Give the entries seeded play counts, likes, dislikes, creators, and a rotating set of colorful thumbnail gradients so the first cards look like a populated community marketplace.

Interactions and rules:
- Search filters live as the user types across title, category, description, and creator; show an empty-state message if nothing matches.
- Category chips filter the card grid. Sidebar filters work as follows: Trending shows games with more than 7,000 plays; Liked games shows locally liked cards; New releases shows games marked newly created; Quick plays shows Arcade, Casual, and Party. Discover shows all.
- Sort cards by featured/default ID order, plays descending, likes descending, or newest descending.
- Clicking the heart toggles liked state, updates likes and the liked counter, persists locally, and displays a small toast. Clicking the dislike button toggles dislike feedback and mutually clears the opposite reaction.
- Clicking Play now increments that game's play count and the session total, then opens a centered modal overlay with blurred dark backdrop. The modal shows the title, category, creator, play count, score label, description, emoji, and a 520x230-ish dark canvas game area. Include an X close button and allow closing the overlay.

The playable prototypes inside cards must be real and simple, selected by each game's mechanic type (cycle seeded games through click, dodge, memory, catch, and quiz):
1. Click target: canvas with dark navy background and teal glowing circular target; click the target 15 times, moving it randomly after each hit. Show “n/15” and win toast.
2. Dodge: purple player rectangle near the bottom, falling pink square blocks, keyboard A/D or left/right arrows plus on-screen arrow buttons. Survive for 20 seconds conceptually while score increments as blocks pass; collision produces “Game over.”
3. Memory: 12 rectangular tiles in a 4x3 grid. Briefly highlight one teal tile, hide the board for roughly 850ms, then let the player click the remembered tile. Correct clicks increment matches and start another round; wrong clicks show “Try again.”
4. Catch stars: purple horizontal catcher at the bottom, yellow star/circle falling from above, control with A/D, arrow keys, or on-screen buttons; catch 12 stars and show “You cleared the sky!”
5. Quick quiz: canvas question area and answer buttons, cycling through questions such as “What color is the Playyard logo?”, “Which planet has rings?”, and “What do stars give you?”; reach five correct answers to complete it.
Use a consistent game modal with a radial blue stage, rounded canvas border, score footer, game hint text, toast notifications, and touch-friendly controls. Stop animation and keyboard listeners when the modal closes or another game opens.

Add an “✨ AI Game Maker” overlay opened from the header or sidebar. It contains a title and description explaining that users can describe a game, a large textarea with example “make a space game where I dodge lasers and collect stars,” a Generate game button, and a note that it runs locally with no external AI service. On generation, infer one of the five mechanics from keywords: dodge/laser/avoid -> dodge; memory/match -> memory; catch/collect/star -> catch; quiz/trivia -> quiz; otherwise click. Infer a category and emoji accordingly, make a title from the first four words, add the new game to the hub with the signed-in creator or “AI Maker,” persist it, render it as playable, show a created toast, and close the overlay shortly afterward.

Add local sign-in and creator administration. The sign-in modal has username/password inputs and a local sign-in button; any nonempty username creates a local profile, while username “Vey” with password “Creator0613” grants local admin mode. The signed-in header button changes to the user name, and admin mode opens a creator admin overlay. Admin panel shows “Signed in as Vey · local admin mode,” a form for title, creator, category, emoji, description, Create game button, logout button, and a list of every game with Edit and Delete controls. Editing loads the fields and saves changes; deleting removes a game. Persist game data in localStorage under a Playyard games key, including likes and created games, and keep session navigation/search/play totals in memory. Include concise toast feedback for creation, reactions, login, logout, quiz answers, matches, wins, and deletions. Make the entire experience keyboard-friendly, touch-friendly, and responsive without adding features outside this hub and its five simple canvas prototypes.