Building a Murder Mystery App with Vue.js

Mafia is a social-deduction party game. It’s great with a large group of people and doesn’t take much more than a few playing cards and some imagination.

I was playing it recently with a group of friends when I thought, “do we really need a deck of cards for this?”. The cards are really only used at the beginning of the game so players can be secretly assign different roles. After everyone knows their own roles, the cards are no longer needed.

Challenges

Right now the application is hosted on GitHub Pages. This means it lives in a subdirectory. The vue-cli configuration did not play well with this because:

With vue-cli, resources are served from the absolute path /static/ instead of a relative path where the app actually lives. This resulted in several 404’s.

vue-router will use the root domain instead of the app’s URL when updating routes if you use the ‘history’ mode. I prefer that, but had to fall back to the default hash mode for it to work properly.

To fix these issues, I first had to update the config/index.js file. Setting the assetsPublicPath property to ” instead of ‘/’ fixed the missing resources. Next, I set the src/router/index.js to use the default mode instead of ‘history’.

The very first push with the application had all my styles and formatting living within the source files. The only thing that was not was the index.html file containing the app’s target <div>, and my footer credits. This was a problem because the styles for the footer did not display right.

The simple fix of pulling some styles out of the app and putting them in the index.html file was enough to fix the issue. Now, as the app is loading up, users see a more immediate page load with some very basic styles. It’s a faster perceived load time, and no flash of unstyled content. Nice!

This was also a major lesson in application architecture. Going forward I think I’ll start with a white board instead of with the code.

Road Map

Service Workers to make it a progressive web app with offline capabilities.