A digital scoreboard for Game of Thrones: The Board Game with Mother of Dragons. Designed to display the full game state on a TV during play.
We played the Game of Thrones board game regularly after work with coworkers. The 2nd edition with the Mother of Dragons expansion is a complex game and the physical components hide a lot of information as the game progresses. Tracking who controls what, who owes what, and what the actual score is becomes its own challenge on top of actually playing.
I built a scoreboard to run on a laptop hooked up to a TV so the full game state was visible to everyone at all times without digging through the components. The goal was to make it look as close to the real board game as possible. A lot of effort went into recreating the assets faithfully, and drag and drop makes moving pieces around feel natural.
React with Redux for state management. This was a deliberate choice since I was learning Redux at the time and a game with complex shared state was a good real-world use case for it. Drag and drop is handled through react-beautiful-dnd, which I also picked up on this project. styled-components for styling. No backend, everything lives in the client.
This project was running on multiple learning tracks at once. React, Redux, and react-beautiful-dnd were all new at the time. The game state was complex enough that Redux made for a good real use case: tracking houses, scores, power tokens, and game phases across the board would have been messy with local state alone. Getting drag and drop to feel right while respecting the game's own rules for what can move where took more iteration than expected.