Css tweaks

src/TicTacToe/Root.tsx

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