Twemoji Picker

front/src/Phaser/Components/EmoteMenu.ts

@@ -1,63 +1,60 @@
-import Sprite = Phaser.GameObjects.Sprite;
-import Text = Phaser.GameObjects.Text;
-import {DEPTH_UI_INDEX} from "../Game/DepthIndexes";
-import {waScaleManager} from "../Services/WaScaleManager";
+import DOMElement = Phaser.GameObjects.DOMElement;
+import { DEPTH_UI_INDEX } from "../Game/DepthIndexes";
+import { waScaleManager } from "../Services/WaScaleManager";
+import type { UserInputManager } from "../UserInput/UserInputManager";
+import { EmojiButton } from '@joeattardi/emoji-button';
+import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 
-export const EmoteMenuClickEvent = 'emoteClick';
+export const EmoteMenuClickEvent = "emoteClick";
 
 export class EmoteMenu extends Phaser.GameObjects.Container {
     private resizeCallback: OmitThisParameter<() => void>;
+    private container: DOMElement;
+    private picker: EmojiButton;
 
-    constructor(scene: Phaser.Scene, x: number, y: number, private items: string[]) {
+    constructor(scene: Phaser.Scene, x: number, y: number, private userInputManager: UserInputManager) {
         super(scene, x, y);
-        this.setDepth(DEPTH_UI_INDEX)
+        this.setDepth(DEPTH_UI_INDEX);
         this.scene.add.existing(this);
-        this.initItems();
+        this.container = new DOMElement(this.scene, 0, 0, "div", "", "");
+        this.container.setClassName("emoji-container");
+        const scalingFactor = waScaleManager.uiScalingFactor * 0.5;
+        this.container.setScale(scalingFactor);
+        this.add(this.container);
+        const emojiContainer = HtmlUtils.querySelectorOrFail(".emoji-container");
+
+        this.picker = new EmojiButton({
+            rootElement: emojiContainer,
+            styleProperties: {
+                '--font': 'Press Start 2P'
+            }
+        });
+
+        this.picker.on("emoji", (selection) => {
+            this.emit(EmoteMenuClickEvent, selection.emoji);
+        });
+
+        this.picker.on("hidden", () => {
+            this.userInputManager.restoreControls();
+        });
 
         this.resize();
         this.resizeCallback = this.resize.bind(this);
         this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
     }
 
-    private initItems() {
-        const itemsNumber = this.items.length;
-        const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20;
-        this.items.forEach((item, index) => this.createEmoteElement(item, index, itemsNumber, menuRadius))
+    public isOpen(): boolean {
+        return this.picker.isPickerVisible();
     }
 
-    private createEmoteElement(item: string, index: number, itemsNumber: number, menuRadius: number) {
-        // const image = new Sprite(this.scene, 0,  menuRadius, item.image);
-        const image = new Text(this.scene, -12, menuRadius, item, {fontFamily: '"twemoji"', fontSize:'75px'});
-        this.add(image);
-        // this.scene.sys.updateList.add(image);
-        const scalingFactor = waScaleManager.uiScalingFactor * 0.3;
-        image.setScale(scalingFactor)
-        image.setInteractive({
-            useHandCursor: true,
-        });
-        image.on('pointerdown', () => this.emit(EmoteMenuClickEvent, item));
-        image.on('pointerover', () => {
-            this.scene.tweens.add({
-                targets: image,
-                props: {
-                    scale: 1.5 * scalingFactor,
-                },
-                duration: 500,
-                ease: 'Power3',
-            })
-        });
-        image.on('pointerout', () => {
-            this.scene.tweens.add({
-                targets: image,
-                props: {
-                    scale: scalingFactor,
-                },
-                duration: 500,
-                ease: 'Power3',
-            })
-        });
-        const angle = 2 * Math.PI * index / itemsNumber;
-        Phaser.Actions.RotateAroundDistance([image], {x: -12, y: -12}, angle, menuRadius);
+    public openPicker() {
+        this.userInputManager.disableControls();
+        const emojiContainer = HtmlUtils.querySelectorOrFail(".emoji-container");
+        this.picker.showPicker(emojiContainer);
+    }
+
+    public closePicker() {
+        this.picker.hidePicker();
     }
 
     private resize() {
@@ -68,4 +65,4 @@ export class EmoteMenu extends Phaser.GameObjects.Container {
         this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
         super.destroy();
     }
-}
+}

front/src/Phaser/Entity/Character.ts

@@ -266,16 +266,13 @@ export abstract class Character extends Container {
     playEmote(emote: string) {
         this.cancelPreviousEmote();
 
-        const scalingFactor = waScaleManager.uiScalingFactor * 0.5;
-        const emoteY = -60 - scalingFactor * 10;
+        const scalingFactor = waScaleManager.uiScalingFactor;
+        const emoteY = -60;
 
         this.playerName.setVisible(false);
-        this.emote = new Text(this.scene, -12, 0, emote, {fontFamily: '"twemoji"', fontSize:'55px'});
+        this.emote = new Text(this.scene, -12, 0, emote, {fontFamily: '"twemoji"', fontSize:'24px'});
         this.emote.setAlpha(0);
-        this.emote.setScale(0.1 * scalingFactor);
         this.add(this.emote);
-        // this.scene.sys.updateList.add(this.emote);
-
         this.createStartTransition(scalingFactor, emoteY);
     }
 

front/src/Phaser/Game/EmoteManager.ts

@@ -2,8 +2,6 @@ import {emoteEventStream} from "../../Connexion/EmoteEventStream";
 import type {GameScene} from "./GameScene";
 import type {Subscription} from "rxjs";
 
-export const emotes: string[] = ['❤️', '👏', '✋', '🍻', '🥂', '👌', '👎', '💯','❗️', '❓','🎶'];
-
 export class EmoteManager {
     private subscription: Subscription;
 
@@ -16,11 +14,6 @@ export class EmoteManager {
         })
     }
 
-    getEmotes(): string[] {
-        // TODO: localstorage + management
-        return emotes;
-    }
-
     destroy() {
         this.subscription.unsubscribe();
     }

front/src/Phaser/Game/GameScene.ts

@@ -1353,7 +1353,7 @@ export class GameScene extends DirtyScene {
                     return; //we don't want the menu to open when pinching on a touch screen.
                 }
                 
-                this.CurrentPlayer.openOrCloseEmoteMenu( this.emoteManager.getEmotes());
+                this.CurrentPlayer.openOrCloseEmoteMenu();
             })
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);

