Css tweaks

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 state = gridState[index];
-						const callback = () => { playTurn(index) };
+						const onClick = () => { playTurn(index) };
-						return (<TicTacToeCell getState={getState} callback={callback}/>);
+						return (<TicTacToeCell state={state} onClick={onClick}/>);
 					})
 				}
 				</div>
@@ -117,19 +126,15 @@ function TicTacToe() {
 }
 
 interface CellProps {
-	getState: () => number;
+	state: number;
-	callback: () => void;
+	onClick: () => void;
 }
 
-function TicTacToeCell({ getState, callback }: CellProps) {
+function TicTacToeCell({ state, onClick }: CellProps) {
-
-	function handleClick() {
-		callback()
-	}
 
 	return (
-			<div className={`TicTacToeCell ${getStateClass(getState())}`} onClick={handleClick}>
+			<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
-				<p>{getStateChar(getState())}</p>
+				<p>{getStateChar(state)}</p>
 			</div>
 		   );
 }

src/TicTacToe/style.css

@@ -1,12 +1,13 @@
 .TicTacToe {
 	background-color: #3B3E49;
 	color: #B9B8D6;
+	border-radius: 20px;
 }
 
 .TicTacToeGrid {
 	display: grid;
-	width: 50vh;
+	min-width: 50vw;
-	height: 50vh;
+	min-height: 50vw;
 	grid-template-columns: auto auto auto;
 }
 
@@ -29,6 +30,7 @@
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
+	font-size: 10vw;
 }
 
 .CellRed {