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

258
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) { 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 state={gridState[index]} onClick={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; 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;