Building 'Trickster's Table': A Card Game Suite with Gemini AI Studio (zero coding)

Source: Dev.to

TL;DR

I built a pretty full‑feature, ad‑free card‑game suite (Spades, Hearts, Solitaire) using Google’s Gemini AI Studio in hours. This article breaks down how Gemini architected complex game states and helped me design a unique hybrid mode called “Spadearts.”

Why a New Card‑Game Suite?

Mobile card games today are plagued by ads, loot boxes, and clunky interfaces. I wanted Trickster’s Table to feel like a premium native experience that runs instantly in the browser.

The Stack

• React 19 – fluid UI and state management
• TypeScript – type‑checking for complex rules and scoring math
• Tailwind CSS – rapid styling and theming
• Google GenAI – powering the development workflow and in‑game intelligence

Note: 100 % of the code was written and rewritten by AI prompts; I only supplied the prompts.

Game Suite

Spades ♠️

• Partnership Mode – classic 2v2 play with bot players
• Solo Mode – cutthroat, every player for themselves
• Whiz Variant – must bid exactly the number of spades in your hand or go Nil
• Nils – can’t play spades without bidding 0

Hearts ♥️

• Classic evasion game
• “Shoot the Moon” detection logic
• Partnership Mode – partners combine penalty points (lowest score wins)

Spadearts (High/Low) 🃏

• Play Spades (high game) and Hearts (low game) simultaneously
• Dual‑Track Scoring – manage bids to gain high points while avoiding low points
• Whiz Support – Spadearts with Whiz bidding rules

Solitaire Suite

• Klondike – classic patience with drag‑and‑drop, hints, and auto‑complete
• Pyramid – math‑based puzzle mode with streak bonuses

Building with Gemini AI Studio

1. Define games, rules, themes, and tables without writing a single line of code.
2. Instruct Gemini that new games would be added often; the system automatically modularized the architecture.
3. Hybrid mode creation – I told Gemini a story about combining Spades and Hearts.
   • Result: a split‑score system where Spades are trump (positive points) and Hearts are toxic (separate penalty tracking).
   • Balancing: simulated scoring scenarios in chat to ensure a “Moon Shot” in Hearts (taking all penalties) rewards the Spades score (+100 pts).

Theming

Instead of heavy image assets, AI generated SVG and CSS‑gradient backgrounds that render instantly:

• Neon Theme – moving perspective grid with CSS animations
• Vintage Theme – SVG noise filters for felt/leather texture
• Winter Theme – CSS‑based falling snow particles
• Twelve Themes total, each with its own style and background art

AI‑Powered Bots

Robot Mode

Implemented a feature where the AI logic can take over a human player’s seat, enabling auto‑play across all games and modes.

Stats Ledger

A robust Record tracks every round, split by Game Mode (Spades vs. Hearts) and Type (Team vs. Solo). This enables easy visualization of:

• Win/Loss ratios per variant
• Current streaks
• Best scores

The geminiService.ts module pipes live game state to the Gemini API, allowing bots to comment on specific bad moves with context‑aware chat generation.

Spadearts Gameplay Overview

• Passing Cards (Hearts) – players exchange cards before bidding.
• Bidding (Spades) – simultaneous bids determine trump strength.
• Mobile Wide View – optimized layout for landscape orientation.
• Mobile Tall View – optimized layout for portrait orientation.
• Round Summary – concise recap of scores and actions.

Closing Thoughts

I’d love to hear your feedback in the comments.