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 ( -
-

{stateString}

-
- { - gridState.map((item, index) => { - const getState = () => { return gridState[index] }; - const callback = () => { playTurn(index) }; - return (); - }) - } -
-
- ); + return 0; + } + + let stateString = ""; + if (localWinState === 3) { + stateString = `Game draw.`; + } else if (localWinState) { + stateString = `Player ${getStateChar(localWinState)} wins.`; + } else { + stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`; + } + + return ( +
+

{stateString}

+
+ {gridState.map((item, index) => { + const getState = () => { + return gridState[index]; + }; + const callback = () => { + playTurn(index); + }; + return ; + })} +
+
+ ); } interface CellProps { - getState: () => number; - callback: () => void; + getState: () => number; + callback: () => void; } function TicTacToeCell({ getState, callback }: CellProps) { + function handleClick() { + callback(); + } - function handleClick() { - callback() - } - - return ( -
-

{getStateChar(getState())}

-
- ); + return ( +
+

{getStateChar(getState())}

+
+ ); } -function getStateChar(state : number) { - switch (state) { - case 1: - return "O"; - case 2: - return "X"; - default: - return ""; - } +function getStateChar(state: number) { + switch (state) { + case 1: + return "O"; + case 2: + return "X"; + default: + return ""; + } } -function getStateClass(state : number) { - switch (state) { - case 1: - return "CellRed"; - case 2: - return "CellBlue"; - default: - return ""; - } +function getStateClass(state: number) { + switch (state) { + case 1: + return "CellRed"; + case 2: + return "CellBlue"; + default: + return ""; + } } export default TicTacToe;