BattleMat

Dungeon encounter

Inspiration

Many of our teammates are enthusiastic about tabletop roleplaying games, and though virtual tabletops (VTT) exist, none address some crucial problems. Most VTTs only serve as a drawing board for the players to use as a visual aid, but they do not, however, assist with many of the calculations such a game involves. Hence the need for BattleMat

What it does

BattleMat seeks to make virtual tabletop games incredibly easy to manage. Nearly all calculations necessary in Dungeons & Dragons are automated for example, including processing character attributes and abilities, calculating and keeping track of turn order, automatically managing character health and available actions per turn, and so on. Plus, enemies in BattleMat are capable of acting on their own, allowing for fun and exciting sessions with minimal input from a guiding player, making previously tedious tasks trivial.

How we built it

We started our preliminary interface with a simple grid and character tokens. When talking about differentiating our VTT from others, we really wanted to have a lot of elements that are traditionally performed manually to be baked into our design.

Following the open-source rules of DnD 5e, we utilized json files in incorporating preexisting character, mechanic, dice roll, and respective data. We also added function into inputting your own characters based on DnD Beyond profiles. We used a hugging face model to create adaptive enemy moves in fight sequences.

For our UX/UI design, we implemented Figma to first create the design we wanted based on this, and then utilized Figma's mcp within VSCode to connect our existing infrastructure and function to the updated web app.

Challenges we ran into

The road to building BattleMat has been plagued with challenges we have steadfastly been overcoming as a team. The first challenged was, of course, planning the design for BattleMat since none of us have done a project quite like this before. Then we ran into issues using other assets, importing characters using external tools like those from DnD Beyond, creating a system to manage combat, working on the aesthetics, and, most of all, implementing the AI for enemy's actions.

Accomplishments that we're proud of

Excuse me, but BattleMat looks AWESOME. Every core functionality works; it keeps track of turns, does the dice calculations, offers a list of available actions and movement ranges and all sorts of things. And the enemies act by themselves!

What we learned

We learned how to reduce a complex project into manageable steps, keeping the entire thing modular so that we could work parallelly as a team. We learned about the interaction between front-end and back-end, and we learned how to use Figma to improve the user interface.

What's next for BattleMat

We would first like to work more on the enemy AI and really polish it, as we believe it is one of the most useful and unique things about BattleMat. In particular, we would like to design a way for AI actions to be guided by the enemies' lore for even greater immersion. We would also like to make the online multiplayer functionalities more robust before moving on to adding additional quality-of-life features, and then pivoting from there into making BattleMat more broadly compatible with other tabletop games, of which there are many.

Built With

Submitted to

Knight Hacks IX

Created by

I built the initial foundation the rest of the project runs on: the grid battle map, the token system, and the combat engine, including a heuristic AI that plays monster turns. My teammates built on my designs by improving combat, adding token import for a wider variety of creature and player schemas, and creating a cleaner, better-functioning front-end UI.

What I built

Grid map and tokens: An interactive battle map where player and monster tokens can be placed and moved, with snap-to-grid positioning and distance calculation between any two tokens.
Token combat model: The stats each token carries for combat, including ability scores, AC, HP, speed, and defenses, so any token can take part in a fight.
Combat system: Weapon attacks with range validation, movement, and turn order. Attacks are rolled against AC and support critical hits, advantage and disadvantage, and per-type damage with resistance, immunity and vulnerability. Trait effects are data-driven, so new traits can be added without changing the engine.
Monster AI: A heuristic AI that picks the nearest enemy, scores each available attack by expected damage, and uses the best one that reaches. When nothing is in range, it moves toward the closest player.
Testing: Automated scenarios that exercise combat without the UI, used to check attack, range and damage behavior.

Technical setup

Server-authoritative design: Clients send intents and the server resolves them, which keeps state consistent for every player and prevents cheating.
Per-role views: Monster stat blocks stay hidden from players, while the DM sees the full breakdown.
Combat log: A detailed breakdown for the DM, and a simplified report for players showing whether the attack landed and how much damage was dealt.
Real-time multiplayer: Socket.IO sync, runnable from one Node server over a LAN or through a tunnel for demos.

Tech stack: JavaScript, Node.js, Express, Socket.IO

Andrew Skevington-Olivera
Felipe Gonzalez
Paul G Fernandez
Sydney Rich