Draft Lab

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 “Draft Lab,” a responsive browser-based NBA front-office drafting simulator called “DRAFT LAB” with the subtitle “VIRTUAL NBA FRONT OFFICE.” The experience is a dark, polished sports-management dashboard rather than an on-court action game. Use a deep navy/black background with a subtle blue radial glow, translucent dark panels, thin blue-gray borders, rounded 12–16px corners, and bright accent colors: cyan for the user/team identity and interactive focus, gold for overall ratings and draft numbers, pink for the clock/CPU accents, and green for salaries and positive metrics. Use a condensed, bold display face for headings and ratings and a clean sans-serif for body text. On mobile, show only the central draft room beneath a compact top bar; on desktop, use a three-column layout.

Top navigation: a 72px desktop header (about 62px mobile) with a glowing rounded-square cyan-to-purple brand mark containing a simple circular target/“◎” symbol, large “DRAFT LAB” text, and tiny uppercase “VIRTUAL NBA FRONT OFFICE.” On the right show pill badges “SEASON 2026” and “SALARY CAP 
54M”; hide the cap pill on narrow mobile screens.

Main desktop layout: three panels with small gaps and consistent rounded borders. Left panel is the Franchise Board. At the top show “League power index,” a large cyan numeric value initially 0, and a horizontal meter with a pink-to-gold-to-green gradient. Below, list 8 teams: the user’s “Your Franchise” plus CPU teams “New York Empire,” “Los Angeles Stars,” “Chicago Foundry,” “Dallas Orbit,” “Boston Green,” “Miami Heatwave,” and “Denver Summit.” Give each team a distinct colored dot/accent, a YOU or CPU badge, a player count such as “0/10 players,” and a gold average-overall number or em dash. Clicking a team selects it and displays its roster in the right panel; the selected team has a cyan border/highlight. Hide this entire left panel on mobile.

Center panel is the live draft room. At the top, create a hero banner with a blue-to-purple dark gradient and faint oversized diagonal “DRAFT” lettering in the background. Show cyan uppercase eyebrow text “ALL-PLAYER DRAFT ROOM · LIVE BOARD,” then the large condensed headline “Build the league you want to watch.” and explanatory copy: “Draft from the full active NBA player pool, outsmart seven front offices, then run a simulated season with chemistry, depth, cap pressure, and playoff chaos.” Beneath it, show a draft-status strip with a numbered rounded badge for the current pick, status text such as “Your pick” or “[CPU team] is picking,” a subline such as “Round 1 · You are on the clock” / “AI front office is evaluating the board,” a prominent pink countdown-style number initially 24, and a button that says “Auto pick,” “Run AI pick,” or after the draft “Simulate season.” The displayed clock resets to 24 each pick; it is a visual status value, not a required real-time countdown.

Under the status strip, add a toolbar with a search field placeholder “Search every active player…,” a position dropdown defaulting to “All positions” with PG, SG, SF, and PF, C options, a sort dropdown defaulting to “Sort: overall” with salary, age, and name alternatives, and a “Front office” button. Make the player board scrollable. Render the available active-player pool as compact dark cards in a responsive grid (two narrow columns on mobile, more columns on desktop). Each card is clickable and shows player name, original NBA team abbreviation, position, age, gold OVR rating, computed FIT and UPSIDE chips, and a green salary such as “$48M.” Use the actual pool and examples such as Shai Gilgeous-Alexander (OKC · PG · age 28 · OVR 97 · $48M), Nikola Jokic (DEN · C · age 31 · OVR 97 · $52M), Luka Doncic, Giannis Antetokounmpo, Jayson Tatum, Anthony Edwards, Victor Wembanyama, Joel Embiid, Stephen Curry, and Donovan Mitchell. Include the broad active-player data set with ratings, salary, age, position, and NBA team; remove a player from the available board once drafted. Search filters names/team/position text, position filtering narrows the cards, and sorting supports overall descending, salary descending, age ascending, and name alphabetical. If nothing matches, display “No available players match that filter.”

Draft rules and interactions: There are 8 franchises and 10 rounds, for 80 total picks, in a snake draft. The user controls only “Your Franchise”; CPU teams automatically choose after their turns with a short delay. The user can click any available player card during their turn, or use Auto pick. Auto pick selects a best available player using overall rating, salary pressure, positional need, youth, and a small random factor. A roster can contain at most 10 players. The user’s picks are committed to its roster and selected players become unavailable to everyone. The status bar advances through the snake order, resets the visible clock to 24, updates round/pick information, and when all picks are complete marks the draft finished. The main Auto pick button then becomes “Simulate season.” Pressing Enter should also trigger the current auto action. Include a Reset button that reloads the initial state.

Right desktop panel is the roster inspector. Header initially reads “Your Roster” and “0 / 10”; when another franchise is selected, show that team’s name and count. List drafted players as numbered slots (01, 02, etc.), with player name, position, source NBA team, salary, and a gold overall rating. Initially show the empty message “Draft your first player to start the build.” At the bottom show live insights: “Avg overall,” “Cap committed” initially $0M, “Fit / chemistry,” and “Draft grade,” initially em dashes. Calculate average overall from the selected roster; for the user, calculate chemistry from player fit values; give a draft grade based on average (A+ at 91+, A at 87+, A− at 83+, B+ at 79+, B at 75+, otherwise C+). The user roster’s power index and meter should update from its average overall. Footer buttons are “Sim season” (disabled until the draft is complete and the user has at least 5 players) and “Reset.” Hide this panel on mobile.

When the draft is complete, enable season simulation. Simulation evaluates every team using average overall, roster depth, positional fit/chemistry, and small random playoff variance, then clamps projected wins between 8 and 73. Open a modal titled “2026 season simulation” with a highlighted “League champion” winner card showing champion team, wins, roster overall, and chemistry. Below, show a ranked result grid for all 8 teams with rank, team name, wins, overall, chemistry, and labels “🏆 Finals winner,” “Playoff team” for the next three, or “Lottery team” for the rest. Include a small note that the simulation is driven by overall talent, positional fit, depth, age curve, salary pressure, and playoff variance.

The “Front office” button opens a centered, backdrop-blurred modal. Before the draft is complete, show the modal title “Front office” and explain: “Finish the 10-round draft before opening trades, free agency, and extensions.” After completion, show tabs/buttons for “Trade machine,” “Free agency,” and “Extensions.” Trade machine: let the user choose Team B and optionally Team C, create a circular two- or three-team deal where every team sends one different player to the next team and can optionally send one unprotected first-round pick; enforce the simple 
54M cap and show success/error messages. Each franchise starts with 2027, 2028, and 2029 first-round picks. Free agency: list up to the best 24 undrafted players with a Sign button, allow user roster up to 10 and reject signings that exceed 
54M. Extensions: list user players and offer “Extend +2 yrs”; each extension adds $5M annual salary and is blocked if payroll exceeds the cap. Keep modal controls closeable via Close, Escape, or clicking outside.

Make the interface feel like a premium futuristic analytics product: dense but readable, no illustrations or gameplay field, strong information hierarchy, smooth hover lift/border transitions, cyan focus rings, dark navy cards, gold numbers, and scrollable player/roster areas. On narrow screens, preserve the top bar, hero, draft strip, filters, and two-column player cards within the viewport, with the hero headline reduced and player FIT/UPSIDE chips hidden for compactness.