Get map from global state

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

@@ -17,9 +17,9 @@ const wsService = new WebSocketService(import.meta.env.VITE_API_WS);
 // TODO bug, when taking player on last dice, the currentPlayer changes and the wrong character gets to steal
 // 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, teleportation doesn't work
 
 // TODO guest users
+// TODO protected routes? checking if user is logged in
 // TODO store map in backend and save it in state on each client
 // TODO add debug menu on dev, for testing and cheating
 // TODO sign up player page

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

@@ -1,11 +1,11 @@
 import React, {FC, useEffect} from "react";
 import {GameComponent} from "../components/gameComponent";
 import {useAtomValue} from "jotai";
-import {thisPlayerAtom} from "../utils/state";
+import {selectedMapAtom, thisPlayerAtom} from "../utils/state";
-import {customMap} from "../game/map";
 
 const Game: FC = () => { // TODO gameId in path
   const player = useAtomValue(thisPlayerAtom);
+  const map = useAtomValue(selectedMapAtom);
 
   useEffect(() => {
     console.debug(player);
@@ -15,10 +15,10 @@ const Game: FC = () => { // TODO gameId in path
     }
   }, [player]);
 
-  if (player) {
+  if (player && map) {
-    return <GameComponent player={player} map={customMap}/>;
+    return <GameComponent player={player} map={map}/>;
   } else {
-    return null;
+    throw new Error("Player or map is undefined");
   }
 };
 

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

@@ -1,9 +1,9 @@
 import React, {FC, Suspense} from "react";
 import {atom, useAtomValue} from "jotai";
 import {Button} from "../components/button";
-import {thisPlayerAtom} from "../utils/state";
+import {selectedMapAtom, thisPlayerAtom} from "../utils/state";
 import {getData, postData} from "../utils/api";
-import {customMap, getPacManSpawns} from "../game/map";
+import {getPacManSpawns} from "../game/map";
 import {useNavigate} from "react-router-dom";
 
 const fetchAtom = atom(async () => {
@@ -11,16 +11,16 @@ const fetchAtom = atom(async () => {
   return await response.json() as Game[];
 });
 
-// TODO create game button
 const LobbyPage: FC = () => { // TODO check if player is defined in storage, if not redirect to login
 
   const thisPlayer = useAtomValue(thisPlayerAtom);
   const navigate = useNavigate();
+  const map = useAtomValue(selectedMapAtom);
 
   async function createGame(): Promise<void> {
 
     const response = await postData("/game/create", {
-      body: {player: thisPlayer, spawns: getPacManSpawns(customMap)} as PlayerInfoData
+      body: {player: thisPlayer, spawns: getPacManSpawns(map)} as PlayerInfoData
     });
 
     if (response.ok) {

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

@@ -1,4 +1,4 @@
-import React, {FormEvent} from "react";
+import React, {FC, FormEvent} from "react";
 import {Button} from "../components/button";
 import Input from "../components/input";
 import {useSetAtom} from "jotai";
@@ -7,7 +7,7 @@ import Player from "../game/player";
 import {useNavigate} from "react-router-dom";
 import {postData} from "../utils/api";
 
-const Login = () => {
+const Login: FC = () => {
 
   const setThisPlayer = useSetAtom(thisPlayerAtom);
   const navigate = useNavigate();

pac-man-board-game/ClientApp/src/utils/actions.ts

@@ -1,9 +1,9 @@
 import Player from "../game/player";
 import {CharacterType, Ghost} from "../game/character";
-import {customMap, getCharacterSpawns} from "../game/map";
+import {getCharacterSpawns} from "../game/map";
 import {TileType} from "../game/tileType";
 import {getDefaultStore} from "jotai";
-import {currentPlayerNameAtom, diceAtom, ghostsAtom, playersAtom, rollDiceButtonAtom} from "./state";
+import {currentPlayerNameAtom, diceAtom, ghostsAtom, playersAtom, rollDiceButtonAtom, selectedMapAtom} from "./state";
 import {Colour} from "../game/colour";
 
 export enum GameAction {
@@ -16,12 +16,13 @@ export enum GameAction {
 }
 
 const store = getDefaultStore();
+const map = store.get(selectedMapAtom);
 
 const ghostsProps: CharacterProps[] = [
   {colour: Colour.purple},
   {colour: Colour.purple},
 ];
-let spawns = getCharacterSpawns(customMap).filter(spawn => spawn.type === CharacterType.ghost);
+let spawns = getCharacterSpawns(map).filter(spawn => spawn.type === CharacterType.ghost);
 ghostsProps.forEach(ghost => {
   ghost.spawnPosition = spawns.pop()?.position;
 
@@ -89,13 +90,13 @@ function removeEatenPellets(data?: MoveCharacterData): void {
   const pellets = data?.eatenPellets;
 
   for (const pellet of pellets ?? []) {
-    customMap[pellet.y][pellet.x] = TileType.empty;
+    map[pellet.y][pellet.x] = TileType.empty;
   }
 }
 
 function playerInfo(data?: PlayerProps[]): void { // TODO missing data when refreshing page
   const playerProps = data ?? [];
-  spawns = getCharacterSpawns(customMap).filter(spawn => spawn.type === CharacterType.pacMan);
+  spawns = getCharacterSpawns(map).filter(spawn => spawn.type === CharacterType.pacMan);
   store.set(playersAtom, playerProps.map(p => new Player(p)));
 }
 

pac-man-board-game/ClientApp/src/utils/state.ts

@@ -2,6 +2,7 @@ import Player from "../game/player";
 import {atom} from "jotai";
 import {atomWithStorage, createJSONStorage} from "jotai/utils";
 import {Ghost} from "../game/character";
+import {customMap} from "../game/map";
 
 const playerStorage = createJSONStorage<Player | undefined>(() => sessionStorage);
 /**
@@ -56,4 +57,4 @@ export const rollDiceButtonAtom = atom(true);
 /**
  * The map that is currently selected.
  */
-export const selectedMapAtom = atom<GameMap | undefined>(undefined);
+export const selectedMapAtom = atom(customMap);