We last left off with writing the game duck which contains all of the redux state code needed to play a full game of Tic Tac Toe. Now we will add some components to render the state and play a game. We will use Material-UI to style the game and make it responsive to mobile, tablet and desktop screen sizes. Finally, test to make sure we can play one full game where there is a winner or a draw.

Last of the dependencies

We start by adding the last two dependencies to our project:

material-ui@1.0.0-beta.43 — React component library that implements Google’s Material Design (version 1.0.0-beta.43).

— React component library that implements Google’s Material Design (version 1.0.0-beta.43). classnames — Utility for combining classes into a single string to assign to a component’s className property.

yarn add classnames

yarn add --dev material-ui@next

Gameplay and styling

Material-UI, or MUI, implements Google Material Design and contains all of the components that we need to build the UI. We will leverage the Grid, Icons, AppBar and Modals to make our game mobile friendly.

Updating entry points

Instead of using the additional font and icon library that MUI provides, we will just reference them directly from Google’s CDN. Open up the index.html file and add in the fonts and icons reference for MUI.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

...

...

</head> <body>

...

</body> </html>

Then we need to update our index.js file to dispatch a new game when the game first loads.

Since we are not persisting state we can can do a quick check if initial state is null then dispatch an action to start a new game before we render the App component.

Cleaning up App component

In the last part we had added some temporary code to validate that our redux store and ducks were working properly. We can now clean up that code and start styling the App component.

Game component

The Game component, which will be our first container component, will use the duck to get state and dispatch actions when the game is interacted with by a player.

It is a good idea to list out our prop types even though most, if not all, are coming from higher order components (lines 65–71).

Since this is a core component to the game, we want to style it so that it can adapt to screen size changes. We lay it out in a grid with two rows, when the screen is mobile sized, or two columns, when the screen is tablet or larger.

The Grid component will handle the screen breakpoints for us if we define the sizes that total up to 12 per grid item.

We also add an event handler, handleBoardOnMove , to handle a user clicking on a square in the game.

Board component