companion pictures store

front/src/Components/Companion/Companion.svelte

@@ -0,0 +1,39 @@
+<script lang="typescript">
+    import { onDestroy } from "svelte";
+
+    import { gameManager } from "../../Phaser/Game/GameManager";
+
+    export let userId: number;
+    export let placeholderSrc: string;
+    export let width: string = "62px";
+    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);
+</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>

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -16,6 +16,7 @@
     import btnProfileSubMenuIdentity from "../images/btn-menu-profile-identity.svg";
     import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
     import Woka from "../Woka/Woka.svelte";
+    import Companion from "../Companion/Companion.svelte";
 
     function disableMenuStores() {
         menuVisiblilityStore.set(false);
@@ -65,14 +66,11 @@
                 <span class="btn-hover">Edit your name</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
-                <!-- <div class="woka-icon">
-                </div> -->
                 <Woka userId={-1} placeholderSrc="" width="26px" height="26px" />
-                <!-- <img src={btnProfileSubMenuWoka} alt="Edit your WOKA" /> -->
                 <span class="btn-hover">Edit your WOKA</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
-                <img src={btnProfileSubMenuCompanion} alt="Edit your companion" />
+                <Companion userId={-1} placeholderSrc={btnProfileSubMenuCompanion} width="26px" height="26px" />
                 <span class="btn-hover">Edit your companion</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>

front/src/Phaser/Companion/Companion.ts

@@ -39,6 +39,7 @@ export class Companion extends Container {
         texturePromise.then((resource) => {
             this.addResource(resource);
             this.invisible = false;
+            this.emit("texture-loaded");
         });
 
         this.scene.physics.world.enableBody(this);
@@ -123,6 +124,37 @@ export class Companion extends Container {
         };
     }
 
+    public async getSnapshot(): Promise<string> {
+        const rt = this.scene.make.renderTexture({}, false);
+        if (rt.renderer instanceof Phaser.Renderer.Canvas.CanvasRenderer) {
+            rt.destroy();
+            for (const sprite of this.sprites.values()) {
+                // we can be sure that either predefined woka or body texture is at this point loaded
+                if (sprite.texture.key.includes("cat") || sprite.texture.key.includes("dog")) {
+                    return this.scene.textures.getBase64(sprite.texture.key);
+                }
+            }
+        }
+        for (const sprite of this.sprites.values()) {
+            sprite.setFrame(1);
+            rt.draw(sprite, sprite.displayWidth * 0.5, sprite.displayHeight * 0.5);
+        }
+        return new Promise<string>((resolve, reject) => {
+            try {
+                rt.snapshot(
+                    (url) => {
+                        resolve((url as HTMLImageElement).src);
+                        rt.destroy();
+                    },
+                    "image/png",
+                    1
+                );
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
     private playAnimation(direction: PlayerAnimationDirections, type: PlayerAnimationTypes): void {
         if (this.invisible) return;
 

front/src/Phaser/Entity/Character.ts

@@ -63,7 +63,7 @@ export abstract class Character extends Container {
                 this.addTextures(textures, frame);
                 this.invisible = false;
                 this.playAnimation(direction, moving);
-                this.emit("textures-loaded");
+                this.emit("woka-textures-loaded");
             })
             .catch(() => {
                 return lazyLoadPlayerCharacterTextures(scene.load, ["color_22", "eyes_23"]).then((textures) => {
@@ -151,6 +151,9 @@ export abstract class Character extends Container {
     public addCompanion(name: string, texturePromise?: Promise<string>): void {
         if (typeof texturePromise !== "undefined") {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
+            this.companion.once("texture-loaded", () => {
+                this.emit("companion-texture-loaded", this.companion?.getSnapshot());
+            });
         }
     }
 

front/src/Phaser/Game/GameScene.ts

@@ -77,6 +77,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
 import { contactPageStore } from "../../Stores/MenuStore";
 import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
 import { UserWokaPictureStore } from "../../Stores/UserWokaPictureStore";
+import { UserCompanionPictureStore } from "../../Stores/UserCompanionPictureStore";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -202,6 +203,10 @@ export class GameScene extends DirtyScene {
     private embeddedWebsiteManager!: EmbeddedWebsiteManager;
     private loader: Loader;
     private userWokaPictureStores: Map<number, UserWokaPictureStore> = new Map<number, UserWokaPictureStore>();
+    private userCompanionPictureStores: Map<number, UserCompanionPictureStore> = new Map<
+        number,
+        UserCompanionPictureStore
+    >();
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
@@ -344,6 +349,15 @@ export class GameScene extends DirtyScene {
         return store;
     }
 
+    public getUserCompanionPictureStore(userId: number) {
+        let store = this.userCompanionPictureStores.get(userId);
+        if (!store) {
+            store = new UserCompanionPictureStore();
+            this.userCompanionPictureStores.set(userId, store);
+        }
+        return store;
+    }
+
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private async onMapLoad(data: any): Promise<void> {
@@ -1506,9 +1520,14 @@ ${escapedMessage}
                 this.companion,
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
-            this.CurrentPlayer.once("textures-loaded", () => {
+            this.CurrentPlayer.once("woka-textures-loaded", () => {
                 this.savePlayerWokaPicture(this.CurrentPlayer, -1);
             });
+            this.CurrentPlayer.once("companion-texture-loaded", (snapshotPromise: Promise<string>) => {
+                snapshotPromise.then((snapshot: string) => {
+                    this.savePlayerCompanionPicture(-1, snapshot);
+                });
+            });
             this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
                 if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
                     return; //we don't want the menu to open when pinching on a touch screen.
@@ -1541,6 +1560,10 @@ ${escapedMessage}
         this.getUserWokaPictureStore(userId).picture.set(htmlImageElementSrc);
     }
 
+    private savePlayerCompanionPicture(userId: number, snapshot: string): void {
+        this.getUserCompanionPictureStore(userId).picture.set(snapshot);
+    }
+
     pushPlayerPosition(event: HasPlayerMovedEvent) {
         if (this.lastMoveEventSent === event) {
             return;
@@ -1728,7 +1751,7 @@ ${escapedMessage}
             addPlayerData.companion,
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
-        player.once("textures-loaded", () => {
+        player.once("woka-textures-loaded", () => {
             this.savePlayerWokaPicture(player, addPlayerData.userId);
         });
         this.MapPlayers.add(player);

front/src/Stores/UserCompanionPictureStore.ts

@@ -0,0 +1,8 @@
+import { writable, Writable } from "svelte/store";
+
+/**
+ * A store that contains the player companion picture
+ */
+export class UserCompanionPictureStore {
+    constructor(public picture: Writable<string | undefined> = writable(undefined)) {}
+}