diff --git a/src/TicTacToe/Root.tsx b/src/TicTacToe/Root.tsx index d565e6e..472c86e 100644 --- a/src/TicTacToe/Root.tsx +++ b/src/TicTacToe/Root.tsx @@ -1,159 +1,156 @@ -import React from 'react'; -import { useState } from 'react'; -import './style.css'; +import React from "react"; +import { useState } from "react"; +import "./style.css"; function TicTacToe() { - const [gridState, setGridState] = useState(Array(9).fill(0)); - const [playerState, setPlayerState] = useState(false); - const [winState, setWinState] = useState(0); - let localWinState = winState; - - function updateGridState(index : number, state : number) { - gridState[index] = state; - setGridState(gridState); - } + const [gridState, setGridState] = useState(Array(9).fill(0)); + const [playerState, setPlayerState] = useState(false); + const [winState, setWinState] = useState(0); + let localWinState = winState; - function playTurn(index : number) { - if (gridState[index]) return; - if (winState) return; + function updateGridState(index: number, state: number) { + gridState[index] = state; + setGridState(gridState); + } - const newState = playerState ? 2 : 1; - updateGridState(index, newState); + function playTurn(index: number) { + if (gridState[index]) return; + if (winState) return; - const winner = checkWinCondition() - if (winner) { - localWinState = winner; - setWinState(winner); - return; - } + const newState = playerState ? 2 : 1; + updateGridState(index, newState); - setPlayerState(!playerState); - } - - function checkWinCondition() : number { + const winner = checkWinCondition(); + if (winner) { + localWinState = winner; + setWinState(winner); + return; + } - function getWinningValue( - a : number, - b : number, - c : number - ) { - if ((a === b) && (b === c) && (a === c)) { - return a; - } - return 0 - } - /* - * Diagonals - */ - { - const a = gridState[3 * 0 + 0]; - const b = gridState[3 * 1 + 1]; - const c = gridState[3 * 2 + 2]; - const winner = getWinningValue(a, b, c); - if (winner) return winner; - } - { - const a = gridState[3 * 0 + 2]; - const b = gridState[3 * 1 + 1]; - const c = gridState[3 * 2 + 0]; - const winner = getWinningValue(a, b, c); - if (winner) return winner; - } - /* - * Rows and Columns - */ - for (let row = 0; row < 3; row++) { - const a = gridState[3 * row + 0]; - const b = gridState[3 * row + 1]; - const c = gridState[3 * row + 2]; - const winner = getWinningValue(a, b, c); - if (winner) return winner; - } - - for (let column = 0; column < 3; column++) { - const a = gridState[3 * 0 + column]; - const b = gridState[3 * 1 + column]; - const c = gridState[3 * 2 + column]; - const winner = getWinningValue(a, b, c); - if (winner) return winner; - } + setPlayerState(!playerState); + } - const isDrawState = () => { - for (let i in gridState) { - if (!gridState[i]) return false; - }; - return true; - } - if (isDrawState()) return 3; + function checkWinCondition(): number { + function getWinningValue(a: number, b: number, c: number) { + if (a === b && b === c && a === c) { + return a; + } + return 0; + } + /* + * Diagonals + */ + { + const a = gridState[3 * 0 + 0]; + const b = gridState[3 * 1 + 1]; + const c = gridState[3 * 2 + 2]; + const winner = getWinningValue(a, b, c); + if (winner) return winner; + } + { + const a = gridState[3 * 0 + 2]; + const b = gridState[3 * 1 + 1]; + const c = gridState[3 * 2 + 0]; + const winner = getWinningValue(a, b, c); + if (winner) return winner; + } + /* + * Rows and Columns + */ + for (let row = 0; row < 3; row++) { + const a = gridState[3 * row + 0]; + const b = gridState[3 * row + 1]; + const c = gridState[3 * row + 2]; + const winner = getWinningValue(a, b, c); + if (winner) return winner; + } - return 0; - } + for (let column = 0; column < 3; column++) { + const a = gridState[3 * 0 + column]; + const b = gridState[3 * 1 + column]; + const c = gridState[3 * 2 + column]; + const winner = getWinningValue(a, b, c); + if (winner) return winner; + } - let stateString = ""; - if (localWinState === 3) { - stateString = `Game draw.` - } - else if (localWinState) { - stateString = `Player ${getStateChar(localWinState)} wins.`; - } - else { - stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.` - } + const isDrawState = () => { + for (let i in gridState) { + if (!gridState[i]) return false; + } + return true; + }; + if (isDrawState()) return 3; - return ( -
{getStateChar(getState())}
-{getStateChar(getState())}
+