OGUMAN / tic-tac-toe-online

The Tic-Tac-Toe online game with solo or multiplayer mode made with React.js, SCSS, and Socket.IO

The client of Tic-Tac-Toe online

This is a client-side app of the Tic-Tac-Toe online game built using React.js. The game allows two players to play against each other in real time, using Socket.IO for communication between the server and the client. You can also play solo with a bot and customize the game with settings like cell row width or difficulty.

Here is the GitHub repository for the server https://github.com/OGUMAN/tic-tac-toe-server

What is Tic-Tac-Toe?

Tic-Tac-Toe is a paper-and-pencil game for two players who take turns marking the spaces in a three-by-three grid with X or O. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner. If there are no free cells and nobody won - it's a draw.

How to Play

Open the game in your browser https://portfolio-tic-tac-toe-online.onrender.com

Solo

1. Click "Single-player game"
2. The difficulty is medium by default and the field width is 3 cells
3. To change the difficulty or field width, go to the menu and click the settings button to the right of the "Single Player" button

Multiplayer

1. Click "Multiplayer"
2. Wait for another player to connect
3. Once the second player has connected, the game will start automatically
4. Players take turns clicking on the game board to place their X or O
5. Players can vote to play again after the game ends
6. You can open a chat by clicking on the chat icon in the upper left corner
7. Every step takes up to 35 seconds
8. To choose a nickname, click on your profile in the upper-right corner and enter the desired nickname

Installation

1. Clone this repository by writing git clone https://github.com/OGUMAN/tic-tac-toe
2. Run npm i to install the dependencies
3. Run npm start to start the client
4. The client should now be running at http://localhost:3000