DEV Community

Discussion on: Porting a board game to the web

Collapse
 
jayarghargh profile image
Justin R

hey Eric - this is really cool! How did you go about making the map. I'm defo going to put some time aside to read the rules and have a game!

Collapse
 
thrillberg profile image
Eric Tillberg

Hey Justin, thanks for the message! Yeah the map was one of the more arduous parts of the project. I started by grabbing SVGs of historical maps of the various European countries from Wikipedia (they're all open for use, as far as I could tell). This was great for the countries themselves but you may notice that each major power is subdivided into regions. For those I had to manipulate much more detailed SVGs that included interior boundaries. Anyway, with these SVGs in hand, I used Inkscape to manually futz with them until they looked halfway decent.

Russia was a special case since finding maps that were confined to only the European parts was important because of globe-curvature skewing that I got with SVGs of all of Russia. But those maps tended not to have the interior boundaries. So Russia is more done "by hand" than the others. If you look closely at the Russian borders, they are more jagged and clearly drawn with a trackpad.

That is all how I made the map look correct (or close to correct 😂). In terms of the VueJS code to make it all clickable, I had to make each province be its own Vue component so that I could load them up with click handlers and such. I believe I made use of dynamic components, but I'd have to look back at the code to confirm.