Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring with a MapStore

Browse source 
A great deal of the complexity of the current code is that we must chain
2 reactive values (one in the map "GameScene.MapPlayersByKey" and one in
the snapshot store).

The new generic MapStore class can be used to listen to stores inside a map.
When the store inside the map, or the map itself is modified, the
resulting store is updated.
This commit is contained in:
David Négrier 2021-12-14 14:46:24 +01:00
parent bbe539b785
commit 0e68490e75
11 changed files with 277 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

27
front/src/Components/Companion/Companion.svelte
View file

@ -1,7 +1,6 @@
<script lang="typescript">
import { onDestroy } from "svelte";
import { gameManager } from "../../Phaser/Game/GameManager";
import type { PictureStore } from "../../Stores/PictureStore";
export let userId: number;
export let placeholderSrc: string;
@ -9,17 +8,23 @@
export let height: string = "62px";
const gameScene = gameManager.getCurrentGameScene();
const playerWokaPictureStore = gameScene.getUserCompanionPictureStore(userId);
let src = placeholderSrc;
const unsubscribe = playerWokaPictureStore.picture.subscribe((source) => {
src = source ?? placeholderSrc;
});
onDestroy(unsubscribe);
let companionWokaPictureStore: PictureStore | undefined;
if (userId === -1) {
companionWokaPictureStore = gameScene.CurrentPlayer.companion?.pictureStore;
} else {
companionWokaPictureStore = gameScene.MapPlayersByKey.getNestedStore(
userId,
(item) => item.companion?.pictureStore
);
}
</script>
<img {src} alt="" class="nes-pointer" style="--theme-width: {width}; --theme-height: {height}" />
<img
src={$companionWokaPictureStore ?? placeholderSrc}
alt=""
class="nes-pointer"
style="--theme-width: {width}; --theme-height: {height}"
/>
<style>
img {

11
front/src/Components/Woka/Woka.svelte
View file

@ -2,6 +2,7 @@
import { onDestroy } from "svelte";
import { gameManager } from "../../Phaser/Game/GameManager";
import { playersStore } from "../../Stores/PlayersStore";
export let userId: number;
export let placeholderSrc: string;
@ -9,10 +10,16 @@
export let height: string = "62px";
const gameScene = gameManager.getCurrentGameScene();
const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId);
let playerWokaPictureStore;
if (userId === -1) {
playerWokaPictureStore = gameScene.CurrentPlayer.pictureStore;
} else {
playerWokaPictureStore = gameScene.MapPlayersByKey.getNestedStore(userId, (item) => item.pictureStore);
}
let src = placeholderSrc;
const unsubscribe = playerWokaPictureStore.picture.subscribe((source) => {
const unsubscribe = playerWokaPictureStore.subscribe((source) => {
src = source ?? placeholderSrc;
});