Four Drop

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.

Rebuild “Four Drop” as a responsive flat 2D browser Connect Four game with a clean, polished casual-game presentation. The central game board is a 7-column by 6-row vertical grid. Render it on a responsive canvas, centered below a top bar, with a rounded bright blue board body and darker blue border. Each cell is a circular recessed hole: dark blue outer ring with a pale blue/white interior. Red discs belong to the human player and yellow discs belong to the AI or second local player. Discs are glossy shaded circles with a highlight, dark color-matched outline, and a short gravity-style falling animation from above the board into the lowest empty slot in the selected column. The human is Red and plays first. A player hovers or points at a column to show a translucent column highlight and a semi-transparent preview disc above the board; clicking/tapping a valid column drops the disc. Lock input while a disc is falling, while the AI is thinking, when a player is frozen, or after the round ends. Four matching discs connected horizontally, vertically, or diagonally wins immediately; outline the winning discs with a bright white stroke. If all 42 cells fill with no winner, show a draw state.

Support two modes: “1P: vs AI,” where Red is human and Yellow responds automatically after a brief delay, and “2P: Local,” where Red and Yellow are both controlled by clicks/taps on the same device. Include a mode button that resets the board when changed. In 1P mode show a bot difficulty button cycling Easy, Normal, and Hard without resetting the board. Easy chooses casual random valid columns but takes an obvious winning move; Normal takes wins, blocks immediate Red wins, favors center/line-building positions, and avoids handing Red an immediate win; Hard uses a shallow minimax search and board evaluation. Display status text such as “Your turn — Red,” “AI’s turn,” “AI thinking…,” “Red wins!/AI wins!,” “Yellow wins!,” or “Draw — board full!” in the corresponding red, yellow, or dark ink color.

Build the surrounding UI in a light blue-white radial-gradient theme with dark navy text, rounded controls, soft shadows, and responsive layout. The top bar should show the large title “Four Drop,” the status line, and buttons for Menu, mode, bot difficulty, Tutorial, Profile, Settings, Full Screen, and Reset. Under the board, add a rounded token shop bar. Show the token balance using a gold physical coin badge with a dotted inner rim and the word “Token,” plus buttons: “Hint — 5,” “Freeze — 3,” “Extra Turn — 5,” “Pop — 4,” and “Steal — 6.” Use distinct button colors: green hint, cyan Freeze, purple Extra Turn, orange Pop, magenta Steal. Show a small power/status message beside or below the shop.

Tokens persist locally per signed-in player name. Good human-controlled moves can award tokens: a winning move, blocking an immediate opponent win, matching the best suggested move, or playing near the center; animate earned tokens as a small flying coin and +N label traveling from the played disc to the token counter, with a counter bump. A paid Hint costs 5 tokens and highlights a strong move for the current human-controlled player. If enabled, waiting 10 seconds automatically highlights a strong suggested column. The hint should visibly pulse the recommended full column in green, draw a pulsing green ring around the target landing hole, and show a green label such as “Column 4” above it with a pointer. Moves made using a paid or automatic hint do not award the reward for that hinted move.

Implement shop powers exactly as follows. Freeze costs 3 tokens, is armed for the buyer’s next move, and after that move freezes/slows the opponent for 4 seconds. Extra Turn costs 5 and lets the buyer keep the turn after their next disc drop. Pop costs 4, then the player taps a column to remove that column’s top disc and pass the turn. Steal costs 6, then the player taps a column whose top disc belongs to the opponent, converts that top disc to the current player’s color, and passes the turn. Show armed states and explanatory status text, reject invalid Pop/Steal targets without consuming the power, and play a distinct sound for each power.

Before the game menu, show a local sign-in overlay titled “Welcome to Four Drop,” with a player-name input, Sign In button, and Play as Guest button. Signing in opens the main menu overlay. The menu should offer Resume Game when a game exists, Play vs AI, 2 Player Local, Tutorial, Profile, Settings, and Full Screen, and explain that players earn tokens and spend them on powers. Store the player name and profile data in local storage. The Profile overlay shows the player name and saved Tokens, Games, Wins, Losses, Draws, and Tokens earned, with Rename and Sign Out actions. The Settings overlay provides toggles for Auto hints, Fast drops, Dark theme, and Background music, plus Reset Tokens. Fast drops increase the disc gravity speed; dark theme changes the background and panels to navy shades while preserving readable pale text; music is a looping Web Audio arpeggio/bass pattern that starts after user interaction and can be toggled. Add a step-by-step Tutorial overlay with five steps covering connecting four, turns/modes, hints, earning tokens, and powerups, including step counter, dots, Back, Next/Done, close, and outside-click close behavior. Full Screen buttons should use browser fullscreen when supported.

Include click/tap sound feedback, hint and powerup sounds, and responsive touch-friendly controls. Preserve the visual hierarchy shown by the reference: a large simple blue Connect Four board with red/yellow glossy discs, pale circular empty holes, a light background, bold rounded buttons, and overlays/cards with blurred dark backdrop, rounded corners, and soft shadows. The game must be playable with both mouse and touch, scale the board to the available viewport, and keep the board and shop visible on desktop and narrow mobile screens.