Building an Escape Room with Vue and Electron

The maker’s space that I co-founded turned one year old recently and for the party I wanted to do something different, that could showcase what you could build in our space. So I convinced my co-founder that an escape room was just the thing. And it turns out, it was! We had a real blast building it and lots of folks had a great time taking on the challenge.

The easiest/hardest part of the escape room was coming up with the story. I initially wanted to build two different rooms with two themes but we ended up nixing that idea, which was wise considering how much time we ended up putting into it. The room came with several puzzles, which are detailed in this blog post on the Synergy Mill site, or check out the short video walkthrough below. The puzzle that I spent the most time on and had the most fun with though, was the computer terminal for the room.

For the hardware I used a Raspberry Pi 3, and a Raspberry Pi touch screen, and a generic USB keyboard. To get my app on the Raspberry Pi I used a cool IoT deployment service called Resin which uses Docker and can deploy/update images remotely.

For the app itself I ended up using Vue and Electron. I’d been wanting to do something with Electron and this seemed like the perfect chance. There were some decent starting points, and since I’ve been using Vue a good bit lately, I found an excellent starting point in the electron-vue, a nice boilerplate built on top of vue-cli. I also leveraged Bootstrap V4 to make the UI quick and simple.

From there I outlined what I wanted to do with the app. I decided that a fake email client was the easiest thing to build in short amount of time. Originally I had plans for triggering a fake file folder when a USB device was inserted and some other ideas. 

The Vue app consists of just a couple of primary views, a login screen and the email interface. The login screen checks for a user/pass that was hidden in the room, and reveals a hint to the location of the user/pass after several failed attempts. Once the player has passed the login screen they are presented with a simple email interface. Unfortunately I had issues with the touch screen and mouse support that I didn’t have time to solve, but bootstrap and web accessibility helped! Players were able to navigate the app using just the tab/shift-tab navigation and the enter key. The email detail screen contained three columns, the first representing folders, the second email titles, and the third the actual emails. Buried in these emails was a cipher that allowed the players to decode a message found elsewhere in the room containing the lock code for the room.

One cool feature that I added was a simple Express server to trigger some actions remotely, like starting/stopping the timer and resetting the app to the login screen. I also added a simple websocket interface to report the current countdown back to the remote operator.

The biggest challenge that I encountered, and am still working to solve, was getting more advanced hardware support working on the Raspberry Pi. I ran out of time, but I did attempt to include a hardware countdown leveraging Johnny-Five and an LED digit display. In the end I learned a lot, and I had a lot of fun building this app and I’m looking forward to building more projects with Vue and Electron. I remain hopeful about Johnny-Five but it’s not been good to me so far.

Check out the code in my Github repo

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>