avatar as a menu button

front/src/Components/Menu/MenuIcon.svelte

@@ -3,7 +3,9 @@
     import logoTalk from "../images/logo-message-pixel.png"
     import {menuVisiblilityStore} from "../../Stores/MenuStore";
     import {chatVisibilityStore} from "../../Stores/ChatStore";
+    import {userWokaPictureStore} from "../../Stores/UserWokaPictureStore";
     import {get} from "svelte/store";
+    import {onDestroy} from "svelte";
 
     function showMenu(){
         menuVisiblilityStore.set(!get(menuVisiblilityStore))
@@ -11,12 +13,22 @@
     function showChat(){
         chatVisibilityStore.set(true);
     }
+
+    let heroWokaPictureSrc = logoWA;
+
+    const unsubscribeFromUserWokaPictureStore = userWokaPictureStore.subscribe(playersAvatars => {
+      heroWokaPictureSrc = playersAvatars.get(-1) ?? logoWA;
+    });
+
+    onDestroy(unsubscribeFromUserWokaPictureStore);
+
+
 </script>
 
 <svelte:window/>
 
 <main class="menuIcon">
-    <img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
+    <img src={heroWokaPictureSrc} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
     <img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}>
 </main>
 

front/src/Phaser/Entity/Character.ts

@@ -118,15 +118,21 @@ export abstract class Character extends Container {
         }
     }
 
-    public saveCharacterToTexture(saveAs: string): void {
+    public async getSnapshot(): Promise<HTMLImageElement> {
         const bounds = this.getBounds();
-        const rt = this.scene.make.renderTexture({ x: 300, y: 300, width: bounds.width, height: bounds.height}, true);
+        const rt = this.scene.make.renderTexture({}, false);
         for (const sprite of this.sprites.values()) {
             rt.draw(sprite, sprite.displayWidth * 0.5, sprite.displayHeight * 0.5);
         }
-        // P.H. NOTE: Change of avatar will update saved texture. We can then send it again to the backend
-        rt.saveTexture(saveAs);
-        rt.destroy();
+        // TODO: Any way for this to fail? What fallback?
+        return new Promise<HTMLImageElement>((resolve) => {
+            rt.snapshot((url) => {
+                resolve(url as HTMLImageElement); // P.H. NOTE: Exclude Color type
+                // rt.destroy();
+            },
+            'image/png',
+            1);
+        })
     }
 
     public addCompanion(name: string, texturePromise?: Promise<string>): void {

front/src/Phaser/Game/GameScene.ts

@@ -67,11 +67,13 @@ import EVENT_TYPE = Phaser.Scenes.Events;
 import AnimatedTiles from "phaser-animated-tiles";
 import { StartPositionCalculator } from "./StartPositionCalculator";
 import { soundManager } from "./SoundManager";
+
 import { peerStore, screenSharingPeerStore } from "../../Stores/PeerStore";
 import { videoFocusStore } from "../../Stores/VideoFocusStore";
 import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
+import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
 import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
 import {
@@ -79,6 +81,7 @@ import {
     audioManagerVisibilityStore,
     audioManagerVolumeStore,
 } from "../../Stores/AudioManagerStore";
+
 import { PropertyUtils } from "../Map/PropertyUtils";
 import Tileset = Phaser.Tilemaps.Tileset;
 import { userIsAdminStore } from "../../Stores/GameStore";
@@ -665,6 +668,7 @@ export class GameScene extends DirtyScene {
                 this.connection = onConnect.connection;
 
                 playersStore.connectToRoomConnection(this.connection);
+                userWokaPictureStore.connectToRoomConnection(this.connection);
 
                 userIsAdminStore.set(this.connection.hasTag("admin"));
 
@@ -1499,7 +1503,8 @@ ${escapedMessage}
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
             this.CurrentPlayer.once('textures-loaded', () => {
-                this.savePlayerAvatarPicture(this.CurrentPlayer, 'hero-avatar');
+                // TODO: How to be sure we always get hero id?
+                this.savePlayerWokaPicture(this.CurrentPlayer, -1);
             });
             this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
                 if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
@@ -1528,10 +1533,9 @@ ${escapedMessage}
         this.createCollisionWithPlayer();
     }
 
-    private savePlayerAvatarPicture(character: Character, key: string): void {
-        character.saveCharacterToTexture(key);
-        console.log(key);
-        this.add.image(200, 200, key);
+    private async savePlayerWokaPicture(character: Character, userId: number): Promise<void> {
+        const htmlImageElement = await character.getSnapshot();
+        userWokaPictureStore.setWokaPicture(userId, htmlImageElement.src);
     }
 
     pushPlayerPosition(event: HasPlayerMovedEvent) {
@@ -1635,11 +1639,9 @@ ${escapedMessage}
                     break;
                 case "AddPlayerEvent":
                     this.doAddPlayer(event.event);
-                    console.log('ADD PLAYER');
                     break;
                 case "RemovePlayerEvent":
                     this.doRemovePlayer(event.userId);
-                    console.log('REMOVE PLAYER');
                     break;
                 case "UserMovedEvent":
                     this.doUpdatePlayerPosition(event.event);
@@ -1679,7 +1681,6 @@ ${escapedMessage}
      */
     private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
         const currentPlayerId = this.connection?.getUserId();
-        console.log(currentPlayerId);
         this.removeAllRemotePlayers();
         // load map
         usersPosition.forEach((userPosition: MessageUserPositionInterface) => {
@@ -1725,7 +1726,7 @@ ${escapedMessage}
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
         player.once('textures-loaded', () => {
-            this.savePlayerAvatarPicture(player, `${addPlayerData.userId}-player-avatar`);
+            this.savePlayerWokaPicture(player, addPlayerData.userId);
         });
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);

front/src/Stores/UserWokaPictureStore.ts

@@ -0,0 +1,34 @@
+import { writable } from "svelte/store";
+import type { RoomConnection } from "../Connexion/RoomConnection";
+
+/**
+ * A store that contains the players avatars pictures
+ */
+function createUserWokaPictureStore() {
+    let players = new Map<number, string>();
+
+    const { subscribe, update } = writable(players);
+
+    return {
+        subscribe,
+        connectToRoomConnection: (roomConnection: RoomConnection) => {
+            roomConnection.onUserLeft((userId) => {
+                update((users) => {
+                    users.delete(userId);
+                    return users;
+                });
+            });
+        },
+        setWokaPicture(userId: number, url: string) {
+            update((users) => {
+                users.set(userId, url);
+                return users;
+            });
+        },
+        getWokaPictureById(userId: number): string | undefined {
+            return players.get(userId);
+        },
+    };
+}
+
+export const userWokaPictureStore = createUserWokaPictureStore();