Added a radial menu to run emotes

front/src/Phaser/Game/DepthIndexes.ts

@@ -0,0 +1,8 @@
+//this file contains all the depth indexes which will be used in our game
+
+export const DEPTH_TILE_INDEX = 0;
+//Note: Player characters use their y coordinate as their depth to simulate a perspective.
+//See the Character class.
+export const DEPTH_OVERLAY_INDEX = 10000;
+export const DEPTH_INGAME_TEXT_INDEX = 100000;
+export const DEPTH_UI_INDEX = 1000000;

front/src/Phaser/Game/EmoteManager.ts

@@ -2,6 +2,7 @@ import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {createLoadingPromise} from "../Entity/PlayerTexturesLoadingManager";
 import {emoteEventStream} from "../../Connexion/EmoteEventStream";
 import {GameScene} from "./GameScene";
+import {RadialMenuItem} from "../Components/RadialMenu";
 
 enum RegisteredEmoteTypes {
     short = 1,
@@ -14,10 +15,11 @@ interface RegisteredEmote extends BodyResourceDescriptionInterface {
     type: RegisteredEmoteTypes
 }
 
+//the last 3 emotes are courtesy of @tabascoeye
 export const emotes: {[key: string]: RegisteredEmote} = {
-    'emote-exclamation': {name: 'emote-exclamation', img: 'resources/emotes/pipo-popupemotes001.png', type: RegisteredEmoteTypes.short},
+    'emote-exclamation': {name: 'emote-exclamation', img: 'resources/emotes/pipo-popupemotes001.png', type: RegisteredEmoteTypes.short, },
     'emote-interrogation': {name: 'emote-interrogation', img: 'resources/emotes/pipo-popupemotes002.png', type: RegisteredEmoteTypes.short},
-    'emote-sleep': {name: 'emote-sleep', img: 'resources/emotes/pipo-popupemotes002.png', type: RegisteredEmoteTypes.short},
+    'emote-sleep': {name: 'emote-sleep', img: 'resources/emotes/pipo-popupemotes021.png', type: RegisteredEmoteTypes.short},
     'emote-clap': {name: 'emote-clap', img: 'resources/emotes/taba-clap-emote.png', type: RegisteredEmoteTypes.short},
     'emote-thumbsdown': {name: 'emote-thumbsdown', img: 'resources/emotes/taba-thumbsdown-emote.png', type: RegisteredEmoteTypes.long},
     'emote-thumbsup': {name: 'emote-thumbsup', img: 'resources/emotes/taba-thumbsup-emote.png', type: RegisteredEmoteTypes.long},
@@ -30,16 +32,6 @@ export const getEmoteAnimName = (emoteKey: string): string => {
 export class EmoteManager {
     
     constructor(private scene: GameScene) {
-
-        //todo: use a radial menu instead?
-        this.registerEmoteOnKey('keyup-Y', 'emote-clap');
-        this.registerEmoteOnKey('keyup-U', 'emote-thumbsup');
-        this.registerEmoteOnKey('keyup-I', 'emote-thumbsdown');
-        this.registerEmoteOnKey('keyup-O', 'emote-exclamation');
-        this.registerEmoteOnKey('keyup-P', 'emote-interrogation');
-        this.registerEmoteOnKey('keyup-T', 'emote-sleep');
-
-
         emoteEventStream.stream.subscribe((event) => {
             const actor = this.scene.MapPlayersByKey.get(event.userId);
             if (actor) {
@@ -49,16 +41,7 @@ export class EmoteManager {
             }
         })
     }
-
-    private registerEmoteOnKey(keyboardKey: string, emoteKey: string) {
-        this.scene.input.keyboard.on(keyboardKey, () => {
-            this.scene.connection?.emitEmoteEvent(emoteKey);
-            this.lazyLoadEmoteTexture(emoteKey).then(emoteKey => {
-                this.scene.CurrentPlayer.playEmote(emoteKey);
-            })
-        });
-    }
-
+    
     lazyLoadEmoteTexture(textureKey: string): Promise<string> {
         const emoteDescriptor = emotes[textureKey];
         if (emoteDescriptor === undefined) {
@@ -70,6 +53,9 @@ export class EmoteManager {
         });
         this.scene.load.start();
         return loadPromise.then(() => {
+            if (this.scene.anims.exists(getEmoteAnimName(textureKey))) {
+                return Promise.resolve(textureKey);
+            }
             const frameConfig = emoteDescriptor.type === RegisteredEmoteTypes.short ? {frames: [0,1,2]} : {frames : [0,1,2,3,4,5,6,7]};
             this.scene.anims.create({
                 key: getEmoteAnimName(textureKey),
@@ -80,4 +66,20 @@ export class EmoteManager {
             return textureKey;
         });
     }
+    
+    getMenuImages(): Promise<RadialMenuItem[]> {
+        const promises = [];
+        for (const key in emotes) {
+            const promise = this.lazyLoadEmoteTexture(key).then((textureKey) => {
+                const emoteDescriptor = emotes[textureKey];
+                return {
+                    sprite: textureKey,
+                    name: textureKey,
+                    frame: emoteDescriptor.type === RegisteredEmoteTypes.short ? 1 : 4,
+                }
+            });
+            promises.push(promise);
+        }
+        return Promise.all(promises);
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -9,7 +9,7 @@ import type {
     PositionInterface,
     RoomJoinedMessageInterface
 } from "../../Connexion/ConnexionModels";
-import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player";
+import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
 import {
     DEBUG_MODE,
     JITSI_PRIVATE_MODE,
@@ -90,6 +90,7 @@ import {TextUtils} from "../Components/TextUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
+import {DEPTH_OVERLAY_INDEX} from "./DepthIndexes";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {EmoteManager} from "./EmoteManager";
 
@@ -132,7 +133,7 @@ const defaultStartLayerName = 'start';
 
 export class GameScene extends DirtyScene implements CenterListener {
     Terrains : Array<Phaser.Tilemaps.Tileset>;
-    CurrentPlayer!: CurrentGamerInterface;
+    CurrentPlayer!: Player;
     MapPlayers!: Phaser.Physics.Arcade.Group;
     MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
     Map!: Phaser.Tilemaps.Tilemap;
@@ -428,7 +429,7 @@ export class GameScene extends DirtyScene implements CenterListener {
                 }
             }
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
-                depth = 10000;
+                depth = DEPTH_OVERLAY_INDEX;
             }
             if (layer.type === 'objectgroup') {
                 for (const object of layer.objects) {
@@ -1132,6 +1133,12 @@ ${escapedMessage}
                 this.companion,
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
+            this.CurrentPlayer.on('pointerdown', () => {
+                this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements))
+            })
+            this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
+                this.connection?.emitEmoteEvent(emoteKey);
+            })
         }catch (err){
             if(err instanceof TextureError) {
                 gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());