sheldonmlee/first-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
edwardbrodski 2023-09-21 23:03:16 +01:00
parent 82492e10d9
commit 455cf5ee63
1 changed files with 131 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
src/TicTacToe/Root.tsx
View File

@ -1,159 +1,156 @@
import React from 'react'; import React from "react";
import { useState } from 'react'; import { useState } from "react";
import './style.css'; import "./style.css";
function TicTacToe() { function TicTacToe() {
const [gridState, setGridState] = useState(Array(9).fill(0)); const [gridState, setGridState] = useState(Array(9).fill(0));
const [playerState, setPlayerState] = useState(false); const [playerState, setPlayerState] = useState(false);
const [winState, setWinState] = useState(0); const [winState, setWinState] = useState(0);
let localWinState = winState; let localWinState = winState;
function updateGridState(index : number, state : number) { function updateGridState(index: number, state: number) {
gridState[index] = state; gridState[index] = state;
setGridState(gridState); setGridState(gridState);
} }
function playTurn(index : number) { function playTurn(index: number) {
if (gridState[index]) return; if (gridState[index]) return;
if (winState) return; if (winState) return;
const newState = playerState ? 2 : 1; const newState = playerState ? 2 : 1;
updateGridState(index, newState); updateGridState(index, newState);
const winner = checkWinCondition() const winner = checkWinCondition();
if (winner) { if (winner) {
localWinState = winner; localWinState = winner;
setWinState(winner); setWinState(winner);
return; return;
} }
setPlayerState(!playerState); setPlayerState(!playerState);
} }
function checkWinCondition() : number { 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;
}
function getWinningValue( for (let column = 0; column < 3; column++) {
a : number, const a = gridState[3 * 0 + column];
b : number, const b = gridState[3 * 1 + column];
c : number const c = gridState[3 * 2 + column];
) { const winner = getWinningValue(a, b, c);
if ((a === b) && (b === c) && (a === c)) { if (winner) return winner;
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 isDrawState = () => {
const a = gridState[3 * 0 + column]; for (let i in gridState) {
const b = gridState[3 * 1 + column]; if (!gridState[i]) return false;
const c = gridState[3 * 2 + column]; }
const winner = getWinningValue(a, b, c); return true;
if (winner) return winner; };
} if (isDrawState()) return 3;
const isDrawState = () => { return 0;
for (let i in gridState) { }
if (!gridState[i]) return false;
};
return true;
}
if (isDrawState()) return 3;
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.`;
}
let stateString = ""; return (
if (localWinState === 3) { <div className="TicTacToe">
stateString = `Game draw.` <h1>{stateString}</h1>
} <div className="TicTacToeGrid">
else if (localWinState) { {gridState.map((item, index) => {
stateString = `Player ${getStateChar(localWinState)} wins.`; const getState = () => {
} return gridState[index];
else { };
stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.` const callback = () => {
} playTurn(index);
};
return ( return <TicTacToeCell getState={getState} callback={callback} />;
<div className="TicTacToe"> })}
<h1>{stateString}</h1> </div>
<div className="TicTacToeGrid"> </div>
{ );
gridState.map((item, index) => {
const getState = () => { return gridState[index] };
const callback = () => { playTurn(index) };
return (<TicTacToeCell getState={getState} callback={callback}/>);
})
}
</div>
</div>
);
} }
interface CellProps { interface CellProps {
getState: () => number; getState: () => number;
callback: () => void; callback: () => void;
} }
function TicTacToeCell({ getState, callback }: CellProps) { function TicTacToeCell({ getState, callback }: CellProps) {
function handleClick() {
callback();
}
function handleClick() { return (
callback() <div
} className={`TicTacToeCell ${getStateClass(getState())}`}
onClick={handleClick}
return ( >
<div className={`TicTacToeCell ${getStateClass(getState())}`} onClick={handleClick}> <p>{getStateChar(getState())}</p>
<p>{getStateChar(getState())}</p> </div>
</div> );
);
} }
function getStateChar(state : number) { function getStateChar(state: number) {
switch (state) { switch (state) {
case 1: case 1:
return "O"; return "O";
case 2: case 2:
return "X"; return "X";
default: default:
return ""; return "";
} }
} }
function getStateClass(state : number) { function getStateClass(state: number) {
switch (state) { switch (state) {
case 1: case 1:
return "CellRed"; return "CellRed";
case 2: case 2:
return "CellBlue"; return "CellBlue";
default: default:
return ""; return "";
} }
} }
export default TicTacToe; export default TicTacToe;