Chess Battle III

Home Page

A strategic chess experience that turns global headlines into gameplay — no real conflicts, just creative fun.

Inspiration

Chess has always been a metaphor for strategy and diplomacy. We asked ourselves: What if we could bring that metaphor to life using the themes people already talk about on Reddit?

Global alliances, shifting partnerships, and strategic standoffs gave us rich material to build gameplay mechanics that go beyond standard chess. The result is a chess experience with faction-based abilities, selectable daily challenges, and dramatic plot twists that keep players coming back.

What It Does

Chess Battle is a fully-featured chess game built as a Reddit Devvit app with unique faction-based gameplay mechanics:

Side Selection

Core Chess Features

Complete chess rules implementation (all piece movements, castling, en passant, pawn promotion)
Check, checkmate, and stalemate detection
AI opponent using Minimax algorithm with alpha-beta pruning
2-player local mode
Game state persistence via Redis

Faction Theme

Each chess piece represents a fictional commander within two rival alliances — the Blue Alliance and the Red Alliance:

Piece	Blue Alliance	Red Alliance
King	Commander Shield	Marshal Bear
Queen	General Eagle	Dragon General
Bishop	Lord Sterling	Count Frost
Knight	Captain Fleur	Shadow Commander
Rook	Marshal Iron	Iron Warden
Pawn	Blue Infantry	Red Infantry

Each commander has a unique personality and visual design, giving the pieces more character than a standard chess set.

Special Abilities (One-time use per game)

These abilities add a layer of strategic depth on top of traditional chess:

Sanctions — Freeze an opponent's piece for one turn
Intel Breach — Reveal the opponent's best move
Scorched Earth — Clear a 3x3 area on the board (costs your Queen!)
Guerrilla Tactics — Your pawn moves like a knight for one turn

Each ability can only be used once per game, forcing players to think carefully about timing.

The "Switch Sides" Feature

The most dramatic ability in the game:

The Red Alliance player can trigger this once per game
Blue Alliance's Queen switches to Red's control
A popup announces the twist: "Power changes everything!"
Creates a massive swing in the game's balance

This mechanic is inspired by shifting alliances and backroom deals — it makes every game unpredictable and sparks lively discussion in the comments.

Game Mode

User-Selectable Daily Challenge System

Players choose from all 5 daily challenges before each game, adding a personalized objective on top of standard chess:

Game Flow: Team Selection -> Mode Selection -> Challenge Selection -> Game

Challenge	Objective
Lightning Round	Win in under 15 moves
Speed Run	Win in under 3 minutes
Aggressive	Capture 5+ opponent pieces
Perfect Game	Win without losing any pieces
Pawn Power	Promote a pawn and win

Pick your challenge — All 5 challenges are shown as selectable cards before each game
Skip option — Players can play without a challenge if they prefer
Per-challenge tracking — Completed challenges are greyed out with a "Done" badge
Daily reset — All challenges reset at midnight UTC, giving players fresh goals every day
In-game panel — The selected challenge is shown above the board during gameplay
Progress feedback — See your challenge result when the game ends
Daily leaderboard — Compete with the community to complete challenges first

The challenge selection screen gives players agency over their goals, making each game feel purposeful. Whether you want a speed challenge or a tactical puzzle, you choose your own path.

Visual Features

Faction sidebars showing allied commanders with portrait art
Captured pieces display for each side
Turn indicator with team colors (blue/red)
Themed taunts on captures
Ambient background music
Compact daily challenge panel above the board
Challenge selection screen with clean, compact card layout

How We Built It

Tech Stack

Platform: Reddit Devvit (Custom Post Type with WebView)
Backend: TypeScript with Devvit SDK
Frontend: Vanilla JavaScript, HTML5, CSS3
Database: Redis (via Devvit context)
AI: Custom Minimax implementation with alpha-beta pruning

Architecture

