I made some really good progress on my Jeopardy clone yesterday. It gives me confidence that I’ll be able to finish it in time for Christmas.

Jepurdee

It’s a bit cluttered at the moment, but this is what I’m looking at. The red overlay on the left edge of the screen is just a debug box which shows the role of the app. There are three roles, Host, Jumbotron, and Player. The same app is sent to all three role types, and the app just determines which role the app should function as.

For example, the above is the Jumbotron role. The jumbotron is meant to display on a large TV in the player’s home or office. The players use their phone to either scan the QR code in the top right, or manually enter the web address listed below the QR code. The house ID is below the URL and it must be entered in the player’s phones as well.

The house ID is a unique code which ensures all players in the same room end up with the same game session running on their phones. Right now, this functionality is incomplete, so only one game per earth can run at a time. There would probably be interference if another house somewhere on earth decided to play a game at the same time. Work in Progress!

The players are given a default, androgynous name. They can rename that name to their real name, and set their preferred color.

Player Setup

During player setup, this is what displays on the Jumbotron. It all updates in real time when a player changes their name or color.

The game host has a similar display, with one difference. The game host has a menu bar at the top of their screen which advances the game to the next step. The next step in this case would be the buzzer test!

Buzzer Test

The buzzer test is all about getting the players acclimated to the buzzer. Here’s what the player sees on their phone

The player’s buzzer has a green background when their buzzer is ready to be clicked. It shows up as black when it is not.

If the player jumps the gun and presses their buzzer before the buzzer turns green, they have a half second penalty time before they can click the button again.

Pretty cool, huh? But wait, there’s more! The jumbotron gives some useful information to the players, so they can see their reaction times and the host is able to see that everyone’s buzzer is functioning correctly.

I just noticed that the side on the right is empty. The QR code should be on the right side. I’ll have to add that in today when I work on Jepurdee again.

Anyway, everyone can see their reaction times. I’m proud of this feature because it uses the actual response time measured on each player’s phone. This is important because the buzzers will be signalling via wifi, and everyone’s phone hardware is different. Oh, let me show you the host screen before I explain further.

The host is able to enable and clear the buzzers. This is similar to what the host will see when the game is running. The host will read the answer, then enable the buzzers so the players can buzz in if they know the answer. Oh yeah, there are a bunch of test answers which the host can use to train the players.

In my tests with various phones, the buzzers do not all turn green at the same time. This is due to latency and it is expected. There are a number of ways I could have worked around this, but the one I went with was that each player’s device would log the exact millisecond time stamp when their buzzer turns green. Then, the players push their buzzer, and the app takes another exact millisecond time stamp of when the buzzer was pressed.

Comparing these two timestamps, the app is able to determine the player’s response time. This response time is sent to the server, which compares all the player response times and determines which player had the lowest response time. There is a 2 second delay between the server’s first received response time and the time when server makes it’s decision, to ensure that all response times are received from any laggy phones.

The Game

Finally, players are set up, they are trained how to use the buzzers, and the game can begin.

I spent a lot of time on this game list page. It’s pretty ugly at the moment but I can always improve that in the future. This page is only going to show up to the host for now.

The game is the part I am working on now. Answer questioning functionality is implemented already, but the game host controls don’t quite work yet. I have to hide the control buttons on the jumbotron, figure out the optimal buttons to display on the host’s screen, add functionality to those buttons, and change the animations on the jumbotron.

I added this sidebar on the right side of the screen, which will persistently display the scoreboard and the QR code for new or rejoining players to enter the game. I think it is interfering with the answer screen!

I got the sidebar idea from Jackbox games. Their games are really inspiring to me. For the longest time, I had seen their games and thought, “I could make that.”

Now, I’m putting those words into action, and making a couch multiplayer game that I can be proud of!

One more screenshot, because I couldn’t fit it anywhere else. The settings page is a hidden page, accessible only by navigating to `/settings`, but it’s useful for debugging. There’s no good reason for me to share this page in this blog post other than I already took the screenshot so I didn’t want to take the screenshot for nothing!

So yeah, what do you think of Jepurdee? By the time this blog post publishes, hopefully Jepurdee will be complete and accessible on the internet! I’m thinking of buying the domain jepurdee.com since it’s available. Also there was an article on Jeopardy.com, “Top 10 things Every Jeopardy contestant should know” which mentioned that every contestant should know how to spell Jeopardy! They used the misspelling, “jepurdee” which I thought was pretty funny, and I adopted it for my game.

Now if jepurdee a common misspelling of jeopardy, people may inadvertently end up at my domain and have the chance to play my game!

I think it’s a pretty cool idea. I would like to make some more couch multiplayer games like this.

I would also like to create a game sharing feature on Jepurdee. I have a really rough feature to do this already using the upload button on the game screen.

All it does at the moment is bundle up the game assets (text data and images) and upload them to the game server. The game server hosts the images and data, then any future game app which accesses the game’s unique URL will be served the game data and images. It’s very rudimentary but it will ensure that the jumbotron ends up with any game data that was created on the host’s phone.

Speaking of phones, there is lots of improvement to be made on formatting the app for a phone screen. I generally do not follow the “mobile first” rule of thumb that is web design because I detest using smartphones. I’m a keyboard and mouse maximalist LOL.

I did build the app with phones in mind, but the game screen itself feels a little cramped on the host’s phone. For now it’s fine because I’m the host and I can deal with it. In the future, when the host is a random player in a home or office somewhere, I want their experience to be satisfactory.

So this whole project started in October when my sister K. asked me to plan the family christmas party. I decided I would develop a Jeopardy webapp and we could play it. I didn’t think it would take this long! But I’m not surprised either. There is a lot of complexity here.

I have been working with Vue.js for a year or two at this point. I’ve got a pretty good handle on it but I’m always learning new things! Just yesterday I learned that I could better handle component rendering if I used route children instead of conditionally determining what to render based on the path parameters. I’m being lazy in my explanation and not sharing any code. This makes the explanation extra bad!

Oh well.

I’ll keep this article code free, and talk about the party. After we play a few rounds of Jeopardy, the players will end up with points that they earned during the game. These points can be redeemed for real world prizes! I’m going to make a Punch-A-Present box and for one low price of 1000 points, you can punch a hole through the box and claim the present inside!

I found that picture on pinterest. I Have to make a box like that myself and fill it with small gifts.

For 1000 jepurdee points, you can punch a present!

I’ll need some consolation prizes as well. It’s possible to go negative in jepurdee, I should give those players some coal!

I’m searching on amazon for coal candy. I found some coal candy canes.

All this candy on amazon is making me hungry!

So I’m thinking I’ll award prizes after Jepurdee is over.

Ooo, I just found some gold bar favor boxes which are pretty cool!

It would be cool to give the top winners one of these bars full of treats!

OoOooo, or this gold bar door stopper/case! But this is pricey, I could only give this to the winner!

Or I could put it in the punch a present box. LOL that would be so funny!

Even if it didn’t open up, that would be a pretty great gag gift!

Wow, I really got lost on Amazon. I created a new shopping list for Christmas party items. I added lots of ideas for prizes to give out. Party favor type stuff. barrels of goo, stress balls, colorful pencils, stickers, lego minifigures, hotwheels cars, the good stuff.

Consumer bullshit! Maybe I should only get stuff that is actually useful.