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

Compare commits

merge into: sheldonmlee:master
Branches Tags
sheldonmlee:master
sheldonmlee:edward-shitposting
...
pull from: sheldonmlee:edward-shitposting
Branches Tags
sheldonmlee:master
sheldonmlee:edward-shitposting

3 Commits
master ... edward-shi

Author SHA1 Message Date
edwardbrodski
6e479ea745 keep to conventions if it is onClick just call it onClick not callback 2023-09-21 23:11:09 +01:00
edwardbrodski
c86cd7b6e3 state has no need to be a callback as it is re rendered on boardChange. Basically you are adding an unnecessary step 2023-09-21 23:06:46 +01:00
edwardbrodski
455cf5ee63 refactor 2023-09-21 23:03:16 +01:00
1 changed files with 126 additions and 136 deletions
Show Stats Expand all files Collapse all files

262
src/TicTacToe/Root.tsx
View File

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