From 69a13f7a7fc43c2d7d6ccb2d3b0286443f9ac2a9 Mon Sep 17 00:00:00 2001
From: Sheldon Lee <sheldon@sheldonlee.com>
Date: Fri, 22 Sep 2023 21:34:23 +0800
Subject: [PATCH] Refactor TicTacToeCell interface and callback, and implement
 game reset.

---
 src/TicTacToe/Root.tsx | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/TicTacToe/Root.tsx b/src/TicTacToe/Root.tsx
index d565e6e..f735d01 100644
--- a/src/TicTacToe/Root.tsx
+++ b/src/TicTacToe/Root.tsx
@@ -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>
 		   );
 }