Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Components/Menu/MenuIcon.svelte

@@ -1,39 +1,60 @@
 <script lang="typescript">
-    import logoWA from "../images/menu.svg"
-    import {menuVisiblilityStore} from "../../Stores/MenuStore";
-    import {get} from "svelte/store";
+  import logoWA from "../images/menu.svg"
+  import logoTalk from "../images/chat.svg"
+  import { menuVisiblilityStore } from "../../Stores/MenuStore";
+  import { chatVisibilityStore } from "../../Stores/ChatStore";
+  import { get } from "svelte/store";
 
-    function showMenu(){
-        menuVisiblilityStore.set(!get(menuVisiblilityStore))
-    }
+  function showMenu() {
+    menuVisiblilityStore.set(!get(menuVisiblilityStore))
+  }
+  function showChat() {
+    chatVisibilityStore.set(true);
+  }
 
-    function onKeyDown(e: KeyboardEvent) {
-        if (e.key === "Tab") {
-            showMenu();
-        }
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "Tab") {
+      showMenu();
     }
+  }
 </script>
 
-<svelte:window on:keydown={onKeyDown}/>
+<svelte:window on:keydown={onKeyDown} />
 
-<main class="menuIcon nes-btn is-dark" on:click|preventDefault={showMenu}>
-    <img src={logoWA} alt="open menu" class="nes-pointer" >
+<main class="menuIcon">
+  <span class=" nes-btn is-dark">
+    <img src={logoWA} alt="open menu" on:click|preventDefault={showMenu}>
+  </span>
+  <span class=" nes-btn is-dark">
+    <img src={logoTalk} alt="open menu" on:click|preventDefault={showChat}>
+  </span>
 </main>
 
 <style lang="scss">
   .menuIcon {
-    pointer-events: auto;
+    display: inline-grid;
     margin: 25px;
+
     img {
+      pointer-events: auto;
       width: 24px;
+      padding-top: 0;
+      margin: 3px
     }
   }
-  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+
+  .menuIcon img:hover {
+    transform: scale(1.2);
+  }
+
+  @media only screen and (max-width: 800px),
+  only screen and (max-height: 800px) {
     .menuIcon {
       margin: 6px;
+
       img {
         width: 16px;
       }
     }
   }
-</style>
+</style>

front/src/Components/images/chat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15 4v7H5.17L4 12.17V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z"/></svg>

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";
@@ -173,7 +172,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;
@@ -196,7 +194,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;
@@ -244,7 +241,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);
@@ -594,8 +590,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
@@ -628,10 +622,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);
@@ -1373,7 +1363,6 @@ export class GameScene extends DirtyScene {
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
         this.peerStoreUnsubscribe();
-        this.chatVisibilityUnsubscribe();
         this.emoteUnsubscribe();
         this.emoteMenuUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
@@ -1848,8 +1837,6 @@ export class GameScene extends DirtyScene {
         return undefined;
     }
     private reposition(): void {
-        this.openChatIcon.setY(this.game.renderer.height - 2);
-
         // Recompute camera offset if needed
         biggestAvailableAreaStore.recompute();
     }