diff --git a/tic-tac-toe-app/App.jsx b/tic-tac-toe-app/App.jsx
index 25cfd67..242438f 100755
--- a/tic-tac-toe-app/App.jsx
+++ b/tic-tac-toe-app/App.jsx
@@ -1,5 +1,7 @@
const App = () => {
- return A tic-tac-toe game
;
+ return (
+
+ )
};
ReactDOM.render(, document.querySelector('.container'));
diff --git a/tic-tac-toe-app/Cell.jsx b/tic-tac-toe-app/Cell.jsx
new file mode 100644
index 0000000..54f8cb2
--- /dev/null
+++ b/tic-tac-toe-app/Cell.jsx
@@ -0,0 +1,17 @@
+const Cell = (props) => {
+ const [square, setSquare] = React.useState('')
+
+ //the cell only know its own value
+ const changeCellValue = () => {
+ setSquare(props.turn);
+ props.changeTurn();
+ props.updateBoard(props.id, props.turn);
+
+ };
+
+ return (
+
+ );
+};
diff --git a/tic-tac-toe-app/GameBoard.jsx b/tic-tac-toe-app/GameBoard.jsx
new file mode 100644
index 0000000..503f993
--- /dev/null
+++ b/tic-tac-toe-app/GameBoard.jsx
@@ -0,0 +1,72 @@
+const calculateWinner = (board) =>{
+ const winningConditions = [
+ [0,1,2],
+ [3,4,5],
+ [6,7,8],
+ [0,3,6],
+ [1,4,7],
+ [2,5,8],
+ [0,4,8],
+ [2,4,6]
+ ];
+
+ for(let i=0; i < winningConditions.length; i++){
+ const [a,b,c] = winningConditions[i];
+ if(board[a] && board[a] === board[b] && board[a] === board[c]){
+ return board[a];
+ }
+}
+ return null;
+};
+
+
+const GameBoard = () => {
+ const [board, setBoard] = React.useState(new Array(9).fill(null));
+ const [turn, setTurn] = React.useState('O');
+
+ const updateBoard = (i,player) => {
+ // add the player value on the board[i]
+ const newBoard = board.slice();
+ newBoard[i] = player;
+ setBoard(newBoard);
+ };
+
+ const changeTurn = () => {
+ if (turn === 'O'){
+ setTurn('X');
+ }
+ if(turn === 'X'){
+ setTurn('O');
+ }
+ };
+
+ // first i want to check the state of board
+ const winner = calculateWinner(board);
+ let status;
+ if(winner){
+ status = `The winner is ${winner}`;
+ }
+ return (
+
+
It is currently {turn} turn
+
{status}
+
+ |
+ |
+ |
+
+
+
+ |
+ |
+ |
+
+
+
+ |
+ |
+ |
+
+