Css tweaks

src/TicTacToe/Root.tsx

@@ -1,6 +1,6 @@
-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));
@@ -8,19 +8,28 @@ function TicTacToe() {
 	const [winState, setWinState] = useState(0);
 	let localWinState = winState;
 	
-  function updateGridState(index: number, state: number) {
+	function updateGridState(index : number, state : number) {
 		gridState[index] = state;
 		setGridState(gridState);
 	}
 
-  function playTurn(index: number) {
+	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);
 
-    const winner = checkWinCondition();
+		const winner = checkWinCondition()
 		if (winner) {
 			localWinState = winner;
 			setWinState(winner);
@@ -30,12 +39,17 @@ function TicTacToe() {
 		setPlayerState(!playerState);
 	}
 	
-  function checkWinCondition(): number {
+	function checkWinCondition() : number {
-    function getWinningValue(a: number, b: number, c: number) {
+
-      if (a === b && b === c && a === c) {
+		function getWinningValue(
+				a : number, 
+				b : number, 
+				c : number 
+		) {
+			if ((a === b) && (b === c) && (a === c)) {
 				return a;
 			}
-      return 0;
+			return 0
 		}
 		/*
 		 * Diagonals
@@ -76,9 +90,9 @@ function TicTacToe() {
 		const isDrawState = () =>  {
 			for (let i in gridState) {
 				if (!gridState[i]) return false;
-      }
-      return true;
 			};
+			return true;
+		}
 		if (isDrawState()) return 3;
 
 		return 0;
@@ -86,26 +100,26 @@ function TicTacToe() {
 
 	let stateString = "";
 	if (localWinState === 3) {
-    stateString = `Game draw.`;
+		stateString = `Game draw.`
-  } else if (localWinState) {
+	}
+	else if (localWinState) {
 		stateString = `Player ${getStateChar(localWinState)} wins.`;
-  } else {
+	}
-    stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`;
+	else {
+		stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`
 	}
 
 	return (
 			<div className="TicTacToe">
 				<h1>{stateString}</h1>
 				<div className="TicTacToeGrid">
-        {gridState.map((item, index) => {
+				{
-          const getState = () => {
+					gridState.map((item, index) => {
-            return gridState[index];
+						const state = gridState[index];
-          };
+						const onClick = () => { playTurn(index) };
-          const callback = () => {
+						return (<TicTacToeCell state={state} onClick={onClick}/>);
-            playTurn(index);
+					})
-          };
+				}
-          return <TicTacToeCell state={gridState[index]} onClick={callback} />;
-        })}
 				</div>
 			</div>
 		   );
@@ -117,6 +131,7 @@ interface CellProps {
 }
 
 function TicTacToeCell({ state, onClick }: CellProps) {
+
 	return (
 			<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
 				<p>{getStateChar(state)}</p>
@@ -124,7 +139,7 @@ function TicTacToeCell({ state, onClick }: CellProps) {
 		   );
 }
 
-function getStateChar(state: number) {
+function getStateChar(state : number) {
 	switch (state) {
 		case 1:
 			return "O";
@@ -135,7 +150,7 @@ function getStateChar(state: number) {
 	}
 }
 
-function getStateClass(state: number) {
+function getStateClass(state : number) {
 	switch (state) {
 		case 1:
 			return "CellRed";

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 {