Chess Battle
├── src/                        # Devvit Backend (TypeScript)
│   ├── main.tsx               # App registration & menu items
│   ├── components/
│   │   └── GamePost.tsx       # WebView wrapper & message handler
│   ├── handlers/
│   │   ├── gameState.ts       # Redis persistence
│   │   ├── leaderboard.ts     # Win/loss tracking
│   │   └── dailyChallenge.ts  # Challenge definitions, completion tracking
│   └── types/
│       └── index.ts           # TypeScript interfaces
│
├── webroot/                    # Game Frontend
│   ├── index.html             # Game UI (team, mode, challenge, game screens)
│   ├── chess.js               # Full chess engine (~1500 lines)
│   ├── app.js                 # UI controllers, challenge flow & Devvit bridge
│   ├── styles.css             # Responsive styling
│   ├── test.html              # Local testing mirror
│   ├── images/                # Faction-themed chess pieces & alliance logos
│   └── music/                 # Ambient soundtrack

Chess Engine

We built a complete chess engine from scratch in JavaScript:

Legal move generation for all 6 piece types
Pin detection and check evasion logic
Castling rights tracking
En passant implementation
Pawn promotion (auto-queen)
Draw detection (insufficient material)

AI Implementation

The AI uses Minimax with alpha-beta pruning:

Depth 3 search (configurable)
Material-based evaluation function
Efficient move ordering for better pruning

Challenge System Architecture

The daily challenge system uses a dual-layer approach for responsiveness:

Client-side definitions — Challenge cards render instantly from local data, no waiting for backend
Backend completion tracking — Redis stores per-challenge completion with keys like daily_challenge:{date}:{challengeId}:{userId}
Async update — Backend response updates cards with completion status when it arrives
Challenge ID flow — Selected challenge ID is passed through game start, stored in game state, and included in the result submission

Challenges We Ran Into

Reddit CSP Restrictions — Reddit's Content Security Policy blocks inline JavaScript. We refactored all onclick handlers to use addEventListener in external JS files.
Viewport Constraints — Reddit's WebView has limited space. We went through multiple iterations to build a compact UI that fits the board, sidebars, and controls without scrolling. The challenge selection screen required careful sizing to show all 5 cards plus buttons without scrolling.
Chess Logic Complexity — Implementing proper pin detection, check evasion, and castling rights required careful attention to edge cases.
State Synchronization — Ensuring game state persists correctly between the WebView and Devvit backend via postMessage required robust error handling.
Ability Balance — Making special abilities impactful but not game-breaking required iteration. The Scorched Earth ability costing your Queen creates a meaningful trade-off.
Challenge UX Responsiveness — The challenge selection screen initially showed empty until the backend responded. We solved this with client-side challenge definitions that render immediately, with backend completion data updating asynchronously.

Accomplishments We're Proud Of

Complete Chess Implementation — Every rule works correctly: castling, en passant, promotion, all of it.
Creative Gameplay Mechanics — The special abilities add a unique layer of strategy that no other chess game has.
The "Switch Sides" Feature — Turning the concept of shifting alliances into a game mechanic creates memorable moments and sparks community discussion.
User-Selectable Daily Challenges — Instead of a single daily challenge, players choose from all 5 objectives each day. Completed challenges grey out, giving a sense of progression and encouraging players to come back and complete them all.
Responsive Design — The game works on various screen sizes while maintaining playability, including a compact challenge selection screen that fits without scrolling.
Immersive Theme — Commander portraits, ambient music, faction rosters, and themed taunts create an engaging atmosphere.
Clean Architecture — Separation between chess logic, UI, and Devvit communication makes the code maintainable.

What We Learned

Devvit Development — Building custom post types with WebView, handling message passing, and working with Redis persistence.
Chess Programming — The complexity of proper chess logic, especially pin detection and check evasion.
Game Balance — How to create abilities that feel powerful without breaking the core game.
UI/UX Under Constraints — Designing for Reddit's limited WebView space while keeping the game playable and visually appealing. Adding a full challenge selection screen within the existing flow required compact, efficient design.
Client-Server UX Patterns — Rendering UI optimistically from local data while waiting for backend confirmation creates a much better user experience.

What's Next

Online Multiplayer — Allow Reddit users to challenge each other to games directly in a subreddit
Challenge Streaks — Track consecutive days of daily challenge completion
Weekly Challenges — Harder challenges that span a week with bigger rewards
New Abilities — Add more strategic abilities based on community feedback
Victory Animations — Animated victory screens for each faction
Sound Effects — Individual sounds for each piece movement and ability
Tournament Mode — Bracket-style competitions within subreddits