First version with variables that actually work

back/src/Model/GameRoom.ts

@@ -7,9 +7,14 @@ import { PositionNotifier } from "./PositionNotifier";
 import { Movable } from "_Model/Movable";
 import { extractDataFromPrivateRoomId, extractRoomSlugPublicRoomId, isRoomAnonymous } from "./RoomIdentifier";
 import { arrayIntersect } from "../Services/ArrayHelper";
-import { EmoteEventMessage, JoinRoomMessage } from "../Messages/generated/messages_pb";
+import {
+    BatchToPusherMessage,
+    BatchToPusherRoomMessage,
+    EmoteEventMessage,
+    JoinRoomMessage, SubToPusherRoomMessage, VariableMessage
+} from "../Messages/generated/messages_pb";
 import { ProtobufUtils } from "../Model/Websocket/ProtobufUtils";
-import { ZoneSocket } from "src/RoomManager";
+import {RoomSocket, ZoneSocket} from "src/RoomManager";
 import { Admin } from "../Model/Admin";
 
 export type ConnectCallback = (user: User, group: Group) => void;
@@ -35,7 +40,7 @@ export class GameRoom {
     private readonly disconnectCallback: DisconnectCallback;
 
     private itemsState = new Map<number, unknown>();
-    private variables = new Map<string, string>();
+    public readonly variables = new Map<string, string>();
 
     private readonly positionNotifier: PositionNotifier;
     public readonly roomId: string;
@@ -45,6 +50,8 @@ export class GameRoom {
     private versionNumber: number = 1;
     private nextUserId: number = 1;
 
+    private roomListeners: Set<RoomSocket> = new Set<RoomSocket>();
+
     constructor(
         roomId: string,
         connectCallback: ConnectCallback,
@@ -312,6 +319,22 @@ export class GameRoom {
 
     public setVariable(name: string, value: string): void {
         this.variables.set(name, value);
+
+        // TODO: should we batch those every 100ms?
+        const variableMessage = new VariableMessage();
+        variableMessage.setName(name);
+        variableMessage.setValue(value);
+
+        const subMessage = new SubToPusherRoomMessage();
+        subMessage.setVariablemessage(variableMessage);
+
+        const batchMessage = new BatchToPusherRoomMessage();
+        batchMessage.addPayload(subMessage);
+
+        // Dispatch the message on the room listeners
+        for (const socket of this.roomListeners) {
+            socket.write(batchMessage);
+        }
     }
 
     public addZoneListener(call: ZoneSocket, x: number, y: number): Set<Movable> {
@@ -343,4 +366,12 @@ export class GameRoom {
     public emitEmoteEvent(user: User, emoteEventMessage: EmoteEventMessage) {
         this.positionNotifier.emitEmoteEvent(user, emoteEventMessage);
     }
+
+    public addRoomListener(socket: RoomSocket) {
+        this.roomListeners.add(socket);
+    }
+
+    public removeRoomListener(socket: RoomSocket) {
+        this.roomListeners.delete(socket);
+    }
 }

back/src/RoomManager.ts

@@ -4,7 +4,7 @@ import {
     AdminMessage,
     AdminPusherToBackMessage,
     AdminRoomMessage,
-    BanMessage,
+    BanMessage, BatchToPusherRoomMessage,
     EmotePromptMessage,
     EmptyMessage,
     ItemEventMessage,
@@ -12,7 +12,7 @@ import {
     PlayGlobalMessage,
     PusherToBackMessage,
     QueryJitsiJwtMessage,
-    RefreshRoomPromptMessage,
+    RefreshRoomPromptMessage, RoomMessage,
     ServerToAdminClientMessage,
     ServerToClientMessage,
     SilentMessage,
@@ -33,6 +33,7 @@ const debug = Debug("roommanager");
 
 export type AdminSocket = ServerDuplexStream<AdminPusherToBackMessage, ServerToAdminClientMessage>;
 export type ZoneSocket = ServerWritableStream<ZoneMessage, ServerToClientMessage>;
+export type RoomSocket = ServerWritableStream<RoomMessage, BatchToPusherRoomMessage>;
 
 const roomManager: IRoomManagerServer = {
     joinRoom: (call: UserSocket): void => {
@@ -156,6 +157,29 @@ const roomManager: IRoomManagerServer = {
         });
     },
 
+    listenRoom(call: RoomSocket): void {
+        debug("listenRoom called");
+        const roomMessage = call.request;
+
+        socketManager.addRoomListener(call, roomMessage.getRoomid());
+
+        call.on("cancelled", () => {
+            debug("listenRoom cancelled");
+            socketManager.removeRoomListener(call, roomMessage.getRoomid());
+            call.end();
+        });
+
+        call.on("close", () => {
+            debug("listenRoom connection closed");
+            socketManager.removeRoomListener(call, roomMessage.getRoomid());
+        }).on("error", (e) => {
+            console.error("An error occurred in listenRoom stream:", e);
+            socketManager.removeRoomListener(call, roomMessage.getRoomid());
+            call.end();
+        });
+
+    },
+
     adminRoom(call: AdminSocket): void {
         console.log("adminRoom called");
 
@@ -230,7 +254,7 @@ const roomManager: IRoomManagerServer = {
     ): void {
         socketManager.dispatchRoomRefresh(call.request.getRoomid());
         callback(null, new EmptyMessage());
-    },
+    }
 };
 
 export { roomManager };

back/src/Services/SocketManager.ts

@@ -30,7 +30,7 @@ import {
     BanUserMessage,
     RefreshRoomMessage,
     EmotePromptMessage,
-    VariableMessage,
+    VariableMessage, BatchToPusherRoomMessage, SubToPusherRoomMessage,
 } from "../Messages/generated/messages_pb";
 import { User, UserSocket } from "../Model/User";
 import { ProtobufUtils } from "../Model/Websocket/ProtobufUtils";
@@ -49,7 +49,7 @@ import Jwt from "jsonwebtoken";
 import { JITSI_URL } from "../Enum/EnvironmentVariable";
 import { clientEventsEmitter } from "./ClientEventsEmitter";
 import { gaugeManager } from "./GaugeManager";
-import { ZoneSocket } from "../RoomManager";
+import {RoomSocket, ZoneSocket} from "../RoomManager";
 import { Zone } from "_Model/Zone";
 import Debug from "debug";
 import { Admin } from "_Model/Admin";
@@ -66,7 +66,9 @@ function emitZoneMessage(subMessage: SubToPusherMessage, socket: ZoneSocket): vo
 }
 
 export class SocketManager {
-    private rooms: Map<string, GameRoom> = new Map<string, GameRoom>();
+    private rooms = new Map<string, GameRoom>();
+    // List of rooms in process of loading.
+    private roomsPromises = new Map<string, PromiseLike<GameRoom>>();
 
     constructor() {
         clientEventsEmitter.registerToClientJoin((clientUUid: string, roomId: string) => {
@@ -102,6 +104,14 @@ export class SocketManager {
             roomJoinedMessage.addItem(itemStateMessage);
         }
 
+        for (const [name, value] of room.variables.entries()) {
+            const variableMessage = new VariableMessage();
+            variableMessage.setName(name);
+            variableMessage.setValue(value);
+
+            roomJoinedMessage.addVariable(variableMessage);
+        }
+
         roomJoinedMessage.setCurrentuserid(user.id);
 
         const serverToClientMessage = new ServerToClientMessage();
@@ -186,23 +196,10 @@ export class SocketManager {
     }
 
     handleVariableEvent(room: GameRoom, user: User, variableMessage: VariableMessage) {
-        const itemEvent = ProtobufUtils.toItemEvent(itemEventMessage);
-
         try {
-            // TODO: DISPATCH ON NEW ROOM CHANNEL
-
-            const subMessage = new SubMessage();
-            subMessage.setItemeventmessage(itemEventMessage);
-
-            // Let's send the event without using the SocketIO room.
-            // TODO: move this in the GameRoom class.
-            for (const user of room.getUsers().values()) {
-                user.emitInBatch(subMessage);
-            }
-
             room.setVariable(variableMessage.getName(), variableMessage.getValue());
         } catch (e) {
-            console.error('An error occurred on "item_event"');
+            console.error('An error occurred on "handleVariableEvent"');
             console.error(e);
         }
     }
@@ -284,10 +281,18 @@ export class SocketManager {
     }
 
     async getOrCreateRoom(roomId: string): Promise<GameRoom> {
-        //check and create new world for a room
+        //check and create new room
-        let world = this.rooms.get(roomId);
+        let room = this.rooms.get(roomId);
-        if (world === undefined) {
+        if (room === undefined) {
-            world = new GameRoom(
+            let roomPromise = this.roomsPromises.get(roomId);
+            if (roomPromise) {
+                return roomPromise;
+            }
+
+            // Note: for now, the promise is useless (because this is synchronous, but soon, we will need to
+            // load the map server side.
+
+            room = new GameRoom(
                 roomId,
                 (user: User, group: Group) => this.joinWebRtcRoom(user, group),
                 (user: User, group: Group) => this.disConnectedUser(user, group),
@@ -303,9 +308,12 @@ export class SocketManager {
                     this.onEmote(emoteEventMessage, listener)
             );
             gaugeManager.incNbRoomGauge();
-            this.rooms.set(roomId, world);
+            this.rooms.set(roomId, room);
+
+            // TODO: change this the to new Promise()... when the method becomes actually asynchronous
+            roomPromise = Promise.resolve(room);
         }
-        return Promise.resolve(world);
+        return Promise.resolve(room);
     }
 
     private async joinRoom(
@@ -676,6 +684,42 @@ export class SocketManager {
         room.removeZoneListener(call, x, y);
     }
 
+    async addRoomListener(call: RoomSocket, roomId: string) {
+        const room = await this.getOrCreateRoom(roomId);
+        if (!room) {
+            console.error("In addRoomListener, could not find room with id '" + roomId + "'");
+            return;
+        }
+
+        room.addRoomListener(call);
+        //const things = room.addZoneListener(call, x, y);
+
+        const batchMessage = new BatchToPusherRoomMessage();
+
+        for (const [name, value] of room.variables.entries()) {
+            const variableMessage = new VariableMessage();
+            variableMessage.setName(name);
+            variableMessage.setValue(value);
+
+            const subMessage = new SubToPusherRoomMessage();
+            subMessage.setVariablemessage(variableMessage);
+
+            batchMessage.addPayload(subMessage);
+        }
+
+        call.write(batchMessage);
+    }
+
+    removeRoomListener(call: RoomSocket, roomId: string) {
+        const room = this.rooms.get(roomId);
+        if (!room) {
+            console.error("In removeRoomListener, could not find room with id '" + roomId + "'");
+            return;
+        }
+
+        room.removeRoomListener(call);
+    }
+
     public async handleJoinAdminRoom(admin: Admin, roomId: string): Promise<GameRoom> {
         const room = await socketManager.getOrCreateRoom(roomId);
 
@@ -831,6 +875,7 @@ export class SocketManager {
         emoteEventMessage.setActoruserid(user.id);
         room.emitEmoteEvent(user, emoteEventMessage);
     }
+
 }
 
 export const socketManager = new SocketManager();

front/src/Api/IframeListener.ts

@@ -34,6 +34,8 @@ import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "
 import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
 import { isSetVariableIframeEvent, SetVariableEvent } from "./Events/SetVariableEvent";
 
+type AnswererCallback<T extends keyof IframeQueryMap> = (query: IframeQueryMap[T]['query']) => IframeQueryMap[T]['answer']|PromiseLike<IframeQueryMap[T]['answer']>;
+
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -111,12 +113,10 @@ class IframeListener {
     private sendPlayerMove: boolean = false;
 
 
-    // Note: we are forced to type this in "any" because of https://github.com/microsoft/TypeScript/issues/31904
+    // Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private answerers: {
-    private answerers: any = {};
+        [str in keyof IframeQueryMap]?: unknown
-    /*private answerers: {
+    } = {};
-        [key in keyof IframeQueryMap]?: (query: IframeQueryMap[key]['query']) => IframeQueryMap[key]['answer']|PromiseLike<IframeQueryMap[key]['answer']>
-    } = {};*/
 
 
     init() {
@@ -156,7 +156,7 @@ class IframeListener {
                     const queryId = payload.id;
                     const query = payload.query;
 
-                    const answerer = this.answerers[query.type];
+                    const answerer = this.answerers[query.type] as AnswererCallback<keyof IframeQueryMap> | undefined;
                     if (answerer === undefined) {
                         const errorMsg = 'The iFrame sent a message of type "'+query.type+'" but there is no service configured to answer these messages.';
                         console.error(errorMsg);
@@ -432,7 +432,7 @@ class IframeListener {
      * @param key The "type" of the query we are answering
      * @param callback
      */
-    public registerAnswerer<T extends keyof IframeQueryMap>(key: T, callback: (query: IframeQueryMap[T]['query']) => IframeQueryMap[T]['answer']|PromiseLike<IframeQueryMap[T]['answer']> ): void {
+    public registerAnswerer<T extends keyof IframeQueryMap>(key: T, callback: AnswererCallback<T> ): void {
         this.answerers[key] = callback;
     }
 

front/src/Connexion/ConnexionModels.ts

@@ -31,6 +31,7 @@ export enum EventMessage {
     TELEPORT = "teleport",
     USER_MESSAGE = "user-message",
     START_JITSI_ROOM = "start-jitsi-room",
+    SET_VARIABLE = "set-variable",
 }
 
 export interface PointInterface {
@@ -105,6 +106,7 @@ export interface RoomJoinedMessageInterface {
     //users: MessageUserPositionInterface[],
     //groups: GroupCreatedUpdatedMessageInterface[],
     items: { [itemId: number]: unknown };
+    variables: Map<string, unknown>;
 }
 
 export interface PlayGlobalMessageInterface {

front/src/Connexion/RoomConnection.ts

@@ -165,6 +165,9 @@ export class RoomConnection implements RoomConnection {
                     } else if (subMessage.hasEmoteeventmessage()) {
                         const emoteMessage = subMessage.getEmoteeventmessage() as EmoteEventMessage;
                         emoteEventStream.fire(emoteMessage.getActoruserid(), emoteMessage.getEmote());
+                    } else if (subMessage.hasVariablemessage()) {
+                        event = EventMessage.SET_VARIABLE;
+                        payload = subMessage.getVariablemessage();
                     } else {
                         throw new Error("Unexpected batch message type");
                     }
@@ -174,6 +177,7 @@ export class RoomConnection implements RoomConnection {
                     }
                 }
             } else if (message.hasRoomjoinedmessage()) {
+                console.error('COUCOU')
                 const roomJoinedMessage = message.getRoomjoinedmessage() as RoomJoinedMessage;
 
                 const items: { [itemId: number]: unknown } = {};
@@ -181,6 +185,11 @@ export class RoomConnection implements RoomConnection {
                     items[item.getItemid()] = JSON.parse(item.getStatejson());
                 }
 
+                const variables = new Map<string, unknown>();
+                for (const variable of roomJoinedMessage.getVariableList()) {
+                    variables.set(variable.getName(), JSON.parse(variable.getValue()));
+                }
+
                 this.userId = roomJoinedMessage.getCurrentuserid();
                 this.tags = roomJoinedMessage.getTagList();
 
@@ -188,6 +197,7 @@ export class RoomConnection implements RoomConnection {
                     connection: this,
                     room: {
                         items,
+                        variables,
                     } as RoomJoinedMessageInterface,
                 });
             } else if (message.hasWorldfullmessage()) {
@@ -634,6 +644,18 @@ export class RoomConnection implements RoomConnection {
         });
     }
 
+    public onSetVariable(callback: (name: string, value: unknown) => void): void {
+        this.onMessage(EventMessage.SET_VARIABLE, (message: VariableMessage) => {
+            const name = message.getName();
+            const serializedValue = message.getValue();
+            let value: unknown = undefined;
+            if (serializedValue) {
+                value = JSON.parse(serializedValue);
+            }
+            callback(name, value);
+        });
+    }
+
     public hasTag(tag: string): boolean {
         return this.tags.includes(tag);
     }

front/src/Phaser/Game/GameScene.ts

@@ -707,7 +707,7 @@ export class GameScene extends DirtyScene {
                 });
 
                 // Set up variables manager
-                this.sharedVariablesManager = new SharedVariablesManager(this.connection, this.gameMap);
+                this.sharedVariablesManager = new SharedVariablesManager(this.connection, this.gameMap, onConnect.room.variables);
 
                 //this.initUsersPosition(roomJoinedMessage.users);
                 this.connectionAnswerPromiseResolve(onConnect.room);

front/src/Phaser/Game/SharedVariablesManager.ts

@@ -7,6 +7,7 @@ import type {Subscription} from "rxjs";
 import type {GameMap} from "./GameMap";
 import type {ITile, ITiledMapObject} from "../Map/ITiledMap";
 import type {Var} from "svelte/types/compiler/interfaces";
+import {init} from "svelte/internal";
 
 interface Variable {
     defaultValue: unknown,
@@ -18,7 +19,7 @@ export class SharedVariablesManager {
     private _variables = new Map<string, unknown>();
     private variableObjects: Map<string, Variable>;
 
-    constructor(private roomConnection: RoomConnection, private gameMap: GameMap) {
+    constructor(private roomConnection: RoomConnection, private gameMap: GameMap, serverVariables: Map<string, unknown>) {
         // We initialize the list of variable object at room start. The objects cannot be edited later
         // (otherwise, this would cause a security issue if the scripting API can edit this list of objects)
         this.variableObjects = SharedVariablesManager.findVariablesInMap(gameMap);
@@ -28,6 +29,22 @@ export class SharedVariablesManager {
             this._variables.set(name, variableObject.defaultValue);
         }
 
+        // Override default values with the variables from the server:
+        for (const [name, value] of serverVariables) {
+            this._variables.set(name, value);
+        }
+
+        roomConnection.onSetVariable((name, value) => {
+            console.log('Set Variable received from server');
+            this._variables.set(name, value);
+
+            // On server change, let's notify the iframes
+            iframeListener.setVariable({
+                key: name,
+                value: value,
+            })
+        });
+
         // When a variable is modified from an iFrame
         iframeListener.registerAnswerer('setVariable', (event) => {
             const key = event.key;
@@ -48,7 +65,8 @@ export class SharedVariablesManager {
             }
 
             this._variables.set(key, event.value);
-            // TODO: dispatch to the room connection.
+
+            // Dispatch to the room connection.
             this.roomConnection.emitSetVariableEvent(key, event.value);
         });
     }

maps/tests/Variables/shared_variables.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <script>
+        var script = document.createElement('script');
+        // Don't do this at home kids! The "document.referrer" part is actually inserting a XSS security.
+        // We are OK in this precise case because the HTML page is hosted on the "maps" domain that contains only static files.
+        script.setAttribute('src', document.referrer + 'iframe_api.js');
+        document.head.appendChild(script);
+        window.addEventListener('load', () => {
+            console.log('On load');
+            WA.onInit().then(() => {
+                console.log('After WA init');
+                const textField = document.getElementById('textField');
+                textField.value = WA.room.loadVariable('textField');
+
+                textField.addEventListener('change', function (evt) {
+                    console.log('saving variable')
+                    WA.room.saveVariable('textField', this.value);
+                });
+
+                WA.room.onVariableChange('textField').subscribe((value) => {
+                    console.log('variable changed received')
+                    textField.value = value;
+                });
+
+                document.getElementById('btn').addEventListener('click', () => {
+                    console.log(WA.room.loadVariable('textField'));
+                    document.getElementById('placeholder').innerText = WA.room.loadVariable('textField');
+                });
+            });
+        })
+    </script>
+</head>
+<body>
+<input type="text" id="textField" />
+
+<button id="btn">Display textField variable value</button>
+<div id="placeholder"></div>
+</body>
+</html>

maps/tests/index.html

@@ -199,7 +199,15 @@
                     <input type="radio" name="test-variables"> Success <input type="radio" name="test-variables"> Failure <input type="radio" name="test-variables" checked> Pending
                 </td>
                 <td>
-                    <a href="#" class="testLink" data-testmap="Variables/variables.json" target="_blank">Testing scripting variables</a>
+                    <a href="#" class="testLink" data-testmap="Variables/variables.json" target="_blank">Testing scripting variables locally</a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <input type="radio" name="test-shared-variables"> Success <input type="radio" name="test-shared-variables"> Failure <input type="radio" name="test-shared-variables" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="Variables/shared_variables.json" target="_blank">Testing shared scripting variables</a>
                 </td>
             </tr>
         </table>

pusher/src/Model/PusherRoom.ts

@@ -13,6 +13,7 @@ import {
 } from "../Messages/generated/messages_pb";
 import Debug from "debug";
 import {ClientReadableStream} from "grpc";
+import {ExAdminSocketInterface} from "_Model/Websocket/ExAdminSocketInterface";
 
 const debug = Debug("room");
 
@@ -34,8 +35,9 @@ export class PusherRoom {
     private backConnection!: ClientReadableStream<BatchToPusherRoomMessage>;
     private isClosing: boolean = false;
     private listeners: Set<ExSocketInterface> = new Set<ExSocketInterface>();
+    public readonly variables = new Map<string, string>();
 
-    constructor(public readonly roomId: string, private socketListener: ZoneEventListener, private onBackFailure: (e: Error | null, room: PusherRoom) => void) {
+    constructor(public readonly roomId: string, private socketListener: ZoneEventListener) {
         this.public = isRoomAnonymous(roomId);
         this.tags = [];
         this.policyType = GameRoomPolicyTypes.ANONYMOUS_POLICY;
@@ -96,7 +98,11 @@ export class PusherRoom {
             for (const message of batch.getPayloadList()) {
                 if (message.hasVariablemessage()) {
                     const variableMessage = message.getVariablemessage() as VariableMessage;
-                    // We need to dispatch this variable to all the listeners
+
+                    // We need to store all variables to dispatch variables later to the listeners
+                    this.variables.set(variableMessage.getName(), variableMessage.getValue());
+
+                    // Let's dispatch this variable to all the listeners
                     for (const listener of this.listeners) {
                         const subMessage = new SubMessage();
                         subMessage.setVariablemessage(variableMessage);
@@ -112,14 +118,22 @@ export class PusherRoom {
             if (!this.isClosing) {
                 debug("Error on back connection");
                 this.close();
-                this.onBackFailure(e, this);
+                // Let's close all connections linked to that room
+                for (const listener of this.listeners) {
+                    listener.disconnecting = true;
+                    listener.end(1011, "Connection error between pusher and back server")
+                }
             }
         });
         this.backConnection.on("close", () => {
             if (!this.isClosing) {
                 debug("Close on back connection");
                 this.close();
-                this.onBackFailure(null, this);
+                // Let's close all connections linked to that room
+                for (const listener of this.listeners) {
+                    listener.disconnecting = true;
+                    listener.end(1011, "Connection closed between pusher and back server")
+                }
             }
         });
     }
@@ -128,10 +142,5 @@ export class PusherRoom {
         debug("Closing connection to room %s on back server", this.roomId);
         this.isClosing = true;
         this.backConnection.cancel();
-
-        // Let's close all connections linked to that room
-        for (const listener of this.listeners) {
-            listener.close();
-        }
     }
 }