Refactor TicTacToeCell interface and callback, and implement game reset.
This commit is contained in:
parent
82492e10d9
commit
69a13f7a7f
@ -13,9 +13,18 @@ function TicTacToe() {
|
||||
setGridState(gridState);
|
||||
}
|
||||
|
||||
function resetGridState() {
|
||||
setGridState(Array(9).fill(0));
|
||||
setPlayerState(false);
|
||||
setWinState(0);
|
||||
}
|
||||
|
||||
function playTurn(index : number) {
|
||||
if (winState) {
|
||||
resetGridState()
|
||||
return;
|
||||
}
|
||||
if (gridState[index]) return;
|
||||
if (winState) return;
|
||||
|
||||
const newState = playerState ? 2 : 1;
|
||||
updateGridState(index, newState);
|
||||
@ -106,9 +115,9 @@ function TicTacToe() {
|
||||
<div className="TicTacToeGrid">
|
||||
{
|
||||
gridState.map((item, index) => {
|
||||
const getState = () => { return gridState[index] };
|
||||
const callback = () => { playTurn(index) };
|
||||
return (<TicTacToeCell getState={getState} callback={callback}/>);
|
||||
const state = gridState[index];
|
||||
const onClick = () => { playTurn(index) };
|
||||
return (<TicTacToeCell state={state} onClick={onClick}/>);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
@ -117,19 +126,15 @@ function TicTacToe() {
|
||||
}
|
||||
|
||||
interface CellProps {
|
||||
getState: () => number;
|
||||
callback: () => void;
|
||||
state: number;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function TicTacToeCell({ getState, callback }: CellProps) {
|
||||
|
||||
function handleClick() {
|
||||
callback()
|
||||
}
|
||||
function TicTacToeCell({ state, onClick }: CellProps) {
|
||||
|
||||
return (
|
||||
<div className={`TicTacToeCell ${getStateClass(getState())}`} onClick={handleClick}>
|
||||
<p>{getStateChar(getState())}</p>
|
||||
<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
|
||||
<p>{getStateChar(state)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user