Shifting Stones Web Application

The Web App

My wife and I love to play board games. The problem is, after a long day of working and wrangling kids we don't always want to sit at a table to play a board game and would rather play a more portable board game while relaxing on the couch.

Shifting Stones, a game by Gamewright© games, is one of our new favorite light games to play. It's lightweight enough to play at the end of a long day, but with a decent amount strategy.

The problem is, the game does need a flat surface big enough to house the 9 tiles in a grid. While this is a very portable game most board game standards (just a deck of cards and 9 "stone" tiles), there was room for improvement. As we were trying to play Shifting Stones on the couch one evening, I realized I could put my software development skills to work and make the game even more portable.

shiftingstones.ryanmellmer.com is a web-based board for use with the Shifting Stones physical game. This isn't a mobile-based version of the game, but rather a digital board to interact with while using the physical cards that came with the game. This means that all you need to play on a plane trip or just a trip to the couch is the deck of cards that came with the game and a tablet/computer (a phone isn't really large enough to make this convenient).

Technical Details

I built this app using React (with TypeScript), and overall it's pretty simple. Every page load a random board gets generated, and tiles can be dragged and dropped around the board. Double tapping/clicking a tile will flip it over to the other side. Each stone is a React component, and React manages the state of all of the stones as they get flipped/dragged around the board.

During development I was introduced to the disparity between mouse events and touch events for the first time. Mobile browsers (at least Safari and Chrome) don't register finger touch events as mouse events, so if you want to handle both mouse AND touch events then both sets of event listeners need to be implemented. Further, the events don't behave the same way: mouseover events give you target element the mouse is currently hovering over, and touchmove events just give you the X and Y coordinates of the touch event. These differences lead to different implementations for mouse and touch events.

The application is hosted in AWS in an S3 bucket behind a CloudFront distribution. While this site doesn't really need SSL as there's no sensitive data being sent across the wire, I created a cert anyway as AWS makes it so easy to do.

Future Plans

The MVP is done and can be used to play the game with. However, I do have plans for some QoL improvements like keeping a history of moves to be able to "undo" and "redo" moves, having a link to the rules-sheet, caching board position in a cookie in case of an accidental refresh, and limiting stone movement to only valid adjacent movements per the game rules.

Thanks for reading, if you like this project and end up using it for your own gameplay, please drop a comment below and let me know!