Switched Component type to React.FC type

pac-man-board-game/ClientApp/src/App.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, {FC} from "react";
 import {Route, Routes} from "react-router-dom";
 import Layout from "./components/layout";
 import AppRoutes from "./AppRoutes";
 import "./index.css";
 
-export const App: Component = () => (
+export const App: FC = () => (
   <Layout>
     <Routes>
       {AppRoutes.map((route, index) => {

pac-man-board-game/ClientApp/src/components/button.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, {FC} from "react";
 
-export const Button: Component<ButtonProps> = (
+export const Button: FC<ButtonProps> = (
   {
     className,
     onClick,

pac-man-board-game/ClientApp/src/components/dice.tsx

@@ -1,13 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import {useAtom, useAtomValue} from "jotai";
 import {selectedDiceAtom, thisPlayerAtom} from "../utils/state";
-import {Button} from "./Button";
+import {Button} from "./button";
 
-interface AllDiceProps extends ComponentProps {
-  values?: number[],
-}
-
-export const AllDice: Component<AllDiceProps> = (
+export const AllDice: FC<{ values?: number[] } & ComponentProps> = (
   {
     className,
     values,
@@ -35,7 +31,7 @@ interface DiceProps extends ComponentProps {
   onClick?: (value: number) => void,
 }
 
-export const Dice: Component<DiceProps> = (
+export const Dice: FC<DiceProps> = (
   {
     className,
     value,

pac-man-board-game/ClientApp/src/components/gameBoard.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {FC, Fragment, useEffect, useState} from "react";
 import {Character} from "../game/character";
 import findPossiblePositions from "../game/possibleMovesAlgorithm";
 import {GameTile} from "./gameTile";
@@ -15,7 +15,7 @@ interface BoardProps extends ComponentProps {
 
 const modalOpenAtom: PrimitiveAtom<boolean> = atom(false);
 
-const Board: Component<BoardProps> = (
+const Board: FC<BoardProps> = (
   {
     className,
     onMove,
@@ -130,7 +130,7 @@ const Board: Component<BoardProps> = (
 
 export default Board;
 
-const SelectPlayerModal: Component = () => {
+const SelectPlayerModal: FC = () => {
   const [isOpen, setIsOpen] = useAtom(modalOpenAtom);
   const currentPlayer = useAtomValue(currentPlayerAtom);
   const allPlayers = useAtomValue(playersAtom).filter(p => p !== currentPlayer);

pac-man-board-game/ClientApp/src/components/gameButton.tsx

@@ -1,8 +1,8 @@
-import React, {MouseEventHandler} from "react";
+import React, {FC, MouseEventHandler} from "react";
 import {State} from "../game/player";
 import {currentPlayerAtom, playersAtom, rollDiceButtonAtom, thisPlayerAtom} from "../utils/state";
 import {useAtomValue} from "jotai";
-import {Button} from "./Button";
+import {Button} from "./button";
 import rules from "../game/rules";
 
 interface GameButtonProps extends ComponentProps {
@@ -10,7 +10,7 @@ interface GameButtonProps extends ComponentProps {
   onRollDiceClick?: MouseEventHandler
 }
 
-const GameButton: Component<GameButtonProps> = (
+const GameButton: FC<GameButtonProps> = (
   {
     onReadyClick,
     onRollDiceClick,

pac-man-board-game/ClientApp/src/components/gameComponent.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, {FC, useEffect} from "react";
 import {AllDice} from "./dice";
 import {doAction, GameAction} from "../utils/actions";
 import GameBoard from "./gameBoard";
@@ -25,7 +25,7 @@ const wsService = new WebSocketService(import.meta.env.VITE_API_WS);
 // TODO show box with collected pellets
 // TODO layout
 
-export const GameComponent: Component<{ player: Player, map: GameMap }> = ({player, map}) => {
+export const GameComponent: FC<{ player: Player, map: GameMap }> = ({player, map}) => {
 
   const players = useAtomValue(playersAtom);
   const dice = useAtomValue(diceAtom);

pac-man-board-game/ClientApp/src/components/gameTile.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {FC, useEffect, useState} from "react";
 import {TileType} from "../game/tileType";
 import {Character, Dummy} from "../game/character";
 import {Direction} from "../game/direction";
@@ -16,7 +16,7 @@ interface TileWithCharacterProps extends ComponentProps {
   showPath?: boolean
 }
 
-export const GameTile: Component<TileWithCharacterProps> = (
+export const GameTile: FC<TileWithCharacterProps> = (
   {
     possiblePath,
     character,
@@ -48,7 +48,7 @@ export const GameTile: Component<TileWithCharacterProps> = (
   </Tile>
 );
 
-const Circle: Component<{ colour?: Colour } & ComponentProps> = ({colour = Colour.White, className}) => (
+const Circle: FC<{ colour?: Colour } & ComponentProps> = ({colour = Colour.White, className}) => (
   <div className={`flex-center w-full h-full ${className}`}>
     <div className={`w-1/2 h-1/2 rounded-full`}
          style={{backgroundColor: colour}}/>
@@ -65,7 +65,7 @@ interface TileProps extends ChildProps {
   characterClass?: string,
 }
 
-const Tile: Component<TileProps> = (
+const Tile: FC<TileProps> = (
   {
     type = TileType.empty,
     onClick,
@@ -116,7 +116,7 @@ const Tile: Component<TileProps> = (
   );
 };
 
-const AddDummy: Component<{ path?: Path } & ComponentProps> = ({path}) => (
+const AddDummy: FC<{ path?: Path } & ComponentProps> = ({path}) => (
   <>
     {path &&
         <div className={"flex-center wh-full"}>
@@ -131,7 +131,7 @@ interface CharacterComponentProps extends ComponentProps {
   onClick?: Action<Character>,
 }
 
-const CharacterComponent: Component<CharacterComponentProps> = (
+const CharacterComponent: FC<CharacterComponentProps> = (
   {
     character,
     onClick,

pac-man-board-game/ClientApp/src/components/layout.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, {FC} from "react";
 import NavMenu from "./navMenu";
 
-const Layout: Component<ChildProps> = ({children}) => (
+const Layout: FC<ChildProps> = ({children}) => (
   <div>
     <NavMenu/>
     <main>

pac-man-board-game/ClientApp/src/components/navMenu.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, {FC} from "react";
 import {Link} from "react-router-dom";
 
-const NavMenu: Component = () => {
+const NavMenu: FC = () => {
 
   const [collapsed, setCollapsed] = React.useState(true);
 

pac-man-board-game/ClientApp/src/components/playerStats.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import Player, {State} from "../game/player";
 import {useAtomValue} from "jotai";
 import {currentPlayerNameAtom} from "../utils/state";
 
-const PlayerStats: Component<{ player: Player } & ComponentProps> = (
+const PlayerStats: FC<{ player: Player } & ComponentProps> = (
   {
     player,
     className,

pac-man-board-game/ClientApp/src/game/box.ts

@@ -11,15 +11,15 @@ export default class Box {
   }
 
   get powerPellet(): Pellet | undefined {
-    return this.Pellets.find(pellet => pellet.isPowerPellet);
+    return this.Pellets.find(pellet => pellet.IsPowerPellet);
   }
 
   get count(): number {
-    return this.Pellets.filter(pellet => !pellet.isPowerPellet).length;
+    return this.Pellets.filter(pellet => !pellet.IsPowerPellet).length;
   }
 
   get countPowerPellets(): number {
-    return this.Pellets.filter(pellet => pellet.isPowerPellet).length;
+    return this.Pellets.filter(pellet => pellet.IsPowerPellet).length;
   }
 
   public addPellet(pellet: Pellet): void {

pac-man-board-game/ClientApp/src/game/pellet.ts

@@ -1,7 +1,7 @@
 export default class Pellet {
-  public readonly isPowerPellet: boolean;
+  public readonly IsPowerPellet: boolean;
 
   public constructor(isPowerPellet = false) {
-    this.isPowerPellet = isPowerPellet;
+    this.IsPowerPellet = isPowerPellet;
   }
 }

pac-man-board-game/ClientApp/src/index.tsx

@@ -7,13 +7,13 @@ import reportWebVitals from './reportWebVitals';
 
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
 const rootElement = document.getElementById('root');
-// @ts-ignore
+if (rootElement === null) throw new Error("Root element is null");
 const root = createRoot(rootElement);
 
 root.render(
-    <BrowserRouter basename={baseUrl ?? undefined}>
-        <App/>
-    </BrowserRouter>);
+  <BrowserRouter basename={baseUrl ?? undefined}>
+    <App/>
+  </BrowserRouter>);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

pac-man-board-game/ClientApp/src/pages/counter.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 import WebSocketService from "../websockets/WebSocketService";
 
 const ws = new WebSocketService("wss://localhost:3000/api/ws");
 
-export const Counter: Component = () => {
+export const Counter: FC = () => {
 
   const [currentCount, setCurrentCount] = React.useState(0);
 

pac-man-board-game/ClientApp/src/pages/home.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from "react";
+import React, {FC, useRef} from "react";
 import Player from "../game/player";
 import Input from "../components/input";
 import Dropdown from "../components/dropdown";
@@ -7,7 +7,7 @@ import {useNavigate} from "react-router-dom";
 import {useSetAtom} from "jotai";
 import {thisPlayerAtom} from "../utils/state";
 
-const Home: Component = () => {
+const Home: FC = () => {
 
   const input = useRef<HTMLInputElement>(null);
   const dropdown = useRef<HTMLSelectElement>(null);

pac-man-board-game/ClientApp/src/pages/lobby.tsx

@@ -1,6 +1,6 @@
 import React, {FC, Suspense} from "react";
 import {atom, useAtomValue} from "jotai";
-import {Button} from "../components/Button";
+import {Button} from "../components/button";
 import {thisPlayerAtom} from "../utils/state";
 
 const fetchAtom = atom(async () => {
@@ -16,7 +16,7 @@ const LobbyPage: FC = () => ( // TODO check if player is defined in storage, if
 
 export default LobbyPage;
 
-const GameTable: Component = ({className}) => {
+const GameTable: FC<ComponentProps> = ({className}) => {
 
   const data = useAtomValue(fetchAtom);
   const thisPlayer = useAtomValue(thisPlayerAtom);

pac-man-board-game/ClientApp/src/types/props.d.ts

@@ -1,5 +1,3 @@
-type Component<T = ComponentProps> = (props: T) => React.JSX.Element | null;
-
 type FRComponent<T = ComponentProps, HTML extends HTMLElement = HTMLElement> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<HTML>>;
 
 interface ComponentProps {

pac-man-board-game/pac-man-board-game.csproj

@@ -47,6 +47,7 @@
       <TypeScriptCompile Remove="ClientApp\src\game\playerStats.tsx" />
       <TypeScriptCompile Remove="ClientApp\src\websockets\actions.ts" />
       <TypeScriptCompile Remove="ClientApp\src\utils\colours.ts" />
+      <TypeScriptCompile Remove="ClientApp\src\utils\dom.ts" />
     </ItemGroup>
 
     <ItemGroup>