Cardfront Tactics

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 a fully 2D browser game titled “Cardfront Tactics,” a hybrid card-ordering and tactical squad battle. Use a responsive full-screen HTML canvas for the battlefield with a fixed HUD overlay, no 3D rendering or models. The visual style is dark, modern, flat UI: near-black/navy background (#080d18), a subtly drifting blue grid, rounded navy battlefield panel with thin slate outline, three vertical lanes on each side, and a dashed horizontal center line. Dealer territory is the upper half with dark red lane panels and red accents; player territory is the lower half with dark blue lane panels and blue accents. Draw circular icon-based unit tokens on the canvas: player units use their unit color, dealer units are red; each has a white outline, a large symbolic icon, and a black status plaque showing current/max HP and attack. Show floating yellow damage numbers when attacks land. Keep the top bar compact with a spade mark, the title, and rounded status pills for round, player chips/unit count, and dealer chips/unit count. Put a rounded interactive phase panel along the bottom, responsive for mobile.

Core loop: begin in a card phase. Each round create and shuffle a standard 52-card deck using ranks 2 through A and suits spades, hearts, diamonds, clubs; deal 5 cards to the player and 5 separate cards to the dealer. Display the player’s five cards as white playing-card tiles (red text for hearts/diamonds, suit symbols in opposite corners) in a Hand row, plus five numbered empty Order slots. The player taps/clicks cards to move them, in chosen sequence, into the order slots. Tapping a filled slot returns that card to the hand. Once five cards are ordered, automatically order the dealer’s five cards from highest rank to lowest, with a 55% chance of swapping two random positions to make the dealer order imperfect. Compare the two hands position by position: rank values are 2–14, and the higher card wins that duel and awards that side 50 chips; ties award nothing. Transition to the buy phase and show all five duels with player card, “vs,” dealer card, and result labels such as “+50 you,” “+50 dealer,” or “Push.”

In the buy phase, show “Build your squad,” the accumulated chip totals, and three purchase cards/buttons. Infantry costs 50 chips, has 2 HP and 1 attack, uses a blue hex-like icon, and is described as a cheap front-line body. Archer costs 100, has 1 HP and 2 attack, uses a teal diamond icon, and is described as high attack and fragile. Knight costs 150, has 3 HP and 3 attack, uses a gold pentagonal icon, and is described as an expensive bruiser. Disable purchases when the player lacks chips. Player taps Buy to spend chips and add that unit to their persistent squad. Include a blue “Start battle” button. On starting battle, the dealer automatically spends chips repeatedly, prioritizing Knight, then Archer, then Infantry, buying as many as affordable (with a safety cap of 9 purchases), and its units also persist between rounds.

In battle phase, label the panel “2D battle · turn X of 3,” show player and dealer squad status pills with unit icon, name, and HP/max HP, and provide a red “Play turn” button. Arrange units in the three battlefield lanes, with units positioned in rows as their squad grows. Each turn, every living player unit attacks the first living dealer unit (the front target), subtracting its attack; then every living dealer unit attacks the first living player unit. Remove units at zero HP after both sides have attacked; display damage numbers and a concise event log such as “Turn 1: squads traded fire.” Battle ends after 3 turns or immediately when one side has no units. Compare surviving unit counts: the side with more surviving units gets a 50-chip field-control bonus; ties get no bonus. Then increment the round and automatically deal a new five-card round while keeping surviving units and chip totals. Include a short scrolling event log in every phase. Use pointer/touch-friendly controls, rounded buttons and cards, and responsive mobile layout; in CSS make the buy grid three columns on wide screens and one column on narrow screens. Play subtle casino-style card fan/card-place sounds when dealing, placing, buying, and taking turns, but the game must remain playable if audio is unavailable.