front/src/Phaser/Player/Player.ts

@@ -94,17 +94,22 @@ export class Player extends Character {
         return this.wasMoving;
     }
 
-    openOrCloseEmoteMenu(emotes:string[]) {
-        if(this.emoteMenu) {
+    openOrCloseEmoteMenu() {
+        if (!this.emoteMenu) {
+            this.emoteMenu = new EmoteMenu(this.scene, this.x, this.y, this.userInputManager)
+        }
+
+        if(this.emoteMenu.isOpen()) {
             this.closeEmoteMenu();
         } else {
-            this.openEmoteMenu(emotes);
+            this.openEmoteMenu();
         }
     }
 
-    openEmoteMenu(emotes:string[]): void {
+    openEmoteMenu(): void {
         this.cancelPreviousEmote();
-        this.emoteMenu = new EmoteMenu(this.scene, this.x, this.y, emotes)
+        if (!this.emoteMenu) return;
+        this.emoteMenu.openPicker();
         this.emoteMenu.on(EmoteMenuClickEvent, (emote: string) => {
             this.closeEmoteMenu();
             this.emit(requestEmoteEventName, emote);
@@ -114,8 +119,7 @@ export class Player extends Character {
 
     closeEmoteMenu(): void {
         if (!this.emoteMenu) return;
-        this.emoteMenu.destroy();
-        this.emoteMenu = null;
+        this.emoteMenu.closePicker();
     }
 
     destroy() {