Update icon message and profile (#1504)

- Add new icon profil pixel
 - Add new icon message pixel
 - Migrate message icon in svelt menu

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/Menu/MenuIcon.svelte

@@ -1,11 +1,16 @@
 <script lang="typescript">
-    import logoWA from "../images/logo-WA-min.png"
+    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 {get} from "svelte/store";
 
     function showMenu(){
         menuVisiblilityStore.set(!get(menuVisiblilityStore))
     }
+    function showChat(){
+        chatVisibilityStore.set(true);
+    }
 
     function onKeyDown(e: KeyboardEvent) {
         if (e.key === "Tab") {
@@ -18,17 +23,23 @@
 
 <main class="menuIcon">
     <img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
+    <img src={logoTalk} alt="open menu" class="nes-pointer" on:click|preventDefault={showChat}>
 </main>
 
 <style lang="scss">
   .menuIcon {
+    display: inline-grid;
     margin: 25px;
     img {
       pointer-events: auto;
       width: 60px;
       padding-top: 0;
+      margin: 3px
     }
   }
+  .menuIcon img:hover{
+    transform: scale(1.2);
+  }
   @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
     .menuIcon {
       margin: 3px;

front/src/Phaser/Components/OpenChatIcon.ts

@@ -1,17 +0,0 @@
-import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
-import { chatVisibilityStore } from "../../Stores/ChatStore";
-
-export const openChatIconName = "openChatIcon";
-export class OpenChatIcon extends Phaser.GameObjects.Image {
-    constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, openChatIconName, 3);
-        scene.add.existing(this);
-        this.setScrollFactor(0, 0);
-        this.setOrigin(0, 1);
-        this.setInteractive();
-        //this.setVisible(false);
-        this.setDepth(DEPTH_INGAME_TEXT_INDEX);
-
-        this.on("pointerup", () => chatVisibilityStore.set(true));
-    }
-}

front/src/Phaser/Game/GameScene.ts

@@ -38,7 +38,6 @@ import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 import { mediaManager } from "../../WebRtc/MediaManager";
 import { SimplePeer } from "../../WebRtc/SimplePeer";
 import { addLoader, removeLoader } from "../Components/Loader";
-import { OpenChatIcon, openChatIconName } from "../Components/OpenChatIcon";
 import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
 import { RemotePlayer } from "../Entity/RemotePlayer";
 import type { ActionableItem } from "../Items/ActionableItem";
@@ -174,7 +173,6 @@ export class GameScene extends DirtyScene {
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
     private iframeSubscriptionList!: Array<Subscription>;
     private peerStoreUnsubscribe!: () => void;
-    private chatVisibilityUnsubscribe!: () => void;
     private emoteUnsubscribe!: () => void;
     private emoteMenuUnsubscribe!: () => void;
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
@@ -197,7 +195,6 @@ export class GameScene extends DirtyScene {
     private outlinedItem: ActionableItem | null = null;
     public userInputManager!: UserInputManager;
     private isReconnecting: boolean | undefined = undefined;
-    private openChatIcon!: OpenChatIcon;
     private playerName!: string;
     private characterLayers!: string[];
     private companion!: string | null;
@@ -245,7 +242,6 @@ export class GameScene extends DirtyScene {
             }
         }
 
-        this.load.image(openChatIconName, "resources/objects/talk.png");
         if (touchScreenManager.supportTouchScreen) {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
@@ -584,8 +580,6 @@ export class GameScene extends DirtyScene {
             this.outlinedItem?.activate();
         });
 
-        this.openChatIcon = new OpenChatIcon(this, 2, this.game.renderer.height - 2);
-
         this.reposition();
 
         // From now, this game scene will be notified of reposition events
@@ -618,10 +612,6 @@ export class GameScene extends DirtyScene {
             oldPeerNumber = newPeerNumber;
         });
 
-        this.chatVisibilityUnsubscribe = chatVisibilityStore.subscribe((v) => {
-            this.openChatIcon.setVisible(!v);
-        });
-
         this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
             if (emoteKey) {
                 this.CurrentPlayer?.playEmote(emoteKey);
@@ -1327,7 +1317,6 @@ ${escapedMessage}
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
         this.peerStoreUnsubscribe();
-        this.chatVisibilityUnsubscribe();
         this.emoteUnsubscribe();
         this.emoteMenuUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
@@ -1802,8 +1791,6 @@ ${escapedMessage}
         return undefined;
     }
     private reposition(): void {
-        this.openChatIcon.setY(this.game.renderer.height - 2);
-
         // Recompute camera offset if needed
         biggestAvailableAreaStore.recompute();
     }