Project Overview
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.
Tools Used for Outbreak Project
-
React – JavaScript library for building UI’s
-
Redux – JavaScript library for managing application state
-
SCSS – Style sheet language
-
Mocha Chai – Unit testing frameworks
-
JSON – Data storage object
-
Git – Version control system
-
nTask – Project management tool
-
Heroku – Cloud platform for building apps
Planning
I started the project by thinking about how to divide up the project into releases and sprints and divided it into two releases.
Release # 1
Goal: Create 1 Player game version
-
UI/ UX Setup
-
React Application Setup
-
Initial Game Setup Functionality
-
Gameplay Functionality
-
Player Role and Event Card Functionality
-
Game Over / Win functionality
-
Responsiveness
-
Deployment
Release # 2
Goal: 2 – 4 player game version
-
Add in 2 – 4 player functionalities
-
Create node.js backend with socket.io to allow players to play online
UI/UX Setup
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.
Game Card Design
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.
SCSS Setup
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.
React Components
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.
Game Setup Functionality
After completing the UI/UX setup, it was time to start working on the game logic. I decided the best place to begin was to program the game setup. For those unfamiliar with the board game or who need a refresher, the game setup steps are shown below.
-
Place a research station on Atlanta
-
Shuffle player cards and give each player a card and pawn matching the color of the card
-
Remove Epidemic cards from the deck and deal player cards to the players. Cards are given per the number of players. (2 Players – 4 Cards. 3 Players – 3 Cards. 4 Players - 2 Cards)
-
After the Player Cards are dealt, split the player card deck into 4 equal piles. Place an epidemic card on top of each pile. Shuffle the piles individually and stack them on top of each other
-
Shuffle the Infection Cards
-
Infect 9 cities by drawing the top 9 cards from the infection deck. Placing 3 cubes on cities from first 3 cards, 2 cubes on next 3, and 1 cube on last 3 cities
I decided to start by developing a function to shuffle the player cards and infection cards. Since both decks use the City Card List JSON file and both decks need to be shuffled, one function was setup to handle both decks.
Next, I needed to develop a function that splits the remaining player deck into the number of epidemic cards in the game and places one epidemic card into each split part of the deck. I decided to do this by creating a function that returns an array of numbers that show at which card in the player deck an epidemic card should be placed. The cards are then placed into the deck using the JavaScript slice method.
Mocha Chai Unit Testing
To help create these game setup functions and to be assured they work, I set up unit testing using Mocha Chai for these functions. The below unit test is used to test the getEpidemicCardIndex function. Since this function will return a different array of values each time it is run because of the randomization inside the function, I could not write a unit test expecting the same values each time the test is run.
However, if I pass the function 50 for the deck length and 4 for the total epidemic cards, I know that the first index returned will always be a value between 0 and 11, the second index will be a value between 12 and 23 and so on. This is why the below unit test should pass each time it is run and will tell me whether the function is working properly. Along with the below unit test, I created a few more tests with different parameters being passed into the function to assure myself that the function will work for all cases.
Animations
Deal Card Animations
Infect Animations
Gameplay Functionality
Redux
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.
Player Turn
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.
- A player gets 4 actions during their turn and can choose from any of the movement and other actions shown below
- After a player took 4 actions, 2 Player Cards are drawn
- Flip over the infections cards referencing the infection tracker for the amount to flip over. Infect the cities with 1 cube each. If a city has 3 cubes, an outbreak occurs
Player Turn Phases
-
Drive – Move to a city directly connected to the current player’s city
-
Direct Flight – Discard a city card to move to the city on the card
-
Charter Flight – Discard a city card that matches the city you are in to move to any city
-
Shuttle Flight – Move from a city with a research station to any research station city
Movement Actions
-
Build a Research Station - Discard a city card that matches the city you are in and place a research station
-
Treat Disease – Remove 1 disease cube from the city you are in
-
Share Knowledge – Trade city cards with a player if you are both in the same city and one player has the city card matching the city the players are in
- (Share knowledge To be developed during 2nd release)
-
Discover a Cure – At a research station, discard 5 city cards of the same color to cure a disease