keep to conventions if it is onClick just call it onClick not callback

src/TicTacToe/Root.tsx

@@ -1,164 +1,149 @@
-import React from 'react';
+import React from "react";
-import { useState } from 'react';
+import { useState } from "react";
-import './style.css';
+import "./style.css";
 
 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 resetGridState() {
+  function updateGridState(index: number, state: number) {
-		setGridState(Array(9).fill(0));
+    gridState[index] = state;
-		setPlayerState(false);
+    setGridState(gridState);
-		setWinState(0);
+  }
-	}
 
-	function playTurn(index : number) {
+  function playTurn(index: number) {
-		if (winState) {
+    if (gridState[index]) return;
-			resetGridState()
+    if (winState) return;
-			return;
-		}
-		if (gridState[index]) 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 getWinningValue(
+  function checkWinCondition(): number {
-				a : number, 
+    function getWinningValue(a: number, b: number, c: number) {
-				b : number, 
+      if (a === b && b === c && a === c) {
-				c : number 
+        return a;
-		) {
+      }
-			if ((a === b) && (b === c) && (a === c)) {
+      return 0;
-				return a;
+    }
-			}
+    /*
-			return 0
+     * Diagonals
-		}
+     */
-		/*
+    {
-		 * Diagonals
+      const a = gridState[3 * 0 + 0];
-		 */
+      const b = gridState[3 * 1 + 1];
-		{
+      const c = gridState[3 * 2 + 2];
-			const a = gridState[3 * 0 + 0];
+      const winner = getWinningValue(a, b, c);
-			const b = gridState[3 * 1 + 1];
+      if (winner) return winner;
-			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 a = gridState[3 * 0 + 2];
+      const winner = getWinningValue(a, b, c);
-			const b = gridState[3 * 1 + 1];
+      if (winner) return winner;
-			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++) {
-		 * Rows and Columns
+      const a = gridState[3 * row + 0];
-		 */
+      const b = gridState[3 * row + 1];
-		for (let row = 0; row < 3; row++) {
+      const c = gridState[3 * row + 2];
-			const a = gridState[3 * row + 0];
+      const winner = getWinningValue(a, b, c);
-			const b = gridState[3 * row + 1];
+      if (winner) return winner;
-			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;
-		}
 
-		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">
+  } else if (localWinState) {
-				{
+    stateString = `Player ${getStateChar(localWinState)} wins.`;
-					gridState.map((item, index) => {
+  } else {
-						const state = gridState[index];
+    stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`;
-						const onClick = () => { playTurn(index) };
+  }
-						return (<TicTacToeCell state={state} onClick={onClick}/>);
+
-					})
+  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 state={gridState[index]} onClick={callback} />;
+        })}
+      </div>
+    </div>
+  );
 }
 
 interface CellProps {
-	state: number;
+  state: number;
-	onClick: () => void;
+  onClick: () => void;
 }
 
 function TicTacToeCell({ state, onClick }: CellProps) {
-
+  return (
-	return (
+    <div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
-			<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
+      <p>{getStateChar(state)}</p>
-				<p>{getStateChar(state)}</p>
+    </div>
-			</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;

src/TicTacToe/style.css

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