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

Compare commits

base: sheldonmlee:6e479ea7450c2abb05f4cceb06b15e09ee6d3617
Branches Tags
sheldonmlee:master
sheldonmlee:edward-shitposting
..
compare: sheldonmlee:82492e10d91e7ee4a5ae5c4365fb43b6a01e9c3e
Branches Tags
sheldonmlee:master
sheldonmlee:edward-shitposting

No commits in common. "6e479ea7450c2abb05f4cceb06b15e09ee6d3617" and "82492e10d91e7ee4a5ae5c4365fb43b6a01e9c3e" have entirely different histories.
6e479ea745 ... 82492e10d9

1 changed files with 136 additions and 126 deletions
Show Stats Expand all files Collapse all files

258
src/TicTacToe/Root.tsx
View File

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