Programming Game Boards and Card Game Interactions in React

Image for post
Image for post
Photo by Markus Spiske on Unsplash

For my final project at Flatiron, I decided to give into nostalgia and program a fully functioning clone of the game Triple Triad, a card-based mini-game created for the Playstation classic Final Fantasy 8. In just three weeks, I completed the game’s MVP using React as the frontend and Rails as the backend. Three months later, Triple Triad is a project I still work on daily and the source of countless learning moments.

Looking back on my experience first creating the structure of the game, two aspects of the development process come to mind: architecting the game board structure and working out card interaction. At the time, with just 15 weeks of coding experience, facing these two conceptually difficult challenges upfront was a tall order. But if you’re needing to figure out a plan of attack with programming game boards and card games, look no further: my journey to a solution on how to program a card game with React will prove useful.

The Trickiness of Triple Triad

In Triple Triad, each player begins with a five-card hand inspired by the characters and creatures of that game’s world. Each of those cards has four values set in a diamond arrangement corresponding to each side of the card (top, left, right, bottom) and a background color signifying which player has possession of that card (A blue background for player 1 and red for player 2).

Here’s the rub: when a card (let’s call this card A) is played onto the board next to another card in the opponent’s possession (this’ll be card B), the two card’s adjacent values are compared.

If card A’s value is higher than card B’s value, card B is captured and flips to the opposite color as a result (red to blue, or vice-versa) to represent possession. If it isn’t, nothing happens and play continues until the 3x3 grid is filled, at which point the player with the highest point total is declared the winner.

Sounds straightforward enough, right? If you know anything about the complexities of programming card games, you’ll know to say no. However, as I didn’t, I charged forth with nothing but 15 weeks of code experience and blind courage.

Card Game Roadblocks

So, remember that part about comparing card values? That was a major stumbling block for me at that point in Triple Triad’s development. The good news is that I had already programmed the 3x3 game board with the following code in the Game component’s state:

Programming a game board in React is a tricky affair since you have to consider the idiosyncrasies of the particular game being played. In the end, though, inspired by previous work creating a tic-tac-toe board, I decided to create an array of objects to represent the board and the cards in each space. As seen above, each object in the array has two key/value pairs. The key is set to the board position and the value is set to the card that’s played, set to the position number on the 3x3 grid starting from the top left and going left to right and null value for card. With this set up, I’m able to set that value to an object (that object being null OR whatever card is played) while maintaining the position number for later reference.

For example, say player one plays Squall from their hand to position number three, for instance. That changes my board like so:

Programming Card Game Interactions

Still, when confronted with the challenge of comparing card values, I was at a loss. I know a lot of other developers, seasoned or not, can relate: I felt like the more I thought about the problem, the more it unraveled and the more complex it became. Needing a hand I tapped my instructor, the indomitable Caryn McCarthy, to pair program with and help me navigate the challenge of programming the deeper logic of a card game.

As the pair programming navigator, Caryn asked me the questions that helped get me closer to a starting point of a solution, something that two programmers at any level can help each other by doing. After a few questions and a much discussion, Caryn became the driver and coded the beginning of an object set to the variable comparisonMap:

comparisonMap is an object with a set of key/value pairs and is the heart of how Triple Triad processes all card comparisons. As shown above, the key is set to a number corresponding to a position on the board between one and nine. The value is an array of objects with information necessary to make comparisons.

Inside each object is information such as the number of any relevant positions. So, for position three, the only two relevant positions to make comparisons with are position two and position six.

Another piece of information are instructions on which values need to be compared from that position. For example, a card in position three compares its bottom_value with the top_value of a card in position six. The other integral function in this process, compareCardValue(), uses comparisonMap’s information to determine which of the card’s properties are relevant if there are cards present in the relevant positions.

When I finished programming a game board and card interactions in Triple Triad in React, figuring out comparisonMap and its interaction with compareCardValues() taught me a few things. The most important was how vital it is to reduce complexity by using variables with key information and helper functions as often as possible. While this is a procedural way of working out this issue, it stands alone as one my favorite parts of figuring out how to program a card game in React.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store