0e68490e75
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.
47 lines
1.3 KiB
Svelte
47 lines
1.3 KiB
Svelte
<script lang="typescript">
|
|
import { onDestroy } from "svelte";
|
|
|
|
import { gameManager } from "../../Phaser/Game/GameManager";
|
|
import { playersStore } from "../../Stores/PlayersStore";
|
|
|
|
export let userId: number;
|
|
export let placeholderSrc: string;
|
|
export let width: string = "62px";
|
|
export let height: string = "62px";
|
|
|
|
const gameScene = gameManager.getCurrentGameScene();
|
|
let playerWokaPictureStore;
|
|
if (userId === -1) {
|
|
playerWokaPictureStore = gameScene.CurrentPlayer.pictureStore;
|
|
} else {
|
|
playerWokaPictureStore = gameScene.MapPlayersByKey.getNestedStore(userId, (item) => item.pictureStore);
|
|
}
|
|
|
|
let src = placeholderSrc;
|
|
|
|
const unsubscribe = playerWokaPictureStore.subscribe((source) => {
|
|
src = source ?? placeholderSrc;
|
|
});
|
|
|
|
onDestroy(unsubscribe);
|
|
</script>
|
|
|
|
<img {src} alt="" class="nes-pointer" style="--theme-width: {width}; --theme-height: {height}" />
|
|
|
|
<style>
|
|
img {
|
|
display: inline-block;
|
|
pointer-events: auto;
|
|
width: var(--theme-width);
|
|
height: var(--theme-height);
|
|
margin: 0;
|
|
padding: 0;
|
|
position: static;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|