Virtual BattleMap : UI (part 1)

Yes, I’m a geek, playing RPG, TableTop and many other things since 30 years. In the 2000’s, following the trend of Magic the Gathering, there was a boom of TableTop (coming from germany). Playing D&D was no longer evil…

Aside from playing WoW in PvE HL, I also love clever indie games like Card Hunter or RimWorlds and UX between paper and technologies like Editions Volumiques or Jean Simonet (dice) or GouGou (voice).

Now that COVID-19 is accelerating we need to reduce the gap between online and offline.

• Great tools like 3DVTT, Roll20, Tale Spire, Foundry or Astral are available.
• Great content creators on Patreon like Cze and Peku (map), PaperForge (pawn), Danny the DM (3D Printing) and Magnetic Board.

Yet another Virtual BattleMap ?

Well, I give a try on a simple UI in vanilla HTML5 / CSS. The idea was to build something really simple mixing great Patreon content with Card Hunter isometric design and gameplay.

For now there is no backend, no rules, no database. I wanted to validate the most difficult part: the UI: grid, fog of war, pawn, etc … The idea is to use CSS transform (that should be handled by the browser). There is a DIV for each cell, the map can be any dimensions.

What do you think about the Dwarf ? It is an image generated in Blender from a 3D model shared by Danny the DM. I wonder if it has a color version ?

What’s Next ?

The database will be hosted on AirTable 🙂 with a NodeJS WebSocket server in front (or Lamba? and/or Firebase?) so VERY simple to add rich content, image, pawn, music, stats, etc …

Improvement of the UI/UX:

• Keep it stupid simple with helpers to count cells, roll dices, display players stats (WoW style) but no hard-coded rules: see it as a whiteboard.
• Find a way to add lighting effects, animations (GIF ?), ambient sounds, spell effects, walls ?
• Generate dungeon on the fly (at cells level or room levels)
• Connect physical dice, do computer vision, …