HexaBattle Legends

Inspiration

Modern digital card games often feel like a second job—daily quests, ranked ladder anxiety, queue times, and aggressive monetization.

HexaBattle Legends was created to bring card games back to their core: pure strategy. No accounts, no servers, no microtransactions—just open a browser tab, play a quick match against a smart AI, and leave feeling relaxed.

A Zen card battler.

What it does

HexaBattle Legends is a single-player, browser-based strategic card game played on a unique 3×2 board that emphasizes positioning and preparation.

Core mechanics:

Front / Back Row Board Control Units in the front protect those behind them, adding spatial depth beyond single-lane games.
Elemental Counter System Five elements—Gold, Wood, Earth, Water, Fire—form a counter cycle that rewards tactical placement.
“Shift” Mechanic Playing a card onto an occupied slot pushes existing units, allowing dynamic repositioning before combat.
Simultaneous Combat All units attack at once, eliminating APM pressure and focusing the game entirely on decision-making.
Deck Building Players build custom 20-card decks, saved locally in the browser.

How we built it

React 19 + TypeScript for a fast, type-safe SPA
Custom game engine hook (useGameEngine) managing turns, AI logic, and snapshot-based combat
Tailwind CSS for rapid UI iteration and polished animations
100% client-side with LocalStorage—no backend, no accounts, instant load

Challenges we ran into

Simultaneous Combat Resolution Required snapshot-based damage calculation to prevent order-of-operations bugs.
The Shift Algorithm Recursively moving units without mutating board state was surprisingly complex.
Responsive Game Layout Solved by anchoring HUD elements with absolute positioning to keep gameplay readable on smaller screens.

Accomplishments that we're proud of

Zero-friction gameplay — open and play instantly
Clean, polished UX with drag-and-drop and clear visual feedback
Smart AI opponent that plays on curve and fills the board effectively
Entirely server-free game engine running in the browser

What we learned

Turn-based games push React state management to its limits
Game UIs often require different CSS strategies than traditional web apps
For the right project, client-only architecture dramatically improves accessibility