Moved game to it's own page

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

@@ -1,6 +1,7 @@
 import React from "react";
 import {Counter} from "./pages/counter";
 import Home from "./pages/home";
+import Game from "./pages/game";
 
 const AppRoutes = [
   {
@@ -11,6 +12,10 @@ const AppRoutes = [
     path: "/counter",
     element: <Counter/>
   },
+  {
+    path: "/game",
+    element: <Game/>,
+  },
 ];
 
 export default AppRoutes;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import {GameComponent} from "../components/gameComponent";
+import {useLocation} from "react-router-dom";
+import Player from "../game/player";
+
+const Game: Component = () => {
+  const location = useLocation();
+  const player = location.state as Player;
+
+  return <GameComponent player={player}/>;
+};
+
+export default Game;

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

@@ -1,42 +1,36 @@
-import React, {FormEvent, useRef, useState} from "react";
+import React, {useRef} from "react";
-import {GameComponent} from "../components/gameComponent";
 import Player from "../game/player";
 import Input from "../components/input";
 import Dropdown from "../components/dropdown";
 import {Colour, getColours} from "../game/colour";
+import {useNavigate} from "react-router-dom";
 
 const Home: Component = () => {
 
-  const [player, setPlayer] = useState<Player>();
   const input = useRef<HTMLInputElement>(null);
   const dropdown = useRef<HTMLSelectElement>(null);
+  const navigate = useNavigate();
 
-  function formHandler(e: FormEvent): void {
+  function formHandler(): void {
-    e.preventDefault();
     if (!input.current || !dropdown.current) return;
-    setPlayer(new Player({
+    const player = new Player({
       Name: input.current.value,
       Colour: dropdown.current.value as Colour,
-    }));
+    });
+    navigate("/game", {state: player});
   }
 
   return (
     <>
       <h1 className={"w-fit mx-auto"}>Pac-Man The Board Game</h1>
-      {
+      <form className={"flex flex-col items-center"} onSubmit={formHandler}>
-        player ?
+        <p>Enter your name:</p>
-          /*TODO move to own page*/
+        <Input ref={input} required/>
-          <GameComponent player={player}/>
+        <p>Choose a colour:</p>
-          :
+        <Dropdown ref={dropdown} options={getColours()}/>
-          <form className={"flex flex-col items-center"} onSubmit={formHandler}>
+        <br/>
-            <p>Enter your name:</p>
+        <button type={"submit"}>Find game</button>
-            <Input ref={input} required/>
+      </form>
-            <p>Choose a colour:</p>
-            <Dropdown ref={dropdown} options={getColours()}/>
-            <br/>
-            <button type={"submit"}>Find game</button>
-          </form>
-      }
     </>
   );
 };