Building An Ethereum Simulation Game – Part 3 – The Front End
Tags: ethereum, dapp, dapps
Published: 2020-04-02 18:41:05

---
title: Building An Ethereum Simulation Game – Part 3 – The Front End
published: true
date: 2020-04-02 15:44:04 UTC
tags: Ethereum,dapp,dapps,ethereum
canonical_url: https://blog.coincodecap.com/building-an-ethereum-simulation-game-part-3-the-front-end/?utm_source=rss&utm_medium=rss&utm_campaign=building-an-ethereum-simulation-game-part-3-the-front-end
---

## Recap

In [part one](https://blog.coincodecap.com/an-ethereum-simulation-game-part-1/) I outlined the idea for a Tennis Manager simulation game on the Ethereum Blockchain. I created the ERC721 Token and the `TrainableTennisPlayer` contract which enables owners to increase their player stats by training or resting.

[Part two](https://blog.coincodecap.com/building-an-ethereum-simulation-game-part-2/) walked through the introduction of the `CompetingTennisPlayer`contract, responsible for calculating the winners of matches between players.

Since then, I’ve written unit tests for those contracts. They are by no means complete, but I wanted to try building out a usable group of contracts as soon as possible to test out a basic front. _If you’d like to help out with testing and building the application, check out the_ [_Github repo_](https://github.com/alexroan/tennis-manager)_._

I’ve also altered the `TennisPlayerBase` contract to extend `ERC721Enumerable`, instead of the standard `ERC721` token provided by [Openzeppelin](https://openzeppelin.com/contracts/?utm_source=coincodecap). This enables our game to retrieve all tokens owned by an address using `_tokensOfOwner(address)`. Implementing this means not requiring the user to remember their token ID every time they log in.

As I mentioned in the [previous article](https://blog.coincodecap.com/building-an-ethereum-simulation-game-part-2/), I’m looking forward to getting a rudimentary interface up and running to start interacting with the game.

## Pulling It Together

Figure 1 shows a diagram of the contracts after the previous installment.

![](https://cdn-images-1.medium.com/max/1600/1*687m7MClRIxq3PYk1yVYqg.png)<figcaption>Figure 1: Contract structure</figcaption>

I want the game Dapp accessible through as few Smart Contracts as possible, so the front-end code doesn’t get too complicated. Hence the reason for `SomethingHere`. 

I’ve created a contract in place of `SomethingHere` is called `TennisPlayer`. This is shown in the following code.

{% gist https://gist.github.com/alexroan/8866c62d41822a5d3602d77b663fabfd %}

[view raw](https://gist.github.com/alexroan/8866c62d41822a5d3602d77b663fabfd/raw/e1890acf0b362fc66fedb61bcab012a4e0196194/TennisPlayer.sol)[TennisPlayer.sol](https://gist.github.com/alexroan/8866c62d41822a5d3602d77b663fabfd#file-tennisplayer-sol) hosted with ❤ by [GitHub](https://github.com)

  

Notice how `myPlayers()` on line 9 uses the `_tokensOfOwner()` function inherited from `ERC721Enumerable`. As mentioned earlier, this allows the front-end to load all players owned by the user.

## Creating New Players

In part one, I created the `newPlayer()` function in `TennisPlayerBase` with the custom access modifier `onlyOwner` (inherited from Openzeppelin’s `Ownable` contract). This means that only the owner of the token can create new players, and no one else. It has to be this way if the game is to be in control of setting the starting attributes of new players. _Otherwise, a user can create a new player and max out the stats on immediately_.

For this to work, we need an overarching `Game` smart contract which itself creates the `TennisPlayer` ERC721 token contract when it is deployed, hence becoming the owner.

The following smart contract which does this, _Game.sol_.

{% gist https://gist.github.com/alexroan/d1d2aec28418b6154edb971a8cb3c701 %}

[view raw](https://gist.github.com/alexroan/d1d2aec28418b6154edb971a8cb3c701/raw/9e88d14616c41e893ae2fe3d553bb7d802236399/Game.sol)[Game.sol](https://gist.github.com/alexroan/d1d2aec28418b6154edb971a8cb3c701#file-game-sol) hosted with ❤ by [GitHub](https://github.com)

  

Notice the default attribute values from lines 11 to 16. Every new player starts with these. In the future, an element of randomness could be introduced so each new player has slightly different strengths and weaknesses. ([although randomness is a sticking point](https://www.sitepoint.com/solidity-pitfalls-random-number-generation-for-ethereum/))

The smart contract also stores an address called `publicTokenAddress` representing the location of our ERC721 token on line 9. This is retrieved by the constructor when the token is created on line 19.

The `newPlayer()` function is exposed publically on line 22, taking only the name, age, and height of the new player from the user. This is the entry point into the game Dapp.

At this stage, users can create new players through the `Game` contract, and interact with functions in `TennisPlayer` to train rest and compete against other players. This seems like a great place to start building the front end. 

* * *

## **Front End**

Truffle suite provides a bunch of Truffle boxes that come packaged with a framework of your choice. I’m using the React box, with Redux (which I added in myself).

To enable our DApp to interact with the game, the Redux store needs to hold information about the Blockchain it’s connecting too, the Smart Contracts, and the account being used by the user.

I use [this pattern](https://medium.com/better-programming/ethereum-dapps-how-to-load-the-blockchain-8756ca0fa0d1) to ensure all of this gets loaded correctly. Initially, it can look a bit overkill, but if something goes wrong in the loading phase, it helps to visualize it.

![](https://cdn-images-1.medium.com/max/1600/1*Ja1mE890ULBapxOMa1O6wA.gif)<figcaption>Figure 4: Loading the Blockchain</figcaption>

![](https://cdn-images-1.medium.com/max/1600/1*mJuMcUxm8HCn0EknsKElHw.gif)<figcaption>Figure 5: Loading the Blockchain</figcaption>

## Displaying Players

To display all the players owned by the user, the DApp needs to call the `myPlayers()` function in the `TennisPlayer` contract, and store the results in the Redux store. From there, the component can select the data, and display it on the page.

I’ve written a component responsible for this called `PlayerList`, shown in the following code.

{% gist https://gist.github.com/alexroan/a83d88fb5b4f325d76dca630d849b4bb %}

[view raw](https://gist.github.com/alexroan/a83d88fb5b4f325d76dca630d849b4bb/raw/f0bf3714902c6cd02ac3e43df5654f64fa61a0dd/PlayerList.js)[PlayerList.js](https://gist.github.com/alexroan/a83d88fb5b4f325d76dca630d849b4bb#file-playerlist-js) hosted with ❤ by [GitHub](https://github.com)

  

`PlayerList` renders a [Bootstrap](https://getbootstrap.com/) card with a title, a list of players, and a form to create a new player. Without any players, it looks like Figure 7, and once a player is created by the user, the list displays the ID, shown in figure 8.

![](https://cdn-images-1.medium.com/max/1600/1*s14Q1u0b7dfQdjLvgqhUSA.png)<figcaption>Figure 7: PlayerList with no players</figcaption>

![](https://cdn-images-1.medium.com/max/1600/1*uWVj9OIioHkGcbm0nEFWrw.png)<figcaption>Figure 8: PlayerList with player 0 in list</figcaption>

This list is selectable. By clicking an item in the list the DApp retrieves the details of the player and stores them in the Redux store. 

## Displaying Player Details

Another component called `PlayerDetails` is responsible for selecting player details from the Redux store and displaying them on the page.

The following shows the code for the `PlayerDetails` component.

{% gist https://gist.github.com/alexroan/4cb6cabdbef915d1c5ec1cf85832abc2 %}


[view raw](https://gist.github.com/alexroan/4cb6cabdbef915d1c5ec1cf85832abc2/raw/9798cab9ac50f999275b42e133eda4b27826d082/PlayerDetails.js)[PlayerDetails.js](https://gist.github.com/alexroan/4cb6cabdbef915d1c5ec1cf85832abc2#file-playerdetails-js) hosted with ❤ by [GitHub](https://github.com)

  

This component renders another Bootstrap card, and when active looks like Figure 10.

![](https://cdn-images-1.medium.com/max/1600/1*whCH9oxqGGsV3XH7DUkkcQ.png)<figcaption>Figure 10: Player Details card</figcaption>

Pulled all together, Figure 11 shows the front end in its current state. Very basic, very clunky, and nowhere near finished. It doesn’t yet implement all of the features available in the Smart Contracts, but it’s a good start.

![](https://cdn-images-1.medium.com/max/1600/1*0OrrsfANHNuhhoY1_PB3jw.png)<figcaption>Figure 11: Full front-end</figcaption>

* * *

## Next Steps

_This project is in active development. At the time of writing, the current state of the code is as described in this article._

I want to be able to train, rest and compete with players against each other through the interface as soon as possible. Training and resting are going to be the next features I work on since they only require one player, where competing requires at least two so is slightly more compilated.

Once all available Smart Contract features are supported, I’ll look to expand the match logic, or jazz up the front-end to make it look more enticing and game-like.

There’s still a long way to go, but getting the full stack working together is a big step!

The code repo is on Github so it’s public and open to pull requests. If you’re interested in helping out please to contribute! [Here is the repo.  
](https://github.com/alexroan/tennis-manager)

* * *

### Further Reading

- [A Beginner’s Guide to DeFi (Decentralized Finance)](https://blog.coincodecap.com/a-beginner-guide-to-defi-decentralized-finance/)

- [Blockchain Development Resources To Follow Right Now](https://medium.com/blockcentric/blockchain-development-resources-b44b752f3248)

- [What are Dapps? (An ultimate guide)](https://blog.coincodecap.com/what-are-dapps-an-ultimate-guide/)

- [Ethereum Name Service (ENS)- An Overview](https://blog.coincodecap.com/ethereum-name-service-ens/)

- [A list of resources to learn Blockchain, Ethereum, and DApp developmentmedium.com](https://medium.com/blockcentric/blockchain-development-resources-b44b752f3248)

The post [Building An Ethereum Simulation Game – Part 3 – The Front End](https://blog.coincodecap.com/building-an-ethereum-simulation-game-part-3-the-front-end/) appeared first on [CoinCodeCap Blog](https://blog.coincodecap.com).