├── README.md
├── package-lock.json
├── package.json
├── public
└── index.html
└── src
├── components
├── Board.js
├── Game.js
└── Square.js
├── helper.js
├── index.css
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | # react-tic-tac-toe-hooks
2 | React Tic Tac Toe Game using Functional Components and Hooks
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-tictactoe",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "react": "^16.13.1",
10 | "react-dom": "^16.13.1",
11 | "react-scripts": "3.4.1"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test",
17 | "eject": "react-scripts eject"
18 | },
19 | "eslintConfig": {
20 | "extends": "react-app"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/Board.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Square from "./Square";
3 |
4 | const Board = ({ squares, onClick }) => (
5 |
6 | {squares.map((square, i) => (
7 | onClick(i)} />
8 | ))}
9 |
10 | );
11 |
12 | export default Board;
13 |
--------------------------------------------------------------------------------
/src/components/Game.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { calculateWinner } from "../helper";
3 | import Board from "./Board";
4 |
5 | const Game = () => {
6 | const [history, setHistory] = useState([Array(9).fill(null)]);
7 | const [stepNumber, setStepNumber] = useState(0);
8 | const [xIsNext, setXisNext] = useState(true);
9 | const winner = calculateWinner(history[stepNumber]);
10 | const xO = xIsNext ? "X" : "O";
11 |
12 | const handleClick = (i) => {
13 | const historyPoint = history.slice(0, stepNumber + 1);
14 | const current = historyPoint[stepNumber];
15 | const squares = [...current];
16 | // return if won or occupied
17 | if (winner || squares[i]) return;
18 | // select square
19 | squares[i] = xO;
20 | setHistory([...historyPoint, squares]);
21 | setStepNumber(historyPoint.length);
22 | setXisNext(!xIsNext);
23 | };
24 |
25 | const jumpTo = (step) => {
26 | setStepNumber(step);
27 | setXisNext(step % 2 === 0);
28 | };
29 |
30 | const renderMoves = () =>
31 | history.map((_step, move) => {
32 | const destination = move ? `Go to move #${move}` : "Go to Start";
33 | return (
34 |
35 |
36 |
37 | );
38 | });
39 |
40 | return (
41 | <>
42 | React Tic Tac Toe - With Hooks
43 |
44 |
45 |
46 |
History
47 | {renderMoves()}
48 |
49 |
{winner ? "Winner: " + winner : "Next Player: " + xO}
50 |