From 920a9411561be681ea64a7b42ec4fc2c199baab0 Mon Sep 17 00:00:00 2001
From: martin <me@martials.no>
Date: Sat, 8 Jul 2023 15:39:34 +0200
Subject: [PATCH] Persist the player in sessionStorage, fixed typo in BoxProps
---
pac-man-board-game/ClientApp/src/game/box.ts | 6 +++---
pac-man-board-game/ClientApp/src/game/player.ts | 2 +-
pac-man-board-game/ClientApp/src/pages/game.tsx | 11 ++++++-----
pac-man-board-game/ClientApp/src/types/props.d.ts | 4 ++--
pac-man-board-game/ClientApp/src/utils/state.ts | 8 +++++++-
5 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/pac-man-board-game/ClientApp/src/game/box.ts b/pac-man-board-game/ClientApp/src/game/box.ts
index c25c603..6428cb9 100644
--- a/pac-man-board-game/ClientApp/src/game/box.ts
+++ b/pac-man-board-game/ClientApp/src/game/box.ts
@@ -5,9 +5,9 @@ export default class Box {
public Pellets: Pellet[];
public readonly Colour: Colour;
- public constructor({colour, pellets = []}: BoxProps) {
- this.Colour = colour;
- this.Pellets = pellets;
+ public constructor({Colour, Pellets = []}: BoxProps) {
+ this.Colour = Colour;
+ this.Pellets = Pellets;
}
get powerPellet(): Pellet | undefined {
diff --git a/pac-man-board-game/ClientApp/src/game/player.ts b/pac-man-board-game/ClientApp/src/game/player.ts
index c8d2a07..313b0d5 100644
--- a/pac-man-board-game/ClientApp/src/game/player.ts
+++ b/pac-man-board-game/ClientApp/src/game/player.ts
@@ -18,7 +18,7 @@ export default class Player {
constructor(props: PlayerProps) {
this.Name = props.Name;
this.Colour = props.Colour;
- this.Box = new Box(props.Box ?? {colour: props.Colour});
+ this.Box = new Box(props.Box ?? {Colour: props.Colour});
this.PacMan = new Character(props.PacMan ?? {
Colour: props.Colour,
Type: CharacterType.pacMan
diff --git a/pac-man-board-game/ClientApp/src/pages/game.tsx b/pac-man-board-game/ClientApp/src/pages/game.tsx
index e34b3cb..5811a9b 100644
--- a/pac-man-board-game/ClientApp/src/pages/game.tsx
+++ b/pac-man-board-game/ClientApp/src/pages/game.tsx
@@ -1,17 +1,18 @@
import React, {useEffect} from "react";
import {GameComponent} from "../components/gameComponent";
-import {useAtom} from "jotai";
+import {useAtomValue} from "jotai";
import {thisPlayerAtom} from "../utils/state";
const Game: Component = () => {
- const [player] = useAtom(thisPlayerAtom); // TODO get player from session storage
+ const player = useAtomValue(thisPlayerAtom);
useEffect(() => {
+ console.debug(player);
if (!player) {
- // TODO state dissapears on refresh
- window.location.href = "/";
+ // TODO player is undefined on first render, then defined on second render
+ // window.location.href = "/";
}
- }, []);
+ }, [player]);
if (player) {
return <GameComponent player={player}/>;
diff --git a/pac-man-board-game/ClientApp/src/types/props.d.ts b/pac-man-board-game/ClientApp/src/types/props.d.ts
index c576fd0..3e0781c 100644
--- a/pac-man-board-game/ClientApp/src/types/props.d.ts
+++ b/pac-man-board-game/ClientApp/src/types/props.d.ts
@@ -28,8 +28,8 @@ interface CharacterProps {
}
interface BoxProps {
- pellets?: import("../game/pellet").default[],
- readonly colour: import("../game/colour").Colour,
+ Pellets?: import("../game/pellet").default[],
+ readonly Colour: import("../game/colour").Colour,
}
interface PlayerProps {
diff --git a/pac-man-board-game/ClientApp/src/utils/state.ts b/pac-man-board-game/ClientApp/src/utils/state.ts
index f8cf243..7b6d1e9 100644
--- a/pac-man-board-game/ClientApp/src/utils/state.ts
+++ b/pac-man-board-game/ClientApp/src/utils/state.ts
@@ -8,7 +8,13 @@ const playerStorage = createJSONStorage<Player | undefined>(() => sessionStorage
// TODO merge character and player atoms, since the player is the owner of the character
export const charactersAtom = atom<Character[] | undefined>(undefined);
export const playersAtom = atom<Player[]>([]);
-export const thisPlayerAtom = atomWithStorage<Player | undefined>("player", undefined, playerStorage);
+export const thisPlayerAtom = atomWithStorage<Player | undefined>("player", undefined, {
+ ...playerStorage,
+ getItem(key, initialValue): Player | undefined {
+ const playerProps = playerStorage.getItem(key, initialValue) as PlayerProps | undefined;
+ return playerProps ? new Player(playerProps) : undefined;
+ },
+});
export const diceAtom = atom<number[] | undefined>(undefined);
export const selectedDiceAtom = atom<SelectedDice | undefined>(undefined);
export const currentPlayerAtom = atom<Player | undefined>(undefined);