I recently started playing the board game Pandemic and thought it would be a fun project to create a React application based on the game. While playing the board game (and being a React developer who sees components everywhere), I was able to identify many components including; player cards, infection cards, disease cubes, and player pawns which I knew I could code in a way to pass different props to create all the game content I need.
With various player actions, event cards, unique player abilities, and the overall gameplay I knew the logic would be an enjoyable challenge to undertake.
I started the project by thinking about how to divide up the project into releases and sprints and divided it into two releases.
My goal for designing the board game was to make it look similar to the original board game but also to add some personal touches. I found a dark-themed map to use as the board and 4 different disease images. During this stage, I also had to gather a city image for each city in the game to be used for the game cards and optimized these images to a file size of under 100KB to improve app performance.
The remaining game components including game cubes, player pawn, disease vials, city markers, event cards, epidemic cards, outbreak tracker, and infection rate tracker I designed using CSS.
Needing a way to dynamically populate and design the Player and Infection Cards, I created a City Card List JSON file with all the cities needed for this card. This JSON file was also used for other game functionality such as knowing which cities are direct connections to the city you are currently in.
I redesigned the Player and Infection Cards by adding a city image to the card since it would give each card a unique look.
In this project, I decided to use SCSS as my stylesheet language. One of the main reasons I choose to use SCSS is because it helps organize my CSS code into modules. The below image shows my main SCSS file which is the file that is imported into my React application directly but contains the remaining SCSS imports. The file shows the organization structure of my stylesheet folder.
I also used some other SCSS features such as for loops which helped me create the red gradient effect on the Outbreaks tracker as the tracker goes from 0 – 8.
While designing the components for the application, I was also starting to create the React structure of the application which is shown in the following image. Some of the components are hard to show visually since I used a few overlays such as Player, Research Station, Disease, Card, and City overlays. I decided to use many overlays to modularize my code and for each overlay to be responsible for certain parts of the game.
Before I continued to start the Action Functionality portion of the project, I decided it would be worthwhile to add Redux to the project because most of the game state was set up in the main Parent component and I was passing a lot of props down to different children components. It was also easier to view most of the game data in Redux dev tools and it helps organize the code.
During this release, I worked on all 3 player turn phases and all the actions except Share Knowledge. Share Knowledge functionality will be created during the 2 – 4 player release of this project since it is not needed for a single-player game.
Phases 2 and 3 of a player’s turn to draw cards were already programmed in the Game Setup sprint so I was able to reuse that code by passing different parameters into the draw card functions.