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

#gamedev #ai #nocode #gemini

TL;DR: I built a pretty full feature, ad-free card game suite (Spades, Hearts, Solitaire) using Google's Gemini AI Studio in HOURS.

Building on my earlier experiment: I built a game in less than day

This article breaks down how Google AI Studio architected complex game states and help me designed a unique hybrid game mode called "Spadearts".

The Vision

Mobile card games today are plagued by ads, loot boxes, and clunky interfaces. I wanted to build Trickster's Table: a clean web app that feels like a premium native experience and runs instantly.

The Stack:

React 19: For fluid UI and state management.
TypeScript: To check the complex game rules and scoring math.
Tailwind CSS: For rapid styling and theming.
Google GenAI: For powering the development workflow and in-game intelligence.

Note: AI wrote and rewrote 100% of the code used in this app, I only used prompts

Feature Breakdown

I didn't just stop at one game. The suite includes:

Spades ♠️:
- Partnership Mode: Classic 2v2 play with a bot players.
- Solo Mode: Cutthroat, every player for themselves.
- Whiz Variant: A mode where you must bid exactly your hand's spade count or go Nil.
- Nils: can't play spades without going 0.
Hearts ♥️:
- The classic evasion game.
- "Shoot the Moon" detection logic.
- Partnership Mode: A variant where partners combine penalty points (lowest score wins).
Spadearts (High/Low) 🃏:
- A mode where you play Spades (High Game) and Hearts (Low Game) simultaneously.
- Dual-Track Scoring: You must manage your bid to gain High points while avoiding Hearts to prevent Low points.
- Whiz Support: Play Spadearts with Whiz bidding rules.
Solitaire Suite:
- Klondike: Classic patience with drag-and-drop, hints, and auto-complete.
- Pyramid: A math-based puzzle mode with streak bonuses.

🤖 Developing with Google AI Studio

Building a multi-game engine is complex, that's why I leveraged Google AI Studio during the development cycle:

1. Logic Separation & Architecture

I used Gemini to define games, rules, themes and tables without writing a single line of code. I made it aware I would be adding new games often, it became modular on its own.

2. The "Spadearts" Hybrid Experiment

I wanted a unique hook for the app. I told Gemini a story about how I wanted to combine Spades and Hearts rules.

The Result: A split-score system where Spades are Trump (for positive points), but Hearts are toxic (for separate penalty tracking).
Balancing: We simulated scoring scenarios in the chat to ensure a "Moon Shot" in Hearts (taking all penalties) would appropriately reward the Spades score (+100 points) to balance the risk.

3. Procedural Theming

Instead of importing heavy image assets, AI generated complex SVG and CSS-gradient background components that render instantly.

Neon Theme: A moving perspective grid using CSS animations.
Vintage Theme: SVG noise filters to create a felt/leather texture.
Winter Theme: CSS-based falling snow particles.
Twelve Themes: With their own style and background art.

4. Bot Personalities & Banter

The bots aren't just generic algorithms. They utilize gemini-2.5-flash to generate context-aware banter.

Rusty (Rookie): The AI code intentionally adds "noise" to his decision-making and his game is boastful but wrong.
Ace (Expert): Uses a perfect-information heuristic to make the optimal cut or slough. It even comments on your mistakes.
Luna (Sees All): Acts like they can see the future.

Robot Mode: Implemented a feature where the AI logic can take over the human player's seat, allowing for auto-play on all game and modes.

💎 The "Ledger" System

One of the coolest features is the Stats Ledger. We track every round played, split by Game Mode (Spades vs Hearts) and Type (Team vs Solo). The data structure is a robust Record<string, ModeStats>, allowing us to easily visualize:

Win/Loss Ratios per variant.
Current Streak.
Best Scores.

🧠 What Else?

The geminiService.ts module is piping live game state to the Gemini API. the result: bots that don't just pick cards, they comment on your specific bad move using context-aware chat generation.

Spadearts Gameplay:

Passing Cards (Hearts)