RapidChess

Chess with 20s timeout and each win depends on turn based battle

Comment

Inspiration

Chess is the ultimate game of strategy, but its standard format can feel slow and intimidating for modern, fast-paced platforms like Reddit. We wanted to build a hybrid game that brings the quick, tactical decision-making of card battlers and RPG combat into chess. By shrinking the board to a dynamic 5×6 grid and introducing simultaneous slot-based combat, we turned traditional chess into an intense, action-packed mini-tactics game.

What it does

RapidChess is a 5×6 Tactical MiniChess web application running directly within the Reddit feed.

  • Tactical Board View: A compact 5×6 board where pieces glide with a premium 3D-pop visual style, collecting random board pickups (Power Runes for +2 ATK, Protection Wards for +2 Armor, Vital Blooms for HP recovery, and Battle Focus for combat advantages).
  • Simultaneous Combat Arena: When a piece attacks an opponent, the game transitions into a cinematic Battle Overlay. Instead of automatic capture, both pieces engage in a 3-slot simultaneous clash. Players select a sequence of actions—Jab (fast pierce), Smash (heavy strike), Parry (counter jab), Brace (mitigate smash), Mend (heal), and Rally (armor buff).
  • Super Abilities: Landing counters fills the piece's Super Bar. Charging 3 bars unlocks class-specific Super Abilities (like the King or Queen's unique Ultimates) to change the course of battle.
  • Premium Audio & Aesthetics: Features high-resolution custom chess artwork from Jos, parallax floating piece backdrops on the splash screen, responsive layout engines fitting perfectly inside Reddit's iframe, and synchronized move audio effects with local storage mute persistence.

How we built it

  • Backend: Powered by Node.js v22 serverless environment on Reddit's Devvit platform, handling secure state validation.
  • Frontend: Built using standard HTML5/Vite, styled with custom Vanilla CSS featuring glassmorphic consoles, neon borders, and keyframe animations.
  • Architecture: Set up with Hono and tRPC for end-to-end type safety between the serverless backend and the sandboxed iframe frontend.
  • Sound Design: Configured HTML5 Web Audio API supporting move-sound.mp3 with unified local preferences syncing.

Challenges we ran into

  • Stacking Layers & Stencil Scaling: Bending HTML rendering to behave like a 3D canvas. We solved this by creating complex 3D overlapping layouts using dynamic z-indices and translating floating animations independently to create a layered parallax backdrop.
  • Viewport Restraints: Bounding the game to fit perfectly inside Reddit's iframe containers without scrolling or clipping. We resolved this by defining responsive viewport height (vh) bounds, allowing the massive title logo and play button to scale dynamically to fit any display.
  • Simultaneous State Synchronization: Coordinating round-by-round reveals where both players (human and AI) submit their 3-action combat sequences, ensuring smooth animations and logic execution.

Accomplishments that we're proud of

  • Tactical depth in 5 minutes: Creating a game loop where board positions and piece stats interact dynamically. Landing a perfect counters sequence in battle is incredibly satisfying.
  • Ultra-Premium Aesthetics: Delivering a visual style featuring slow-breathing logo graphics, glowing gold capsule controls, and massive 3D chess pieces that slide up and float at offset frequencies.
  • Zero-Latency Feel: Creating a dynamic viewport swap inside the single-page DOM for credits and settings, avoiding slow iframe reloads.

What we learned

  • Stacking Contexts are powerful: Stacking context containers (z-index) and parent-relative horizontal flips (scaleX(-1)) allow complex visual modifications to sub-components without breaking core JavaScript code.
  • Devvit's Webviews are versatile: Leveraging Reddit's native APIs (navigateTo, requestExpandedMode) lets you build full-fledged web applications inside a standard social platform.

What's next for RapidChess

  • Multiplayer online: Expanding the local/AI format into real-time matchmaking, allowing Redditors to challenge each other directly in thread comments.
  • Ranked queues & leaderboard: Tracking Elo ratings across subreddits to find the ultimate RapidChess champion.
  • More piece classes & runes: Adding unique classes (like the Rook or Knight having specialized custom combat cards) to introduce even more variety.

Built With

Share this project:

Updates