Creating A Multiplayer Poker Game For HTML5 Using Phaser, Part 5

Hello!

I hope you and yours are having a happy, safe, and fun, holiday season! 🎄

This article continues the series of developing a multi-player poker game using Node, Express, SocketIO, and Phaser 3.

If you’d like to see the series of articles thus far, please check out below:

When I first started, I was only going to build just the multi-player aspect of the game. You start the game, join a lobby, and join a room already in play, or create your own room for others to join.

However, this wouldn’t really be too much involved (even for a simple multi-player game), if I don’t flex my muscles, and include user accounts + authentication.

As a player, you’ll be able to create an account by signing up using an e-mail and password. You can also setup your own user avatar icon for display. Should you forget password or want to change it, you’ll be able to reset or modify it as well. The game will also use an emailing system to aid you in the process of resetting or changing your password. Finally, you will also be able to delete your account altogether.

This means a database will be used on the back-end to store user accounts. The back-end will then effectively use the four basic operations of data persistence, or CRUD.

CRUD stands for create, read, update, and delete. Think of it this way:

Create – Creating a new account and signing up; a new user is added to the database.
Read – When a user logs in, their credentials are checked against the existing users in the database.
Update – A user changes their e-mail, password, or avatar image, or the number of credits they hold changes as they play poker, updating their entry in the database.
Delete – A user deletes their account, also deleting their entry from the database altogether.

If interested, you can learn more about CRUD here.

In addition to the technologies listed from the prelude article of this series, I’ve decided to use the following technologies:

MongoDB

This is what I’ll be using as the back-end database.

Mongoose

Ahem, actually, the Mongoose I’m talkin’ ’bout is an Object Data Modeling (ODM) library that allows Node.js and MongoDB to talk to each other. Long story short, with Mongoose, you easily define how your data is structured in your database, and write code that correctly manipulates that data so that the structure is maintained (and thus, the integrity of your data).

MongoDB stores data as JSON objects, and the formatting is arbitrary. One of the things Mongoose does is allow you to define a structure of how the data will be stored, and it will enforce the rules of that structure to the code you write.

If you like, you can learn more about Mongoose from this article.

Passport

This Node.js middleware is used for authenticating your users when they log into your system, as well as performing other tasks that you want to to secure. You can use this along with JSON Web Tokens (JWTs) to validate the user when they make requests to your Express app.

JWT.IO

This library allows you to manage your JWTs. When a user logs in, the server will generate a JWT and return to the client. The server then acknowledges the user as “being logged in”, and the user’s client must send this token back to the server for each subsequent request.

A token is a credential that is digitally signed using a secret key (though you can use public / private keys also, but I’m using the secret key here). The signature is performed behind the scenes using an HMAC algorithm.

Although these details go beyond the scope of this article, you can learn more about JSON Web Tokens here and here.

bcrypt

This library is used for securely hashing passwords. Even in the database, the actual plaintext password is not stored in the database. Instead, an encrypted version of the password is stored instead.

So, even if you forgot your password, I cannot look up your user in the database and tell you what it is, because, I don’t know, either! 🙃

Cookies are small pieces of data that the server sends to the client. When the user performs certain actions (usually requiring authentication or validating data sent back to the server in our case), this cookie is sent with the request.

You can get a quick overview on how to use cookie-parser here.

Nodemailer

You can use this Node.js module for sending e-mails from your server to your users. You can use this to send plain text or HTML messages, include attachments, along with many other features.

For this poker game, I’m using it to send e-mails when the user forgets their password, as well as notifications if they changed their e-mail address password (to make it was them who requested the change!), as a few other account-based notifications.

Pug

It would be a pain to have to manually setup your e-mail messaging system for the various types of messages you want to send to your users (as well as litter your code with lots of string interpolation). This is where Pug comes to the rescue.

This is an e-mail templates system, and it allows you to define templates. While it has it’s own scripting language, you can set up your templates and preview how they will look when sent to the user.

You can have a look at Pug2HTML, an online conversion and previewer. Of course, you’d still need to learn the Pug syntax itself.

dotenv

When using sensitive data like your JWT secrets and e-mail credentials for Nodemailer, you’ll want to store these in some place that’s not hard-coded in any of your files. That’s where dotenv comes into play.

You can use this to store this type of data in a separate file (often called .env), and Node will load these as environment variables. A good practice is to not share this .env file, but instead, each person on your team generates their own .env file.

That’s a lot more added onto this tech stack!

It took quite a while to implement all of these and get them to play nice together. Of course, the client side also has to be able to respond, but all of these tools are used on the server side.

And I’ll admit – at first, I didn’t want to do any back-end user authentication. But then I realized that the value of an app that can perform user authentication is much more valuable than one that can’t. So I went through all the steps.

But I didn’t do it alone… hell no! I had help. Mainly help from this amazing course over on Zenva called called the MMORPG Academy.

With Scott Westover as your instructor, this course is a conglomerate of smaller courses to build a (relatively) simple multi-player MMORPG type game using all the techs mentioned above, as well as Phaser 3 on the client side.

I found this course invaluable on getting me started.

And I’m not quite done with it yet! Still to come is deploying the poker game onto a live web server (or in this case, onto the cloud using Heroku). Excited, and looking forward to finally getting this game done, hopefully within first quarter of 2022!

As I work on the game, I’ll post noteworthy updates in future articles. And you can play the work-in-progress versions of the game as I make playable updates, before the game is released to the public!

Thanks for reading, and I hope you continue to stay tuned!

– C. out.