Persist the player in sessionStorage, fixed typo in BoxProps

This commit is contained in:
martin 2023-07-08 15:39:34 +02:00
parent d6fa74455e
commit 920a941156
5 changed files with 19 additions and 12 deletions

View File

@ -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 {

View File

@ -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

View File

@ -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}/>;

View File

@ -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 {

View File

@ -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);