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>