Online Card Game with Node.js and Socket.io – Episode 7

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

For some of you who have been actively following my blog this is going to be a big breakthrough. After all the previous 6 posts about an online cardgame, finally I'm ready to release the code.

Please take the codebase with a pinch of salt. It's not the most beautiful JavaScript code that you've ever seen probably and I'm sure it could be improved a lot and I'm also aware that there are some things in there that don't work as expected, but I got a lot of emails from you guys, and you all wanted to see the code so now here it is.

Let's go through the basics. Once you've checked out the repository from GitHub, you need to follow a few steps to get the beast up and running.

  1. npm install && bower install will install the appropriate node packages such as socket.io and express as well as the required 'frontend' CSS and JS libraries (jQuery and Bootstrap)
  2. Edit server.js and make sure that the port is suitable for your needs (by default the application launches on port 8080).
  3. Edig client.js and make sure that you connect to the IP/port that you've setup in the previous step
  4. Execute node server.js

That should be it. If you now navigate to the IP/port combination specified before you should see a window asking for a Player's name. Once you enter that you will need to wait for a second player to join the "battle".

There are a few things that I'd like to point out now:

  • The room ID is hardcoded to be 1. This needs to change and hopefully sooner or later I will get the time to change it
  • There's literally no work done when a client disconnects from the game (either on purpose or by mistake), again this is not the best
  • Rooms/tables can't be created at the moment - this is coming in the future as well

The card images are taken from wikipedia - I'm still awaiting the right icons from Font Awesome - once that's done, I will be able to generate my own cards using CSS.

I welcome any constructive feedback.