Implement twemoji on emote

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -18,13 +18,18 @@
         '--font': 'Press Start 2P'
       },
       emojisPerRow: isMobile() ? 6 : 8,
-      autoFocusSearch: false
+      autoFocusSearch: false,
+      style: 'twemoji',
     });
     //the timeout is here to prevent the menu from flashing
     setTimeout(() => picker.showPicker(emojiContainer), 100);
 
     picker.on("emoji", (selection) => {
-      emoteStore.set(selection.emoji);
+      emoteStore.set({
+        unicode: selection.emoji,
+        url: selection.url,
+        name: selection.name
+      });
     });
 
     picker.on("hidden", () => {

front/src/Components/Menu/MenuIcon.svelte

@@ -11,15 +11,9 @@
     function showChat(){
         chatVisibilityStore.set(true);
     }
-
-    function onKeyDown(e: KeyboardEvent) {
-        if (e.key === "Tab") {
-            showMenu();
-        }
-    }
 </script>
 
-<svelte:window on:keydown={onKeyDown}/>
+<svelte:window/>
 
 <main class="menuIcon">
     <img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>

front/src/Phaser/Entity/Character.ts

@@ -3,6 +3,7 @@ import { SpeechBubble } from "./SpeechBubble";
 import Text = Phaser.GameObjects.Text;
 import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
+import DOMElement = Phaser.GameObjects.DOMElement;
 import { TextureError } from "../../Exception/TextureError";
 import { Companion } from "../Companion/Companion";
 import type { GameScene } from "../Game/GameScene";
@@ -33,7 +34,7 @@ export abstract class Character extends Container {
     //private teleportation: Sprite;
     private invisible: boolean;
     public companion?: Companion;
-    private emote: Phaser.GameObjects.Text | null = null;
+    private emote: Phaser.GameObjects.DOMElement | null = null;
     private emoteTween: Phaser.Tweens.Tween | null = null;
     scene: GameScene;
 
@@ -300,8 +301,9 @@ export abstract class Character extends Container {
     playEmote(emote: string) {
         this.cancelPreviousEmote();
         const emoteY = -45;
-        this.playerName.setVisible(false);
-        this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
+        const image = new Image(16, 16);
+        image.src = emote;
+        this.emote = new DOMElement(this.scene, -1, 0, image, "z-index:10;");
         this.emote.setAlpha(0);
         this.add(this.emote);
         this.createStartTransition(emoteY);

front/src/Phaser/Game/GameScene.ts

@@ -15,10 +15,7 @@ import type {
 import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
 
 import { Queue } from "queue-typescript";
-import {
-    Box,
-    ON_ACTION_TRIGGER_BUTTON,
-} from "../../WebRtc/LayoutManager";
+import { Box, ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
 import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
@@ -497,7 +494,10 @@ export class GameScene extends DirtyScene {
                             object.properties,
                             'in the "' + object.name + '" object of type "website"'
                         );
-                        const allowApi = PropertyUtils.findBooleanProperty(GameMapProperties.ALLOW_API, object.properties);
+                        const allowApi = PropertyUtils.findBooleanProperty(
+                            GameMapProperties.ALLOW_API,
+                            object.properties
+                        );
 
                         // TODO: add a "allow" property to iframe
                         this.embeddedWebsiteManager.createEmbeddedWebsite(
@@ -614,10 +614,10 @@ export class GameScene extends DirtyScene {
             oldPeerNumber = newPeerNumber;
         });
 
-        this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
-            if (emoteKey) {
-                this.CurrentPlayer?.playEmote(emoteKey);
-                this.connection?.emitEmoteEvent(emoteKey);
+        this.emoteUnsubscribe = emoteStore.subscribe((emote) => {
+            if (emote) {
+                this.CurrentPlayer?.playEmote(emote.url);
+                this.connection?.emitEmoteEvent(emote.url);
                 emoteStore.set(null);
             }
         });
@@ -763,14 +763,14 @@ export class GameScene extends DirtyScene {
                 this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
 
                 // Init layer change listener
-                this.gameMap.onEnterLayer(layers => {
-                    layers.forEach(layer => {
+                this.gameMap.onEnterLayer((layers) => {
+                    layers.forEach((layer) => {
                         iframeListener.sendEnterLayerEvent(layer.name);
                     });
                 });
 
-                this.gameMap.onLeaveLayer(layers => {
-                    layers.forEach(layer => {
+                this.gameMap.onLeaveLayer((layers) => {
+                    layers.forEach((layer) => {
                         iframeListener.sendLeaveLayerEvent(layer.name);
                     });
                 });
@@ -1868,7 +1868,8 @@ ${escapedMessage}
     public startJitsi(roomName: string, jwt?: string): void {
         const allProps = this.gameMap.getCurrentProperties();
         const jitsiConfig = this.safeParseJSONstring(
-            allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, GameMapProperties.JITSI_CONFIG
+            allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
+            GameMapProperties.JITSI_CONFIG
         );
         const jitsiInterfaceConfig = this.safeParseJSONstring(
             allProps.get(GameMapProperties.JITSI_INTERFACE_CONFIG) as string | undefined,

front/src/Phaser/Player/Player.ts

@@ -3,8 +3,6 @@ import type { GameScene } from "../Game/GameScene";
 import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
 import { Character } from "../Entity/Character";
 import { userMovingStore } from "../../Stores/GameStore";
-import { get } from "svelte/store";
-import { emoteMenuStore } from "../../Stores/EmoteStore";
 
 export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";
@@ -68,10 +66,24 @@ export class Player extends Character {
         } else if (this.wasMoving && moving) {
             // slow joystick movement
             this.move(0, 0);
-            this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
+            this.emit(hasMovedEventName, {
+                moving,
+                direction: this.previousDirection,
+                x: this.x,
+                y: this.y,
+                oldX: x,
+                oldY: y,
+            });
         } else if (this.wasMoving && !moving) {
             this.stop();
-            this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
+            this.emit(hasMovedEventName, {
+                moving,
+                direction: this.previousDirection,
+                x: this.x,
+                y: this.y,
+                oldX: x,
+                oldY: y,
+            });
         }
 
         if (direction !== null) {

front/src/Stores/EmoteStore.ts

@@ -1,5 +1,11 @@
 import { writable } from "svelte/store";
 
+export interface Emoji {
+    unicode: string;
+    url: string;
+    name: string;
+}
+
 function createEmoteMenuStore() {
     const { subscribe, set } = writable(false);
 
@@ -14,5 +20,5 @@ function createEmoteMenuStore() {
     };
 }
 
-export const emoteStore = writable<string | null>(null);
+export const emoteStore = writable<Emoji | null>(null);
 export const emoteMenuStore = createEmoteMenuStore();