NBA Age Draft

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 responsive browser game titled “NBA Age Draft,” a clean 2D DOM/canvas drafting game on a white background. The goal is to build a legal NBA starting five by spinning an animated age wheel, then selecting exactly one current NBA player from the age it lands on and assigning that player to an open position.

Layout and visual style: Use a bright sports-card interface with white panels, pale blue borders, rounded corners, soft blue shadows, vivid royal blue (#1877ff), black text, and compact uppercase helper labels. Use a bold condensed display font similar to Bebas Neue for the title, large age readout, and Spin Age button, with a heavy sans-serif such as Inter for the rest. At the top, show the large “NBA AGE DRAFT” brand and the subtitle “SPIN AGES 21–41 AND BUILD A LEGAL STARTING 5.” On the right of the header, show a small pale-blue score box labeled “SPINS” with the current spin count, starting at 0. Beneath the header, show a black rounded toast/status bar for instructions and rule feedback.

Main content is a two-column layout on desktop and a single stacked layout on narrow screens. The left rounded card is the Age Wheel. It has the heading “AGE WHEEL” and “Land on an age,” a square canvas wheel roughly 330–420px wide, a fixed black triangular pointer centered at the top edge, a large current-age readout below, and two buttons: bright blue “SPIN AGE” and pale gray “NEW RUN.” The wheel is divided into 21 equal radial slices labeled 21 through 41. Alternate eligible slices are vivid blue and light blue with white dividers; ages that no longer have a usable player for any open position are pale gray with muted text. Labels rotate along their slices. In the center, draw a white circular hub with a pale-blue outline containing “AGE” (or the active age) and “WHEEL.” When Spin Age is clicked, animate the wheel smoothly for about 2.6 seconds through 4–6 revolutions with easing, then align the randomly selected eligible age beneath the top pointer. The current age readout becomes a large blue number. Only ages with at least one unused player who can fill an open position may be selected.

The right rounded card is the draft area. Its header has the eyebrow “STARTING FIVE” and a title that initially reads “Fill PG, SG, SF, PF, C,” then updates to show open positions such as “Open: PG, SG, SF, PF, C,” and finally “Starting 5 complete.” Directly below, show five horizontal lineup slots labeled PG, SG, SF, PF, and C. Empty slots have a pale blue background, blue position labels, the name “Empty,” and “Open slot.” Filled slots show the drafted player’s name, age, and team label. Under the lineup, show the candidate heading, such as “Spin to reveal players” before a spin or “25-year-old players” after a spin, explanatory text, and a right-aligned count such as “21 ages” followed by “Ages still available to hit.” Below that, show a scrollable responsive grid of player cards.

Before the first spin, the candidate area must say “Spin to reveal players,” explain that the game only shows players from the spun age, and display an empty instructional panel: “Spin the wheel. Then choose one player from that age and place them into any open position they actually play.” After a wheel result, display only players whose age equals the active age, who have not already been used, and who have at least one position still open. Each player card shows the player name, team, age, and their valid positions separated by slashes, plus one button for each currently open valid position. The first available/open position button can be styled bright blue and the others pale blue. Clicking a position button immediately locks that player into that exact slot.

Use this player dataset and age snapshot, preserving the listed names, ages, teams, and valid positions: age 21—Stephon Castle PG/SG Spurs; Zaccharie Risacher SF/PF Hawks; Alex Sarr PF/C Wizards; Matas Buzelis SF/PF Bulls. Age 22—Reed Sheppard PG/SG Rockets; Rob Dillingham PG Timberwolves; Donovan Clingan C Trail Blazers; Kel’el Ware C/PF Heat; Isaiah Collier PG Jazz. Age 23—Victor Wembanyama C/PF Spurs; Chet Holmgren PF/C Thunder; Paolo Banchero PF/SF Magic; Scoot Henderson PG Trail Blazers; Shaedon Sharpe SG/SF Trail Blazers; Amen Thompson SG/SF Rockets. Age 24—Cade Cunningham PG Pistons; Bennedict Mathurin SG/SF Pacers; Franz Wagner SF/PF Magic; Jaden Ivey SG/PG Pistons; Walker Kessler C Jazz; Brandon Miller SG/SF Hornets. Age 25—Tyrese Maxey PG/SG 76ers; Evan Mobley PF/C Cavaliers; LaMelo Ball PG Hornets; Alperen Şengün C Rockets; RJ Barrett SF/SG Raptors; Jalen Green SG Rockets. Age 26—Tyrese Haliburton PG Pacers; Coby White PG/SG Bulls; Jalen Suggs PG/SG Magic; Anfernee Simons SG/PG Trail Blazers; Immanuel Quickley PG/SG Raptors. Age 27—Shai Gilgeous-Alexander PG/SG Thunder; Donovan Mitchell SG/PG Cavaliers; Jalen Brunson PG Knicks; Myles Turner C Pacers; Jaren Jackson Jr. PF/C Grizzlies. Age 28—De’Aaron Fox PG Spurs; Mikal Bridges SG/SF Knicks; Domantas Sabonis C/PF Kings; Zach LaVine SG Kings; Jarrett Allen C Cavaliers. Age 29—Jaylen Brown SG/SF Celtics; Nikola Jokić C Nuggets; Devin Booker SG/PG Suns; Bam Adebayo C/PF Heat; Karl-Anthony Towns C/PF Knicks. Age 30—Giannis Antetokounmpo PF/C Bucks; Kyrie Irving PG/SG Mavericks; Anthony Davis PF/C Mavericks; Kawhi Leonard SF/PF Clippers; Damian Lillard PG Bucks; James Harden PG/SG Clippers. Age 31—Jimmy Butler SF/SG Warriors; Jrue Holiday PG/SG Celtics; DeMar DeRozan SG/SF Kings; CJ McCollum SG/PG Pelicans; Rudy Gobert C Timberwolves. Age 32—Stephen Curry PG Warriors; Nikola Vučević C Bulls; Khris Middleton SF/SG Wizards; Draymond Green PF/C Warriors; Fred VanVleet PG Rockets. Age 33—Mike Conley PG Timberwolves; Jonas Valančiūnas C Wizards; Al Horford PF/C Celtics. Age 34—Russell Westbrook PG Nuggets; Brook Lopez C Bucks. Age 35—Kevin Durant SF/PF Suns; Klay Thompson SG/SF Mavericks. Age 36—Kevin Love PF/C Heat; Kyle Lowry PG 76ers. Age 37—P.J. Tucker PF Free Agent Pool; Patty Mills PG Veteran Pool. Age 38—Chris Paul PG Clippers; Taj Gibson C/PF Veteran Pool. Age 39—Thaddeus Young PF/C Veteran Pool. Age 40—Al Horford PF/C Celtics Veteran Pool; Kyle Lowry PG 76ers Veteran Pool. Age 41—LeBron James SF/PF Lakers; Chris Paul PG Clippers Veteran Pool.

Rules and state behavior: The player must draft one player from the current spun age before another spin is allowed. Disable Spin Age while the wheel is animating, while a player is awaiting selection, or after all five slots are filled. After a valid pick, mark that specific player entry used, clear the active age, update the lineup, and allow the next spin. A player can be used only once, and the selected slot must be one of that player’s listed positions; the lineup can be filled in any order. If the user tries to spin before choosing, show “You must draft one [age]-year-old before spinning again.” If they try to draft incorrectly, show appropriate feedback that the player does not match the age, is already used, is not that position, or the slot is filled. If no eligible ages remain, show “No eligible ages left. Start a new run.” The New Run button resets the wheel, spin count, used players, lineup, active age, and status to the initial state.

When PG, SG, SF, PF, and C are all filled, show a centered modal overlay with a translucent darkened background and a white rounded result box. It should say “STARTING 5 COMPLETE,” display the large blue heading “LINEUP SET,” explain that the lineup used only players from ages given by the wheel, list every position with player name, age, and team, and provide a blue “KEEP PLAYING” button that closes the modal without resetting the lineup. Keep the experience polished, touch-friendly, and responsive, with the player grid becoming two columns on mobile and the wheel card above the draft card. Implement the wheel with an HTML canvas and the rest as interactive HTML/CSS; no 3D scene or camera is needed.