FEATURE: added the possibility toplay emotes

back/src/Model/GameRoom.ts

@@ -2,12 +2,12 @@ import {PointInterface} from "./Websocket/PointInterface";
 import {Group} from "./Group";
 import {User, UserSocket} from "./User";
 import {PositionInterface} from "_Model/PositionInterface";
-import {EntersCallback, LeavesCallback, MovesCallback} from "_Model/Zone";
+import {EmoteCallback, EntersCallback, LeavesCallback, MovesCallback} from "_Model/Zone";
 import {PositionNotifier} from "./PositionNotifier";
 import {Movable} from "_Model/Movable";
 import {extractDataFromPrivateRoomId, extractRoomSlugPublicRoomId, isRoomAnonymous} from "./RoomIdentifier";
 import {arrayIntersect} from "../Services/ArrayHelper";
-import {JoinRoomMessage} from "../Messages/generated/messages_pb";
+import {EmoteEventMessage, JoinRoomMessage} from "../Messages/generated/messages_pb";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
 import {ZoneSocket} from "src/RoomManager";
 import {Admin} from "../Model/Admin";
@@ -51,8 +51,9 @@ export class GameRoom {
                 groupRadius: number,
                 onEnters: EntersCallback,
                 onMoves: MovesCallback,
-                onLeaves: LeavesCallback)
-    {
+                onLeaves: LeavesCallback,
+                onEmote: EmoteCallback,
+    ) {
         this.roomId = roomId;
 
         if (isRoomAnonymous(roomId)) {
@@ -74,7 +75,7 @@ export class GameRoom {
         this.minDistance = minDistance;
         this.groupRadius = groupRadius;
         // A zone is 10 sprites wide.
-        this.positionNotifier = new PositionNotifier(320, 320, onEnters, onMoves, onLeaves);
+        this.positionNotifier = new PositionNotifier(320, 320, onEnters, onMoves, onLeaves, onEmote);
     }
 
     public getGroups(): Group[] {
@@ -325,4 +326,8 @@ export class GameRoom {
         this.versionNumber++
         return this.versionNumber;
     }
+
+    public emitEmoteEvent(user: User, emoteEventMessage: EmoteEventMessage) {
+        this.positionNotifier.emitEmoteEvent(user, emoteEventMessage);
+    }
 }

back/src/Model/PositionNotifier.ts

@@ -8,10 +8,12 @@
  * The PositionNotifier is important for performance. It allows us to send the position of players only to a restricted
  * number of players around the current player.
  */
-import {EntersCallback, LeavesCallback, MovesCallback, Zone} from "./Zone";
+import {EmoteCallback, EntersCallback, LeavesCallback, MovesCallback, Zone} from "./Zone";
 import {Movable} from "_Model/Movable";
 import {PositionInterface} from "_Model/PositionInterface";
 import {ZoneSocket} from "../RoomManager";
+import {User} from "_Model/User";
+import {EmoteEventMessage} from "../Messages/generated/messages_pb";
 
 interface ZoneDescriptor {
     i: number;
@@ -24,7 +26,7 @@ export class PositionNotifier {
 
     private zones: Zone[][] = [];
 
-    constructor(private zoneWidth: number, private zoneHeight: number, private onUserEnters: EntersCallback, private onUserMoves: MovesCallback, private onUserLeaves: LeavesCallback) {
+    constructor(private zoneWidth: number, private zoneHeight: number, private onUserEnters: EntersCallback, private onUserMoves: MovesCallback, private onUserLeaves: LeavesCallback, private onEmote: EmoteCallback) {
     }
 
     private getZoneDescriptorFromCoordinates(x: number, y: number): ZoneDescriptor {
@@ -77,7 +79,7 @@ export class PositionNotifier {
 
         let zone = this.zones[j][i];
         if (zone === undefined) {
-            zone = new Zone(this.onUserEnters, this.onUserMoves, this.onUserLeaves, i, j);
+            zone = new Zone(this.onUserEnters, this.onUserMoves, this.onUserLeaves, this.onEmote, i, j);
             this.zones[j][i] = zone;
         }
         return zone;
@@ -93,4 +95,11 @@ export class PositionNotifier {
         const zone = this.getZone(x, y);
         zone.removeListener(call);
     }
+
+    public emitEmoteEvent(user: User, emoteEventMessage: EmoteEventMessage) {
+        const zoneDesc = this.getZoneDescriptorFromCoordinates(user.getPosition().x, user.getPosition().y);
+        const zone = this.getZone(zoneDesc.i, zoneDesc.j);
+        zone.emitEmoteEvent(emoteEventMessage);
+        
+    }
 }

back/src/Model/Zone.ts

@@ -3,21 +3,19 @@ import {PositionInterface} from "_Model/PositionInterface";
 import {Movable} from "./Movable";
 import {Group} from "./Group";
 import {ZoneSocket} from "../RoomManager";
+import {EmoteEventMessage} from "../Messages/generated/messages_pb";
 
 export type EntersCallback = (thing: Movable, fromZone: Zone|null, listener: ZoneSocket) => void;
 export type MovesCallback = (thing: Movable, position: PositionInterface, listener: ZoneSocket) => void;
 export type LeavesCallback = (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => void;
+export type EmoteCallback = (emoteEventMessage: EmoteEventMessage, listener: ZoneSocket) => void;
 
 export class Zone {
     private things: Set<Movable> = new Set<Movable>();
     private listeners: Set<ZoneSocket> = new Set<ZoneSocket>();
     
-    /**
-     * @param x For debugging purpose only
-     * @param y For debugging purpose only
-     */
-    constructor(private onEnters: EntersCallback, private onMoves: MovesCallback, private onLeaves: LeavesCallback, public readonly x: number, public readonly y: number) {
-    }
+    
+    constructor(private onEnters: EntersCallback, private onMoves: MovesCallback, private onLeaves: LeavesCallback, private onEmote: EmoteCallback, public readonly x: number, public readonly y: number) { }
 
     /**
      * A user/thing leaves the zone
@@ -41,9 +39,7 @@ export class Zone {
      */
     private notifyLeft(thing: Movable, newZone: Zone|null) {
         for (const listener of this.listeners) {
-            //if (listener !== thing && (newZone === null || !listener.listenedZones.has(newZone))) {
-                this.onLeaves(thing, newZone, listener);
-            //}
+            this.onLeaves(thing, newZone, listener);
         }
     }
 
@@ -57,15 +53,6 @@ export class Zone {
      */
     private notifyEnter(thing: Movable, oldZone: Zone|null, position: PositionInterface) {
         for (const listener of this.listeners) {
-
-            /*if (listener === thing) {
-                continue;
-            }
-            if (oldZone === null || !listener.listenedZones.has(oldZone)) {
-                this.onEnters(thing, listener);
-            } else {
-                this.onMoves(thing, position, listener);
-            }*/
             this.onEnters(thing, oldZone, listener);
         }
     }
@@ -85,28 +72,6 @@ export class Zone {
         }
     }
 
-    /*public startListening(listener: User): void {
-        for (const thing of this.things) {
-            if (thing !== listener) {
-                this.onEnters(thing, listener);
-            }
-        }
-
-        this.listeners.add(listener);
-        listener.listenedZones.add(this);
-    }
-
-    public stopListening(listener: User): void {
-        for (const thing of this.things) {
-            if (thing !== listener) {
-                this.onLeaves(thing, listener);
-            }
-        }
-
-        this.listeners.delete(listener);
-        listener.listenedZones.delete(this);
-    }*/
-
     public getThings(): Set<Movable> {
         return this.things;
     }
@@ -119,4 +84,11 @@ export class Zone {
     public removeListener(socket: ZoneSocket): void {
         this.listeners.delete(socket);
     }
+
+    public emitEmoteEvent(emoteEventMessage: EmoteEventMessage) {
+        for (const listener of this.listeners) {
+            this.onEmote(emoteEventMessage, listener);
+        }
+        
+    }
 }

back/src/RoomManager.ts

@@ -5,6 +5,7 @@ import {
     AdminPusherToBackMessage,
     AdminRoomMessage,
     BanMessage,
+    EmotePromptMessage,
     EmptyMessage,
     ItemEventMessage,
     JoinRoomMessage,
@@ -71,6 +72,8 @@ const roomManager: IRoomManagerServer = {
                         socketManager.emitPlayGlobalMessage(room, message.getPlayglobalmessage() as PlayGlobalMessage);
                     } else if (message.hasQueryjitsijwtmessage()){
                         socketManager.handleQueryJitsiJwtMessage(user, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
+                    } else if (message.hasEmotepromptmessage()){
+                        socketManager.handleEmoteEventMessage(room, user, message.getEmotepromptmessage() as EmotePromptMessage);
                     }else if (message.hasSendusermessage()) {
                         const sendUserMessage = message.getSendusermessage();
                         if(sendUserMessage !== undefined) {

back/src/Services/SocketManager.ts

@@ -26,7 +26,8 @@ import {
     GroupLeftZoneMessage,
     WorldFullWarningMessage,
     UserLeftZoneMessage,
-    BanUserMessage, RefreshRoomMessage,
+    EmoteEventMessage,
+    BanUserMessage, RefreshRoomMessage, EmotePromptMessage,
 } from "../Messages/generated/messages_pb";
 import {User, UserSocket} from "../Model/User";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
@@ -73,6 +74,9 @@ export class SocketManager {
         clientEventsEmitter.registerToClientLeave((clientUUid: string, roomId: string) => {
             gaugeManager.decNbClientPerRoomGauge(roomId);
         });
+
+
+        //zoneMessageStream.stream.subscribe(myMessage);
     }
 
     public async handleJoinRoom(socket: UserSocket, joinRoomMessage: JoinRoomMessage): Promise<{ room: GameRoom; user: User }> {
@@ -263,7 +267,8 @@ export class SocketManager {
                 GROUP_RADIUS,
                 (thing: Movable, fromZone: Zone|null, listener: ZoneSocket) => this.onZoneEnter(thing, fromZone, listener),
                 (thing: Movable, position:PositionInterface, listener: ZoneSocket) => this.onClientMove(thing, position, listener),
-                (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => this.onClientLeave(thing, newZone, listener)
+                (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => this.onClientLeave(thing, newZone, listener),
+                (emoteEventMessage:EmoteEventMessage, listener: ZoneSocket) => this.onEmote(emoteEventMessage, listener),
             );
             gaugeManager.incNbRoomGauge();
             this.rooms.set(roomId, world);
@@ -339,6 +344,14 @@ export class SocketManager {
         }
     }
 
+
+    private onEmote(emoteEventMessage: EmoteEventMessage, client: ZoneSocket) {
+        const subMessage = new SubToPusherMessage();
+        subMessage.setEmoteeventmessage(emoteEventMessage);
+
+        emitZoneMessage(subMessage, client);
+    }
+
     private emitCreateUpdateGroupEvent(client: ZoneSocket, fromZone: Zone|null, group: Group): void {
         const position = group.getPosition();
         const pointMessage = new PointMessage();
@@ -751,6 +764,13 @@ export class SocketManager {
             recipient.socket.write(clientMessage);
         });
     }
+
+    handleEmoteEventMessage(room: GameRoom, user: User, emotePromptMessage: EmotePromptMessage) {
+        const emoteEventMessage = new EmoteEventMessage();
+        emoteEventMessage.setEmote(emotePromptMessage.getEmote());
+        emoteEventMessage.setActoruserid(user.id);
+        room.emitEmoteEvent(user, emoteEventMessage);
+    }
 }
 
 export const socketManager = new SocketManager();

back/tests/GameRoomTest.ts

@@ -5,6 +5,7 @@ import {Group} from "../src/Model/Group";
 import {User, UserSocket} from "_Model/User";
 import {JoinRoomMessage, PositionMessage} from "../src/Messages/generated/messages_pb";
 import Direction = PositionMessage.Direction;
+import {EmoteCallback} from "_Model/Zone";
 
 function createMockUser(userId: number): User {
     return {
@@ -33,6 +34,8 @@ function createJoinRoomMessage(uuid: string, x: number, y: number): JoinRoomMess
     return joinRoomMessage;
 }
 
+const emote: EmoteCallback = (emoteEventMessage, listener): void => {}
+
 describe("GameRoom", () => {
     it("should connect user1 and user2", () => {
         let connectCalledNumber: number = 0;
@@ -43,7 +46,8 @@ describe("GameRoom", () => {
 
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
 
 
@@ -72,7 +76,7 @@ describe("GameRoom", () => {
 
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
         const user1 = world.join(createMockUserSocket(), createJoinRoomMessage('1', 100, 100));
 
@@ -101,7 +105,7 @@ describe("GameRoom", () => {
             disconnectCallNumber++;
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
         const user1 = world.join(createMockUserSocket(), createJoinRoomMessage('1', 100, 100));
 

back/tests/PositionNotifierTest.ts

@@ -23,7 +23,7 @@ describe("PositionNotifier", () => {
             moveTriggered = true;
         }, (thing: Movable) => {
             leaveTriggered = true;
-        });
+        }, () => {});
 
         const user1 = new User(1, 'test', '10.0.0.2', {
             x: 500,
@@ -98,7 +98,7 @@ describe("PositionNotifier", () => {
             moveTriggered = true;
         }, (thing: Movable) => {
             leaveTriggered = true;
-        });
+        }, () => {});
 
         const user1 = new User(1, 'test', '10.0.0.2', {
             x: 500,

front/src/Connexion/EmoteEventStream.ts

@@ -0,0 +1,19 @@
+import {Subject} from "rxjs";
+
+interface EmoteEvent {
+    userId: number,
+    emoteName: string,
+}
+
+class EmoteEventStream {
+
+    private _stream:Subject<EmoteEvent> = new Subject();
+    public stream = this._stream.asObservable();
+
+
+    onMessage(userId: number, emoteName:string) {
+        this._stream.next({userId, emoteName});
+    }
+}
+
+export const emoteEventStream = new EmoteEventStream();

front/src/Connexion/RoomConnection.ts

@@ -27,6 +27,8 @@ import {
     SendJitsiJwtMessage,
     CharacterLayerMessage,
     PingMessage,
+    EmoteEventMessage,
+    EmotePromptMessage,
     SendUserMessage,
     BanUserMessage
 } from "../Messages/generated/messages_pb"
@@ -47,6 +49,7 @@ import {adminMessagesService} from "./AdminMessagesService";
 import {worldFullMessageStream} from "./WorldFullMessageStream";
 import {worldFullWarningStream} from "./WorldFullWarningStream";
 import {connectionManager} from "./ConnectionManager";
+import {emoteEventStream} from "./EmoteEventStream";
 
 const manualPingDelay = 20000;
 
@@ -124,7 +127,7 @@ export class RoomConnection implements RoomConnection {
 
             if (message.hasBatchmessage()) {
                 for (const subMessage of (message.getBatchmessage() as BatchMessage).getPayloadList()) {
-                    let event: string;
+                    let event: string|null = null;
                     let payload;
                     if (subMessage.hasUsermovedmessage()) {
                         event = EventMessage.USER_MOVED;
@@ -144,11 +147,16 @@ export class RoomConnection implements RoomConnection {
                     } else if (subMessage.hasItemeventmessage()) {
                         event = EventMessage.ITEM_EVENT;
                         payload = subMessage.getItemeventmessage();
+                    } else if (subMessage.hasEmoteeventmessage()) {
+                        const emoteMessage = subMessage.getEmoteeventmessage() as EmoteEventMessage;
+                        emoteEventStream.onMessage(emoteMessage.getActoruserid(), emoteMessage.getEmote());
                     } else {
                         throw new Error('Unexpected batch message type');
                     }
 
-                    this.dispatch(event, payload);
+                    if (event) {
+                        this.dispatch(event, payload);
+                    }
                 }
             } else if (message.hasRoomjoinedmessage()) {
                 const roomJoinedMessage = message.getRoomjoinedmessage() as RoomJoinedMessage;
@@ -599,4 +607,14 @@ export class RoomConnection implements RoomConnection {
     public isAdmin(): boolean {
         return this.hasTag('admin');
     }
+
+    public emitEmoteEvent(emoteName: string): void {
+        const emoteMessage = new EmotePromptMessage();
+        emoteMessage.setEmote(emoteName)
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setEmotepromptmessage(emoteMessage);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
 }

front/src/Phaser/Entity/Character.ts

@@ -5,6 +5,9 @@ import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
 import {Companion} from "../Companion/Companion";
+import {getEmoteAnimName} from "../Game/EmoteManager";
+
+const playerNameY = - 25;
 
 interface AnimationData {
     key: string;
@@ -23,6 +26,7 @@ export abstract class Character extends Container {
     //private teleportation: Sprite;
     private invisible: boolean;
     public companion?: Companion;
+    private emote: Phaser.GameObjects.Sprite | null = null;
 
     constructor(scene: Phaser.Scene,
                 x: number,
@@ -54,7 +58,7 @@ export abstract class Character extends Container {
         });
         this.add(this.teleportation);*/
 
-        this.playerName = new BitmapText(scene, 0,  - 25, 'main_font', name, 7);
+        this.playerName = new BitmapText(scene, 0,  playerNameY, 'main_font', name, 7);
         this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
         this.add(this.playerName);
 
@@ -225,7 +229,23 @@ export abstract class Character extends Container {
                 this.scene.sys.updateList.remove(sprite);
             }
         }
+        this.list.forEach(objectContaining => objectContaining.destroy()) 
         super.destroy();
-        this.playerName.destroy();
+    }
+    
+    playEmote(emoteKey: string) {
+        if (this.emote) return;
+        
+        this.playerName.setVisible(false);
+        this.emote = new Sprite(this.scene, 0,  -40, emoteKey, 1);
+        this.emote.setDepth(99999);
+        this.add(this.emote);
+        this.scene.sys.updateList.add(this.emote);
+        this.emote.play(getEmoteAnimName(emoteKey));
+        this.emote.on(Phaser.Animations.Events.SPRITE_ANIMATION_COMPLETE, () => {
+            this.emote?.destroy();
+            this.emote = null;
+            this.playerName.setVisible(true);
+        });
     }
 }

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -2,6 +2,10 @@ import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type {CharacterTexture} from "../../Connexion/LocalUser";
 import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures";
 
+export interface FrameConfig {
+    frameWidth: number,
+    frameHeight: number,
+}
 
 export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
     const returnArray:BodyResourceDescriptionInterface[][] = [];
@@ -26,7 +30,10 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise<BodyResourceDescriptionInterface> => {
     const name = 'customCharacterTexture'+texture.id;
     const playerResourceDescriptor: BodyResourceDescriptionInterface = {name, img: texture.url, level: texture.level}
-    return createLoadingPromise(loaderPlugin, playerResourceDescriptor);
+    return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
+        frameWidth: 32,
+        frameHeight: 32
+    });
 }
 
 export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
@@ -36,7 +43,10 @@ export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, textur
             //TODO refactor
             const playerResourceDescriptor = getRessourceDescriptor(textureKey);
             if (playerResourceDescriptor && !loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
-                promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor));
+                promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor, {
+                    frameWidth: 32,
+                    frameHeight: 32
+                }));
             }
         }catch (err){
             console.error(err);
@@ -69,15 +79,12 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio
     throw 'Could not find a data for texture '+textureName;
 }
 
-const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => {
+export const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface, frameConfig: FrameConfig) => {
     return new Promise<BodyResourceDescriptionInterface>((res) => {
         if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
             return res(playerResourceDescriptor);
         }
-        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {
-            frameWidth: 32,
-            frameHeight: 32
-        });
+        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
         loadPlugin.once('filecomplete-spritesheet-' + playerResourceDescriptor.name, () => res(playerResourceDescriptor));
     });
 }

front/src/Phaser/Game/EmoteManager.ts

@@ -0,0 +1,83 @@
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import {createLoadingPromise} from "../Entity/PlayerTexturesLoadingManager";
+import {emoteEventStream} from "../../Connexion/EmoteEventStream";
+import {GameScene} from "./GameScene";
+
+enum RegisteredEmoteTypes {
+    short = 1,
+    long = 2,
+}
+
+interface RegisteredEmote extends BodyResourceDescriptionInterface {
+    name: string;
+    img: string;
+    type: RegisteredEmoteTypes
+}
+
+export const emotes: {[key: string]: RegisteredEmote} = {
+    '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-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},
+};
+
+export const getEmoteAnimName = (emoteKey: string): string => {
+    return 'anim-'+emoteKey;
+}
+
+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) {
+                this.lazyLoadEmoteTexture(event.emoteName).then(emoteKey => {
+                    actor.playEmote(emoteKey);
+                })
+            }
+        })
+    }
+
+    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) {
+            throw 'Emote not found!';
+        }
+        const loadPromise = createLoadingPromise(this.scene.load, emoteDescriptor, {
+            frameWidth: 32,
+            frameHeight: 32,
+        });
+        this.scene.load.start();
+        return loadPromise.then(() => {
+            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),
+                frames: this.scene.anims.generateFrameNumbers(textureKey, frameConfig),
+                frameRate: 3,
+                repeat: 2,
+            });
+            return textureKey;
+        });
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -91,6 +91,7 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
 import {waScaleManager} from "../Services/WaScaleManager";
+import {EmoteManager} from "./EmoteManager";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -189,6 +190,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private physicsEnabled: boolean = true;
     private mapTransitioning: boolean = false; //used to prevent transitions happenning at the same time.
     private onVisibilityChangeCallback: () => void;
+    private emoteManager!: EmoteManager;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -226,6 +228,11 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
+        //todo: in an emote manager.
+        this.load.spritesheet('emote-music', 'resources/emotes/pipo-popupemotes005.png', {
+            frameHeight: 32,
+            frameWidth: 32,
+        });
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
             if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@@ -509,6 +516,8 @@ export class GameScene extends DirtyScene implements CenterListener {
         }
 
         document.addEventListener('visibilitychange', this.onVisibilityChangeCallback);
+        
+        this.emoteManager = new EmoteManager(this);
     }
 
     /**

messages/protos/messages.proto

@@ -66,6 +66,15 @@ message ReportPlayerMessage {
   string reportComment = 2;
 }
 
+message EmotePromptMessage {
+    string emote = 2;
+}
+
+message EmoteEventMessage {
+    int32 actorUserId = 1;
+    string emote = 2;
+}
+
 message QueryJitsiJwtMessage {
   string jitsiRoom = 1;
   string tag = 2; // FIXME: rather than reading the tag from the query, we should read it from the current map!
@@ -84,6 +93,7 @@ message ClientToServerMessage {
     StopGlobalMessage stopGlobalMessage = 10;
     ReportPlayerMessage reportPlayerMessage = 11;
     QueryJitsiJwtMessage queryJitsiJwtMessage = 12;
+    EmotePromptMessage emotePromptMessage = 13;
   }
 }
 
@@ -122,6 +132,7 @@ message SubMessage {
     UserJoinedMessage userJoinedMessage = 4;
     UserLeftMessage userLeftMessage = 5;
     ItemEventMessage itemEventMessage = 6;
+    EmoteEventMessage emoteEventMessage = 7;
   }
 }
 
@@ -247,6 +258,7 @@ message ServerToClientMessage {
     WorldFullMessage worldFullMessage = 16;
     RefreshRoomMessage refreshRoomMessage = 17; 
     WorldConnexionMessage worldConnexionMessage = 18;
+    EmoteEventMessage emoteEventMessage = 19;
   }
 }
 
@@ -317,6 +329,7 @@ message PusherToBackMessage {
     QueryJitsiJwtMessage queryJitsiJwtMessage = 11;
     SendUserMessage sendUserMessage = 12;
     BanUserMessage banUserMessage = 13;
+    EmotePromptMessage emotePromptMessage = 14;
   }
 }
 
@@ -334,6 +347,7 @@ message SubToPusherMessage {
     ItemEventMessage itemEventMessage = 6;
     SendUserMessage sendUserMessage = 7;
     BanUserMessage banUserMessage = 8;
+    EmoteEventMessage emoteEventMessage = 9;
   }
 }
 

pusher/src/Controller/IoSocketController.ts

@@ -12,7 +12,8 @@ import {
     WebRtcSignalToServerMessage,
     PlayGlobalMessage,
     ReportPlayerMessage,
-    QueryJitsiJwtMessage, SendUserMessage, ServerToClientMessage, CompanionMessage
+    EmoteEventMessage,
+    QueryJitsiJwtMessage, SendUserMessage, ServerToClientMessage, CompanionMessage, EmotePromptMessage
 } from "../Messages/generated/messages_pb";
 import {UserMovesMessage} from "../Messages/generated/messages_pb";
 import {TemplatedApp} from "uWebSockets.js"
@@ -330,6 +331,8 @@ export class IoSocketController {
                     socketManager.handleReportMessage(client, message.getReportplayermessage() as ReportPlayerMessage);
                 } else if (message.hasQueryjitsijwtmessage()){
                     socketManager.handleQueryJitsiJwtMessage(client, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
+                } else if (message.hasEmotepromptmessage()){
+                    socketManager.handleEmotePromptMessage(client, message.getEmotepromptmessage() as EmotePromptMessage);
                 }
 
                     /* Ok is false if backpressure was built up, wait for drain */

pusher/src/Model/Zone.ts

@@ -6,13 +6,11 @@ import {
     PointMessage, PositionMessage, UserJoinedMessage,
     UserJoinedZoneMessage, UserLeftZoneMessage, UserMovedMessage,
     ZoneMessage,
+    EmoteEventMessage,
     CompanionMessage
 } from "../Messages/generated/messages_pb";
-import * as messages_pb from "../Messages/generated/messages_pb";
 import {ClientReadableStream} from "grpc";
 import {PositionDispatcher} from "_Model/PositionDispatcher";
-import {socketManager} from "../Services/SocketManager";
-import {ProtobufUtils} from "_Model/Websocket/ProtobufUtils";
 import Debug from "debug";
 
 const debug = Debug("zone");
@@ -24,6 +22,7 @@ export interface ZoneEventListener {
     onGroupEnters(group: GroupDescriptor, listener: ExSocketInterface): void;
     onGroupMoves(group: GroupDescriptor, listener: ExSocketInterface): void;
     onGroupLeaves(groupId: number, listener: ExSocketInterface): void;
+    onEmote(emoteMessage: EmoteEventMessage, listener: ExSocketInterface): void;
 }
 
 /*export type EntersCallback = (thing: Movable, listener: User) => void;
@@ -184,6 +183,9 @@ export class Zone {
                     userDescriptor.update(userMovedMessage);
 
                     this.notifyUserMove(userDescriptor);
+                } else if(message.hasEmoteeventmessage()) {
+                    const emoteEventMessage = message.getEmoteeventmessage() as EmoteEventMessage;
+                    this.notifyEmote(emoteEventMessage);
                 } else {
                     throw new Error('Unexpected message');
                 }
@@ -262,6 +264,15 @@ export class Zone {
         }
     }
 
+    private notifyEmote(emoteMessage: EmoteEventMessage) {
+        for (const listener of this.listeners) {
+            if (listener.userId === emoteMessage.getActoruserid()) {
+                continue;
+            }
+            this.socketListener.onEmote(emoteMessage, listener);
+        }
+    }
+
     /**
      * Notify listeners of this zone that this group left
      */

pusher/src/Services/SocketManager.ts

@@ -23,7 +23,8 @@ import {
     WorldConnexionMessage,
     AdminPusherToBackMessage,
     ServerToAdminClientMessage,
-    UserJoinedRoomMessage, UserLeftRoomMessage, AdminMessage, BanMessage, RefreshRoomMessage
+    EmoteEventMessage,
+    UserJoinedRoomMessage, UserLeftRoomMessage, AdminMessage, BanMessage, RefreshRoomMessage, EmotePromptMessage
 } from "../Messages/generated/messages_pb";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
 import {JITSI_ISS, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable";
@@ -254,6 +255,15 @@ export class SocketManager implements ZoneEventListener {
         this.handleViewport(client, viewport.toObject())
     }
 
+
+
+    onEmote(emoteMessage: EmoteEventMessage, listener: ExSocketInterface): void {
+        const subMessage = new SubMessage();
+        subMessage.setEmoteeventmessage(emoteMessage);
+
+        emitInBatch(listener, subMessage);
+    }
+
     // Useless now, will be useful again if we allow editing details in game
     handleSetPlayerDetails(client: ExSocketInterface, playerDetailsMessage: SetPlayerDetailsMessage) {
         const pusherToBackMessage = new PusherToBackMessage();
@@ -578,6 +588,13 @@ export class SocketManager implements ZoneEventListener {
         
         this.updateRoomWithAdminData(room);
     }
+
+    handleEmotePromptMessage(client: ExSocketInterface, emoteEventmessage: EmotePromptMessage) {
+        const pusherToBackMessage = new PusherToBackMessage();
+        pusherToBackMessage.setEmotepromptmessage(emoteEventmessage);
+
+        client.backConnection.write(pusherToBackMessage);
+    }
 }
 
 export const socketManager = new SocketManager();