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

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