TicTacToe Design with React Native

Greetings to all TicTacToe fans! Some time ago I designed classes for the game in this post using C++ and it was quite interesting. However, to play it, there is one more step to go. In this post I will show you the front-end design that you can play on your browser, on your Android device or even iOS since React Native enables all. I keep the same game logic and object oriented classes and finish it with the user interface 🎮

Creating the Development Environment

This is the simplest part, thanks to the nature of React Native. Follow a few steps here.

When you are done, you can use the expo-cli to launch the game on your device. You can open it in a web browser by simply clicking on the corresponding link or use Expo Client on your smart device.

The Game in JavaScript

Game Logic

Here is my javascript port of the game.

Conversion is very straightforward, so please check the previous post for implementation details.

User Interface Design

Here is the full code and the details will follow.

Cell Object

I represented each slot with Cell  object (see line 21). It has one simple task of showing the current state of a slot. It is touchable, based on TouchableOpacity  component and invokes OnPlay method with its row and column numbers. Finally, a cell gets its value by pulling from the game  object. This is refreshed with 100ms intervals via useState and useEffect methods (see line 23).

OnPlay Method

This is where a move is executed on the TicTacToe class (see line 12). It shows an alert with respect to the game state returned from Play(...)  method.

Screen Layout

The game consists of 3-by-3 grid of Cell objects other than its title (see line 41). Each of 3 rows has 3 cells. Rest of the code is the styles only.

The Game on Action

On browser you can see the game similar to below. And after you play it for a while, you can see the game result on screen. After the game is over, it automatically starts again with an empty board.

Final Words

React Native provides a plenty of features on multiple platforms yet it is simple to start with. This short post is all you need to play it on your phone as I did many times before telling you 😆