Merge pull request #334 from thecodingmachine/develop

Release 15/10

back/src/Controller/AuthenticateController.ts

@@ -3,6 +3,7 @@ import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
 import {BaseController} from "./BaseController";
 import {adminApi} from "../Services/AdminApi";
 import {jwtTokenManager} from "../Services/JWTTokenManager";
+import {parse} from "query-string";
 
 export interface TokenInterface {
     userUuid: string
@@ -13,11 +14,12 @@ export class AuthenticateController extends BaseController {
     constructor(private App : TemplatedApp) {
         super();
         this.register();
+        this.verify();
         this.anonymLogin();
     }
 
     //Try to login with an admin token
-    register(){
+    private register(){
         this.App.options("/register", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
 
@@ -26,8 +28,6 @@ export class AuthenticateController extends BaseController {
 
         this.App.post("/register", (res: HttpResponse, req: HttpRequest) => {
             (async () => {
-                this.addCorsHeaders(res);
-
                 res.onAborted(() => {
                     console.warn('Login request was aborted');
                 })
@@ -36,11 +36,10 @@ export class AuthenticateController extends BaseController {
 
                 //todo: what to do if the organizationMemberToken is already used?
                 const organizationMemberToken:string|null = param.organizationMemberToken;
-                
+
                 try {
                     if (typeof organizationMemberToken != 'string') throw new Error('No organization token');
                     const data = await adminApi.fetchMemberDataByToken(organizationMemberToken);
-
                     const userUuid = data.userUuid;
                     const organizationSlug = data.organizationSlug;
                     const worldSlug = data.worldSlug;
@@ -48,7 +47,9 @@ export class AuthenticateController extends BaseController {
                     const mapUrlStart = data.mapUrlStart;
 
                     const authToken = jwtTokenManager.createJWTToken(userUuid);
-                    res.writeStatus("200 OK").end(JSON.stringify({
+                    res.writeStatus("200 OK");
+                    this.addCorsHeaders(res);
+                    res.end(JSON.stringify({
                         authToken,
                         userUuid,
                         organizationSlug,
@@ -58,8 +59,10 @@ export class AuthenticateController extends BaseController {
                     }));
 
                 } catch (e) {
-                    console.log("An error happened", e)
+                    console.error("An error happened", e)
-                    res.writeStatus(e.status || "500 Internal Server Error").end('An error happened');
+                    res.writeStatus(e.status || "500 Internal Server Error");
+                    this.addCorsHeaders(res);
+                    res.end('An error happened');
                 }
 
 
@@ -68,8 +71,44 @@ export class AuthenticateController extends BaseController {
 
     }
 
+    private verify(){
+        this.App.options("/verify", (res: HttpResponse, req: HttpRequest) => {
+            this.addCorsHeaders(res);
+
+            res.end();
+        });
+
+        this.App.get("/verify", (res: HttpResponse, req: HttpRequest) => {
+            (async () => {
+                const query = parse(req.getQuery());
+
+                res.onAborted(() => {
+                    console.warn('verify request was aborted');
+                })
+
+                try {
+                    await jwtTokenManager.getUserUuidFromToken(query.token as string);
+                } catch (e) {
+                    res.writeStatus("400 Bad Request");
+                    this.addCorsHeaders(res);
+                    res.end(JSON.stringify({
+                        "success": false,
+                        "message": "Invalid JWT token"
+                    }));
+                    return;
+                }
+                res.writeStatus("200 OK");
+                this.addCorsHeaders(res);
+                res.end(JSON.stringify({
+                    "success": true
+                }));
+            })();
+        });
+
+    }
+
     //permit to login on application. Return token to connect on Websocket IO.
-    anonymLogin(){
+    private anonymLogin(){
         this.App.options("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
 
@@ -77,7 +116,6 @@ export class AuthenticateController extends BaseController {
         });
 
         this.App.post("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
-            this.addCorsHeaders(res);
 
             res.onAborted(() => {
                 console.warn('Login request was aborted');
@@ -85,7 +123,9 @@ export class AuthenticateController extends BaseController {
 
             const userUuid = v4();
             const authToken = jwtTokenManager.createJWTToken(userUuid);
-            res.writeStatus("200 OK").end(JSON.stringify({
+            res.writeStatus("200 OK");
+            this.addCorsHeaders(res);
+            res.end(JSON.stringify({
                 authToken,
                 userUuid,
             }));

back/src/Controller/BaseController.ts

@@ -1,4 +1,5 @@
-import {HttpResponse} from "uWebSockets.js";
+import {HttpRequest, HttpResponse} from "uWebSockets.js";
+import {ADMIN_API_TOKEN} from "../Enum/EnvironmentVariable";
 
 
 export class BaseController {

back/src/Controller/FileController.ts

@@ -44,8 +44,6 @@ export class FileController extends BaseController {
 
         this.App.post("/upload-audio-message", (res: HttpResponse, req: HttpRequest) => {
             (async () => {
-                this.addCorsHeaders(res);
-
                 res.onAborted(() => {
                     console.warn('upload-audio-message request was aborted');
                 })
@@ -80,14 +78,18 @@ export class FileController extends BaseController {
                         }
                     });
 
-                    res.writeStatus("200 OK").end(JSON.stringify({
+                    res.writeStatus("200 OK");
+                    this.addCorsHeaders(res);
+                    res.end(JSON.stringify({
                         id: audioMessageId,
                         path: `/download-audio-message/${audioMessageId}`
                     }));
 
                 } catch (e) {
                     console.log("An error happened", e)
-                    res.writeStatus(e.status || "500 Internal Server Error").end('An error happened');
+                    res.writeStatus(e.status || "500 Internal Server Error");
+                    this.addCorsHeaders(res);
+                    res.end('An error happened');
                 }
             })();
         });
@@ -101,7 +103,6 @@ export class FileController extends BaseController {
         });
 
         this.App.get("/download-audio-message/:id", (res: HttpResponse, req: HttpRequest) => {
-            this.addCorsHeaders(res);
 
             res.onAborted(() => {
                 console.warn('upload-audio-message request was aborted');
@@ -111,7 +112,9 @@ export class FileController extends BaseController {
 
             const file = this.uploadedFileBuffers.get(id);
             if (file === undefined) {
-                res.writeStatus("404 Not found").end("Cannot find file");
+                res.writeStatus("404 Not found");
+                this.addCorsHeaders(res);
+                res.end("Cannot find file");
                 return;
             }
 

back/src/Controller/IoSocketController.ts

@@ -1,6 +1,6 @@
 import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
-import {MINIMUM_DISTANCE, GROUP_RADIUS} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
+import {MINIMUM_DISTANCE, GROUP_RADIUS, ADMIN_API_URL, ADMIN_API_TOKEN} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
-import {GameRoom} from "../Model/GameRoom";
+import {GameRoom, GameRoomPolicyTypes} from "../Model/GameRoom";
 import {Group} from "../Model/Group";
 import {User} from "../Model/User";
 import {isSetPlayerDetailsMessage,} from "../Model/Websocket/SetPlayerDetailsMessage";
@@ -31,6 +31,7 @@ import {
     WebRtcStartMessage,
     WebRtcDisconnectMessage,
     PlayGlobalMessage,
+    ReportPlayerMessage
 } from "../Messages/generated/messages_pb";
 import {UserMovesMessage} from "../Messages/generated/messages_pb";
 import Direction = PositionMessage.Direction;
@@ -41,7 +42,8 @@ import {cpuTracker} from "../Services/CpuTracker";
 import {ViewportInterface} from "../Model/Websocket/ViewportMessage";
 import {jwtTokenManager} from "../Services/JWTTokenManager";
 import {adminApi} from "../Services/AdminApi";
-import {RoomIdentifier} from "../Model/RoomIdentifier";
+import Axios from "axios";
+import {PositionInterface} from "../Model/PositionInterface";
 
 function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void {
     socket.batchedMessages.addPayload(payload);
@@ -60,6 +62,26 @@ function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void {
             socket.batchTimeout = null;
         }, 100);
     }
+
+    // If we send a message, we don't need to keep the connection alive
+    resetPing(socket);
+}
+
+/**
+ * Schedule a ping to keep the connection open.
+ * If a ping is already set, the timeout of the ping is reset.
+ */
+function resetPing(ws: ExSocketInterface): void {
+    if (ws.pingTimeout) {
+        clearTimeout(ws.pingTimeout);
+    }
+    ws.pingTimeout = setTimeout(() => {
+        if (ws.disconnecting) {
+            return;
+        }
+        ws.ping();
+        resetPing(ws);
+    }, 29000);
 }
 
 export class IoSocketController {
@@ -113,11 +135,9 @@ export class IoSocketController {
                         const websocketExtensions = req.getHeader('sec-websocket-extensions');
 
                         const roomId = query.roomId;
-                        //todo: better validation: /\/_\/.*\/.*/ or /\/@\/.*\/.*\/.*/
                         if (typeof roomId !== 'string') {
                             throw new Error('Undefined room ID: ');
                         }
-                        const roomIdentifier = new RoomIdentifier(roomId);
 
                         const token = query.token;
                         const x = Number(query.x);
@@ -143,17 +163,20 @@ export class IoSocketController {
 
 
                         const userUuid = await jwtTokenManager.getUserUuidFromToken(token);
-                        console.log('uuid', userUuid);
 
                         let memberTags: string[] = [];
-                        if (roomIdentifier.anonymous === false) {
+                        const room = await this.getOrCreateRoom(roomId);
-                            const grants = await adminApi.memberIsGrantedAccessToRoom(userUuid, roomIdentifier);
+                        if (!room.anonymous && room.policyType !== GameRoomPolicyTypes.ANONYMUS_POLICY) {
-                            if (!grants.granted) {
+                            try {
+                                const userData = await adminApi.fetchMemberDataByUuid(userUuid);
+                                memberTags = userData.tags;
+                                if (room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && !room.canAccess(memberTags)) {
+                                    throw new Error('No correct tags')
+                                }
+                                console.log('access granted for user '+userUuid+' and room '+roomId);
+                            } catch (e) {
                                 console.log('access not granted for user '+userUuid+' and room '+roomId);
                                 throw new Error('Client cannot acces this ressource.')
-                            } else {
-                                memberTags = grants.memberTags;
-                                console.log('access granted for user '+userUuid+' and room '+roomId);
                             }
                         }
 
@@ -172,6 +195,7 @@ export class IoSocketController {
                                 roomId,
                                 name,
                                 characterLayers,
+                                tags: memberTags,
                                 position: {
                                     x: x,
                                     y: y,
@@ -183,8 +207,7 @@ export class IoSocketController {
                                     right,
                                     bottom,
                                     left
-                                },
+                                }
-                                tags: memberTags
                             },
                             /* Spell these correctly */
                             websocketKey,
@@ -219,9 +242,9 @@ export class IoSocketController {
                 client.disconnecting = false;
 
                 client.name = ws.name;
+                client.tags = ws.tags;
                 client.characterLayers = ws.characterLayers;
                 client.roomId = ws.roomId;
-                client.tags = ws.tags;
 
                 this.sockets.set(client.userId, client);
 
@@ -230,7 +253,9 @@ export class IoSocketController {
                 console.log(new Date().toISOString() + ' A user joined (', this.sockets.size, ' connected users)');
 
                 // Let's join the room
-                this.handleJoinRoom(client, client.roomId, client.position, client.viewport, client.name, client.characterLayers);
+                this.handleJoinRoom(client, client.position, client.viewport);
+
+                resetPing(client);
             },
             message: (ws, arrayBuffer, isBinary): void => {
                 const client = ws as ExSocketInterface;
@@ -247,11 +272,13 @@ export class IoSocketController {
                 } else if (message.hasItemeventmessage()) {
                     this.handleItemEvent(client, message.getItemeventmessage() as ItemEventMessage);
                 } else if (message.hasWebrtcsignaltoservermessage()) {
-                    this.emitVideo(client, message.getWebrtcsignaltoservermessage() as WebRtcSignalToServerMessage)
+                    this.emitVideo(client, message.getWebrtcsignaltoservermessage() as WebRtcSignalToServerMessage);
                 } else if (message.hasWebrtcscreensharingsignaltoservermessage()) {
-                    this.emitScreenSharing(client, message.getWebrtcscreensharingsignaltoservermessage() as WebRtcSignalToServerMessage)
+                    this.emitScreenSharing(client, message.getWebrtcscreensharingsignaltoservermessage() as WebRtcSignalToServerMessage);
                 } else if (message.hasPlayglobalmessage()) {
-                    this.emitPlayGlobalMessage(client, message.getPlayglobalmessage() as PlayGlobalMessage)
+                    this.emitPlayGlobalMessage(client, message.getPlayglobalmessage() as PlayGlobalMessage);
+                } else if (message.hasReportplayermessage()){
+                    this.handleReportMessage(client, message.getReportplayermessage() as ReportPlayerMessage);
                 }
 
                     /* Ok is false if backpressure was built up, wait for drain */
@@ -266,11 +293,6 @@ export class IoSocketController {
                     Client.disconnecting = true;
                     //leave room
                     this.leaveRoom(Client);
-
-                    //delete all socket information
-                    /*delete Client.roomId;
-                    delete Client.token;
-                    delete Client.position;*/
                 } catch (e) {
                     console.error('An error occurred on "disconnect"');
                     console.error(e);
@@ -283,21 +305,6 @@ export class IoSocketController {
                 console.log('A user left (', this.sockets.size, ' connected users)');
             }
         })
-
-        // TODO: finish this!
-        /*this.Io.on(SocketIoEvent.CONNECTION, (socket: Socket) => {
-
-
-
-            socket.on(SocketIoEvent.WEBRTC_SIGNAL, (data: unknown) => {
-                this.emitVideo((socket as ExSocketInterface), data);
-            });
-
-            socket.on(SocketIoEvent.WEBRTC_SCREEN_SHARING_SIGNAL, (data: unknown) => {
-                this.emitScreenSharing((socket as ExSocketInterface), data);
-            });
-
-        });*/
     }
 
     private emitError(Client: ExSocketInterface, message: string): void {
@@ -313,10 +320,10 @@ export class IoSocketController {
         console.warn(message);
     }
 
-    private handleJoinRoom(client: ExSocketInterface, roomId: string, position: PointInterface, viewport: ViewportInterface, name: string, characterLayers: string[]): void {
+    private handleJoinRoom(client: ExSocketInterface, position: PointInterface, viewport: ViewportInterface): void {
         try {
             //join new previous room
-            const gameRoom = this.joinRoom(client, roomId, position);
+            const gameRoom = this.joinRoom(client, position);
 
             const things = gameRoom.setViewport(client, viewport);
 
@@ -357,7 +364,6 @@ export class IoSocketController {
             }
 
             roomJoinedMessage.setCurrentuserid(client.userId);
-            roomJoinedMessage.setTagList(client.tags);
 
             const serverToClientMessage = new ServerToClientMessage();
             serverToClientMessage.setRoomjoinedmessage(roomJoinedMessage);
@@ -507,6 +513,29 @@ export class IoSocketController {
         }
     }
 
+    private handleReportMessage(client: ExSocketInterface, reportPlayerMessage: ReportPlayerMessage) {
+        try {
+            const reportedSocket = this.sockets.get(reportPlayerMessage.getReporteduserid());
+            if (!reportedSocket) {
+                throw 'reported socket user not found';
+            }
+            //TODO report user on admin application
+            Axios.post(`${ADMIN_API_URL}/api/report`, {
+                    reportedUserUuid: reportedSocket.userUuid,
+                    reportedUserComment: reportPlayerMessage.getReportcomment(),
+                    reporterUserUuid: client.userUuid
+                },
+                {
+                    headers: {"Authorization": `${ADMIN_API_TOKEN}`}
+                }).catch((err) => {
+                throw err;
+            });
+        } catch (e) {
+            console.error('An error occurred on "handleReportMessage"');
+            console.error(e);
+        }
+    }
+
     emitVideo(socket: ExSocketInterface, data: WebRtcSignalToServerMessage): void {
         //send only at user
         const client = this.sockets.get(data.getReceiverid());
@@ -576,76 +605,41 @@ export class IoSocketController {
         }
     }
 
-    private joinRoom(client : ExSocketInterface, roomId: string, position: PointInterface): GameRoom {
+    private async getOrCreateRoom(roomId: string): Promise<GameRoom> {
-
-        //join user in room
-        this.nbClientsPerRoomGauge.inc({ room: roomId });
-        client.roomId = roomId;
-        client.position = position;
-
         //check and create new world for a room
         let world = this.Worlds.get(roomId)
         if(world === undefined){
-            world = new GameRoom((user1: User, group: Group) => {
+            world = new GameRoom(
-                this.joinWebRtcRoom(user1, group);
+                roomId,
-            }, (user1: User, group: Group) => {
+                (user: User, group: Group) => this.joinWebRtcRoom(user, group),
-                this.disConnectedUser(user1, group);
+                (user: User, group: Group) => this.disConnectedUser(user, group),
-            }, MINIMUM_DISTANCE, GROUP_RADIUS, (thing: Movable, listener: User) => {
+                MINIMUM_DISTANCE,
-                const clientListener = this.searchClientByIdOrFail(listener.id);
+                GROUP_RADIUS,
-                if (thing instanceof User) {
+                (thing: Movable, listener: User) => this.onRoomEnter(thing, listener),
-                    const clientUser = this.searchClientByIdOrFail(thing.id);
+                (thing: Movable, position:PositionInterface, listener:User) => this.onClientMove(thing, position, listener),
-
+                (thing: Movable, listener:User) => this.onClientLeave(thing, listener)
-                    const userJoinedMessage = new UserJoinedMessage();
+            );
-                    if (!Number.isInteger(clientUser.userId)) {
+            if (!world.anonymous) {
-                        throw new Error('clientUser.userId is not an integer '+clientUser.userId);
+                const data = await adminApi.fetchMapDetails(world.organizationSlug, world.worldSlug, world.roomSlug)
-                    }
+                world.tags = data.tags
-                    userJoinedMessage.setUserid(clientUser.userId);
+                world.policyType = Number(data.policy_type)
-                    userJoinedMessage.setName(clientUser.name);
+            }
-                    userJoinedMessage.setCharacterlayersList(clientUser.characterLayers);
-                    userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
-
-                    const subMessage = new SubMessage();
-                    subMessage.setUserjoinedmessage(userJoinedMessage);
-
-                    emitInBatch(clientListener, subMessage);
-                } else if (thing instanceof Group) {
-                    this.emitCreateUpdateGroupEvent(clientListener, thing);
-                } else {
-                    console.error('Unexpected type for Movable.');
-                }
-            }, (thing: Movable, position, listener) => {
-                const clientListener = this.searchClientByIdOrFail(listener.id);
-                if (thing instanceof User) {
-                    const clientUser = this.searchClientByIdOrFail(thing.id);
-
-                    const userMovedMessage = new UserMovedMessage();
-                    userMovedMessage.setUserid(clientUser.userId);
-                    userMovedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
-
-                    const subMessage = new SubMessage();
-                    subMessage.setUsermovedmessage(userMovedMessage);
-
-                    clientListener.emitInBatch(subMessage);
-                    //console.log("Sending USER_MOVED event");
-                } else if (thing instanceof Group) {
-                    this.emitCreateUpdateGroupEvent(clientListener, thing);
-                } else {
-                    console.error('Unexpected type for Movable.');
-                }
-            }, (thing: Movable, listener) => {
-                const clientListener = this.searchClientByIdOrFail(listener.id);
-                if (thing instanceof User) {
-                    const clientUser = this.searchClientByIdOrFail(thing.id);
-                    this.emitUserLeftEvent(clientListener, clientUser.userId);
-                } else if (thing instanceof Group) {
-                    this.emitDeleteGroupEvent(clientListener, thing.getId());
-                } else {
-                    console.error('Unexpected type for Movable.');
-                }
-
-            });
             this.Worlds.set(roomId, world);
         }
+        return Promise.resolve(world)
+    }
+
+    private joinRoom(client : ExSocketInterface, position: PointInterface): GameRoom {
+
+        const roomId = client.roomId;
+        //join user in room
+        this.nbClientsPerRoomGauge.inc({ room: roomId });
+        client.position = position;
+
+        const world = this.Worlds.get(roomId)
+        if(world === undefined){
+            throw new Error('Could not find room for ID: '+client.roomId)
+        }
 
         // Dispatch groups position to newly connected user
         world.getGroups().forEach((group: Group) => {
@@ -656,6 +650,64 @@ export class IoSocketController {
         return world;
     }
 
+    private onRoomEnter(thing: Movable, listener: User) {
+        const clientListener = this.searchClientByIdOrFail(listener.id);
+        if (thing instanceof User) {
+            const clientUser = this.searchClientByIdOrFail(thing.id);
+
+            const userJoinedMessage = new UserJoinedMessage();
+            if (!Number.isInteger(clientUser.userId)) {
+                throw new Error('clientUser.userId is not an integer '+clientUser.userId);
+            }
+            userJoinedMessage.setUserid(clientUser.userId);
+            userJoinedMessage.setName(clientUser.name);
+            userJoinedMessage.setCharacterlayersList(clientUser.characterLayers);
+            userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
+
+            const subMessage = new SubMessage();
+            subMessage.setUserjoinedmessage(userJoinedMessage);
+
+            emitInBatch(clientListener, subMessage);
+        } else if (thing instanceof Group) {
+            this.emitCreateUpdateGroupEvent(clientListener, thing);
+        } else {
+            console.error('Unexpected type for Movable.');
+        }
+    }
+
+    private onClientMove(thing: Movable, position:PositionInterface, listener:User): void {
+        const clientListener = this.searchClientByIdOrFail(listener.id);
+        if (thing instanceof User) {
+            const clientUser = this.searchClientByIdOrFail(thing.id);
+
+            const userMovedMessage = new UserMovedMessage();
+            userMovedMessage.setUserid(clientUser.userId);
+            userMovedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
+
+            const subMessage = new SubMessage();
+            subMessage.setUsermovedmessage(userMovedMessage);
+
+            clientListener.emitInBatch(subMessage);
+            //console.log("Sending USER_MOVED event");
+        } else if (thing instanceof Group) {
+            this.emitCreateUpdateGroupEvent(clientListener, thing);
+        } else {
+            console.error('Unexpected type for Movable.');
+        }
+    }
+
+    private onClientLeave(thing: Movable, listener:User) {
+        const clientListener = this.searchClientByIdOrFail(listener.id);
+        if (thing instanceof User) {
+            const clientUser = this.searchClientByIdOrFail(thing.id);
+            this.emitUserLeftEvent(clientListener, clientUser.userId);
+        } else if (thing instanceof Group) {
+            this.emitDeleteGroupEvent(clientListener, thing.getId());
+        } else {
+            console.error('Unexpected type for Movable.');
+        }
+    }
+
     private emitCreateUpdateGroupEvent(client: ExSocketInterface, group: Group): void {
         const position = group.getPosition();
         const pointMessage = new PointMessage();
@@ -845,4 +897,17 @@ export class IoSocketController {
     public getWorlds(): Map<string, GameRoom> {
         return this.Worlds;
     }
+
+    /**
+     *
+     * @param token
+     */
+    searchClientByUuid(uuid: string): ExSocketInterface | null {
+        for(const socket of this.sockets.values()){
+            if(socket.userUuid === uuid){
+                return socket;
+            }
+        }
+        return null;
+    }
 }

back/src/Controller/MapController.ts

@@ -24,7 +24,6 @@ export class MapController extends BaseController{
         });
 
         this.App.get("/map", (res: HttpResponse, req: HttpRequest) => {
-            this.addCorsHeaders(res);
 
             res.onAborted(() => {
                 console.warn('/map request was aborted');
@@ -34,25 +33,35 @@ export class MapController extends BaseController{
 
             if (typeof query.organizationSlug !== 'string') {
                 console.error('Expected organizationSlug parameter');
-                res.writeStatus("400 Bad request").end("Expected organizationSlug parameter");
+                res.writeStatus("400 Bad request");
+                this.addCorsHeaders(res);
+                res.end("Expected organizationSlug parameter");
             }
             if (typeof query.worldSlug !== 'string') {
                 console.error('Expected worldSlug parameter');
-                res.writeStatus("400 Bad request").end("Expected worldSlug parameter");
+                res.writeStatus("400 Bad request");
+                this.addCorsHeaders(res);
+                res.end("Expected worldSlug parameter");
             }
             if (typeof query.roomSlug !== 'string' && query.roomSlug !== undefined) {
                 console.error('Expected only one roomSlug parameter');
-                res.writeStatus("400 Bad request").end("Expected only one roomSlug parameter");
+                res.writeStatus("400 Bad request");
+                this.addCorsHeaders(res);
+                res.end("Expected only one roomSlug parameter");
             }
 
             (async () => {
                 try {
                     const mapDetails = await adminApi.fetchMapDetails(query.organizationSlug as string, query.worldSlug as string, query.roomSlug as string|undefined);
 
-                    res.writeStatus("200 OK").end(JSON.stringify(mapDetails));
+                    res.writeStatus("200 OK");
+                    this.addCorsHeaders(res);
+                    res.end(JSON.stringify(mapDetails));
                 } catch (e) {
                     console.error(e);
-                    res.writeStatus("500 Internal Server Error").end("An error occurred");
+                    res.writeStatus("500 Internal Server Error")
+                    this.addCorsHeaders(res);
+                    res.end("An error occurred");
                 }
             })();
 

back/src/Enum/EnvironmentVariable.ts

@@ -3,8 +3,8 @@ const URL_ROOM_STARTED = "/Floor0/floor0.json";
 const MINIMUM_DISTANCE = process.env.MINIMUM_DISTANCE ? Number(process.env.MINIMUM_DISTANCE) : 64;
 const GROUP_RADIUS = process.env.GROUP_RADIUS ? Number(process.env.GROUP_RADIUS) : 48;
 const ALLOW_ARTILLERY = process.env.ALLOW_ARTILLERY ? process.env.ALLOW_ARTILLERY == 'true' : false;
-const ADMIN_API_URL = process.env.ADMIN_API_URL || null;
+const ADMIN_API_URL = process.env.ADMIN_API_URL || 'http://admin';
-const ADMIN_API_TOKEN = process.env.ADMIN_API_TOKEN || null;
+const ADMIN_API_TOKEN = process.env.ADMIN_API_TOKEN || 'myapitoken';
 const CPU_OVERHEAT_THRESHOLD = Number(process.env.CPU_OVERHEAT_THRESHOLD) || 80;
 
 export {

back/src/Model/GameRoom.ts

@@ -8,10 +8,18 @@ import {EntersCallback, LeavesCallback, MovesCallback} from "_Model/Zone";
 import {PositionNotifier} from "./PositionNotifier";
 import {ViewportInterface} from "_Model/Websocket/ViewportMessage";
 import {Movable} from "_Model/Movable";
+import {extractDataFromPrivateRoomId, extractRoomSlugPublicRoomId, isRoomAnonymous} from "./RoomIdentifier";
+import {arrayIntersect} from "../Services/ArrayHelper";
 
 export type ConnectCallback = (user: User, group: Group) => void;
 export type DisconnectCallback = (user: User, group: Group) => void;
 
+export enum GameRoomPolicyTypes {
+    ANONYMUS_POLICY = 1,
+    MEMBERS_ONLY_POLICY,
+    USE_TAGS_POLICY,
+}
+
 export class GameRoom {
     private readonly minDistance: number;
     private readonly groupRadius: number;
@@ -26,8 +34,16 @@ export class GameRoom {
     private itemsState: Map<number, unknown> = new Map<number, unknown>();
 
     private readonly positionNotifier: PositionNotifier;
+    public readonly roomId: string;
+    public readonly anonymous: boolean;
+    public tags: string[];
+    public policyType: GameRoomPolicyTypes;
+    public readonly roomSlug: string;
+    public readonly worldSlug: string = '';
+    public readonly organizationSlug: string = '';
 
-    constructor(connectCallback: ConnectCallback,
+    constructor(roomId: string,
+                connectCallback: ConnectCallback,
                 disconnectCallback: DisconnectCallback,
                 minDistance: number,
                 groupRadius: number,
@@ -35,6 +51,21 @@ export class GameRoom {
                 onMoves: MovesCallback,
                 onLeaves: LeavesCallback)
     {
+        this.roomId = roomId;
+        this.anonymous = isRoomAnonymous(roomId);
+        this.tags = [];
+        this.policyType = GameRoomPolicyTypes.ANONYMUS_POLICY;
+        
+        if (this.anonymous) {
+            this.roomSlug = extractRoomSlugPublicRoomId(this.roomId);
+        } else {
+            const {organizationSlug, worldSlug, roomSlug} = extractDataFromPrivateRoomId(this.roomId);
+            this.roomSlug = roomSlug;
+            this.organizationSlug = organizationSlug;
+            this.worldSlug = worldSlug;
+        }
+        
+        
         this.users = new Map<number, User>();
         this.groups = new Set<Group>();
         this.connectCallback = connectCallback;
@@ -248,4 +279,8 @@ export class GameRoom {
         }
         return this.positionNotifier.setViewport(user, viewport);
     }
+
+    canAccess(userTags: string[]): boolean {
+        return arrayIntersect(userTags, this.tags);
+    }
 }

back/src/Model/RoomIdentifier.ts

@@ -1,25 +1,30 @@
-export class RoomIdentifier {
+//helper functions to parse room IDs
-    public readonly anonymous: boolean;
-    public readonly id:string
-    public readonly organizationSlug: string|undefined;
-    public readonly worldSlug: string|undefined;
-    public readonly roomSlug: string|undefined;
-    constructor(roomID: string) {
-        if (roomID.startsWith('_/')) {
-            this.anonymous = true;
-        } else if(roomID.startsWith('@/')) {
-            this.anonymous = false;
 
-            const match = /@\/([^/]+)\/([^/]+)\/(.+)/.exec(roomID);
+export const isRoomAnonymous = (roomID: string): boolean => {
-            if (!match) {
+    if (roomID.startsWith('_/')) {
-                throw new Error('Could not extract info from "'+roomID+'"');
+        return true;
-            }
+    } else if(roomID.startsWith('@/')) {
-            this.organizationSlug = match[1];
+        return false;
-            this.worldSlug = match[2];
+    } else {
-            this.roomSlug = match[3];
+        throw new Error('Incorrect room ID: '+roomID);
-        } else {
-            throw new Error('Incorrect room ID: '+roomID);
-        }
-        this.id = roomID;
     }
 }
+
+export const extractRoomSlugPublicRoomId = (roomId: string): string => {
+    const idParts = roomId.split('/');
+    if (idParts.length < 3) throw new Error('Incorrect roomId: '+roomId);
+    return idParts.slice(2).join('/');
+}
+export interface extractDataFromPrivateRoomIdResponse {
+    organizationSlug: string;
+    worldSlug: string;
+    roomSlug: string;
+}
+export const extractDataFromPrivateRoomId = (roomId: string): extractDataFromPrivateRoomIdResponse => {
+    const idParts = roomId.split('/');
+    if (idParts.length < 4) throw new Error('Incorrect roomId: '+roomId);
+    const organizationSlug = idParts[1];
+    const worldSlug = idParts[2];
+    const roomSlug = idParts[3];
+    return {organizationSlug, worldSlug, roomSlug}
+}

back/src/Model/Websocket/ExSocketInterface.ts

@@ -19,6 +19,7 @@ export interface ExSocketInterface extends WebSocket, Identificable {
     emitInBatch: (payload: SubMessage) => void;
     batchedMessages: BatchMessage;
     batchTimeout: NodeJS.Timeout|null;
+    pingTimeout: NodeJS.Timeout|null;
     disconnecting: boolean,
     tags: string[]
 }

back/src/Services/AdminApi.ts

@@ -1,12 +1,13 @@
 import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
 import Axios from "axios";
-import {RoomIdentifier} from "../Model/RoomIdentifier";
 
 export interface AdminApiData {
     organizationSlug: string
     worldSlug: string
     roomSlug: string
     mapUrlStart: string
+    tags: string[]
+    policy_type: number
     userUuid: string
 }
 
@@ -15,6 +16,11 @@ export interface GrantedApiData {
     memberTags: string[]
 }
 
+export interface fetchMemberDataByUuidResponse {
+    uuid: string;
+    tags: string[];
+}
+
 class AdminApi {
 
     async fetchMapDetails(organizationSlug: string, worldSlug: string, roomSlug: string|undefined): Promise<AdminApiData> {
@@ -40,6 +46,16 @@ class AdminApi {
         return res.data;
     }
 
+    async fetchMemberDataByUuid(uuid: string): Promise<fetchMemberDataByUuidResponse> {
+        if (!ADMIN_API_URL) {
+            return Promise.reject('No admin backoffice set!');
+        }
+        const res = await Axios.get(ADMIN_API_URL+'/membership/'+uuid,
+            { headers: {"Authorization" : `${ADMIN_API_TOKEN}`} }
+        )
+        return res.data;
+    }
+    
     async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> {
         if (!ADMIN_API_URL) {
             return Promise.reject('No admin backoffice set!');
@@ -50,24 +66,6 @@ class AdminApi {
         )
         return res.data;
     }
-
-    async memberIsGrantedAccessToRoom(memberId: string, roomIdentifier: RoomIdentifier): Promise<GrantedApiData> {
-        if (!ADMIN_API_URL) {
-            return Promise.reject('No admin backoffice set!');
-        }
-        try {
-            const res = await Axios.get(ADMIN_API_URL+'/api/member/is-granted-access',
-                { headers: {"Authorization" : `${ADMIN_API_TOKEN}`}, params: {memberId, organizationSlug: roomIdentifier.organizationSlug, worldSlug: roomIdentifier.worldSlug, roomSlug: roomIdentifier.roomSlug} }
-            )
-            return res.data;
-        } catch (e) {
-            console.log(e.message)
-            return {
-                granted: false,
-                memberTags: []
-            };
-        }
-    }
 }
 
 export const adminApi = new AdminApi();

back/src/Services/ArrayHelper.ts

@@ -0,0 +1,3 @@
+export const arrayIntersect = (array1: string[], array2: string[]) : boolean => {
+    return array1.filter(value => array2.includes(value)).length > 0;
+}

back/src/Services/JWTTokenManager.ts

@@ -6,7 +6,7 @@ import {TokenInterface} from "../Controller/AuthenticateController";
 class JWTTokenManager {
     
     public createJWTToken(userUuid: string) {
-        return Jwt.sign({userUuid: userUuid}, SECRET_KEY, {expiresIn: '24h'});
+        return Jwt.sign({userUuid: userUuid}, SECRET_KEY, {expiresIn: '200d'}); //todo: add a mechanic to refresh or recreate token
     }
 
     public async getUserUuidFromToken(token: unknown): Promise<string> {

back/tests/ArrayHelperTest.ts

@@ -0,0 +1,14 @@
+import {arrayIntersect} from "../src/Services/ArrayHelper";
+
+
+describe("RoomIdentifier", () => {
+    it("should return true on intersect", () => {
+        expect(arrayIntersect(['admin', 'user'], ['admin', 'superAdmin'])).toBe(true);
+    });
+    it("should be reflexive", () => {
+        expect(arrayIntersect(['admin', 'superAdmin'], ['admin', 'user'])).toBe(true);
+    });
+    it("should return false on non intersect", () => {
+        expect(arrayIntersect(['admin', 'user'], ['superAdmin'])).toBe(false);
+    });
+})

back/tests/RoomIdentifierTest.ts

@@ -0,0 +1,19 @@
+import {extractDataFromPrivateRoomId, extractRoomSlugPublicRoomId, isRoomAnonymous} from "../src/Model/RoomIdentifier";
+
+describe("RoomIdentifier", () => {
+    it("should flag public id as anonymous", () => {
+        expect(isRoomAnonymous('_/global/test')).toBe(true);
+    });
+    it("should flag public id as not anonymous", () => {
+        expect(isRoomAnonymous('@/afup/afup2020/1floor')).toBe(false);
+    });
+    it("should extract roomSlug from public ID", () => {
+        expect(extractRoomSlugPublicRoomId('_/global/npeguin/test.json')).toBe('npeguin/test.json');
+    });
+    it("should extract correct from private ID", () => {
+        const {organizationSlug, worldSlug, roomSlug} = extractDataFromPrivateRoomId('@/afup/afup2020/1floor');
+        expect(organizationSlug).toBe('afup');
+        expect(worldSlug).toBe('afup2020');
+        expect(roomSlug).toBe('1floor');
+    });
+})

back/tests/WorldTest.ts

@@ -21,7 +21,7 @@ describe("World", () => {
 
         }
 
-        const world = new GameRoom(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
 
         world.join(createMockUser(1), new Point(100, 100));
 
@@ -48,7 +48,7 @@ describe("World", () => {
 
         }
 
-        const world = new GameRoom(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
 
         world.join(createMockUser(1), new Point(100, 100));
 
@@ -77,7 +77,7 @@ describe("World", () => {
             disconnectCallNumber++;
         }
 
-        const world = new GameRoom(connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
 
         world.join(createMockUser(1), new Point(100, 100));
 

front/dist/resources/logos/close.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M512,84.85,427.15,0,256,171.15,84.85,0,0,84.85,171.15,256,0,427.15,84.85,512,256,340.85,427.15,512,512,427.15,340.85,256Z" transform="translate(0 0)"/></svg>

front/dist/resources/logos/report.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.48 56.48"><defs><style>.cls-1{fill:#e76e54;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M39.94,512H16.54L0,495.46v-23.4l16.54-16.54h23.4l16.54,16.54v23.4Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M33.54,485.52H23l-1.77-21.18H35.3Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M23,492.58H33.54v10.59H23Z" transform="translate(0 -455.52)"/></svg>

front/dist/resources/style/style.css

@@ -56,6 +56,12 @@ body .message-info.warning{
     padding: 10px;
     z-index: 2;
 }
+
+.video-container img.report{
+    right: 5px;
+    left: auto;
+}
+
 .video-container video{
     height: 100%;
 }
@@ -567,4 +573,85 @@ body {
 .main-container .audio-playing p{
     color: white;
     margin-left: 10px;
-}
+}
+
+/*REPORT input*/
+div.modal-report-user{
+    position: absolute;
+    width: 800px;
+    height: 600px;
+    left: calc(50% - 400px);
+    top: 100px;
+    background-color: #000000ad;
+}
+
+.modal-report-user textarea{
+    position: absolute;
+    height: 200px;
+    z-index: 999;
+    top: 200px;
+    background-color: #000000;
+    color: white;
+    width: calc(100% - 60px);
+    margin: 30px;
+}
+
+.modal-report-user img{
+    position: absolute;
+    height: 50px;
+    width: 50px;
+    z-index: 999;
+    left: calc(50% - 25px);
+    top: 10px;
+}
+
+.modal-report-user img#cancel-report-user{
+    position: absolute;
+    z-index: 999;
+    right: 0;
+    left: auto;
+    top: 0;
+    cursor: pointer;
+    width: 15px;
+    height: 15px;
+    margin: 10px;
+}
+
+.modal-report-user button{
+    position: absolute;
+    top: 450px;
+    left: calc(50% - 50px);
+    width: 100px;
+    border: 1px solid black;
+    background-color: #00000000;
+    color: #ffda01;
+    border-radius: 10px;
+    padding: 10px 30px;
+    transition: all .2s ease;
+}
+.modal-report-user button:hover{
+    cursor: pointer;
+    background-color: #ffda01;
+    color: black;
+    border: 1px solid black;
+    transform: scale(1.1);
+}
+
+.modal-report-user p#title-report-user{
+    font-size: 30px;
+    color: white;
+    position: absolute;
+    top: 30px;
+    width: 100%;
+    text-align: center;
+}
+
+.modal-report-user p#body-report-user{
+    font-size: 24px;
+    color: white;
+    position: absolute;
+    top: 70px;
+    width: 100%;
+    text-align: left;
+    padding: 30px;
+}

front/src/Administration/GlobalMessageManager.ts

@@ -20,6 +20,12 @@ export class GlobalMessageManager {
         this.Connection.receiveStopGlobalMessage((messageId: string) => {
             this.stopMessage(messageId);
         });
+
+        //receive signal to close message
+        this.Connection.receiveTeleportMessage((map: string) => {
+            console.log('map to teleport user', map);
+            //TODO teleport user on map
+        });
     }
 
     private playMessage(message : PlayGlobalMessageInterface){

front/src/Connexion/ConnectionManager.ts

@@ -29,24 +29,29 @@ class ConnectionManager {
             const roomSlug = data.roomSlug;
             urlManager.editUrlForRoom(roomSlug, organizationSlug, worldSlug);
 
-            const room = new Room(window.location.pathname);
+            const room = new Room(window.location.pathname + window.location.hash);
             return Promise.resolve(room);
         } else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
             const localUser = localUserStore.getLocalUser();
 
             if (localUser && localUser.jwtToken && localUser.uuid) {
-                this.localUser = localUser
+                this.localUser = localUser;
+                try {
+                    await this.verifyToken(localUser.jwtToken);
+                } catch(e) {
+                    // If the token is invalid, let's generate an anonymous one.
+                    console.error('JWT token invalid. Did it expire? Login anonymously instead.');
+                    await this.anonymousLogin();
+                }
             } else {
-                const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
+                await this.anonymousLogin();
-                this.localUser = new LocalUser(data.userUuid, data.authToken);
-                localUserStore.saveUser(this.localUser);
             }
             let roomId: string
             if (connexionType === GameConnexionTypes.empty) {
                 const defaultMapUrl = window.location.host.replace('play.', 'maps.') + URL_ROOM_STARTED;
                 roomId = urlManager.editUrlForRoom(defaultMapUrl, null, null);
             } else {
-                roomId = window.location.pathname;
+                roomId = window.location.pathname + window.location.hash;
             }
             const room = new Room(roomId);
             return Promise.resolve(room);
@@ -54,8 +59,9 @@ class ConnectionManager {
             const localUser = localUserStore.getLocalUser();
 
             if (localUser) {
-                this.localUser = localUser
+                this.localUser = localUser;
-                const room = new Room(window.location.pathname);
+                await this.verifyToken(localUser.jwtToken);
+                const room = new Room(window.location.pathname + window.location.hash);
                 return Promise.resolve(room);
             } else {
                 //todo: find some kind of fallback?
@@ -66,6 +72,16 @@ class ConnectionManager {
         return Promise.reject('Invalid URL');
     }
 
+    private async verifyToken(token: string): Promise<void> {
+        await Axios.get(`${API_URL}/verify`, {params: {token}});
+    }
+
+    private async anonymousLogin(): Promise<void> {
+        const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
+        this.localUser = new LocalUser(data.userUuid, data.authToken);
+        localUserStore.saveUser(this.localUser);
+    }
+
     public initBenchmark(): void {
         this.localUser = new LocalUser('', 'test');
     }

front/src/Connexion/ConnexionModels.ts

@@ -25,6 +25,8 @@ export enum EventMessage{
 
     PLAY_GLOBAL_MESSAGE = "play-global-message",
     STOP_GLOBAL_MESSAGE = "stop-global-message",
+
+    TELEPORT = "teleport",
 }
 
 export interface PointInterface {

front/src/Connexion/LocalUserStore.ts

@@ -1,5 +1,6 @@
 import {LocalUser} from "./LocalUser";
 
+//todo: add localstorage fallback
 class LocalUserStore {
     
     saveUser(localUser: LocalUser) {
@@ -10,6 +11,14 @@ class LocalUserStore {
         const data = localStorage.getItem('localUser');
         return data ? JSON.parse(data) : null;
     }
+    
+    setName(name:string): void {
+        window.localStorage.setItem('playerName', name);
+    }
+    
+    getName(): string {
+        return window.localStorage.getItem('playerName') ?? '';
+    }
      
 }
 

front/src/Connexion/Room.ts

@@ -6,8 +6,10 @@ export class Room {
     public readonly isPublic: boolean;
     private mapUrl: string|undefined;
     private instance: string|undefined;
+    public readonly hash: string;
 
     constructor(id: string) {
+        this.hash = '';
         if (id.startsWith('/')) {
             id = id.substr(1);
         }
@@ -19,6 +21,13 @@ export class Room {
         } else {
             throw new Error('Invalid room ID');
         }
+
+        const indexOfHash = this.id.indexOf('#');
+        if (indexOfHash !== -1) {
+            const idWithHash = this.id;
+            this.id = this.id.substr(0, indexOfHash);
+            this.hash = idWithHash.substr(indexOfHash + 1);
+        }
     }
 
     public async getMapUrl(): Promise<string> {

front/src/Connexion/RoomConnection.ts

@@ -20,7 +20,9 @@ import {
     WebRtcDisconnectMessage,
     WebRtcSignalToClientMessage,
     WebRtcSignalToServerMessage,
-    WebRtcStartMessage
+    WebRtcStartMessage,
+    ReportPlayerMessage,
+    TeleportMessageMessage
 } from "../Messages/generated/messages_pb"
 
 import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -146,6 +148,8 @@ export class RoomConnection implements RoomConnection {
                 this.dispatch(EventMessage.PLAY_GLOBAL_MESSAGE, message.getPlayglobalmessage());
             } else if (message.hasStopglobalmessage()) {
                 this.dispatch(EventMessage.STOP_GLOBAL_MESSAGE, message.getStopglobalmessage());
+            } else if (message.hasTeleportmessagemessage()) {
+                this.dispatch(EventMessage.TELEPORT, message.getTeleportmessagemessage());
             } else {
                 throw new Error('Unknown message received');
             }
@@ -403,7 +407,6 @@ export class RoomConnection implements RoomConnection {
             }
             callback(event);
         });
-
     }
 
     public getUserId(): number|null {
@@ -468,6 +471,12 @@ export class RoomConnection implements RoomConnection {
         });
     }
 
+    public receiveTeleportMessage(callback: (messageId: string) => void) {
+        return this.onMessage(EventMessage.TELEPORT, (message: TeleportMessageMessage) => {
+            callback(message.getMap());
+        });
+    }
+
     public emitGlobalMessage(message: PlayGlobalMessageInterface){
         console.log('emitGlobalMessage', message);
         const playGlobalMessage = new PlayGlobalMessage();
@@ -481,6 +490,17 @@ export class RoomConnection implements RoomConnection {
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
 
+    public emitReportPlayerMessage(reportedUserId: number, reportComment: string ): void {
+        const reportPlayerMessage = new ReportPlayerMessage();
+        reportPlayerMessage.setReporteduserid(reportedUserId);
+        reportPlayerMessage.setReportcomment(reportComment);
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setReportplayermessage(reportPlayerMessage);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
+
     public hasTag(tag: string): boolean {
         return this.tags.includes(tag);
     }

front/src/Phaser/Components/TextField.ts

@@ -1,7 +1,10 @@
 
 export class TextField extends Phaser.GameObjects.BitmapText {
-    constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
+    constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
         super(scene, x, y, 'main_font', text, 8);
-        this.scene.add.existing(this)
+        this.scene.add.existing(this);
+        if (center) {
+            this.setOrigin(0.5).setCenterAlign()
+        }
     }
 }

front/src/Phaser/Components/TextInput.ts

@@ -1,13 +1,15 @@
 
 export class TextInput extends Phaser.GameObjects.BitmapText {
-    private underLineLength = 10;
+    private minUnderLineLength = 4;
     private underLine: Phaser.GameObjects.Text;
 
     constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
         super(scene, x, y, 'main_font', text, 32);
+        this.setOrigin(0.5).setCenterAlign()
         this.scene.add.existing(this);
 
-        this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
+        this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
+        this.underLine.setOrigin(0.5)
 
 
         this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => {
@@ -16,23 +18,27 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
             } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
                 this.addLetter(event.key);
             }
+            this.underLine.text = this.getUnderLineBody(this.text.length);
             onChange(this.text);
         });
     }
+    
+    private getUnderLineBody(textLength:number): string {
+        if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength;
+        let text = '_______';
+        for (let i = this.minUnderLineLength; i < textLength; i++) {
+            text += '__'
+        }
+        return text;
+    }
 
     private deleteLetter() {
         this.text = this.text.substr(0, this.text.length - 1);
-        if (this.underLine.text.length > this.underLineLength) {
-            this.underLine.text = this.underLine.text.substr(0, this.underLine.text.length - 1);
-        }
     }
 
 
     private addLetter(letter: string) {
         this.text += letter;
-        if (this.text.length > this.underLineLength) {
-            this.underLine.text +=  '_';
-        }
     }
 
     getText(): string {

front/src/Phaser/Entity/Character.ts

@@ -46,6 +46,7 @@ export abstract class Character extends Container {
     public PlayerValue: string;
     public sprites: Map<string, Sprite>;
     private lastDirection: string = PlayerAnimationNames.WalkDown;
+    //private teleportation: Sprite;
 
     constructor(scene: Phaser.Scene,
                 x: number,
@@ -62,6 +63,7 @@ export abstract class Character extends Container {
 
         for (const texture of textures) {
             const sprite = new Sprite(scene, 0, 0, texture, frame);
+            sprite.setInteractive({useHandCursor: true});
             this.add(sprite);
             this.getPlayerAnimations(texture).forEach(d => {
                 this.scene.anims.create({
@@ -76,8 +78,17 @@ export abstract class Character extends Container {
             this.sprites.set(texture, sprite);
         }
 
+        /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
+        this.teleportation.setInteractive();
+        this.teleportation.visible = false;
+        this.teleportation.on('pointerup', () => {
+            this.report.visible = false;
+            this.teleportation.visible = false;
+        });
+        this.add(this.teleportation);*/
+
         this.PlayerValue = name;
-        this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
+        this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7);
         this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
         scene.add.existing(this.playerName);
 
@@ -178,6 +189,7 @@ export abstract class Character extends Container {
             //this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
         }
 
+        //todo:remove this, use a container tech to move the bubble instead
         if (this.bubble) {
             this.bubble.moveBubble(this.x, this.y);
         }

front/src/Phaser/Entity/RemotePlayer.ts

@@ -1,6 +1,7 @@
 import {GameScene} from "../Game/GameScene";
 import {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
+import {Sprite} from "./Sprite";
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
@@ -22,9 +23,6 @@ export class RemotePlayer extends Character {
 
         //set data
         this.userId = userId;
-
-        //the current player model should be push away by other players to prevent conflict
-        //this.setImmovable(false);
     }
 
     updatePosition(position: PointInterface): void {

front/src/Phaser/Entity/body_character.ts

@@ -1,4 +1,5 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
 
 export interface BodyResourceDescriptionInterface {
     name: string,
@@ -310,3 +311,28 @@ export const loadAllLayers = (load: LoaderPlugin) => {
         }
     }
 }
+
+export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
+    {name:'layout_modes', img:'resources/objects/layout_modes.png'},
+    {name:'teleportation', img:'resources/objects/teleportation.png'},
+];
+
+export const loadObject = (load: LoaderPlugin) => {
+    for (let j = 0; j < OBJECTS.length; j++) {
+        load.spritesheet(
+            OBJECTS[j].name,
+            OBJECTS[j].img,
+            {frameWidth: 32, frameHeight: 32}
+        )
+    }
+}
+
+export const loadPlayerCharacters = (load: LoaderPlugin) => {
+    PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
+        load.spritesheet(
+            playerResource.name,
+            playerResource.img,
+            {frameWidth: 32, frameHeight: 32}
+        );
+    });
+}

front/src/Phaser/Game/GameManager.ts

@@ -64,7 +64,7 @@ export class GameManager {
     public async goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
         const url = await this.startRoom.getMapUrl();
         console.log('Starting scene '+url);
-        scenePlugin.start(url, {startLayerName: 'global'});
+        scenePlugin.start(url);
     }
 }
 

front/src/Phaser/Game/GameScene.ts

@@ -25,7 +25,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {loadAllLayers} from "../Entity/body_character";
+import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
 import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
 import Texture = Phaser.Textures.Texture;
 import Sprite = Phaser.GameObjects.Sprite;
@@ -54,8 +54,7 @@ export enum Textures {
 }
 
 export interface GameSceneInitInterface {
-    initPosition: PointInterface|null,
+    initPosition: PointInterface|null
-    startLayerName: string|undefined
 }
 
 interface InitUserPositionEventInterface {
@@ -130,7 +129,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
-    private startLayerName: string|undefined;
     private presentationModeSprite!: Sprite;
     private chatModeSprite!: Sprite;
     private gameMap!: GameMap;
@@ -189,21 +187,9 @@ export class GameScene extends ResizableScene implements CenterListener {
         }
 
         //add player png
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
+        loadPlayerCharacters(this.load);
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
-
-        this.load.spritesheet(
-            'layout_modes',
-            'resources/objects/layout_modes.png',
-            {frameWidth: 32, frameHeight: 32}
-        );
-
         loadAllLayers(this.load);
+        loadObject(this.load);
 
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
@@ -315,8 +301,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     init(initData : GameSceneInitInterface) {
         if (initData.initPosition !== undefined) {
             this.initPosition = initData.initPosition;
-        } else if (initData.startLayerName !== undefined) {
-            this.startLayerName = initData.startLayerName;
         }
     }
 
@@ -331,7 +315,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         });
 
         //permit to set bound collision
-        this.physics.world.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
+        this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels);
 
         //add layer on map
         this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
@@ -341,7 +325,10 @@ export class GameScene extends ResizableScene implements CenterListener {
                 this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
             }
             if (layer.type === 'tilelayer' && this.getExitSceneUrl(layer) !== undefined) {
-                this.loadNextGame(layer, this.mapFile.width, this.mapFile.tilewidth, this.mapFile.tileheight);
+                this.loadNextGameFromExitSceneUrl(layer, this.mapFile.width);
+            } else if (layer.type === 'tilelayer' && this.getExitUrl(layer) !== undefined) {
+                console.log('Loading exitUrl ', this.getExitUrl(layer))
+                this.loadNextGameFromExitUrl(layer, this.mapFile.width);
             }
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
@@ -357,9 +344,9 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.startY = this.initPosition.y;
         } else {
             // Now, let's find the start layer
-            if (this.startLayerName) {
+            if (this.room.hash) {
                 for (const layer of this.mapFile.layers) {
-                    if (this.startLayerName === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
+                    if (this.room.hash === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
                         const startPosition = this.startUser(layer);
                         this.startX = startPosition.x;
                         this.startY = startPosition.y;
@@ -392,7 +379,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.EventToClickOnTile();
 
         //initialise list of other player
-        this.MapPlayers = this.physics.add.group({ immovable: true });
+        this.MapPlayers = this.physics.add.group({immovable: true});
 
         //create input to move
         this.userInputManager = new UserInputManager(this);
@@ -405,7 +392,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         // Let's generate the circle for the group delimiter
         const circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite');
-        if(circleElement) {
+        if (circleElement) {
             this.textures.remove('circleSprite');
         }
         this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96);
@@ -417,6 +404,13 @@ export class GameScene extends ResizableScene implements CenterListener {
         context.stroke();
         this.circleTexture.refresh();
 
+        // Let's alter browser history
+        let path = this.room.id;
+        if (this.room.hash) {
+            path += '#'+this.room.hash;
+        }
+        window.history.pushState({}, 'WorkAdventure', path);
+
         // Let's pause the scene if the connection is not established yet
         if (this.connection === undefined) {
             // Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking
@@ -430,7 +424,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         this.createPromiseResolve();
 
-        this.userInputManager.spaceEvent( () => {
+        this.userInputManager.spaceEvent(() => {
             this.outlinedItem?.activate();
         });
 
@@ -520,7 +514,7 @@ export class GameScene extends ResizableScene implements CenterListener {
                 top: camera.scrollY,
                 right: camera.scrollX + camera.width,
                 bottom: camera.scrollY + camera.height,
-            }).then((connection : RoomConnection) => {
+            }).then((connection: RoomConnection) => {
             this.connection = connection;
 
             //this.connection.emitPlayerDetailsMessage(gameManager.getPlayerName(), gameManager.getCharacterSelected())
@@ -580,8 +574,8 @@ export class GameScene extends ResizableScene implements CenterListener {
                 this.simplePeer.closeAllConnections();
                 this.simplePeer.unregister();
 
-                const gameSceneKey = 'somekey'+Math.round(Math.random()*10000);
+                const gameSceneKey = 'somekey' + Math.round(Math.random() * 10000);
-                const game : Phaser.Scene = GameScene.createFromUrl(this.room, this.MapUrlFile, gameSceneKey);
+                const game: Phaser.Scene = GameScene.createFromUrl(this.room, this.MapUrlFile, gameSceneKey);
                 this.scene.add(gameSceneKey, game, true,
                     {
                         initPosition: {
@@ -597,14 +591,14 @@ export class GameScene extends ResizableScene implements CenterListener {
             connection.onActionableEvent((message => {
                 const item = this.actionableItems.get(message.itemId);
                 if (item === undefined) {
-                    console.warn('Received an event about object "'+message.itemId+'" but cannot find this item on the map.');
+                    console.warn('Received an event about object "' + message.itemId + '" but cannot find this item on the map.');
                     return;
                 }
                 item.fire(message.event, message.state, message.parameters);
             }));
 
             // When connection is performed, let's connect SimplePeer
-            this.simplePeer = new SimplePeer(this.connection);
+            this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic);
             this.GlobalMessageManager = new GlobalMessageManager(this.connection);
 
             const self = this;
@@ -649,6 +643,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         }
     }
 
+    private getExitUrl(layer: ITiledMapLayer): string|undefined {
+        return this.getProperty(layer, "exitUrl") as string|undefined;
+    }
+
     private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
         return this.getProperty(layer, "exitSceneUrl") as string|undefined;
     }
@@ -673,15 +671,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         return obj.value;
     }
 
-    /**
+    private loadNextGameFromExitSceneUrl(layer: ITiledMapLayer, mapWidth: number) {
-     *
-     * @param layer
-     * @param mapWidth
-     * @param tileWidth
-     * @param tileHeight
-     */
-    //todo: push that into the gameManager
-    private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){
         const exitSceneUrl = this.getExitSceneUrl(layer);
         if (exitSceneUrl === undefined) {
             throw new Error('Layer is not an exit scene layer.');
@@ -691,17 +681,33 @@ export class GameScene extends ResizableScene implements CenterListener {
             instance = this.instance;
         }
 
-        console.log('existSceneUrl', exitSceneUrl);
+        //console.log('existSceneUrl', exitSceneUrl);
-        console.log('existSceneInstance', instance);
+        //console.log('existSceneInstance', instance);
-
-        // TODO: eventually compute a relative URL
-
-        // TODO: handle /@/ URL CASES!
 
         const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
         const absoluteExitSceneUrlWithoutProtocol = absoluteExitSceneUrl.toString().substr(absoluteExitSceneUrl.toString().indexOf('://')+3);
         const roomId = '_/'+instance+'/'+absoluteExitSceneUrlWithoutProtocol;
-        console.log("Foo", instance, absoluteExitSceneUrlWithoutProtocol);
+
+        this.loadNextGame(layer, mapWidth, roomId);
+    }
+
+    private loadNextGameFromExitUrl(layer: ITiledMapLayer, mapWidth: number) {
+        const exitUrl = this.getExitUrl(layer);
+        if (exitUrl === undefined) {
+            throw new Error('Layer is not an exit layer.');
+        }
+        const fullPath = new URL(exitUrl, window.location.toString()).pathname;
+
+        this.loadNextGame(layer, mapWidth, fullPath);
+    }
+
+    /**
+     *
+     * @param layer
+     * @param mapWidth
+     */
+    //todo: push that into the gameManager
+    private loadNextGame(layer: ITiledMapLayer, mapWidth: number, roomId: string){
         const room = new Room(roomId);
         gameManager.loadMap(room, this.scene);
         const exitSceneKey = roomId;
@@ -716,7 +722,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             const y : number = parseInt(((key + 1) / mapWidth).toString());
             const x : number = key - (y * mapWidth);
 
-            let hash = new URL(exitSceneUrl, this.MapUrlFile).hash;
+            let hash = new URL(roomId, this.MapUrlFile).hash;
             if (hash) {
                 hash = hash.substr(1);
             }
@@ -953,9 +959,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
-            this.scene.start(nextSceneKey.key, {
+            this.scene.start(nextSceneKey.key);
-                startLayerName: nextSceneKey.hash
-            });
         }
     }
 

front/src/Phaser/Login/CustomizeScene.ts

@@ -54,12 +54,8 @@ export class CustomizeScene extends ResizableScene {
 
     create() {
         this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
-        this.textField.setOrigin(0.5).setCenterAlign();
-        this.textField.setVisible(true);
 
-        this.enterField = new TextField(this, this.game.renderer.width / 2, 500, 'you can start the game by pressing SPACE..');
+        this.enterField = new TextField(this, this.game.renderer.width / 2, 40, 'you can start the game by pressing SPACE..');
-        this.enterField.setOrigin(0.5).setCenterAlign();
-        this.enterField.setVisible(true);
 
         this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
         this.add.existing(this.logo);

front/src/Phaser/Login/EnableCameraScene.ts

@@ -53,16 +53,12 @@ export class EnableCameraScene extends Phaser.Scene {
 
     create() {
         this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
-        this.textField.setOrigin(0.5).setCenterAlign();
 
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Press enter to start');
-        this.pressReturnField.setOrigin(0.5).setCenterAlign();
 
         this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
-        this.cameraNameField.setOrigin(0.5).setCenterAlign();
 
         this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, '');
-        this.microphoneNameField.setOrigin(0.5).setCenterAlign();
 
         this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
         this.arrowRight.setOrigin(0.5, 0.5);

front/src/Phaser/Login/LoginScene.ts

@@ -8,6 +8,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -28,9 +29,7 @@ export class LoginScene extends ResizableScene {
         super({
             key: LoginSceneName
         });
-        if (window.localStorage) {
+        this.name = localUserStore.getName();
-            this.name = window.localStorage.getItem('playerName') ?? '';
-        }
     }
 
     preload() {
@@ -54,22 +53,18 @@ export class LoginScene extends ResizableScene {
         cypressAsserter.initStarted();
 
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
-        this.textField.setOrigin(0.5).setCenterAlign()
+        this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, 8, this.name,(text: string) => {
-        this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4, this.name,(text: string) => {
             this.name = text;
-            if (window.localStorage) {
+            localUserStore.setName(text);
-                window.localStorage.setItem('playerName', text);
-            }
         });
 
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
-        this.pressReturnField.setOrigin(0.5).setCenterAlign()
 
         this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
         this.add.existing(this.logo);
 
         const infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
-        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
+        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
 
         this.input.keyboard.on('keyup-ENTER', () => {
             if (this.name === '') {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -57,10 +57,8 @@ export class SelectCharacterScene extends ResizableScene {
 
     create() {
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
-        this.textField.setOrigin(0.5).setCenterAlign()
 
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
-        this.pressReturnField.setOrigin(0.5).setCenterAlign()
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
 
@@ -123,30 +121,6 @@ export class SelectCharacterScene extends ResizableScene {
         } else {
             this.scene.start(CustomizeSceneName);
         }
-
-        // Do we have a start URL in the address bar? If so, let's redirect to this address
-        /*const instanceAndMapUrl = this.findMapUrl();
-        if (instanceAndMapUrl !== null) {
-            const [mapUrl, instance] = instanceAndMapUrl;
-            const key = gameManager.loadMap(mapUrl, this.scene, instance);
-            this.scene.start(key, {
-                startLayerName: window.location.hash ? window.location.hash.substr(1) : undefined
-            } as GameSceneInitInterface);
-            return {
-                mapUrlStart: mapUrl,
-                startInstance: instance
-            };
-        } else {
-            // If we do not have a map address in the URL, let's ask the server for a start map.
-            return gameManager.loadStartMap().then((startMap: StartMapInterface) => {
-                const key = gameManager.loadMap(window.location.protocol + "//" + startMap.mapUrlStart, this.scene, startMap.startInstance);
-                this.scene.start(key);
-                return startMap;
-            }).catch((err) => {
-                console.error(err);
-                throw err;
-            });
-        }*/
     }
 
     /**

front/src/Phaser/Reconnecting/FourOFourScene.ts

@@ -45,7 +45,6 @@ export class FourOFourScene extends Phaser.Scene {
         this.add.existing(this.logo);
 
         this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found");
-        this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign();
 
         let text: string = '';
         if (this.file !== undefined) {
@@ -56,7 +55,6 @@ export class FourOFourScene extends Phaser.Scene {
         }
 
         this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text);
-        this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign();
 
         const url = this.file ? this.file : this.url;
         if (url !== undefined) {

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -34,7 +34,6 @@ export class ReconnectingScene extends Phaser.Scene {
         this.add.existing(this.logo);
 
         this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
-        this.reconnectingField.setOrigin(0.5, 0.5).setCenterAlign();
 
         const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
         this.anims.create({

front/src/WebRtc/MediaManager.ts

@@ -10,6 +10,7 @@ const videoConstraint: boolean|MediaTrackConstraints = {
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
 export type StopScreenSharingCallback = (media: MediaStream) => void;
+export type ReportCallback = (message: string) => void;
 
 // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
 // TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!)
@@ -36,7 +37,6 @@ export class MediaManager {
     private cinemaBtn: HTMLDivElement;
     private monitorBtn: HTMLDivElement;
 
-
     constructor() {
 
         this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -91,17 +91,14 @@ export class MediaManager {
     }
 
     public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
-
         this.updatedLocalStreamCallBacks.add(callback);
     }
 
     public onStartScreenSharing(callback: StartScreenSharingCallback): void {
-
         this.startScreenSharingCallBacks.add(callback);
     }
 
     public onStopScreenSharing(callback: StopScreenSharingCallback): void {
-
         this.stopScreenSharingCallBacks.add(callback);
     }
 
@@ -342,8 +339,10 @@ export class MediaManager {
     /**
      *
      * @param userId
+     * @param reportCallBack
+     * @param userName
      */
-    addActiveVideo(userId: string, userName: string = ""){
+    addActiveVideo(userId: string, reportCallBack: ReportCallback|undefined, userName: string = ""){
         this.webrtcInAudio.play();
 
         userName = userName.toUpperCase();
@@ -355,12 +354,23 @@ export class MediaManager {
                 <div class="rtc-error" style="display: none"></div>
                 <i id="name-${userId}" style="background-color: ${color};">${userName}</i>
                 <img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
-                <video id="${userId}" autoplay></video>
+                ` +
+                ((reportCallBack!==undefined)?`<img id="report-${userId}" class="report active" src="resources/logos/report.svg">`:'')
+                +
+                `<video id="${userId}" autoplay></video>
             </div>
         `;
 
         layoutManager.add(DivImportance.Normal, userId, html);
 
+        if (reportCallBack) {
+            const reportBtn = this.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`);
+            reportBtn.addEventListener('click', (e: MouseEvent) => {
+                e.preventDefault();
+                this.showReportModal(userId, userName, reportCallBack);
+            });
+        }
+
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
     }
 
@@ -542,6 +552,64 @@ export class MediaManager {
         return elem as T;
     }
 
+    private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
+        //create report text area
+        const mainContainer = this.getElementByIdOrFail<HTMLDivElement>('main-container');
+
+        const divReport = document.createElement('div');
+        divReport.classList.add('modal-report-user');
+
+        const inputHidden = document.createElement('input');
+        inputHidden.id = 'input-report-user';
+        inputHidden.type = 'hidden';
+        inputHidden.value = userId;
+        divReport.appendChild(inputHidden);
+
+        const titleMessage = document.createElement('p');
+        titleMessage.id = 'title-report-user';
+        titleMessage.innerText = 'Open a report';
+        divReport.appendChild(titleMessage);
+
+        const bodyMessage = document.createElement('p');
+        bodyMessage.id = 'body-report-user';
+        bodyMessage.innerText = `You are about to open a report regarding an offensive conduct from user ${userName.toUpperCase()}. Please explain to us how you think ${userName.toUpperCase()} breached the code of conduct.`;
+        divReport.appendChild(bodyMessage);
+
+        const imgReportUser = document.createElement('img');
+        imgReportUser.id = 'img-report-user';
+        imgReportUser.src = 'resources/logos/report.svg';
+        divReport.appendChild(imgReportUser);
+
+        const textareaUser = document.createElement('textarea');
+        textareaUser.id = 'textarea-report-user';
+        textareaUser.placeholder = 'Write ...';
+        divReport.appendChild(textareaUser);
+
+        const buttonReport = document.createElement('button');
+        buttonReport.id = 'button-save-report-user';
+        buttonReport.innerText = 'Report';
+        buttonReport.addEventListener('click', () => {
+            if(!textareaUser.value){
+                textareaUser.style.border = '1px solid red'
+                return;
+            }
+            reportCallBack(textareaUser.value);
+            divReport.remove();
+        });
+        divReport.appendChild(buttonReport);
+
+        const buttonCancel = document.createElement('img');
+        buttonCancel.id = 'cancel-report-user';
+        buttonCancel.src = 'resources/logos/close.svg';
+        buttonCancel.addEventListener('click', () => {
+            divReport.remove();
+        });
+        divReport.appendChild(buttonCancel);
+
+        mainContainer.appendChild(divReport);
+    }
+
+
 }
 
 export const mediaManager = new MediaManager();

front/src/WebRtc/SimplePeer.ts

@@ -29,8 +29,6 @@ export interface PeerConnectionListener {
  * This class manages connections to all the peers in the same group as me.
  */
 export class SimplePeer {
-    private Connection: RoomConnection;
-    private WebRtcRoomId: string;
     private Users: Array<UserSimplePeerInterface> = new Array<UserSimplePeerInterface>();
 
     private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
@@ -40,13 +38,12 @@ export class SimplePeer {
     private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
     private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
 
-    constructor(Connection: RoomConnection, WebRtcRoomId: string = "test-webrtc") {
+    constructor(private Connection: RoomConnection, private enableReporting: boolean) {
-        this.Connection = Connection;
-        this.WebRtcRoomId = WebRtcRoomId;
         // We need to go through this weird bound function pointer in order to be able to "free" this reference later.
         this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
         this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
         this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
+
         mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
         mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
         mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
@@ -145,7 +142,12 @@ export class SimplePeer {
         }
 
         mediaManager.removeActiveVideo("" + user.userId);
-        mediaManager.addActiveVideo("" + user.userId, name);
+
+        const reportCallback = this.enableReporting ? (comment: string) => {
+                this.reportUser(user.userId, comment);
+            }: undefined;
+
+        mediaManager.addActiveVideo("" + user.userId, reportCallback, name);
 
         const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
         // When a connection is established to a video stream, and if a screen sharing is taking place,
@@ -363,6 +365,13 @@ export class SimplePeer {
         }
     }
 
+    /**
+     * Triggered locally when clicking on the report button
+     */
+    public reportUser(userId: number, message: string) {
+        this.Connection.emitReportPlayerMessage(userId, message)
+    }
+
     private sendLocalScreenSharingStreamToUser(userId: number): void {
         // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
         if (this.PeerScreenSharingConnectionArray.has(userId)) {

messages/messages.proto

@@ -48,6 +48,11 @@ message WebRtcSignalToServerMessage {
   string signal = 2;
 }
 
+message ReportPlayerMessage {
+  int32 reportedUserId = 1;
+  string reportComment = 2;
+}
+
 message ClientToServerMessage {
   oneof message {
     UserMovesMessage userMovesMessage = 2;
@@ -59,6 +64,7 @@ message ClientToServerMessage {
     WebRtcSignalToServerMessage webRtcScreenSharingSignalToServerMessage = 8;
     PlayGlobalMessage playGlobalMessage = 9;
     StopGlobalMessage stopGlobalMessage = 10;
+    ReportPlayerMessage reportPlayerMessage = 11;
   }
 }
 
@@ -157,6 +163,10 @@ message WebRtcSignalToClientMessage {
   string signal = 2;
 }
 
+message TeleportMessageMessage{
+  string map = 1;
+}
+
 message ServerToClientMessage {
   oneof message {
     BatchMessage batchMessage = 1;
@@ -168,5 +178,6 @@ message ServerToClientMessage {
     WebRtcDisconnectMessage webRtcDisconnectMessage = 7;
     PlayGlobalMessage playGlobalMessage = 8;
     StopGlobalMessage stopGlobalMessage = 9;
+    TeleportMessageMessage teleportMessageMessage = 10;
   }
 }

website/dist/create-map.html

@@ -44,7 +44,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col">
+            < class="col">
                 <h2 id="tools-you-will-need" class="pixel-title">Tools you will need</h2>
                 <p>In order to build your own map for WorkAdventure, you need:</p>
                 <ul>
@@ -131,11 +131,22 @@
                 <p>In order to place an exit on your scene that leads to another scene:</p>
                 <ul>
                     <li>You must create a specific layer. When a character reaches ANY tile of that layer, it will exit the scene.</li>
-                    <li>In layer properties, you MUST add &quot;exitSceneUrl&quot; property. It represents the map URL of the next scene. For example : <code>/&lt;map folder&gt;/&lt;map&gt;.json</code>. Be careful, if you want the next map to be correctly loaded, you must check that the map files are in folder <code>back/src/Assets/Maps/&lt;your map folder&gt;</code>. The files will be accessible by url <code>&lt;HOST&gt;/map/files/&lt;your map folder&gt;/...</code>.</li>
+                    <li>In layer properties, you MUST add "exitUrl&quot; property. It represents the URL of the next scene. You can put relative or absolute URLs.</li>
-                    <li>In layer properties, you CAN add an &quot;exitInstance&quot; property. If set, you will join the map of the specified instance. Otherwise, you will stay on the same instance.</li>
                     <li>If you want to have multiple exits, you can create many layers with name &quot;exit&quot;. Each layer has a different key <code>exitSceneUrl</code> and have tiles that represent exits to another scene.</li>
                 </ul>
+                <p>
+                    <strong>Understanding map URLs in WorkAdventure:</strong><br/>
+                    There are 2 kinds of URLs in WorkAdventure:
+                    <ul>
+                        <li>Public URLs are in the form https://play.workadventu.re/_/[instance]/[server]/[path to map]</li>
+                        <li>Private URLs (used in paid accounts) are in the form https://play.workadventu.re/@/[organization]/[world]/[map]</li>
+                    </ul>
+                    Assuming your JSON map is hosted at "https://example.com/my/map.json", then you can browse your map at "https://play.workadventu.re/_/global/example.com/my/map.json".
+                    Here, "global" is a name of an "instance" of your map. You can put anything instead of "global" here. People on the same instance of the map can see each others.
+                    If 2 users use 2 different instances, they are on the same map, but in 2 parallel universes. They cannot see each other.
+                </p>
                 <p class="text-center"><img src="docs/exit_layer_map.png" alt="" style="width: 90%"></p>
+                <p>Note: in older releases of WorkAdventure, you could link to a map file directly using properties "exitSceneUrl&quot; and &quot;exitInstance&quot;. Those properties are now deprecated. Use "exitUrl" instead.</p>
                 <h3 id="defining-several-entry-points" class="pixel-title">Defining several entry points</h3>
                 <p>Often your map will have several exits, and therefore, several entry points. For instance, if there
                     is an exit by a door that leads to the garden map, when you come back from the garden you expect to
@@ -146,7 +157,7 @@
                     <li>You must create a specific layer. When a character enters the map by this entry point, it will enter the map randomly on ANY tile of that layer.</li>
                     <li>In layer properties, you MUST add a boolean &quot;startLayer&quot; property. It should be set to true.</li>
                     <li>The name of the entry point is the name of the layer</li>
-                    <li>To enter via this entry point, simply add a hash with the entry point name to the URL (&quot;#[<em>startLayerName</em>]&quot;). For instance: &quot;<a href="https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point">https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point</a>&quot;.</li>
+                    <li>To enter via this entry point, simply add a hash with the entry point name to the URL (&quot;#[<em>startLayerName</em>]&quot;). For instance: &quot;https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point&quot;.</li>
                     <li>You can of course use the &quot;#&quot; notation in an exit scene URL (so an exit scene URL will point to a given entry scene URL)</li>
                 </ul>