Some background first... Just before the pandemic, my daughter got the popular Ticket To Ride board game and we were hooked. It is a fun strategy game to play with 3 to 5 players. And then her job took her out of town and she carried it with her to play with friends. That left a void. During the pandemic, I started to look at game engines on the browser and looked at a few and settled on Phaser. Did the "usual suspects" of Solitaire and Memory game, just to know the ropes. Used parcel bundler and socket.io to bundle Phaser into the game to build a two player game, with expressjs at the backend for multiplayer socket.io communication. But it was bothering me that would it make sense to scale up and develop a multi-player Ticket to ride game which my family can play with few of us in one place and my daughter in another town.

It was a coding challenge, as the game play is slightly complex. The codingame site ranks Ticket to Ride difficulty level as Very Hard. Anyway, as I have played the board game and with the Rules book in hand, got down to develop a version using Phaser and parceljs. Wanted a realistic board and ended up taking the watercolor map from maps.stamen.com. Overlayed it with official Ticket to ride Europe map and drew lines for the tracks and saved it as svg (using Inkscape). Read the svg coordinates and converted to json which is I used to render the board.

Three of us played, and as Phaser uses WebGL by default, on Chrome it occasionally used to slow down. And game programs are paused when user minimizes the browser (requestAnimationFrame loops are paused). This happens when other players are waiting for a player to finish their turn. This caused me to rework the game logic to allow users to refresh the page at any time and show players the current state of the game. This made me move the game logic from the front end to the back end and let the front end just collect user interactions and send it to the back end. Tween animation of card movements became slow in Phaser occasionally (never figured out why).

It was bothering me that for card based board games, Phaser or game engine based development seem overkill. With simple SVG and CSS animation, vanilla javascript (No React, Vue or Angular overheads) , and socket.io for communication between server and players, one could achieve the same. So I ended up completely rewriting the frontend using SVG and CSS animation, with not a single line change in the backend code, which remained the same as my first Phaser version. Also, I ran into esbuild. Wow! Blazingly fast bundler written in Go. Moved the bundler to esbuild and here is the result.

https://github.com/ravirangan09/svg-ticket2ride

I played the new SVG version with my family and it worked flawlessly without any reload or performance issues. I learnt a lot during this journey and some of my key takeaways are...

• Turn based multiplayer board game development
• Graph theory (to calculate scores)
• Web socket communication
• SVG and CSS animation

Have a nice day folks....