Multiplayer Trivia

A multiplayer experience that requires writing zero backend server code!

Thanks to a stream by #​100Devs very own Mayanwolfe, I was inspired to make my own trivia game, but using the OpenTrivia DB API for questions, and PeerJS for Multiplayer!

First I had to make the actual singleplayer game, which consisted of being presented a number of questions and having to select what your answer, and finally being shown the correct answer along side your choice at the end of all the questions.

Multiplayer Architecture

There are a number of ways to design P2P games, from having each client manage their own state independantly and send/receive updates from all users, to having a single client act as the host of all information.

I went with having each client responsible for their own information, as this would allow me to first rewrite the singleplayer code to first work with that own client as their first client.

As an example, at one time Minecraft had almost two modes, one for playing Singleplayer, and one for playing Multiplayer - while these obviously shared a lot of code within them, there was still a fair amount of code that had to change for each different state. Their solution - at the slight cost of computing resources - was to eliminate the Singleplayer code branch, and make Singleplayer games really be Multiplayer games, but running a local server that only one user can join.

This both allowed me to test a majority of the multiplayer code without actually having another connection join, and reduce the code complexity by having only a single codepath for each action.

Adding Features

Eventually I got the base game working, but it was time to jam-pack in as many features as I could!

First was basic multiplayer quality of life improvements, like the ability to see other usernames and if they've responded, preventing users from joining active games, etc.

Then came the actual game features - showing the correct answer of a question after the question, timers for both review and the question itself, and how many questions the round had left.

In addition every option of the API was made customizable - of course with all these settings being synced to all the other joined users.

Forced Typescript

As PeerJS was a new library to me, I wanted to have Typescript included to allow me to code more efficiently, and I decided to manually implement this, to keep things as vanilla as possible.

This involved me having to manually being in RequireJS and copy the PeerJS .js file out of node_modules, but aside from that the experience was nearly seamless.