-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
86 lines (68 loc) · 1.72 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import './App.css';
import React, {useState} from "react";
import {ScoreBoard} from './Components/ScoreBoard';
import {Board} from "./Components/board"
import {ResetButton} from "./Components/ResetButton"
function App() {
const WIN_CONDITIONS= [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
]
const [board, setBoard] = useState(Array(9).fill(null));
const [xPlaying, setXPlaying ]= useState(true);
const [scores, setScores] = useState({xScore:0, oScore:0})
const [gameOver, setGameOver]= useState(false);
const handleBoxClick =(boxIdx)=>{
const updatedBoard= board.map((value, idx)=>{
if(idx=== boxIdx){
return xPlaying===true ? "X":"O";
}
else {
return value;
}
})
const winner=checkWinner(updatedBoard)
if(winner){
if(winner==="O"){
let {oScore}=scores;
oScore+=1;
setScores({...scores, oScore})
}
else {
let{xScore}=scores;
xScore+=1;
setScores({...scores, xScore})
}
}
console.log(scores);
setBoard(updatedBoard);
setXPlaying(!xPlaying);
}
const checkWinner = (board)=>{
for( let i=0;i<WIN_CONDITIONS.length;i++){
const [x,y,z]= WIN_CONDITIONS[i];
if(board[x] && board[x]===board[y]&& board[y]=== board[z]){
setGameOver(true);
return board[x];
}
}
}
const resetBoard =()=>{
setGameOver(false);
setBoard(Array(9).fill(null));
}
return (
<div clssName="App">
<ScoreBoard scores={scores} xPlaying={xPlaying}/>
<Board board={board} onClick={gameOver ? resetBoard : handleBoxClick}/>
<ResetButton resetBoard={resetBoard}/>
</div>
);
}
export default App;