Changed the way WOKA's are stored

front/src/Components/Menu/MenuIcon.svelte

@@ -1,11 +1,9 @@
 <script lang="typescript">
-    import logoWA from "../images/logo-WA-pixel.png"
     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";
+    import Woka from '../Woka/Woka.svelte';
 
     function showMenu(){
         menuVisiblilityStore.set(!get(menuVisiblilityStore))
@@ -13,22 +11,12 @@
     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={heroWokaPictureSrc} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
+    <div class="nes-pointer woka" on:click|preventDefault={showMenu}><Woka userId={-1}/></div>
     <img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}>
 </main>
 
@@ -49,6 +37,10 @@
   .menuIcon img:hover{
     transform: scale(1.2);
   }
+
+  .menuIcon .woka:hover{
+    transform: scale(1.2);
+  }
   @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
     .menuIcon {
       margin: 3px;

front/src/Components/Video/VideoMediaBox.svelte

@@ -6,9 +6,9 @@
     import blockSignImg from "./images/blockSign.svg";
     import { videoFocusStore } from "../../Stores/VideoFocusStore";
     import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
-    import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
     import { getColorByString, srcObject } from "./utils";
-    import { onDestroy } from "svelte";
+
+    import Woka from '../Woka/Woka.svelte';
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -16,18 +16,9 @@
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
 
-    let userWokaPictureSrc: string | undefined = undefined;
-
-    const unsubscribeFromUserWokaPictureStore = userWokaPictureStore.subscribe((playersAvatars) => {
-        userWokaPictureSrc = playersAvatars.get(peer.userId);
-        console.log(userWokaPictureSrc);
-    });
-
     function openReport(peer: VideoPeer): void {
         showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
     }
-
-    onDestroy(unsubscribeFromUserWokaPictureStore);
 </script>
 
 <div class="video-container">
@@ -39,11 +30,7 @@
     {/if}
     {#if !$constraintStore || $constraintStore.video === false}
         <i style="background-color: {getColorByString(name)};">
-            {#if !userWokaPictureSrc}
-                {name}
-            {:else}
-                <img src={userWokaPictureSrc} class="user-woka-picture" alt="player avatar" />
-            {/if}
+            <Woka userId={peer.userId}/>
         </i>
     {/if}
     {#if $constraintStore && $constraintStore.audio === false}
@@ -61,12 +48,10 @@
 </div>
 
 <style lang="scss">
-    .user-woka-picture {
+    .video-container i img {
         display: block;
-        left: calc(50% - 45px);
-        top: calc(50% - 45px);
-        width: 90px;
-        height: 90px;
-        image-rendering: pixelated;
+        // left: calc(50% - 45px);
+        // top: calc(50% - 45px);
+        padding: 30;
     }
 </style>

front/src/Components/Woka/Woka.svelte

@@ -0,0 +1,31 @@
+<script lang="typescript">
+import { onDestroy } from 'svelte';
+
+    import { gameManager } from '../../Phaser/Game/GameManager';
+    import logoWA from "../images/logo-WA-pixel.png"; // placeholder
+
+    export let userId: number;
+
+    const gameScene = gameManager.getCurrentGameScene();
+    const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId);
+
+    let src = logoWA;
+    const unsubscribe = playerWokaPictureStore.picture.subscribe((htmlElement) => {
+        src = htmlElement?.src ?? logoWA;
+    });
+
+    onDestroy(unsubscribe);
+</script>
+
+<img src={src} alt="woka" class="nes-pointer">
+
+<style>
+    img {
+        display: block;
+        pointer-events: auto;
+        width: 60px;
+        height: 60px;
+        margin: 3px;
+        image-rendering: pixelated;
+    }
+</style>

front/src/Phaser/Entity/Character.ts

@@ -8,7 +8,6 @@ import { TextureError } from "../../Exception/TextureError";
 import { Companion } from "../Companion/Companion";
 import type { GameScene } from "../Game/GameScene";
 import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
-import { waScaleManager } from "../Services/WaScaleManager";
 import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
 import { isSilentStore } from "../../Stores/MediaStore";
 import { lazyLoadPlayerCharacterTextures } from "./PlayerTexturesLoadingManager";

front/src/Phaser/Game/GameScene.ts

@@ -72,11 +72,11 @@ import { peerStore } from "../../Stores/PeerStore";
 import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { playersStore } from "../../Stores/PlayersStore";
-import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
 import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
 import { userIsAdminStore } from "../../Stores/GameStore";
 import { contactPageStore } from "../../Stores/MenuStore";
 import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
+import { UserWokaPictureStore } from "../../Stores/UserWokaPictureStore";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -201,6 +201,7 @@ export class GameScene extends DirtyScene {
     private objectsByType = new Map<string, ITiledMapObject[]>();
     private embeddedWebsiteManager!: EmbeddedWebsiteManager;
     private loader: Loader;
+    private userWokaPictureStores: Map<number, UserWokaPictureStore> = new Map<number, any>();
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
         super({
@@ -333,6 +334,15 @@ export class GameScene extends DirtyScene {
         this.loader.addLoader();
     }
 
+    public getUserWokaPictureStore(userId: number) {
+        let store = this.userWokaPictureStores.get(userId);
+        if (!store) {
+            store = new UserWokaPictureStore();
+            this.userWokaPictureStores.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> {
@@ -662,8 +672,6 @@ export class GameScene extends DirtyScene {
                 this.connection = onConnect.connection;
 
                 playersStore.connectToRoomConnection(this.connection);
-                userWokaPictureStore.connectToRoomConnection(this.connection);
-
                 userIsAdminStore.set(this.connection.hasTag("admin"));
 
                 this.connection.onUserJoins((message: MessageUserJoined) => {
@@ -1497,7 +1505,6 @@ ${escapedMessage}
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
             this.CurrentPlayer.once("textures-loaded", () => {
-                // TODO: How to be sure we always get hero id?
                 this.savePlayerWokaPicture(this.CurrentPlayer, -1);
             });
             this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
@@ -1529,7 +1536,7 @@ ${escapedMessage}
 
     private async savePlayerWokaPicture(character: Character, userId: number): Promise<void> {
         const htmlImageElement = await character.getSnapshot();
-        userWokaPictureStore.setWokaPicture(userId, htmlImageElement.src);
+        this.getUserWokaPictureStore(userId).picture.set(htmlImageElement);
     }
 
     pushPlayerPosition(event: HasPlayerMovedEvent) {

front/src/Stores/UserWokaPictureStore.ts

@@ -1,34 +1,8 @@
-import { writable } from "svelte/store";
-import type { RoomConnection } from "../Connexion/RoomConnection";
+import { writable, Writable } from "svelte/store";
 
 /**
- * A store that contains the players avatars pictures
+ * A store that contains the player avatar picture
  */
-function createUserWokaPictureStore() {
-    const 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();
+export class UserWokaPictureStore {
+    constructor(public picture: Writable<HTMLImageElement | undefined> = writable(undefined)) {}
+}