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.

So I decided to build a simple single page Murder Mystery app.

Features:

  • The application is built with Vue.js.
  • Inline CSS for  critical styles for the first view.
  • vuex to handle state management.
  • vue-router to manage the different ‘screens’.
  • sessionStorage to store data in case a user reloads the browser.

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:

  1. 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.
  2. 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.
  • A menu to some of the content out of the gameplay screens.
  • There is a bit of game logic that needs to be fixed still.
  • Add unit testing and continuous integration to the workflow.
  • Make the gameplay screens a bit more intuitive and clean.
  • More super cool secret features ;)