From 697a4ddd6d0621b44d782be4ec41e3386c40c940 Mon Sep 17 00:00:00 2001
From: martin <me@martials.no>
Date: Sat, 5 Aug 2023 19:52:47 +0200
Subject: [PATCH] Created a homepage, started on a debug menu

---
 pac-man-board-game/ClientApp/src/App.tsx      |  1 +
 .../ClientApp/src/AppRoutes.tsx               | 11 ++--
 .../ClientApp/src/components/debugMenu.tsx    | 47 ++++++++++++++++
 .../src/components/gameComponent.tsx          |  4 ++
 pac-man-board-game/ClientApp/src/index.tsx    |  2 +
 .../ClientApp/src/pages/game.tsx              |  4 +-
 .../ClientApp/src/pages/home.tsx              | 55 +++++++------------
 .../ClientApp/src/pages/login.tsx             |  4 +-
 .../ClientApp/src/utils/actions.ts            |  3 +-
 .../ClientApp/src/utils/state.ts              |  4 +-
 10 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 pac-man-board-game/ClientApp/src/components/debugMenu.tsx

diff --git a/pac-man-board-game/ClientApp/src/App.tsx b/pac-man-board-game/ClientApp/src/App.tsx
index 7c8175b..b421d3d 100644
--- a/pac-man-board-game/ClientApp/src/App.tsx
+++ b/pac-man-board-game/ClientApp/src/App.tsx
@@ -23,6 +23,7 @@ export const App: FC = () => (
  * @param secured Whether or not the page is secured.
  * @constructor The Secured component.
  */
+// TODO only works on first render after refresh
 const Secured: FC<{ secured: boolean } & ChildProps> = ({children, secured}) => {
   const player = useAtomValue(thisPlayerAtom);
   const navigate = useNavigate();
diff --git a/pac-man-board-game/ClientApp/src/AppRoutes.tsx b/pac-man-board-game/ClientApp/src/AppRoutes.tsx
index f0b76cc..85aded3 100644
--- a/pac-man-board-game/ClientApp/src/AppRoutes.tsx
+++ b/pac-man-board-game/ClientApp/src/AppRoutes.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import {Counter} from "./pages/counter";
-import Game from "./pages/game";
+import GamePage from "./pages/game";
 import LobbyPage from "./pages/lobby";
-import Login from "./pages/login";
+import LoginPage from "./pages/login";
+import HomePage from "./pages/home";
 
 const AppRoutes = [
   {
     index: true,
-    element: <LobbyPage/> // TODO change to home page
+    element: <HomePage/>
   },
   {
     path: "/counter",
@@ -15,7 +16,7 @@ const AppRoutes = [
   },
   {
     path: "/game/:id",
-    element: <Game/>,
+    element: <GamePage/>,
     secured: true
   },
   {
@@ -25,7 +26,7 @@ const AppRoutes = [
   },
   {
     path: "/login",
-    element: <Login/>
+    element: <LoginPage/>
   }
 ];
 
diff --git a/pac-man-board-game/ClientApp/src/components/debugMenu.tsx b/pac-man-board-game/ClientApp/src/components/debugMenu.tsx
new file mode 100644
index 0000000..3a25ea8
--- /dev/null
+++ b/pac-man-board-game/ClientApp/src/components/debugMenu.tsx
@@ -0,0 +1,47 @@
+import React, {FC} from "react";
+import useToggle from "../hooks/useToggle";
+import {BugAntIcon} from "@heroicons/react/20/solid";
+import {selectedMapAtom} from "../utils/state";
+import {useAtom} from "jotai";
+
+const DebugMenu: FC = () => {
+
+  const [open, toggleOpen] = useToggle();
+
+  if (import.meta.env.DEV) {
+    return (
+      <div>
+        {open && <DebugOptions/>}
+        <button className={"fixed bottom-2 right-2 bg-gray-800 text-white p-2 z-50 rounded-full"}
+                title={"Debug menu"}
+                onClick={() => toggleOpen()}>
+          <BugAntIcon className={"w-8 m-1"}/>
+        </button>
+      </div>
+
+    );
+  }
+}
+
+export default DebugMenu;
+
+const DebugOptions: FC = () => {
+
+  const [map, setMap] = useAtom(selectedMapAtom);
+
+  function clearSessionStorage(): void {
+    sessionStorage.clear();
+  }
+
+  function resetMap() {
+    // TODO
+  }
+
+  return (
+    <div className={"fixed w-max right-2 bottom-16 border-2 z-50 bg-white rounded-xl p-2"}>
+      <button onClick={clearSessionStorage}>Clear sessionstorage</button>
+      <br/>
+      <button onClick={resetMap}>Reset map</button>
+    </div>
+  )
+}
diff --git a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx b/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
index 263e0b5..fbab39a 100644
--- a/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
+++ b/pac-man-board-game/ClientApp/src/components/gameComponent.tsx
@@ -18,7 +18,11 @@ const wsService = new WebSocketService(import.meta.env.VITE_API_WS);
 // TODO bug, first player can sometimes roll dice twice
 // TODO bug, when refreshing page, some data is missing until other clients make a move
 // TODO bug, stolen pellets are only updated on the client that stole them
+// TODO bug, when navigating to lobby from the navbar while not logged in, the page is blank instead of redirecting to login
 
+// TODO spawns should be the same color as the player
+// TODO better front page
+// TODO smaller map to fit button and dice on screen
 // TODO guest users
 // TODO store map in backend and save it in state on each client
 // TODO add debug menu on dev, for testing and cheating
diff --git a/pac-man-board-game/ClientApp/src/index.tsx b/pac-man-board-game/ClientApp/src/index.tsx
index dacc084..215e774 100644
--- a/pac-man-board-game/ClientApp/src/index.tsx
+++ b/pac-man-board-game/ClientApp/src/index.tsx
@@ -5,6 +5,7 @@ import {App} from './App';
 // @ts-ignore
 import reportWebVitals from './reportWebVitals';
 import {DevTools} from "jotai-devtools";
+import DebugMenu from "./components/debugMenu";
 
 const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
 const rootElement = document.getElementById('root');
@@ -14,6 +15,7 @@ const root = createRoot(rootElement);
 root.render(
   <BrowserRouter basename={baseUrl ?? undefined}>
     <DevTools/>
+    <DebugMenu/>
     <App/>
   </BrowserRouter>);
 
diff --git a/pac-man-board-game/ClientApp/src/pages/game.tsx b/pac-man-board-game/ClientApp/src/pages/game.tsx
index 844b6bf..752d4a6 100644
--- a/pac-man-board-game/ClientApp/src/pages/game.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/game.tsx
@@ -3,7 +3,7 @@ import {GameComponent} from "../components/gameComponent";
 import {useAtomValue} from "jotai";
 import {selectedMapAtom, thisPlayerAtom} from "../utils/state";
 
-const Game: FC = () => {
+const GamePage: FC = () => {
   const player = useAtomValue(thisPlayerAtom);
   const map = useAtomValue(selectedMapAtom);
 
@@ -14,4 +14,4 @@ const Game: FC = () => {
   }
 };
 
-export default Game;
+export default GamePage;
diff --git a/pac-man-board-game/ClientApp/src/pages/home.tsx b/pac-man-board-game/ClientApp/src/pages/home.tsx
index fcb5de7..0916e8d 100644
--- a/pac-man-board-game/ClientApp/src/pages/home.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/home.tsx
@@ -1,42 +1,27 @@
-import React, {FC, useRef} from "react";
-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";
-import {useSetAtom} from "jotai";
+import React, {FC} from "react";
+import {Link} from "react-router-dom";
+import {useAtomValue} from "jotai";
 import {thisPlayerAtom} from "../utils/state";
 
-const Home: FC = () => {
-
-  const input = useRef<HTMLInputElement>(null);
-  const dropdown = useRef<HTMLSelectElement>(null);
-  const setPlayer = useSetAtom(thisPlayerAtom);
-  const navigate = useNavigate();
-
-  function formHandler(): void {
-    if (!input.current || !dropdown.current) return;
-    const player = new Player({
-      username: input.current.value,
-      colour: dropdown.current.value as Colour,
-    });
-    setPlayer(player);
-    navigate("/game");
-  }
+const HomePage: FC = () => {
+  const player = useAtomValue(thisPlayerAtom);
 
   return (
-    <>
-      <h1 className={"w-fit mx-auto"}>Pac-Man The Board Game</h1>
-      <form className={"flex flex-col items-center"} onSubmit={formHandler}>
-        <p>Enter your name:</p>
-        <Input ref={input} required/>
-        <p>Choose a colour:</p>
-        <Dropdown ref={dropdown} options={getColours()}/>
-        <br/>
-        <button type={"submit"}>Find game</button>
-      </form>
-    </>
+    <div className={"container max-w-[800px] mx-auto px-2"}>
+      <h1 className={"w-fit mx-auto"}>Hello {player?.username ?? "Player"}. Do you want to play a game?</h1>
+      <p className={"text-center mt-5"}>
+        {!player ?
+          <>Start by {" "}
+            <Link to={"/login"} className={"text-blue-600"}>logging in</Link>.
+          </>
+          :
+          <>Go to the {" "}
+            <Link to={"/lobby"} className={"text-blue-600"}>lobby</Link> to select a game.
+          </>
+        }
+      </p>
+    </div>
   );
 };
 
-export default Home;
\ No newline at end of file
+export default HomePage;
\ No newline at end of file
diff --git a/pac-man-board-game/ClientApp/src/pages/login.tsx b/pac-man-board-game/ClientApp/src/pages/login.tsx
index 7b6d4b5..78bb5ef 100644
--- a/pac-man-board-game/ClientApp/src/pages/login.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/login.tsx
@@ -7,7 +7,7 @@ import Player from "../game/player";
 import {useNavigate} from "react-router-dom";
 import {postData} from "../utils/api";
 
-const Login: FC = () => {
+const LoginPage: FC = () => {
 
   const setThisPlayer = useSetAtom(thisPlayerAtom);
   const navigate = useNavigate();
@@ -57,4 +57,4 @@ const Login: FC = () => {
   );
 }
 
-export default Login;
+export default LoginPage;
diff --git a/pac-man-board-game/ClientApp/src/utils/actions.ts b/pac-man-board-game/ClientApp/src/utils/actions.ts
index 2ae5d92..17a1010 100644
--- a/pac-man-board-game/ClientApp/src/utils/actions.ts
+++ b/pac-man-board-game/ClientApp/src/utils/actions.ts
@@ -9,10 +9,11 @@ import {Colour} from "../game/colour";
 export enum GameAction {
   rollDice,
   moveCharacter,
-  playerInfo,
+  playerInfo, // TODO rename to joinGame
   ready,
   nextPlayer,
   disconnect,
+  // TODO add updatePellets
 }
 
 const store = getDefaultStore();
diff --git a/pac-man-board-game/ClientApp/src/utils/state.ts b/pac-man-board-game/ClientApp/src/utils/state.ts
index e6465eb..e1134b3 100644
--- a/pac-man-board-game/ClientApp/src/utils/state.ts
+++ b/pac-man-board-game/ClientApp/src/utils/state.ts
@@ -26,7 +26,7 @@ export const allCharactersAtom = atom(get => [...get(playerCharactersAtom), ...g
 const playerAtom = atom<Player | undefined>(undefined);
 /**
  * Gets a getter and setter to get or set the player that is currently logged in.
- * @returns A tuple containing a getter and setter to get or set the player that is currently logged in.
+ * Returns A tuple containing a getter and setter to get or set the player that is currently logged in.
  */
 export const thisPlayerAtom = atom(get => {
   const atomValue = get(playerAtom);
@@ -38,7 +38,7 @@ export const thisPlayerAtom = atom(get => {
     }
   }
   return atomValue;
-}, (get, set, player: Player | undefined) => {
+}, (_get, set, player: Player | undefined) => {
   if (player)
     sessionStorage.setItem(playerStorage, JSON.stringify(player));
   else