Merge branch 'develop' of github.com:thecodingmachine/workadventure into 2daysLimit

2022-01-05 10:19:23 +01:00 · 2022-01-05 10:19:23 +01:00 · c85679b42c
commit c85679b42c
parent 5d729d0560 20538b6287
117 changed files with 3650 additions and 3102 deletions
--- a/.github/workflows/continuous_integration.yml
+++ b/.github/workflows/continuous_integration.yml
@ -39,7 +39,7 @@ jobs:
        working-directory: "messages"

      - name: "Build proto messages"
-        run: yarn run proto && yarn run copy-to-front && yarn run json-copy-to-front
+        run: yarn run ts-proto && yarn run copy-to-front-ts-proto && yarn run json-copy-to-front
        working-directory: "messages"

      - name: "Create index.html"
--- a/.github/workflows/end_to_end_tests.yml
+++ b/.github/workflows/end_to_end_tests.yml
@ -11,10 +11,43 @@ on:

 jobs:

+  start-runner:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false)
+    name: Start self-hosted EC2 runner
+    runs-on: ubuntu-latest
+    outputs:
+      label: ${{ steps.start-ec2-runner.outputs.label }}
+      ec2-instance-id: ${{ steps.start-ec2-runner.outputs.ec2-instance-id }}
+    steps:
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+      - name: Start EC2 runner
+        id: start-ec2-runner
+        uses: machulav/ec2-github-runner@v2
+        with:
+          mode: start
+          github-token: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+          ec2-image-id: ami-094dbcc53250a2480
+          ec2-instance-type: t3.xlarge
+          subnet-id: subnet-0ac40025f559df1bc
+          security-group-id: sg-0e36e96e3b8ed2d64
+          #iam-role-name: my-role-name # optional, requires additional permissions
+          #aws-resource-tags: > # optional, requires additional permissions
+          #  [
+          #    {"Key": "Name", "Value": "ec2-github-runner"},
+          #    {"Key": "GitHubRepository", "Value": "${{ github.repository }}"}
+          #  ]
+
+
  end-to-end-tests:
    name: "End-to-end testcafe tests"

-    runs-on: "ubuntu-latest"
+    needs: start-runner # required to start the main job when the runner is ready
+    runs-on: ${{ needs.start-runner.outputs.label }} # run the job on the newly created runner

    steps:
      - name: "Checkout"
@ -67,3 +100,27 @@ jobs:
      - name: Display logs
        if: ${{ failure() }}
        run: docker-compose logs
+
+  stop-runner:
+    name: Stop self-hosted EC2 runner
+    needs:
+      - start-runner # required to get output from the start-runner job
+      - end-to-end-tests # required to wait when the main job is done
+    runs-on: ubuntu-latest
+    if: ${{ always() }} # required to stop the runner even if the error happened in the previous jobs
+    steps:
+      - name: Configure AWS credentials
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false)
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+      - name: Stop EC2 runner
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false)
+        uses: machulav/ec2-github-runner@v2
+        with:
+          mode: stop
+          github-token: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
+          label: ${{ needs.start-runner.outputs.label }}
+          ec2-instance-id: ${{ needs.start-runner.outputs.ec2-instance-id }}
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@ -36,7 +36,7 @@ jobs:
        working-directory: "messages"

      - name: "Build proto messages"
-        run: yarn run proto && yarn run copy-to-front && yarn run json-copy-to-front
+        run: yarn run ts-proto && yarn run copy-to-front-ts-proto && yarn run json-copy-to-front
        working-directory: "messages"

      - name: "Create index.html"
--- a/back/Dockerfile
+++ b/back/Dockerfile
@ -1,11 +1,11 @@
 # protobuf build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
 WORKDIR /usr/src
 COPY messages .
 RUN yarn install && yarn proto

 # typescript build
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder2
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 RUN yarn install
@ -15,7 +15,7 @@ ENV NODE_ENV=production
 RUN yarn run tsc

 # final production image
-FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76
+FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d
 WORKDIR /usr/src
 COPY back/yarn.lock back/package.json ./
 COPY --from=builder2 /usr/src/dist /usr/src/dist
--- a/back/package.json
+++ b/back/package.json
@ -68,14 +68,14 @@
    "@types/mkdirp": "^1.0.1",
    "@types/redis": "^2.8.31",
    "@types/uuidv4": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "eslint": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "eslint": "^8.5.0",
    "jasmine": "^3.5.0",
    "lint-staged": "^11.0.0",
    "prettier": "^2.3.1",
-    "ts-node-dev": "^1.0.0-pre.44",
-    "typescript": "^3.8.3"
+    "ts-node-dev": "^1.1.8",
+    "typescript": "^4.5.4"
  },
  "lint-staged": {
    "*.ts": [
--- a/back/server.ts
+++ b/back/server.ts
@ -10,6 +10,6 @@ App.listen(HTTP_PORT, () => console.log(`WorkAdventure HTTP API starting on port
 const server = new grpc.Server();
 server.addService<IRoomManagerServer>(RoomManagerService, roomManager);

-server.bind('0.0.0.0:'+GRPC_PORT, grpc.ServerCredentials.createInsecure());
+server.bind(`0.0.0.0:${GRPC_PORT}`, grpc.ServerCredentials.createInsecure());
 server.start();
 console.log('WorkAdventure HTTP/2 API starting on port %d!', GRPC_PORT);
--- a/back/src/Controller/DebugController.ts
+++ b/back/src/Controller/DebugController.ts
@ -36,9 +36,11 @@ export class DebugController {
                                    return "BatchedMessages";
                                }
                                if (value instanceof Map) {
-                                    const obj: any = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+                                    const obj: { [key: string | number]: unknown } = {};
                                    for (const [mapKey, mapValue] of value.entries()) {
-                                        obj[mapKey] = mapValue;
+                                        if (typeof mapKey === "number" || typeof mapKey === "string") {
+                                            obj[mapKey] = mapValue;
+                                        }
                                    }
                                    return obj;
                                } else if (value instanceof Set) {
--- a/back/src/Controller/PrometheusController.ts
+++ b/back/src/Controller/PrometheusController.ts
@ -1,12 +1,10 @@
 import { App } from "../Server/sifrr.server";
 import { HttpRequest, HttpResponse } from "uWebSockets.js";
-const register = require("prom-client").register;
-const collectDefaultMetrics = require("prom-client").collectDefaultMetrics;
+import { register, collectDefaultMetrics } from "prom-client";

 export class PrometheusController {
    constructor(private App: App) {
        collectDefaultMetrics({
-            timeout: 10000,
            gcDurationBuckets: [0.001, 0.01, 0.1, 1, 2, 5], // These are the default buckets.
        });

--- a/back/src/Model/GameRoom.ts
+++ b/back/src/Model/GameRoom.ts
@ -21,6 +21,7 @@ import {
    SubToPusherRoomMessage,
    VariableMessage,
    VariableWithTagMessage,
+    ServerToClientMessage,
 } from "../Messages/generated/messages_pb";
 import { ProtobufUtils } from "../Model/Websocket/ProtobufUtils";
 import { RoomSocket, ZoneSocket } from "src/RoomManager";
@ -34,6 +35,7 @@ import { ADMIN_API_URL } from "../Enum/EnvironmentVariable";
 import { LocalUrlError } from "../Services/LocalUrlError";
 import { emitErrorOnRoomSocket } from "../Services/MessageHelpers";
 import { VariableError } from "../Services/VariableError";
+import { isRoomRedirect } from "../Services/AdminApi/RoomRedirect";

 export type ConnectCallback = (user: User, group: Group) => void;
 export type DisconnectCallback = (user: User, group: Group) => void;
@ -109,10 +111,6 @@ export class GameRoom {
        return gameRoom;
    }

-    public getGroups(): Group[] {
-        return Array.from(this.groups.values());
-    }
-
    public getUsers(): Map<number, User> {
        return this.users;
    }
@ -175,6 +173,14 @@ export class GameRoom {
        if (userObj !== undefined && typeof userObj.group !== "undefined") {
            this.leaveGroup(userObj);
        }
+
+        if (user.hasFollowers()) {
+            user.stopLeading();
+        }
+        if (user.following) {
+            user.following.delFollower(user);
+        }
+
        this.users.delete(user.id);
        this.usersByUuid.delete(user.uuid);

@ -213,8 +219,8 @@ export class GameRoom {
        if (user.silent) {
            return;
        }
-
-        if (user.group === undefined) {
+        const group = user.group;
+        if (group === undefined) {
            // If the user is not part of a group:
            //  should he join a group?

@ -245,13 +251,40 @@ export class GameRoom {
        } else {
            // If the user is part of a group:
            //  should he leave the group?
-            const distance = GameRoom.computeDistanceBetweenPositions(user.getPosition(), user.group.getPosition());
-            if (distance > this.groupRadius) {
-                this.leaveGroup(user);
+            let noOneOutOfBounds = true;
+            group.getUsers().forEach((foreignUser: User) => {
+                if (foreignUser.group === undefined) {
+                    return;
+                }
+                const usrPos = foreignUser.getPosition();
+                const grpPos = foreignUser.group.getPosition();
+                const distance = GameRoom.computeDistanceBetweenPositions(usrPos, grpPos);
+
+                if (distance > this.groupRadius) {
+                    if (foreignUser.hasFollowers() || foreignUser.following) {
+                        // If one user is out of the group bounds BUT following, the group still exists... but should be hidden.
+                        // We put it in 'outOfBounds' mode
+                        group.setOutOfBounds(true);
+                        noOneOutOfBounds = false;
+                    } else {
+                        this.leaveGroup(foreignUser);
+                    }
+                }
+            });
+            if (noOneOutOfBounds && !user.group?.isEmpty()) {
+                group.setOutOfBounds(false);
            }
        }
    }

+    public sendToOthersInGroupIncludingUser(user: User, message: ServerToClientMessage): void {
+        user.group?.getUsers().forEach((currentUser: User) => {
+            if (currentUser.id !== user.id) {
+                currentUser.socket.write(message);
+            }
+        });
+    }
+
    setSilent(user: User, silent: boolean) {
        if (user.silent === silent) {
            return;
@ -279,12 +312,9 @@ export class GameRoom {
        }
        group.leave(user);
        if (group.isEmpty()) {
-            this.positionNotifier.leave(group);
            group.destroy();
            if (!this.groups.has(group)) {
-                throw new Error(
-                    "Could not find group " + group.getId() + " referenced by user " + user.id + " in World."
-                );
+                throw new Error(`Could not find group ${group.getId()} referenced by user ${user.id} in World.`);
            }
            this.groups.delete(group);
            //todo: is the group garbage collected?
@ -485,9 +515,9 @@ export class GameRoom {
        }

        const result = await adminApi.fetchMapDetails(roomUrl);
-        if (!isMapDetailsData(result)) {
-            console.error("Unexpected room details received from server", result);
-            throw new Error("Unexpected room details received from server");
+        if (isRoomRedirect(result)) {
+            console.error("Unexpected room redirect received while querying map details", result);
+            throw new Error("Unexpected room redirect received while querying map details");
        }
        return result;
    }
--- a/back/src/Model/Group.ts
+++ b/back/src/Model/Group.ts
@ -16,6 +16,10 @@ export class Group implements Movable {
    private wasDestroyed: boolean = false;
    private roomId: string;
    private currentZone: Zone | null = null;
+    /**
+     * When outOfBounds = true, a user if out of the bounds of the group BUT still considered inside it (because we are in following mode)
+     */
+    private outOfBounds = false;

    constructor(
        roomId: string,
@ -78,6 +82,10 @@ export class Group implements Movable {
        this.x = x;
        this.y = y;

+        if (this.outOfBounds) {
+            return;
+        }
+
        if (oldX === undefined) {
            this.currentZone = this.positionNotifier.enter(this);
        } else {
@ -116,7 +124,7 @@ export class Group implements Movable {
    leave(user: User): void {
        const success = this.users.delete(user);
        if (success === false) {
-            throw new Error("Could not find user " + user.id + " in the group " + this.id);
+            throw new Error(`Could not find user ${user.id} in the group ${this.id}`);
        }
        user.group = undefined;

@ -133,6 +141,10 @@ export class Group implements Movable {
     * Usually used when there is only one user left.
     */
    destroy(): void {
+        if (!this.outOfBounds) {
+            this.positionNotifier.leave(this);
+        }
+
        for (const user of this.users) {
            this.leave(user);
        }
@ -142,4 +154,26 @@ export class Group implements Movable {
    get getSize() {
        return this.users.size;
    }
+
+    /**
+     * A group can have at most one person leading the way in it.
+     */
+    get leader(): User | undefined {
+        for (const user of this.users) {
+            if (user.hasFollowers()) {
+                return user;
+            }
+        }
+        return undefined;
+    }
+
+    setOutOfBounds(outOfBounds: boolean): void {
+        if (this.outOfBounds === true && outOfBounds === false) {
+            this.positionNotifier.enter(this);
+            this.outOfBounds = false;
+        } else if (this.outOfBounds === false && outOfBounds === true) {
+            this.positionNotifier.leave(this);
+            this.outOfBounds = true;
+        }
+    }
 }
--- a/back/src/Model/User.ts
+++ b/back/src/Model/User.ts
@ -7,6 +7,8 @@ import { ServerDuplexStream } from "grpc";
 import {
    BatchMessage,
    CompanionMessage,
+    FollowAbortMessage,
+    FollowConfirmationMessage,
    PusherToBackMessage,
    ServerToClientMessage,
    SetPlayerDetailsMessage,
@ -19,6 +21,8 @@ export type UserSocket = ServerDuplexStream<PusherToBackMessage, ServerToClientM
 export class User implements Movable {
    public listenedZones: Set<Zone>;
    public group?: Group;
+    private _following: User | undefined;
+    private followedBy: Set<User> = new Set<User>();

    public constructor(
        public id: number,
@ -50,6 +54,45 @@ export class User implements Movable {
        this.positionNotifier.updatePosition(this, position, oldPosition);
    }

+    public addFollower(follower: User): void {
+        this.followedBy.add(follower);
+        follower._following = this;
+
+        const message = new FollowConfirmationMessage();
+        message.setFollower(follower.id);
+        message.setLeader(this.id);
+        const clientMessage = new ServerToClientMessage();
+        clientMessage.setFollowconfirmationmessage(message);
+        this.socket.write(clientMessage);
+    }
+
+    public delFollower(follower: User): void {
+        this.followedBy.delete(follower);
+        follower._following = undefined;
+
+        const message = new FollowAbortMessage();
+        message.setFollower(follower.id);
+        message.setLeader(this.id);
+        const clientMessage = new ServerToClientMessage();
+        clientMessage.setFollowabortmessage(message);
+        this.socket.write(clientMessage);
+        follower.socket.write(clientMessage);
+    }
+
+    public hasFollowers(): boolean {
+        return this.followedBy.size !== 0;
+    }
+
+    get following(): User | undefined {
+        return this._following;
+    }
+
+    public stopLeading(): void {
+        for (const follower of this.followedBy) {
+            this.delFollower(follower);
+        }
+    }
+
    private batchedMessages: BatchMessage = new BatchMessage();
    private batchTimeout: NodeJS.Timeout | null = null;

--- a/back/src/Model/Zone.ts
+++ b/back/src/Model/Zone.ts
@ -39,21 +39,13 @@ export class Zone {
        const result = this.things.delete(thing);
        if (!result) {
            if (thing instanceof User) {
-                throw new Error("Could not find user in zone " + thing.id);
+                throw new Error(`Could not find user in zone ${thing.id}`);
            }
            if (thing instanceof Group) {
                throw new Error(
-                    "Could not find group " +
-                        thing.getId() +
-                        " in zone (" +
-                        this.x +
-                        "," +
-                        this.y +
-                        "). Position of group: (" +
-                        thing.getPosition().x +
-                        "," +
-                        thing.getPosition().y +
-                        ")"
+                    `Could not find group ${thing.getId()} in zone (${this.x},${this.y}). Position of group: (${
+                        thing.getPosition().x
+                    },${thing.getPosition().y})`
                );
            }
        }
--- a/back/src/RoomManager.ts
+++ b/back/src/RoomManager.ts
@ -9,6 +9,9 @@ import {
    BatchToPusherMessage,
    BatchToPusherRoomMessage,
    EmotePromptMessage,
+    FollowRequestMessage,
+    FollowConfirmationMessage,
+    FollowAbortMessage,
    EmptyMessage,
    ItemEventMessage,
    JoinRoomMessage,
@ -103,11 +106,6 @@ const roomManager: IRoomManagerServer = {
                                user,
                                message.getWebrtcscreensharingsignaltoservermessage() as WebRtcSignalToServerMessage
                            );
-                        } else if (message.hasPlayglobalmessage()) {
-                            socketManager.emitPlayGlobalMessage(
-                                room,
-                                message.getPlayglobalmessage() as PlayGlobalMessage
-                            );
                        } else if (message.hasQueryjitsijwtmessage()) {
                            socketManager.handleQueryJitsiJwtMessage(
                                user,
@ -119,6 +117,24 @@ const roomManager: IRoomManagerServer = {
                                user,
                                message.getEmotepromptmessage() as EmotePromptMessage
                            );
+                        } else if (message.hasFollowrequestmessage()) {
+                            socketManager.handleFollowRequestMessage(
+                                room,
+                                user,
+                                message.getFollowrequestmessage() as FollowRequestMessage
+                            );
+                        } else if (message.hasFollowconfirmationmessage()) {
+                            socketManager.handleFollowConfirmationMessage(
+                                room,
+                                user,
+                                message.getFollowconfirmationmessage() as FollowConfirmationMessage
+                            );
+                        } else if (message.hasFollowabortmessage()) {
+                            socketManager.handleFollowAbortMessage(
+                                room,
+                                user,
+                                message.getFollowabortmessage() as FollowAbortMessage
+                            );
                        } else if (message.hasSendusermessage()) {
                            const sendUserMessage = message.getSendusermessage();
                            socketManager.handleSendUserMessage(user, sendUserMessage as SendUserMessage);
@ -166,7 +182,7 @@ const roomManager: IRoomManagerServer = {
        socketManager
            .addZoneListener(call, zoneMessage.getRoomid(), zoneMessage.getX(), zoneMessage.getY())
            .catch((e) => {
-                emitErrorOnZoneSocket(call, e.toString());
+                emitErrorOnZoneSocket(call, e);
            });

        call.on("cancelled", () => {
@ -196,7 +212,7 @@ const roomManager: IRoomManagerServer = {
        const roomMessage = call.request;

        socketManager.addRoomListener(call, roomMessage.getRoomid()).catch((e) => {
-            emitErrorOnRoomSocket(call, e.toString());
+            emitErrorOnRoomSocket(call, e);
        });

        call.on("cancelled", () => {
--- a/back/src/Server/server/baseapp.ts
+++ b/back/src/Server/server/baseapp.ts
@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import { Readable } from "stream";
 import { us_listen_socket_close, TemplatedApp, HttpResponse, HttpRequest } from "uWebSockets.js";

--- a/back/src/Server/server/formdata.ts
+++ b/back/src/Server/server/formdata.ts
@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import { createWriteStream } from "fs";
 import { join, dirname } from "path";
 import Busboy from "busboy";
--- a/back/src/Server/server/utils.ts
+++ b/back/src/Server/server/utils.ts
@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import { ReadStream } from "fs";

 // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/back/src/Services/AdminApi.ts
+++ b/back/src/Services/AdminApi.ts
@ -1,7 +1,7 @@
 import { ADMIN_API_TOKEN, ADMIN_API_URL } from "../Enum/EnvironmentVariable";
 import Axios from "axios";
-import { MapDetailsData } from "./AdminApi/MapDetailsData";
-import { RoomRedirect } from "./AdminApi/RoomRedirect";
+import { isMapDetailsData, MapDetailsData } from "./AdminApi/MapDetailsData";
+import { isRoomRedirect, RoomRedirect } from "./AdminApi/RoomRedirect";

 class AdminApi {
    async fetchMapDetails(playUri: string): Promise<MapDetailsData | RoomRedirect> {
@ -17,6 +17,12 @@ class AdminApi {
            headers: { Authorization: `${ADMIN_API_TOKEN}` },
            params,
        });
+
+        if (!isMapDetailsData(res.data) && !isRoomRedirect(res.data)) {
+            console.error("Unexpected answer from the /api/map admin endpoint.", res.data);
+            throw new Error("Unexpected answer from the /api/map admin endpoint.");
+        }
+
        return res.data;
    }
 }
--- a/back/src/Services/ClientEventsEmitter.ts
+++ b/back/src/Services/ClientEventsEmitter.ts
@ -1,4 +1,4 @@
-const EventEmitter = require("events");
+import { EventEmitter } from "events";

 const clientJoinEvent = "clientJoin";
 const clientLeaveEvent = "clientLeave";
--- a/back/src/Services/MapFetcher.ts
+++ b/back/src/Services/MapFetcher.ts
@ -32,7 +32,7 @@ class MapFetcher {
            //throw new Error("Invalid map format for map " + mapUrl);
            console.error("Invalid map format for map " + mapUrl);
        }
-
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-return */
        return res.data;
    }

--- a/back/src/Services/MessageHelpers.ts
+++ b/back/src/Services/MessageHelpers.ts
@ -10,7 +10,19 @@ import {
 import { UserSocket } from "_Model/User";
 import { RoomSocket, ZoneSocket } from "../RoomManager";

-export function emitError(Client: UserSocket, message: string): void {
+function getMessageFromError(error: unknown): string {
+    if (error instanceof Error) {
+        return error.message;
+    } else if (typeof error === "string") {
+        return error;
+    } else {
+        return "Unknown error";
+    }
+}
+
+export function emitError(Client: UserSocket, error: unknown): void {
+    const message = getMessageFromError(error);
+
    const errorMessage = new ErrorMessage();
    errorMessage.setMessage(message);

@ -23,8 +35,9 @@ export function emitError(Client: UserSocket, message: string): void {
    console.warn(message);
 }

-export function emitErrorOnRoomSocket(Client: RoomSocket, message: string): void {
-    console.error(message);
+export function emitErrorOnRoomSocket(Client: RoomSocket, error: unknown): void {
+    console.error(error);
+    const message = getMessageFromError(error);

    const errorMessage = new ErrorMessage();
    errorMessage.setMessage(message);
@ -41,8 +54,9 @@ export function emitErrorOnRoomSocket(Client: RoomSocket, message: string): void
    console.warn(message);
 }

-export function emitErrorOnZoneSocket(Client: ZoneSocket, message: string): void {
-    console.error(message);
+export function emitErrorOnZoneSocket(Client: ZoneSocket, error: unknown): void {
+    console.error(error);
+    const message = getMessageFromError(error);

    const errorMessage = new ErrorMessage();
    errorMessage.setMessage(message);
--- a/back/src/Services/SocketManager.ts
+++ b/back/src/Services/SocketManager.ts
@ -30,6 +30,9 @@ import {
    BanUserMessage,
    RefreshRoomMessage,
    EmotePromptMessage,
+    FollowRequestMessage,
+    FollowConfirmationMessage,
+    FollowAbortMessage,
    VariableMessage,
    BatchToPusherRoomMessage,
    SubToPusherRoomMessage,
@ -197,7 +200,7 @@ export class SocketManager {
        webrtcSignalToClient.setSignal(data.getSignal());
        // TODO: only compute credentials if data.signal.type === "offer"
        if (TURN_STATIC_AUTH_SECRET !== "") {
-            const { username, password } = this.getTURNCredentials("" + user.id, TURN_STATIC_AUTH_SECRET);
+            const { username, password } = this.getTURNCredentials(user.id.toString(), TURN_STATIC_AUTH_SECRET);
            webrtcSignalToClient.setWebrtcusername(username);
            webrtcSignalToClient.setWebrtcpassword(password);
        }
@ -227,7 +230,7 @@ export class SocketManager {
        webrtcSignalToClient.setSignal(data.getSignal());
        // TODO: only compute credentials if data.signal.type === "offer"
        if (TURN_STATIC_AUTH_SECRET !== "") {
-            const { username, password } = this.getTURNCredentials("" + user.id, TURN_STATIC_AUTH_SECRET);
+            const { username, password } = this.getTURNCredentials(user.id.toString(), TURN_STATIC_AUTH_SECRET);
            webrtcSignalToClient.setWebrtcusername(username);
            webrtcSignalToClient.setWebrtcpassword(password);
        }
@ -310,7 +313,7 @@ export class SocketManager {
        if (thing instanceof User) {
            const userJoinedZoneMessage = new UserJoinedZoneMessage();
            if (!Number.isInteger(thing.id)) {
-                throw new Error("clientUser.userId is not an integer " + thing.id);
+                throw new Error(`clientUser.userId is not an integer ${thing.id}`);
            }
            userJoinedZoneMessage.setUserid(thing.id);
            userJoinedZoneMessage.setUseruuid(thing.uuid);
@ -446,7 +449,10 @@ export class SocketManager {
            webrtcStartMessage1.setUserid(otherUser.id);
            webrtcStartMessage1.setInitiator(true);
            if (TURN_STATIC_AUTH_SECRET !== "") {
-                const { username, password } = this.getTURNCredentials("" + otherUser.id, TURN_STATIC_AUTH_SECRET);
+                const { username, password } = this.getTURNCredentials(
+                    otherUser.id.toString(),
+                    TURN_STATIC_AUTH_SECRET
+                );
                webrtcStartMessage1.setWebrtcusername(username);
                webrtcStartMessage1.setWebrtcpassword(password);
            }
@ -460,7 +466,7 @@ export class SocketManager {
            webrtcStartMessage2.setUserid(user.id);
            webrtcStartMessage2.setInitiator(false);
            if (TURN_STATIC_AUTH_SECRET !== "") {
-                const { username, password } = this.getTURNCredentials("" + user.id, TURN_STATIC_AUTH_SECRET);
+                const { username, password } = this.getTURNCredentials(user.id.toString(), TURN_STATIC_AUTH_SECRET);
                webrtcStartMessage2.setWebrtcusername(username);
                webrtcStartMessage2.setWebrtcpassword(password);
            }
@ -484,7 +490,7 @@ export class SocketManager {
        hmac.setEncoding("base64");
        hmac.write(username);
        hmac.end();
-        const password = hmac.read();
+        const password = hmac.read() as string;
        return {
            username: username,
            password: password,
@ -525,15 +531,6 @@ export class SocketManager {
        }
    }

-    emitPlayGlobalMessage(room: GameRoom, playGlobalMessage: PlayGlobalMessage) {
-        const serverToClientMessage = new ServerToClientMessage();
-        serverToClientMessage.setPlayglobalmessage(playGlobalMessage);
-
-        for (const [id, user] of room.getUsers().entries()) {
-            user.socket.write(serverToClientMessage);
-        }
-    }
-
    public getWorlds(): Map<string, PromiseLike<GameRoom>> {
        return this.roomsPromises;
    }
@ -839,6 +836,39 @@ export class SocketManager {
        emoteEventMessage.setActoruserid(user.id);
        room.emitEmoteEvent(user, emoteEventMessage);
    }
+
+    handleFollowRequestMessage(room: GameRoom, user: User, message: FollowRequestMessage) {
+        const clientMessage = new ServerToClientMessage();
+        clientMessage.setFollowrequestmessage(message);
+        room.sendToOthersInGroupIncludingUser(user, clientMessage);
+    }
+
+    handleFollowConfirmationMessage(room: GameRoom, user: User, message: FollowConfirmationMessage) {
+        const leader = room.getUserById(message.getLeader());
+        if (!leader) {
+            const message = `Could not follow user "{message.getLeader()}" in room "{room.roomUrl}".`;
+            console.info(message, "Maybe the user just left.");
+            return;
+        }
+
+        // By security, we look at the group leader. If the group leader is NOT the leader in the message,
+        // everybody should stop following the group leader (to avoid having 2 group leaders)
+        if (user?.group?.leader && user?.group?.leader !== leader) {
+            user?.group?.leader?.stopLeading();
+        }
+
+        leader.addFollower(user);
+    }
+
+    handleFollowAbortMessage(room: GameRoom, user: User, message: FollowAbortMessage) {
+        if (user.id === message.getLeader()) {
+            user?.group?.leader?.stopLeading();
+        } else {
+            // Forward message
+            const leader = room.getUserById(message.getLeader());
+            leader?.delFollower(user);
+        }
+    }
 }

 export const socketManager = new SocketManager();
--- a/back/src/Services/VariablesManager.ts
+++ b/back/src/Services/VariablesManager.ts
@ -101,11 +101,11 @@ export class VariablesManager {
                    }

                    // We store a copy of the object (to make it immutable)
-                    objects.set(object.name, this.iTiledObjectToVariable(object));
+                    objects.set(object.name as string, this.iTiledObjectToVariable(object));
                }
            }
        } else if (layer.type === "group") {
-            for (const innerLayer of layer.layers) {
+            for (const innerLayer of layer.layers as ITiledMapLayer[]) {
                this.recursiveFindVariablesInLayer(innerLayer, objects);
            }
        }
@ -116,7 +116,7 @@ export class VariablesManager {

        if (object.properties) {
            for (const property of object.properties) {
-                const value = property.value;
+                const value = property.value as unknown;
                switch (property.name) {
                    case "default":
                        variable.defaultValue = JSON.stringify(value);
--- a/back/yarn.lock
+++ b/back/yarn.lock
--- a/docs/maps/api-camera.md
+++ b/docs/maps/api-camera.md
@ -0,0 +1,24 @@
+{.section-title.accent.text-primary}
+# API Camera functions Reference
+
+### Listen to camera updates
+
+```
+WA.camera.onCameraUpdate(): Subscription
+```
+
+Listens to updates of the camera viewport. It will trigger for every update of the camera's properties (position or scale for instance). An event will be sent.
+
+The event has the following attributes :
+*   **x (number):** coordinate X of the camera's world view (the area looked at by the camera).
+*   **y (number):** coordinate Y of the camera's world view.
+*   **width (number):** the width of the camera's world view.
+*   **height (number):** the height of the camera's world view.
+
+**callback:** the function that will be called when the camera is updated.
+
+Example :
+```javascript
+const subscription = WA.camera.onCameraUpdate().subscribe((worldView) => console.log(worldView));
+//later...
+subscription.unsubscribe();
--- a/docs/maps/api-player.md
+++ b/docs/maps/api-player.md
@ -86,6 +86,27 @@ WA.onInit().then(() => {
 })
 ```

+### Get the position of the player
+```
+WA.player.getPosition(): Promise<Position>
+```
+The player's current position is available using the `WA.player.getPosition()` function.
+
+`Position` has the following attributes :
+* **x (number) :** The coordinate x of the current player's position.
+* **y (number) :** The coordinate y of the current player's position.
+
+
+{.alert.alert-info}
+You need to wait for the end of the initialization before calling `WA.player.getPosition()`
+
+```typescript
+WA.onInit().then(async () => {
+    console.log('Position: ', await WA.player.getPosition());
+})
+```
+
+
 ### Listen to player movement
 ```
 WA.player.onPlayerMove(callback: HasPlayerMovedEventCallback): void;
@ -107,6 +128,30 @@ Example :
 WA.player.onPlayerMove(console.log);
 ```

+## Player specific variables
+Similarly to maps (see [API state related functions](api-state.md)), it is possible to store data **related to a specific player** in a "state". Such data will be stored using the local storage from the user's browser. Any value that is serializable in JSON can be stored.
+
+{.alert.alert-info}
+In the future, player-related variables will be stored on the WorkAdventure server if the current player is logged.
+
+Any value that is serializable in JSON can be stored.
+
+### Setting a property
+A player property can be set simply by assigning a value.
+
+Example:
+```javascript
+WA.player.state.toto = "value" //will set the "toto" key to "value"
+```
+
+### Reading a variable 
+A player variable can be read by calling its key from the player's state. 
+
+Example:
+```javascript
+WA.player.state.toto //will retrieve the variable
+```
+
 ### Set the outline color of the player
 ```
 WA.player.setOutlineColor(red: number, green: number, blue: number): Promise<void>;
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@ -10,5 +10,6 @@
 - [UI functions](api-ui.md)
 - [Sound functions](api-sound.md)
 - [Controls functions](api-controls.md)
+- [Camera functions](api-camera.md)

 - [List of deprecated functions](api-deprecated.md)
--- a/docs/maps/api-room.md
+++ b/docs/maps/api-room.md
@ -1,8 +1,11 @@
 {.section-title.accent.text-primary}
+
 # API Room functions Reference

 ### Working with group layers
-If you use group layers in your map, to reference a layer in a group you will need to use a `/` to join layer names together.
+
+If you use group layers in your map, to reference a layer in a group you will need to use a `/` to join layer names
+together.

 Example :
 <div class="row">
@ -12,6 +15,7 @@ Example :
 </div>

 The name of the layers of this map are :
+
 * `entries/start`
 * `bottom/ground/under`
 * `bottom/build/carpet`
@ -26,29 +30,32 @@ WA.room.onLeaveLayer(name: string): Subscription

 Listens to the position of the current user. The event is triggered when the user enters or leaves a given layer.

-*   **name**: the name of the layer who as defined in Tiled.
+* **name**: the name of the layer who as defined in Tiled.

 Example:

 ```javascript
 WA.room.onEnterLayer('myLayer').subscribe(() => {
-    WA.chat.sendChatMessage("Hello!", 'Mr Robot');
+  WA.chat.sendChatMessage("Hello!", 'Mr Robot');
 });

 WA.room.onLeaveLayer('myLayer').subscribe(() => {
-    WA.chat.sendChatMessage("Goodbye!", 'Mr Robot');
+  WA.chat.sendChatMessage("Goodbye!", 'Mr Robot');
 });
 ```

 ### Show / Hide a layer
+
 ```
 WA.room.showLayer(layerName : string): void
 WA.room.hideLayer(layerName : string) : void
 ```
-These 2 methods can be used to show and hide a layer.
-if `layerName` is the name of a group layer, show/hide all the layer in that group layer.
+
+These 2 methods can be used to show and hide a layer. if `layerName` is the name of a group layer, show/hide all the
+layer in that group layer.

 Example :
+
 ```javascript
 WA.room.showLayer('bottom');
 //...
@ -61,12 +68,14 @@ WA.room.hideLayer('bottom');
 WA.room.setProperty(layerName : string, propertyName : string, propertyValue : string | number | boolean | undefined) : void;
 ```

-Set the value of the `propertyName` property of the layer `layerName` at `propertyValue`. If the property doesn't exist, create the property `propertyName` and set the value of the property at `propertyValue`.
+Set the value of the `propertyName` property of the layer `layerName` at `propertyValue`. If the property doesn't exist,
+create the property `propertyName` and set the value of the property at `propertyValue`.

 Note :
 To unset a property from a layer, use `setProperty` with `propertyValue` set to `undefined`.

 Example :
+
 ```javascript
 WA.room.setProperty('wikiLayer', 'openWebsite', 'https://www.wikipedia.org/');
 ```
@ -79,13 +88,12 @@ WA.room.id: string;

 The ID of the current room is available from the `WA.room.id` property.

-{.alert.alert-info}
-You need to wait for the end of the initialization before accessing `WA.room.id`
+{.alert.alert-info} You need to wait for the end of the initialization before accessing `WA.room.id`

 ```typescript
 WA.onInit().then(() => {
-    console.log('Room id: ', WA.room.id);
-    // Will output something like: 'https://play.workadventu.re/@/myorg/myworld/myroom', or 'https://play.workadventu.re/_/global/mymap.org/map.json"
+  console.log('Room id: ', WA.room.id);
+  // Will output something like: 'https://play.workadventu.re/@/myorg/myworld/myroom', or 'https://play.workadventu.re/_/global/mymap.org/map.json"
 })
 ```

@ -97,19 +105,17 @@ WA.room.mapURL: string;

 The URL of the map is available from the `WA.room.mapURL` property.

-{.alert.alert-info}
-You need to wait for the end of the initialization before accessing `WA.room.mapURL`
+{.alert.alert-info} You need to wait for the end of the initialization before accessing `WA.room.mapURL`

 ```typescript
 WA.onInit().then(() => {
-    console.log('Map URL: ', WA.room.mapURL);
-    // Will output something like: 'https://mymap.org/map.json"
+  console.log('Map URL: ', WA.room.mapURL);
+  // Will output something like: 'https://mymap.org/map.json"
 })
 ```

-
-
 ### Getting map data
+
 ```
 WA.room.getTiledMap(): Promise<ITiledMap>
 ```
@ -121,12 +127,16 @@ const map = await WA.room.getTiledMap();
 console.log("Map generated with Tiled version ", map.tiledversion);
 ```

-Check the [Tiled documentation to learn more about the format of the JSON map](https://doc.mapeditor.org/en/stable/reference/json-map-format/).
+Check
+the [Tiled documentation to learn more about the format of the JSON map](https://doc.mapeditor.org/en/stable/reference/json-map-format/)
+.

 ### Changing tiles
+
 ```
 WA.room.setTiles(tiles: TileDescriptor[]): void
 ```
+
 Replace the tile at the `x` and `y` coordinates in the layer named `layer` by the tile with the id `tile`.

 If `tile` is a string, it's not the id of the tile but the value of the property `name`.
@ -137,43 +147,48 @@ If `tile` is a string, it's not the id of the tile but the value of the property
 </div>

 `TileDescriptor` has the following attributes :
+
 * **x (number) :** The coordinate x of the tile that you want to replace.
 * **y (number) :** The coordinate y of the tile that you want to replace.
 * **tile (number | string) :** The id of the tile that will be placed in the map.
 * **layer (string) :** The name of the layer where the tile will be placed.

-**Important !** : If you use `tile` as a number, be sure to add the `firstgid` of the tileset of the tile that you want to the id of the tile in Tiled Editor.
+**Important !** : If you use `tile` as a number, be sure to add the `firstgid` of the tileset of the tile that you want
+to the id of the tile in Tiled Editor.

 Note: If you want to unset a tile, use `setTiles` with `tile` set to `null`.

 Example :
+
 ```javascript
 WA.room.setTiles([
-                {x: 6, y: 4, tile: 'blue', layer: 'setTiles'},
-                {x: 7, y: 4, tile: 109, layer: 'setTiles'},
-                {x: 8, y: 4, tile: 109, layer: 'setTiles'},
-                {x: 9, y: 4, tile: 'blue', layer: 'setTiles'}
-                ]);
+  { x: 6, y: 4, tile: 'blue', layer: 'setTiles' },
+  { x: 7, y: 4, tile: 109, layer: 'setTiles' },
+  { x: 8, y: 4, tile: 109, layer: 'setTiles' },
+  { x: 9, y: 4, tile: 'blue', layer: 'setTiles' }
+]);
 ```

 ### Loading a tileset
+
 ```
 WA.room.loadTileset(url: string): Promise<number>
 ```
+
 Load a tileset in JSON format from an url and return the id of the first tile of the loaded tileset.

 You can create a tileset file in Tile Editor.

 ```javascript
 WA.room.loadTileset("Assets/Tileset.json").then((firstId) => {
-    WA.room.setTiles([{x: 4, y: 4, tile: firstId, layer: 'bottom'}]);
+  WA.room.setTiles([{ x: 4, y: 4, tile: firstId, layer: 'bottom' }]);
 })
 ```

-
 ## Embedding websites in a map

-You can use the scripting API to embed websites in a map, or to edit websites that are already embedded (using the ["website" objects](website-in-map.md)).
+You can use the scripting API to embed websites in a map, or to edit websites that are already embedded (using
+the ["website" objects](website-in-map.md)).

 ### Getting an instance of a website already embedded in the map

@ -181,8 +196,8 @@ You can use the scripting API to embed websites in a map, or to edit websites th
 WA.room.website.get(objectName: string): Promise<EmbeddedWebsite>
 ```

-You can get an instance of an embedded website by using the `WA.room.website.get()` method.
-It returns a promise of an `EmbeddedWebsite` instance.
+You can get an instance of an embedded website by using the `WA.room.website.get()` method. It returns a promise of
+an `EmbeddedWebsite` instance.

 ```javascript
 // Get an existing website object where 'my_website' is the name of the object (on any layer object of the map)
@ -191,7 +206,6 @@ website.url = 'https://example.com';
 website.visible = true;
 ```

-
 ### Adding a new website in a map

 ```
@ -201,34 +215,38 @@ interface CreateEmbeddedWebsiteEvent {
    name: string;       // A unique name for this iframe
    url: string;        // The URL the iframe points to.
    position: {
-        x: number,      // In pixels, relative to the map coordinates
-        y: number,      // In pixels, relative to the map coordinates
-        width: number,  // In pixels, sensitive to zoom level
-        height: number, // In pixels, sensitive to zoom level
+        x: number,      // In "game" pixels, relative to the map or player coordinates, depending on origin
+        y: number,      // In "game" pixels, relative to the map or player coordinates, depending on origin
+        width: number,  // In "game" pixels
+        height: number, // In "game" pixels
    },
    visible?: boolean,  // Whether to display the iframe or not
    allowApi?: boolean, // Whether the scripting API should be available to the iframe
    allow?: string,     // The list of feature policies allowed
+    origin: "player" | "map" // The origin used to place the x and y coordinates of the iframe's top-left corner, defaults to "map"
+    scale: number, // A ratio used to resize the iframe
 }
 ```

-You can create an instance of an embedded website by using the `WA.room.website.create()` method.
-It returns an `EmbeddedWebsite` instance.
+You can create an instance of an embedded website by using the `WA.room.website.create()` method. It returns
+an `EmbeddedWebsite` instance.

 ```javascript
 // Create a new website object
 const website = WA.room.website.create({
-    name: "my_website",
-    url: "https://example.com",
-    position: {
-        x: 64,
-        y: 128,
-        width: 320,
-        height: 240,
-    },
-    visible: true,
-    allowApi: true,
-    allow: "fullscreen",
+  name: "my_website",
+  url: "https://example.com",
+  position: {
+    x: 64,
+    y: 128,
+    width: 320,
+    height: 240,
+  },
+  visible: true,
+  allowApi: true,
+  allow: "fullscreen",
+  origin: "map",
+  scale: 1,
 });
 ```

@ -240,30 +258,28 @@ WA.room.website.delete(name: string): Promise<void>

 Use `WA.room.website.delete` to completely remove an embedded website from your map.

-
 ### The EmbeddedWebsite class

 Instances of the `EmbeddedWebsite` class represent the website displayed on the map.

 ```typescript
 class EmbeddedWebsite {
-    readonly name: string;
-    url: string;
-    visible: boolean;
-    allow: string;
-    allowApi: boolean;
-    x: number;         // In pixels, relative to the map coordinates
-    y: number;         // In pixels, relative to the map coordinates
-    width: number;     // In pixels, sensitive to zoom level
-    height: number;    // In pixels, sensitive to zoom level
+  readonly name: string;
+  url: string;
+  visible: boolean;
+  allow: string;
+  allowApi: boolean;
+  x: number;         // In "game" pixels, relative to the map or player coordinates, depending on origin
+  y: number;         // In "game" pixels, relative to the map or player coordinates, depending on origin
+  width: number;     // In "game" pixels
+  height: number;    // In "game" pixels
+  origin: "player" | "map";
+  scale: number;
 }
 ```

 When you modify a property of an `EmbeddedWebsite` instance, the iframe is automatically modified in the map.

-
-{.alert.alert-warning}
-The websites you add/edit/delete via the scripting API are only shown locally. If you want them
-to be displayed for every player, you can use [variables](api-start.md) to share a common state
-between all users.
+{.alert.alert-warning} The websites you add/edit/delete via the scripting API are only shown locally. If you want them
+to be displayed for every player, you can use [variables](api-start.md) to share a common state between all users.

--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@ -35,7 +35,6 @@ module.exports = {
        "no-unused-vars": "off",
        "@typescript-eslint/no-explicit-any": "error",
        // TODO: remove those ignored rules and write a stronger code!
-        "@typescript-eslint/no-floating-promises": "off",
        "@typescript-eslint/no-unsafe-call": "off",
        "@typescript-eslint/restrict-plus-operands": "off",
        "@typescript-eslint/no-unsafe-assignment": "off",
--- a/front/Dockerfile
+++ b/front/Dockerfile
@ -1,13 +1,14 @@
 FROM node:14.15.4-buster-slim@sha256:cbae886186467bbfd274b82a234a1cdfbbd31201c2a6ee63a6893eefcf3c6e76 as builder
 WORKDIR /usr/src
 COPY messages .
-RUN yarn install && yarn proto
+RUN yarn install && yarn ts-proto

 # we are rebuilding on each deploy to cope with the PUSHER_URL environment URL
 FROM thecodingmachine/nodejs:14-apache

 COPY --chown=docker:docker front .
-COPY --from=builder --chown=docker:docker /usr/src/generated /var/www/html/src/Messages/generated
+COPY --from=builder --chown=docker:docker /usr/src/ts-proto-generated/protos /var/www/html/src/Messages/ts-proto-generated
+RUN sed -i 's/import { Observable } from "rxjs";/import type { Observable } from "rxjs";/g' /var/www/html/src/Messages/ts-proto-generated/messages.ts
 COPY --from=builder --chown=docker:docker /usr/src/JsonMessages /var/www/html/src/Messages/JsonMessages

 # Removing the iframe.html file from the final image as this adds a XSS attack.
--- a/front/package.json
+++ b/front/package.json
@ -62,6 +62,7 @@
    "simple-peer": "^9.11.0",
    "socket.io-client": "^2.3.0",
    "standardized-audio-context": "^25.2.4",
+    "ts-proto": "^1.96.0",
    "uuidv4": "^6.2.10"
  },
  "scripts": {
--- a/front/src/Administration/AnalyticsClient.ts
+++ b/front/src/Administration/AnalyticsClient.ts
@ -18,64 +18,84 @@ class AnalyticsClient {
    }

    identifyUser(uuid: string, email: string | null) {
-        this.posthogPromise?.then((posthog) => {
-            posthog.identify(uuid, { uuid, email, wa: true });
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.identify(uuid, { uuid, email, wa: true });
+            })
+            .catch((e) => console.error(e));
    }

    loggedWithSso() {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-logged-sso");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-logged-sso");
+            })
+            .catch((e) => console.error(e));
    }

    loggedWithToken() {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-logged-token");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-logged-token");
+            })
+            .catch((e) => console.error(e));
    }

    enteredRoom(roomId: string, roomGroup: string | null) {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("$pageView", { roomId, roomGroup });
-            posthog.capture("enteredRoom");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("$pageView", { roomId, roomGroup });
+                posthog.capture("enteredRoom");
+            })
+            .catch((e) => console.error(e));
    }

    openedMenu() {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-opened-menu");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-opened-menu");
+            })
+            .catch((e) => console.error(e));
    }

    launchEmote(emote: string) {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-emote-launch", { emote });
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-emote-launch", { emote });
+            })
+            .catch((e) => console.error(e));
    }

    enteredJitsi(roomName: string, roomId: string) {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-entered-jitsi", { roomName, roomId });
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-entered-jitsi", { roomName, roomId });
+            })
+            .catch((e) => console.error(e));
    }

    validationName() {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-name-validation");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-name-validation");
+            })
+            .catch((e) => console.error(e));
    }

    validationWoka(scene: string) {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-woka-validation", { scene });
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-woka-validation", { scene });
+            })
+            .catch((e) => console.error(e));
    }

    validationVideo() {
-        this.posthogPromise?.then((posthog) => {
-            posthog.capture("wa-video-validation");
-        });
+        this.posthogPromise
+            ?.then((posthog) => {
+                posthog.capture("wa-video-validation");
+            })
+            .catch((e) => console.error(e));
    }
 }
 export const analyticsClient = new AnalyticsClient();
--- a/front/src/Administration/UserMessageManager.ts
+++ b/front/src/Administration/UserMessageManager.ts
@ -1,27 +1,22 @@
 import { AdminMessageEventTypes, adminMessagesService } from "../Connexion/AdminMessagesService";
-import { textMessageContentStore, textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
+import { textMessageStore } from "../Stores/TypeMessageStore/TextMessageStore";
 import { soundPlayingStore } from "../Stores/SoundPlayingStore";
 import { UPLOADER_URL } from "../Enum/EnvironmentVariable";
-import { banMessageContentStore, banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
+import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";

 class UserMessageManager {
    receiveBannedMessageListener!: Function;

    constructor() {
        adminMessagesService.messageStream.subscribe((event) => {
-            textMessageVisibleStore.set(false);
-            banMessageVisibleStore.set(false);
            if (event.type === AdminMessageEventTypes.admin) {
-                textMessageContentStore.set(event.text);
-                textMessageVisibleStore.set(true);
+                textMessageStore.addMessage(event.text);
            } else if (event.type === AdminMessageEventTypes.audio) {
                soundPlayingStore.playSound(UPLOADER_URL + event.text);
            } else if (event.type === AdminMessageEventTypes.ban) {
-                banMessageContentStore.set(event.text);
-                banMessageVisibleStore.set(true);
+                banMessageStore.addMessage(event.text);
            } else if (event.type === AdminMessageEventTypes.banned) {
-                banMessageContentStore.set(event.text);
-                banMessageVisibleStore.set(true);
+                banMessageStore.addMessage(event.text);
                this.receiveBannedMessageListener();
            }
        });
--- a/front/src/Api/Events/EmbeddedWebsiteEvent.ts
+++ b/front/src/Api/Events/EmbeddedWebsiteEvent.ts
@ -22,6 +22,8 @@ export const isEmbeddedWebsiteEvent = new tg.IsInterface()
        y: tg.isNumber,
        width: tg.isNumber,
        height: tg.isNumber,
+        origin: tg.isSingletonStringUnion("player", "map"),
+        scale: tg.isNumber,
    })
    .get();

@ -35,6 +37,8 @@ export const isCreateEmbeddedWebsiteEvent = new tg.IsInterface()
        visible: tg.isBoolean,
        allowApi: tg.isBoolean,
        allow: tg.isString,
+        origin: tg.isSingletonStringUnion("player", "map"),
+        scale: tg.isNumber,
    })
    .get();

--- a/front/src/Api/Events/GameStateEvent.ts
+++ b/front/src/Api/Events/GameStateEvent.ts
@ -10,6 +10,7 @@ export const isGameStateEvent = new tg.IsInterface()
        tags: tg.isArray(tg.isString),
        variables: tg.isObject,
        userRoomToken: tg.isUnion(tg.isString, tg.isUndefined),
+        playerVariables: tg.isObject,
    })
    .get();
 /**
--- a/front/src/Api/Events/IframeEvent.ts
+++ b/front/src/Api/Events/IframeEvent.ts
@ -30,6 +30,8 @@ import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEv
 import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 import type { ChangeZoneEvent } from "./ChangeZoneEvent";
 import { isColorEvent } from "./ColorEvent";
+import { isPlayerPosition } from "./PlayerPosition";
+import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";

 export interface TypedMessageEvent<T> extends MessageEvent {
    data: T;
@ -50,6 +52,7 @@ export type IframeEventMap = {
    displayBubble: null;
    removeBubble: null;
    onPlayerMove: undefined;
+    onCameraUpdate: undefined;
    showLayer: LayerEvent;
    hideLayer: LayerEvent;
    setProperty: SetPropertyEvent;
@ -82,6 +85,7 @@ export interface IframeResponseEventMap {
    leaveZoneEvent: ChangeZoneEvent;
    buttonClickedEvent: ButtonClickedEvent;
    hasPlayerMoved: HasPlayerMovedEvent;
+    wasCameraUpdated: WasCameraUpdatedEvent;
    menuItemClicked: MenuItemClickedEvent;
    setVariable: SetVariableEvent;
    messageTriggered: MessageReferenceEvent;
@ -161,6 +165,10 @@ export const iframeQueryMapTypeGuards = {
        query: tg.isUndefined,
        answer: tg.isUndefined,
    },
+    getPlayerPosition: {
+        query: tg.isUndefined,
+        answer: isPlayerPosition,
+    },
 };

 type GuardedType<T> = T extends (x: unknown) => x is infer T ? T : never;
--- a/front/src/Api/Events/PlayerPosition.ts
+++ b/front/src/Api/Events/PlayerPosition.ts
@ -0,0 +1,10 @@
+import * as tg from "generic-type-guard";
+
+export const isPlayerPosition = new tg.IsInterface()
+    .withProperties({
+        x: tg.isNumber,
+        y: tg.isNumber,
+    })
+    .get();
+
+export type PlayerPosition = tg.GuardedType<typeof isPlayerPosition>;
--- a/front/src/Api/Events/SetVariableEvent.ts
+++ b/front/src/Api/Events/SetVariableEvent.ts
@ -4,6 +4,7 @@ export const isSetVariableEvent = new tg.IsInterface()
    .withProperties({
        key: tg.isString,
        value: tg.isUnknown,
+        target: tg.isSingletonStringUnion("global", "player"),
    })
    .get();
 /**
--- a/front/src/Api/Events/WasCameraUpdatedEvent.ts
+++ b/front/src/Api/Events/WasCameraUpdatedEvent.ts
@ -0,0 +1,19 @@
+import * as tg from "generic-type-guard";
+
+export const isWasCameraUpdatedEvent = new tg.IsInterface()
+    .withProperties({
+        x: tg.isNumber,
+        y: tg.isNumber,
+        width: tg.isNumber,
+        height: tg.isNumber,
+        zoom: tg.isNumber,
+    })
+    .get();
+
+/**
+ * A message sent from the game to the iFrame to notify a movement from the camera.
+ */
+
+export type WasCameraUpdatedEvent = tg.GuardedType<typeof isWasCameraUpdatedEvent>;
+
+export type WasCameraUpdatedEventCallback = (event: WasCameraUpdatedEvent) => void;
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@ -31,6 +31,7 @@ import type { SetVariableEvent } from "./Events/SetVariableEvent";
 import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
 import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
 import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
+import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";

 type AnswererCallback<T extends keyof IframeQueryMap> = (
@ -85,6 +86,9 @@ class IframeListener {
    private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
    public readonly loadSoundStream = this._loadSoundStream.asObservable();

+    private readonly _trackCameraUpdateStream: Subject<LoadSoundEvent> = new Subject();
+    public readonly trackCameraUpdateStream = this._trackCameraUpdateStream.asObservable();
+
    private readonly _setTilesStream: Subject<SetTilesEvent> = new Subject();
    public readonly setTilesStream = this._setTilesStream.asObservable();

@ -226,6 +230,8 @@ class IframeListener {
                        this._removeBubbleStream.next();
                    } else if (payload.type == "onPlayerMove") {
                        this.sendPlayerMove = true;
+                    } else if (payload.type == "onCameraUpdate") {
+                        this._trackCameraUpdateStream.next();
                    } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
                        this._setTilesStream.next(payload.data);
                    } else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
@ -442,6 +448,13 @@ class IframeListener {
        }
    }

+    sendCameraUpdated(event: WasCameraUpdatedEvent) {
+        this.postMessage({
+            type: "wasCameraUpdated",
+            data: event,
+        });
+    }
+
    sendButtonClickedEvent(popupId: number, buttonId: number): void {
        this.postMessage({
            type: "buttonClickedEvent",
--- a/front/src/Api/iframe/Room/EmbeddedWebsite.ts
+++ b/front/src/Api/iframe/Room/EmbeddedWebsite.ts
@ -12,6 +12,8 @@ export class EmbeddedWebsite {
    private _allow: string;
    private _allowApi: boolean;
    private _position: Rectangle;
+    private readonly origin: "map" | "player" | undefined;
+    private _scale: number;

    constructor(private config: CreateEmbeddedWebsiteEvent) {
        this.name = config.name;
@ -20,6 +22,12 @@ export class EmbeddedWebsite {
        this._allow = config.allow ?? "";
        this._allowApi = config.allowApi ?? false;
        this._position = config.position;
+        this.origin = config.origin;
+        this._scale = config.scale ?? 1;
+    }
+
+    public get url() {
+        return this._url;
    }

    public set url(url: string) {
@ -33,6 +41,10 @@ export class EmbeddedWebsite {
        });
    }

+    public get visible() {
+        return this._visible;
+    }
+
    public set visible(visible: boolean) {
        this._visible = visible;
        sendToWorkadventure({
@ -44,6 +56,10 @@ export class EmbeddedWebsite {
        });
    }

+    public get x() {
+        return this._position.x;
+    }
+
    public set x(x: number) {
        this._position.x = x;
        sendToWorkadventure({
@ -55,6 +71,10 @@ export class EmbeddedWebsite {
        });
    }

+    public get y() {
+        return this._position.y;
+    }
+
    public set y(y: number) {
        this._position.y = y;
        sendToWorkadventure({
@ -66,6 +86,10 @@ export class EmbeddedWebsite {
        });
    }

+    public get width() {
+        return this._position.width;
+    }
+
    public set width(width: number) {
        this._position.width = width;
        sendToWorkadventure({
@ -77,6 +101,10 @@ export class EmbeddedWebsite {
        });
    }

+    public get height() {
+        return this._position.height;
+    }
+
    public set height(height: number) {
        this._position.height = height;
        sendToWorkadventure({
@ -87,4 +115,19 @@ export class EmbeddedWebsite {
            },
        });
    }
+
+    public get scale(): number {
+        return this._scale;
+    }
+
+    public set scale(scale: number) {
+        this._scale = scale;
+        sendToWorkadventure({
+            type: "modifyEmbeddedWebsite",
+            data: {
+                name: this.name,
+                scale: this._scale,
+            },
+        });
+    }
 }
--- a/front/src/Api/iframe/Ui/ActionMessage.ts
+++ b/front/src/Api/iframe/Ui/ActionMessage.ts
@ -26,7 +26,7 @@ export class ActionMessage {
        this.message = actionMessageOptions.message;
        this.type = actionMessageOptions.type ?? "message";
        this.callback = actionMessageOptions.callback;
-        this.create();
+        this.create().catch((e) => console.error(e));
    }

    private async create() {
--- a/front/src/Api/iframe/camera.ts
+++ b/front/src/Api/iframe/camera.ts
@ -0,0 +1,29 @@
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import { Subject } from "rxjs";
+import type { WasCameraUpdatedEvent } from "../Events/WasCameraUpdatedEvent";
+import { apiCallback } from "./registeredCallbacks";
+import { isWasCameraUpdatedEvent } from "../Events/WasCameraUpdatedEvent";
+
+const moveStream = new Subject<WasCameraUpdatedEvent>();
+
+export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> {
+    callbacks = [
+        apiCallback({
+            type: "wasCameraUpdated",
+            typeChecker: isWasCameraUpdatedEvent,
+            callback: (payloadData) => {
+                moveStream.next(payloadData);
+            },
+        }),
+    ];
+
+    onCameraUpdate(): Subject<WasCameraUpdatedEvent> {
+        sendToWorkadventure({
+            type: "onCameraUpdate",
+            data: null,
+        });
+        return moveStream;
+    }
+}
+
+export default new WorkAdventureCameraCommands();
--- a/front/src/Api/iframe/player.ts
+++ b/front/src/Api/iframe/player.ts
@ -3,6 +3,7 @@ import type { HasPlayerMovedEvent, HasPlayerMovedEventCallback } from "../Events
 import { Subject } from "rxjs";
 import { apiCallback } from "./registeredCallbacks";
 import { isHasPlayerMovedEvent } from "../Events/HasPlayerMovedEvent";
+import { createState } from "./state";

 const moveStream = new Subject<HasPlayerMovedEvent>();

@ -31,6 +32,8 @@ export const setUuid = (_uuid: string | undefined) => {
 };

 export class WorkadventurePlayerCommands extends IframeApiContribution<WorkadventurePlayerCommands> {
+    readonly state = createState("player");
+
    callbacks = [
        apiCallback({
            type: "hasPlayerMoved",
@ -74,6 +77,13 @@ export class WorkadventurePlayerCommands extends IframeApiContribution<Workadven
        return uuid;
    }

+    async getPosition(): Promise<Position> {
+        return await queryWorkadventure({
+            type: "getPlayerPosition",
+            data: undefined,
+        });
+    }
+
    get userRoomToken(): string | undefined {
        if (userRoomToken === undefined) {
            throw new Error(
@ -102,4 +112,9 @@ export class WorkadventurePlayerCommands extends IframeApiContribution<Workadven
    }
 }

+export type Position = {
+    x: number;
+    y: number;
+};
+
 export default new WorkadventurePlayerCommands();
--- a/front/src/Api/iframe/state.ts
+++ b/front/src/Api/iframe/state.ts
@ -8,93 +8,101 @@ import { isSetVariableEvent, SetVariableEvent } from "../Events/SetVariableEvent

 import type { ITiledMap } from "../../Phaser/Map/ITiledMap";

-const setVariableResolvers = new Subject<SetVariableEvent>();
-const variables = new Map<string, unknown>();
-const variableSubscribers = new Map<string, Subject<unknown>>();
-
-export const initVariables = (_variables: Map<string, unknown>): void => {
-    for (const [name, value] of _variables.entries()) {
-        // In case the user already decided to put values in the variables (before onInit), let's make sure onInit does not override this.
-        if (!variables.has(name)) {
-            variables.set(name, value);
-        }
-    }
-};
-
-setVariableResolvers.subscribe((event) => {
-    const oldValue = variables.get(event.key);
-    // If we are setting the same value, no need to do anything.
-    // No need to do this check since it is already performed in SharedVariablesManager
-    /*if (JSON.stringify(oldValue) === JSON.stringify(event.value)) {
-        return;
-    }*/
-
-    variables.set(event.key, event.value);
-    const subject = variableSubscribers.get(event.key);
-    if (subject !== undefined) {
-        subject.next(event.value);
-    }
-});
-
 export class WorkadventureStateCommands extends IframeApiContribution<WorkadventureStateCommands> {
+    private setVariableResolvers = new Subject<SetVariableEvent>();
+    private variables = new Map<string, unknown>();
+    private variableSubscribers = new Map<string, Subject<unknown>>();
+
+    constructor(private target: "global" | "player") {
+        super();
+
+        this.setVariableResolvers.subscribe((event) => {
+            const oldValue = this.variables.get(event.key);
+            // If we are setting the same value, no need to do anything.
+            // No need to do this check since it is already performed in SharedVariablesManager
+            /*if (JSON.stringify(oldValue) === JSON.stringify(event.value)) {
+                return;
+            }*/
+
+            this.variables.set(event.key, event.value);
+            const subject = this.variableSubscribers.get(event.key);
+            if (subject !== undefined) {
+                subject.next(event.value);
+            }
+        });
+    }
+
    callbacks = [
        apiCallback({
            type: "setVariable",
            typeChecker: isSetVariableEvent,
            callback: (payloadData) => {
-                setVariableResolvers.next(payloadData);
+                if (payloadData.target === this.target) {
+                    this.setVariableResolvers.next(payloadData);
+                }
            },
        }),
    ];

+    // TODO: see how we can remove this method from types exposed to WA.state object
+    initVariables(_variables: Map<string, unknown>): void {
+        for (const [name, value] of _variables.entries()) {
+            // In case the user already decided to put values in the variables (before onInit), let's make sure onInit does not override this.
+            if (!this.variables.has(name)) {
+                this.variables.set(name, value);
+            }
+        }
+    }
+
    saveVariable(key: string, value: unknown): Promise<void> {
-        variables.set(key, value);
+        this.variables.set(key, value);
        return queryWorkadventure({
            type: "setVariable",
            data: {
                key,
                value,
+                target: this.target,
            },
        });
    }

    loadVariable(key: string): unknown {
-        return variables.get(key);
+        return this.variables.get(key);
    }

    hasVariable(key: string): boolean {
-        return variables.has(key);
+        return this.variables.has(key);
    }

    onVariableChange(key: string): Observable<unknown> {
-        let subject = variableSubscribers.get(key);
+        let subject = this.variableSubscribers.get(key);
        if (subject === undefined) {
            subject = new Subject<unknown>();
-            variableSubscribers.set(key, subject);
+            this.variableSubscribers.set(key, subject);
        }
        return subject.asObservable();
    }
 }

-const proxyCommand = new Proxy(new WorkadventureStateCommands(), {
-    get(target: WorkadventureStateCommands, p: PropertyKey, receiver: unknown): unknown {
-        if (p in target) {
-            return Reflect.get(target, p, receiver);
-        }
-        return target.loadVariable(p.toString());
-    },
-    set(target: WorkadventureStateCommands, p: PropertyKey, value: unknown, receiver: unknown): boolean {
-        // Note: when using "set", there is no way to wait, so we ignore the return of the promise.
-        // User must use WA.state.saveVariable to have error message.
-        target.saveVariable(p.toString(), value);
-        return true;
-    },
-    has(target: WorkadventureStateCommands, p: PropertyKey): boolean {
-        if (p in target) {
+export function createState(target: "global" | "player"): WorkadventureStateCommands & { [key: string]: unknown } {
+    return new Proxy(new WorkadventureStateCommands(target), {
+        get(target: WorkadventureStateCommands, p: PropertyKey, receiver: unknown): unknown {
+            if (p in target) {
+                return Reflect.get(target, p, receiver);
+            }
+            return target.loadVariable(p.toString());
+        },
+        set(target: WorkadventureStateCommands, p: PropertyKey, value: unknown, receiver: unknown): boolean {
+            // Note: when using "set", there is no way to wait, so we ignore the return of the promise.
+            // User must use WA.state.saveVariable to have error message.
+            target.saveVariable(p.toString(), value).catch((e) => console.error(e));
            return true;
-        }
-        return target.hasVariable(p.toString());
-    },
-}) as WorkadventureStateCommands & { [key: string]: unknown };
-
-export default proxyCommand;
+        },
+        has(target: WorkadventureStateCommands, p: PropertyKey): boolean {
+            if (p in target) {
+                return true;
+            }
+            return target.hasVariable(p.toString());
+        },
+    }) as WorkadventureStateCommands & { [key: string]: unknown };
+}
--- a/front/src/Api/iframe/website.ts
+++ b/front/src/Api/iframe/website.ts
@ -1,8 +1,4 @@
-import type { LoadSoundEvent } from "../Events/LoadSoundEvent";
-import type { PlaySoundEvent } from "../Events/PlaySoundEvent";
-import type { StopSoundEvent } from "../Events/StopSoundEvent";
 import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
-import { Sound } from "./Sound/Sound";
 import { EmbeddedWebsite } from "./Room/EmbeddedWebsite";
 import type { CreateEmbeddedWebsiteEvent } from "../Events/EmbeddedWebsiteEvent";

--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@ -33,10 +33,10 @@
    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
    import VideoOverlay from "./Video/VideoOverlay.svelte";
    import { gameOverlayVisibilityStore } from "../Stores/GameOverlayStoreVisibility";
-    import AdminMessage from "./TypeMessage/BanMessage.svelte";
-    import TextMessage from "./TypeMessage/TextMessage.svelte";
-    import { banMessageVisibleStore } from "../Stores/TypeMessageStore/BanMessageStore";
-    import { textMessageVisibleStore } from "../Stores/TypeMessageStore/TextMessageStore";
+    import BanMessageContainer from "./TypeMessage/BanMessageContainer.svelte";
+    import TextMessageContainer from "./TypeMessage/TextMessageContainer.svelte";
+    import { banMessageStore } from "../Stores/TypeMessageStore/BanMessageStore";
+    import { textMessageStore } from "../Stores/TypeMessageStore/TextMessageStore";
    import { warningContainerStore } from "../Stores/MenuStore";
    import WarningContainer from "./WarningContainer/WarningContainer.svelte";
    import { layoutManagerVisibilityStore } from "../Stores/LayoutManagerStore";
@ -45,6 +45,9 @@
    import AudioManager from "./AudioManager/AudioManager.svelte";
    import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
    import ReportMenu from "./ReportMenu/ReportMenu.svelte";
+    import { followStateStore } from "../Stores/FollowStore";
+    import { peerStore } from "../Stores/PeerStore";
+    import FollowMenu from "./FollowMenu/FollowMenu.svelte";

    export let game: Game;
 </script>
@ -75,14 +78,13 @@
            <EnableCameraScene {game} />
        </div>
    {/if}
-    {#if $banMessageVisibleStore}
+    {#if $banMessageStore.length > 0}
        <div>
-            <AdminMessage />
+            <BanMessageContainer />
        </div>
-    {/if}
-    {#if $textMessageVisibleStore}
+    {:else if $textMessageStore.length > 0}
        <div>
-            <TextMessage />
+            <TextMessageContainer />
        </div>
    {/if}
    {#if $soundPlayingStore}
@ -105,6 +107,11 @@
            <ReportMenu />
        </div>
    {/if}
+    {#if $followStateStore !== "off" || $peerStore.size > 0}
+        <div>
+            <FollowMenu />
+        </div>
+    {/if}
    {#if $menuIconVisiblilityStore}
        <div>
            <MenuIcon />
--- a/front/src/Components/AudioManager/AudioManager.svelte
+++ b/front/src/Components/AudioManager/AudioManager.svelte
@ -19,12 +19,13 @@
        audioManagerVolumeStore.setVolume(volume);
        audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());

-        unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
+        unsubscriberFileStore = audioManagerFileStore.subscribe((src) => {
            HTMLAudioPlayer.pause();
+            HTMLAudioPlayer.src = src;
            HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
            HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
            HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
-            HTMLAudioPlayer.play();
+            void HTMLAudioPlayer.play();
        });
        unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
            const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
@ -148,9 +149,7 @@
        </label>
        <section class="audio-manager-file">
            <!-- svelte-ignore a11y-media-has-caption -->
-            <audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer}>
-                <source src={$audioManagerFileStore} />
-            </audio>
+            <audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer} />
        </section>
    </div>
 </div>
--- a/front/src/Components/Chat/ChatElement.svelte
+++ b/front/src/Components/Chat/ChatElement.svelte
@ -67,6 +67,7 @@
        .messagePart {
            flex-grow: 1;
            max-width: 100%;
+            user-select: text;

            span.date {
                font-size: 80%;
--- a/front/src/Components/FollowMenu/FollowMenu.svelte
+++ b/front/src/Components/FollowMenu/FollowMenu.svelte
@ -0,0 +1,197 @@
+<!--
+vim: ft=typescript
+-->
+<script lang="ts">
+    import { gameManager } from "../../Phaser/Game/GameManager";
+    import followImg from "../images/follow.svg";
+
+    import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
+
+    const gameScene = gameManager.getCurrentGameScene();
+
+    function name(userId: number): string | undefined {
+        return gameScene.MapPlayersByKey.get(userId)?.PlayerValue;
+    }
+
+    function sendFollowRequest() {
+        gameScene.CurrentPlayer.sendFollowRequest();
+    }
+
+    function acceptFollowRequest() {
+        gameScene.CurrentPlayer.startFollowing();
+    }
+
+    function abortEnding() {
+        followStateStore.set("active");
+    }
+
+    function reset() {
+        gameScene.connection?.emitFollowAbort();
+        followUsersStore.stopFollowing();
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+            reset();
+        }
+    }
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if $followStateStore === "requesting" && $followRoleStore === "follower"}
+    <div class="interact-menu nes-container is-rounded">
+        <section class="interact-menu-title">
+            <h2>Do you want to follow {name($followUsersStore[0])}?</h2>
+        </section>
+        <section class="interact-menu-action">
+            <button type="button" class="nes-btn is-success" on:click|preventDefault={acceptFollowRequest}>Yes</button>
+            <button type="button" class="nes-btn is-error" on:click|preventDefault={reset}>No</button>
+        </section>
+    </div>
+{/if}
+
+{#if $followStateStore === "ending"}
+    <div class="interact-menu nes-container is-rounded">
+        <section class="interact-menu-title">
+            <h2>Interaction</h2>
+        </section>
+        {#if $followRoleStore === "follower"}
+            <section class="interact-menu-question">
+                <p>Do you want to stop following {name($followUsersStore[0])}?</p>
+            </section>
+        {:else if $followRoleStore === "leader"}
+            <section class="interact-menu-question">
+                <p>Do you want to stop leading the way?</p>
+            </section>
+        {/if}
+        <section class="interact-menu-action">
+            <button type="button" class="nes-btn is-success" on:click|preventDefault={reset}>Yes</button>
+            <button type="button" class="nes-btn is-error" on:click|preventDefault={abortEnding}>No</button>
+        </section>
+    </div>
+{/if}
+
+{#if $followStateStore === "active" || $followStateStore === "ending"}
+    <div class="interact-status nes-container is-rounded">
+        <section class="interact-status">
+            {#if $followRoleStore === "follower"}
+                <p>Following {name($followUsersStore[0])}</p>
+            {:else if $followUsersStore.length === 0}
+                <p>Waiting for followers' confirmation</p>
+            {:else if $followUsersStore.length === 1}
+                <p>{name($followUsersStore[0])} is following you</p>
+            {:else if $followUsersStore.length === 2}
+                <p>{name($followUsersStore[0])} and {name($followUsersStore[1])} are following you</p>
+            {:else}
+                <p>
+                    {$followUsersStore.slice(0, -1).map(name).join(", ")} and {name(
+                        $followUsersStore[$followUsersStore.length - 1]
+                    )} are following you
+                </p>
+            {/if}
+        </section>
+    </div>
+{/if}
+
+{#if $followStateStore === "off"}
+    <button
+        type="button"
+        class="nes-btn is-primary follow-menu-button"
+        on:click|preventDefault={sendFollowRequest}
+        title="Ask others to follow"><img class="background-img" src={followImg} alt="" /></button
+    >
+{/if}
+
+{#if $followStateStore === "active" || $followStateStore === "ending"}
+    {#if $followRoleStore === "follower"}
+        <button
+            type="button"
+            class="nes-btn is-error follow-menu-button"
+            on:click|preventDefault={reset}
+            title="Stop following"><img class="background-img" src={followImg} alt="" /></button
+        >
+    {:else}
+        <button
+            type="button"
+            class="nes-btn is-error follow-menu-button"
+            on:click|preventDefault={reset}
+            title="Stop leading the way"><img class="background-img" src={followImg} alt="" /></button
+        >
+    {/if}
+{/if}
+
+<style lang="scss">
+    .nes-container {
+        padding: 5px;
+    }
+
+    div.interact-status {
+        background-color: #333333;
+        color: whitesmoke;
+
+        position: relative;
+        height: 2.7em;
+        width: 40vw;
+        top: 87vh;
+        margin: auto;
+        text-align: center;
+    }
+
+    div.interact-menu {
+        pointer-events: auto;
+        background-color: #333333;
+        color: whitesmoke;
+
+        position: relative;
+        width: 60vw;
+        top: 60vh;
+        margin: auto;
+
+        section.interact-menu-title {
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: center;
+        }
+
+        section.interact-menu-question {
+            margin: 4px;
+            margin-bottom: 20px;
+
+            p {
+                font-size: 1.05em;
+                font-weight: bold;
+            }
+        }
+
+        section.interact-menu-action {
+            display: grid;
+            grid-gap: 10%;
+            grid-template-columns: 45% 45%;
+            margin-bottom: 20px;
+            margin-left: 5%;
+            margin-right: 5%;
+        }
+    }
+
+    .follow-menu-button {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        pointer-events: all;
+    }
+
+    @media only screen and (max-width: 800px) {
+        div.interact-status {
+            width: 100vw;
+            top: 78vh;
+            font-size: 0.75em;
+        }
+
+        div.interact-menu {
+            height: 21vh;
+            width: 100vw;
+            font-size: 0.75em;
+        }
+    }
+</style>
--- a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
+++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte
@ -19,12 +19,12 @@
        uploadAudioActive = true;
    }

-    function send() {
+    async function send(): Promise<void> {
        if (inputSendTextActive) {
-            handleSendText.sendTextMessage(broadcastToWorld);
+            return handleSendText.sendTextMessage(broadcastToWorld);
        }
        if (uploadAudioActive) {
-            handleSendAudio.sendAudioMessage(broadcastToWorld);
+            return handleSendAudio.sendAudioMessage(broadcastToWorld);
        }
    }
 </script>
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@ -41,10 +41,10 @@
        gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
    }

-    function logOut() {
+    async function logOut() {
        disableMenuStores();
        loginSceneVisibleStore.set(true);
-        connectionManager.logout();
+        return connectionManager.logout();
    }

    function getProfileUrl() {
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/front/src/Components/Menu/SettingsSubMenu.svelte
@ -8,6 +8,7 @@
    let fullscreen: boolean = localUserStore.getFullscreen();
    let notification: boolean = localUserStore.getNotification() === "granted";
    let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
+    let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
    let valueGame: number = localUserStore.getGameQualityValue();
    let valueVideo: number = localUserStore.getVideoQualityValue();
    let previewValueGame = valueGame;
@ -32,9 +33,9 @@
        const body = HtmlUtils.querySelectorOrFail("body");
        if (body) {
            if (document.fullscreenElement !== null && !fullscreen) {
-                document.exitFullscreen();
+                document.exitFullscreen().catch((e) => console.error(e));
            } else {
-                body.requestFullscreen();
+                body.requestFullscreen().catch((e) => console.error(e));
            }
            localUserStore.setFullscreen(fullscreen);
        }
@ -44,14 +45,16 @@
        if (Notification.permission === "granted") {
            localUserStore.setNotification(notification ? "granted" : "denied");
        } else {
-            Notification.requestPermission().then((response) => {
-                if (response === "granted") {
-                    localUserStore.setNotification(notification ? "granted" : "denied");
-                } else {
-                    localUserStore.setNotification("denied");
-                    notification = false;
-                }
-            });
+            Notification.requestPermission()
+                .then((response) => {
+                    if (response === "granted") {
+                        localUserStore.setNotification(notification ? "granted" : "denied");
+                    } else {
+                        localUserStore.setNotification("denied");
+                        notification = false;
+                    }
+                })
+                .catch((e) => console.error(e));
        }
    }

@ -59,6 +62,10 @@
        localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
    }

+    function changeIgnoreFollowRequests() {
+        localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
+    }
+
    function closeMenu() {
        menuVisiblilityStore.set(false);
    }
@ -123,6 +130,15 @@
            />
            <span>Always ask before opening websites and Jitsi Meet rooms</span>
        </label>
+        <label>
+            <input
+                type="checkbox"
+                class="nes-checkbox is-dark"
+                bind:checked={ignoreFollowRequests}
+                on:change={changeIgnoreFollowRequests}
+            />
+            <span>Ignore requests to follow other users</span>
+        </label>
    </section>
 </div>

--- a/front/src/Components/TypeMessage/BanMessage.svelte
+++ b/front/src/Components/TypeMessage/BanMessage.svelte
@ -1,12 +1,11 @@
 <script lang="ts">
-    import { fly } from "svelte/transition";
-    import { banMessageVisibleStore, banMessageContentStore } from "../../Stores/TypeMessageStore/BanMessageStore";
+    import { fly, fade } from "svelte/transition";
    import { onMount } from "svelte";
+    import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
+    import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
+
+    export let message: Message;

-    let text: string;
-    $: {
-        text = $banMessageContentStore;
-    }
    const NAME_BUTTON = "Ok";
    let nbSeconds = 10;
    let nameButton = "";
@ -28,17 +27,21 @@
    }

    function closeBanMessage() {
-        banMessageVisibleStore.set(false);
+        banMessageStore.clearMessageById(message.id);
    }
 </script>

-<div class="main-ban-message nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
+<div
+    class="main-ban-message nes-container is-rounded"
+    in:fly={{ y: -1000, duration: 500, delay: 250 }}
+    out:fade={{ duration: 200 }}
+>
    <h2 class="title-ban-message">
        <img src="resources/logos/report.svg" alt="***" /> Important message
        <img src="resources/logos/report.svg" alt="***" />
    </h2>
    <div class="content-ban-message">
-        <p>{text}</p>
+        <p>{message.text}</p>
    </div>
    <div class="footer-ban-message">
        <button
--- a/front/src/Components/TypeMessage/BanMessageContainer.svelte
+++ b/front/src/Components/TypeMessage/BanMessageContainer.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+    import { flip } from "svelte/animate";
+    import { banMessageStore } from "../../Stores/TypeMessageStore/BanMessageStore";
+    import BanMessage from "./BanMessage.svelte";
+</script>
+
+<div class="main-ban-message-container">
+    {#each $banMessageStore.slice(0, 1) as message (message.id)}
+        <div animate:flip={{ duration: 250 }}>
+            <BanMessage {message} />
+        </div>
+    {/each}
+</div>
--- a/front/src/Components/TypeMessage/TextMessage.svelte
+++ b/front/src/Components/TypeMessage/TextMessage.svelte
@ -1,17 +1,17 @@
 <script lang="ts">
-    import { fly } from "svelte/transition";
-    import { textMessageContentStore, textMessageVisibleStore } from "../../Stores/TypeMessageStore/TextMessageStore";
+    import { fly, fade } from "svelte/transition";
    import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
+    import type { Message } from "../../Stores/TypeMessageStore/MessageStore";
+    import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";

-    let converter: QuillDeltaToHtmlConverter;
-    $: {
-        const content = JSON.parse($textMessageContentStore);
-        converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
-    }
+    export let message: Message;
+
+    const content = JSON.parse(message.text);
+    const converter = new QuillDeltaToHtmlConverter(content.ops, { inlineStyles: true });
    const NAME_BUTTON = "Ok";

    function closeTextMessage() {
-        textMessageVisibleStore.set(false);
+        textMessageStore.clearMessageById(message.id);
    }

    function onKeyDown(e: KeyboardEvent) {
@ -23,7 +23,11 @@

 <svelte:window on:keydown={onKeyDown} />

-<div class="main-text-message nes-container is-rounded" transition:fly={{ x: -1000, duration: 500 }}>
+<div
+    class="main-text-message nes-container is-rounded"
+    in:fly={{ x: -1000, duration: 500, delay: 250 }}
+    out:fade={{ duration: 250 }}
+>
    <div class="content-text-message">
        {@html converter.convert()}
    </div>
@ -43,6 +47,8 @@
        width: 80vw;
        margin-right: auto;
        margin-left: auto;
+        margin-bottom: 16px;
+        margin-top: 0;
        padding-bottom: 0;

        pointer-events: auto;
--- a/front/src/Components/TypeMessage/TextMessageContainer.svelte
+++ b/front/src/Components/TypeMessage/TextMessageContainer.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+    import { flip } from "svelte/animate";
+    import TextMessage from "./TextMessage.svelte";
+    import { textMessageStore } from "../../Stores/TypeMessageStore/TextMessageStore";
+
+    const MAX_MESSAGES = 3;
+</script>
+
+<div class="main-text-message-container">
+    {#each $textMessageStore.slice(0, MAX_MESSAGES) as message (message.id)}
+        <div animate:flip={{ duration: 250 }}>
+            <TextMessage {message} />
+        </div>
+    {/each}
+</div>
+
+<style lang="scss">
+    div.main-text-message-container {
+        padding-top: 16px;
+    }
+</style>
--- a/front/src/Components/UI/AudioPlaying.svelte
+++ b/front/src/Components/UI/AudioPlaying.svelte
@ -12,7 +12,7 @@
    }

    afterUpdate(() => {
-        audio.play();
+        audio.play().catch((e) => console.error(e));
    });
 </script>

--- a/front/src/Components/images/follow.svg
+++ b/front/src/Components/images/follow.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path d="M9.5,5.5c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S8.4,5.5,9.5,5.5z M5.75,8.9L3,23h2.1l1.75-8L9,17v6h2v-7.55L8.95,13.4 l0.6-3C10.85,12,12.8,13,15,13v-2c-1.85,0-3.45-1-4.35-2.45L9.7,6.95C9.35,6.35,8.7,6,8,6C7.75,6,7.5,6.05,7.25,6.15L2,8.3V13h2 V9.65L5.75,8.9 M13,2v7h3.75v14h1.5V9H22V2H13z M18.01,8V6.25H14.5v-1.5h3.51V3l2.49,2.5L18.01,8z"/></svg>
--- a/front/src/Connexion/AdminMessagesService.ts
+++ b/front/src/Connexion/AdminMessagesService.ts
@ -1,5 +1,5 @@
 import { Subject } from "rxjs";
-import type { BanUserMessage, SendUserMessage } from "../Messages/generated/messages_pb";
+import type { BanUserMessage, SendUserMessage } from "../Messages/ts-proto-generated/messages";

 export enum AdminMessageEventTypes {
    admin = "message",
@ -26,8 +26,8 @@ class AdminMessagesService {

    onSendusermessage(message: SendUserMessage | BanUserMessage) {
        this._messageStream.next({
-            type: message.getType() as unknown as AdminMessageEventTypes,
-            text: message.getMessage(),
+            type: message.type as unknown as AdminMessageEventTypes,
+            text: message.message,
        });
    }
 }
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/front/src/Connexion/ConnectionManager.ts
@ -1,5 +1,5 @@
 import Axios from "axios";
-import { PUSHER_URL, START_ROOM_URL } from "../Enum/EnvironmentVariable";
+import { PUSHER_URL } from "../Enum/EnvironmentVariable";
 import { RoomConnection } from "./RoomConnection";
 import type { OnConnectInterface, PositionInterface, ViewportInterface } from "./ConnexionModels";
 import { GameConnexionTypes, urlManager } from "../Url/UrlManager";
@ -191,7 +191,7 @@ class ConnectionManager {

            //Set last room visited! (connected or nor, must to be saved in localstorage and cache API)
            //use href to keep # value
-            localUserStore.setLastRoomUrl(this._currentRoom.href);
+            await localUserStore.setLastRoomUrl(this._currentRoom.href);

            //todo: add here some kind of warning if authToken has expired.
            if (!this.authToken && !this._currentRoom.authenticationMandatory) {
@ -294,7 +294,7 @@ class ConnectionManager {
                reject(error);
            });

-            connection.onConnectingError((event: CloseEvent) => {
+            connection.connectionErrorStream.subscribe((event: CloseEvent) => {
                console.log("An error occurred while connecting to socket server. Retrying");
                reject(
                    new Error(
@ -306,7 +306,7 @@ class ConnectionManager {
                );
            });

-            connection.onConnect((connect: OnConnectInterface) => {
+            connection.roomJoinedMessageStream.subscribe((connect: OnConnectInterface) => {
                resolve(connect);
            });
        }).catch((err) => {
@ -315,7 +315,7 @@ class ConnectionManager {
                this.reconnectingTimeout = setTimeout(() => {
                    //todo: allow a way to break recursion?
                    //todo: find a way to avoid recursive function. Otherwise, the call stack will grow indefinitely.
-                    this.connectToRoomSocket(roomUrl, name, characterLayers, position, viewport, companion).then(
+                    void this.connectToRoomSocket(roomUrl, name, characterLayers, position, viewport, companion).then(
                        (connection) => resolve(connection)
                    );
                }, 4000 + Math.floor(Math.random() * 2000));
--- a/front/src/Connexion/ConnexionModels.ts
+++ b/front/src/Connexion/ConnexionModels.ts
@ -1,44 +1,12 @@
 import type { SignalData } from "simple-peer";
 import type { RoomConnection } from "./RoomConnection";
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
-
-export enum EventMessage {
-    CONNECT = "connect",
-    WEBRTC_SIGNAL = "webrtc-signal",
-    WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
-    WEBRTC_START = "webrtc-start",
-    //START_ROOM = "start-room", // From server to client: list of all room users/groups/items
-    JOIN_ROOM = "join-room", // bi-directional
-    USER_POSITION = "user-position", // From client to server
-    USER_MOVED = "user-moved", // From server to client
-    USER_LEFT = "user-left", // From server to client
-    MESSAGE_ERROR = "message-error",
-    WEBRTC_DISCONNECT = "webrtc-disconect",
-    GROUP_CREATE_UPDATE = "group-create-update",
-    GROUP_DELETE = "group-delete",
-    SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
-    ITEM_EVENT = "item-event",
-    USER_DETAILS_UPDATED = "user-details-updated",
-
-    CONNECT_ERROR = "connect_error",
-    CONNECTING_ERROR = "connecting_error",
-    SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
-    SET_VIEWPORT = "set-viewport",
-    BATCH = "batch",
-
-    PLAY_GLOBAL_MESSAGE = "play-global-message",
-    STOP_GLOBAL_MESSAGE = "stop-global-message",
-
-    TELEPORT = "teleport",
-    USER_MESSAGE = "user-message",
-    START_JITSI_ROOM = "start-jitsi-room",
-    SET_VARIABLE = "set-variable",
-}
+import { PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";

 export interface PointInterface {
    x: number;
    y: number;
-    direction: string;
+    direction: string; // TODO: modify this to the enum from ts-proto
    moving: boolean;
 }

--- a/front/src/Connexion/EmoteEventStream.ts
+++ b/front/src/Connexion/EmoteEventStream.ts
@ -1,17 +0,0 @@
-import { Subject } from "rxjs";
-
-interface EmoteEvent {
-    userId: number;
-    emote: string;
-}
-
-class EmoteEventStream {
-    private _stream: Subject<EmoteEvent> = new Subject();
-    public stream = this._stream.asObservable();
-
-    fire(userId: number, emote: string) {
-        this._stream.next({ userId, emote });
-    }
-}
-
-export const emoteEventStream = new EmoteEventStream();
--- a/front/src/Connexion/LocalUserStore.ts
+++ b/front/src/Connexion/LocalUserStore.ts
@ -14,6 +14,7 @@ const audioPlayerMuteKey = "audioMute";
 const helpCameraSettingsShown = "helpCameraSettingsShown";
 const fullscreenKey = "fullscreen";
 const forceCowebsiteTriggerKey = "forceCowebsiteTrigger";
+const ignoreFollowRequests = "ignoreFollowRequests";
 const lastRoomUrl = "lastRoomUrl";
 const authToken = "authToken";
 const state = "state";
@ -21,8 +22,8 @@ const nonce = "nonce";
 const notification = "notificationPermission";
 const code = "code";
 const cameraSetup = "cameraSetup";
-
 const cacheAPIIndex = "workavdenture-cache";
+const userProperties = "user-properties";

 class LocalUserStore {
    saveUser(localUser: LocalUser) {
@ -128,13 +129,19 @@ class LocalUserStore {
        return localStorage.getItem(forceCowebsiteTriggerKey) === "true";
    }

-    setLastRoomUrl(roomUrl: string): void {
+    setIgnoreFollowRequests(value: boolean): void {
+        localStorage.setItem(ignoreFollowRequests, value.toString());
+    }
+    getIgnoreFollowRequests(): boolean {
+        return localStorage.getItem(ignoreFollowRequests) === "true";
+    }
+
+    async setLastRoomUrl(roomUrl: string): Promise<void> {
        localStorage.setItem(lastRoomUrl, roomUrl.toString());
        if ("caches" in window) {
-            caches.open(cacheAPIIndex).then((cache) => {
-                const stringResponse = new Response(JSON.stringify({ roomUrl }));
-                cache.put(`/${lastRoomUrl}`, stringResponse);
-            });
+            const cache = await caches.open(cacheAPIIndex);
+            const stringResponse = new Response(JSON.stringify({ roomUrl }));
+            await cache.put(`/${lastRoomUrl}`, stringResponse);
        }
    }
    getLastRoomUrl(): string {
@ -212,6 +219,27 @@ class LocalUserStore {
        const cameraSetupValues = localStorage.getItem(cameraSetup);
        return cameraSetupValues != undefined ? JSON.parse(cameraSetupValues) : undefined;
    }
+
+    getAllUserProperties(): Map<string, unknown> {
+        const result = new Map<string, string>();
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key) {
+                if (key.startsWith(userProperties + "_")) {
+                    const value = localStorage.getItem(key);
+                    if (value) {
+                        const userKey = key.substr((userProperties + "_").length);
+                        result.set(userKey, JSON.parse(value));
+                    }
+                }
+            }
+        }
+        return result;
+    }
+
+    setUserProperty(name: string, value: unknown): void {
+        localStorage.setItem(userProperties + "_" + name, JSON.stringify(value));
+    }
 }

 export const localUserStore = new LocalUserStore();
--- a/front/src/Connexion/Room.ts
+++ b/front/src/Connexion/Room.ts
@ -104,9 +104,13 @@ export class Room {

            const data = result.data;

-            if (isRoomRedirect(data.redirectUrl)) {
+            if (data.authenticationMandatory !== undefined) {
+                data.authenticationMandatory = Boolean(data.authenticationMandatory);
+            }
+
+            if (isRoomRedirect(data)) {
                return {
-                    redirectUrl: data.redirectUrl as string,
+                    redirectUrl: data.redirectUrl,
                };
            } else if (isMapDetailsData(data)) {
                console.log("Map ", this.id, " resolves to URL ", data.mapUrl);
--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
--- a/front/src/Connexion/WorldFullMessageStream.ts
+++ b/front/src/Connexion/WorldFullMessageStream.ts
@ -1,12 +0,0 @@
-import { Subject } from "rxjs";
-
-class WorldFullMessageStream {
-    private _stream: Subject<string | null> = new Subject<string | null>();
-    public stream = this._stream.asObservable();
-
-    onMessage(message?: string) {
-        this._stream.next(message);
-    }
-}
-
-export const worldFullMessageStream = new WorldFullMessageStream();
--- a/front/src/Messages/.gitignore
+++ b/front/src/Messages/.gitignore
@ -1 +0,0 @@
-/generated/
--- a/front/src/Messages/ts-proto-generated/.gitignore
+++ b/front/src/Messages/ts-proto-generated/.gitignore
@ -0,0 +1 @@
+*
--- a/front/src/Network/ProtobufClientUtils.ts
+++ b/front/src/Network/ProtobufClientUtils.ts
@ -1,21 +1,21 @@
-import { PositionMessage } from "../Messages/generated/messages_pb";
-import Direction = PositionMessage.Direction;
+import { PositionMessage, PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";
+
 import type { PointInterface } from "../Connexion/ConnexionModels";

 export class ProtobufClientUtils {
    public static toPointInterface(position: PositionMessage): PointInterface {
        let direction: string;
-        switch (position.getDirection()) {
-            case Direction.UP:
+        switch (position.direction) {
+            case PositionMessage_Direction.UP:
                direction = "up";
                break;
-            case Direction.DOWN:
+            case PositionMessage_Direction.DOWN:
                direction = "down";
                break;
-            case Direction.LEFT:
+            case PositionMessage_Direction.LEFT:
                direction = "left";
                break;
-            case Direction.RIGHT:
+            case PositionMessage_Direction.RIGHT:
                direction = "right";
                break;
            default:
@ -24,10 +24,10 @@ export class ProtobufClientUtils {

        // sending to all clients in room except sender
        return {
-            x: position.getX(),
-            y: position.getY(),
+            x: position.x,
+            y: position.y,
            direction,
-            moving: position.getMoving(),
+            moving: position.moving,
        };
    }
 }
--- a/front/src/Phaser/Companion/Companion.ts
+++ b/front/src/Phaser/Companion/Companion.ts
@ -41,13 +41,15 @@ export class Companion extends Container {
        this.companionName = name;
        this._pictureStore = writable(undefined);

-        texturePromise.then((resource) => {
-            this.addResource(resource);
-            this.invisible = false;
-            return this.getSnapshot().then((htmlImageElementSrc) => {
-                this._pictureStore.set(htmlImageElementSrc);
-            });
-        });
+        texturePromise
+            .then((resource) => {
+                this.addResource(resource);
+                this.invisible = false;
+                return this.getSnapshot().then((htmlImageElementSrc) => {
+                    this._pictureStore.set(htmlImageElementSrc);
+                });
+            })
+            .catch((e) => console.error(e));

        this.scene.physics.world.enableBody(this);

--- a/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
+++ b/front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
@ -3,7 +3,7 @@ import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./Co

 export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => {
    COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => {
-        lazyLoadCompanionResource(loader, resource.name);
+        lazyLoadCompanionResource(loader, resource.name).catch((e) => console.error(e));
    });

    return COMPANION_RESOURCES;
--- a/front/src/Phaser/Components/Loader.ts
+++ b/front/src/Phaser/Components/Loader.ts
@ -72,9 +72,11 @@ export class Loader {
            if (this.loadingText) {
                this.loadingText.destroy();
            }
-            promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
-                resLoadingImage.destroy();
-            });
+            promiseLoadLogoTexture
+                .then((resLoadingImage: Phaser.GameObjects.Image) => {
+                    resLoadingImage.destroy();
+                })
+                .catch((e) => console.error(e));
            this.progress.destroy();
            this.progressContainer.destroy();
            if (this.scene instanceof DirtyScene) {
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@ -33,7 +33,7 @@ export abstract class Character extends Container {
    private readonly playerName: Text;
    public PlayerValue: string;
    public sprites: Map<string, Sprite>;
-    private lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
+    protected lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
    //private teleportation: Sprite;
    private invisible: boolean;
    public companion?: Companion;
@ -277,24 +277,20 @@ export abstract class Character extends Container {

        body.setVelocity(x, y);

-        // up or down animations are prioritized over left and right
-        if (body.velocity.y < 0) {
-            //moving up
-            this.lastDirection = PlayerAnimationDirections.Up;
-            this.playAnimation(PlayerAnimationDirections.Up, true);
-        } else if (body.velocity.y > 0) {
-            //moving down
-            this.lastDirection = PlayerAnimationDirections.Down;
-            this.playAnimation(PlayerAnimationDirections.Down, true);
-        } else if (body.velocity.x > 0) {
-            //moving right
-            this.lastDirection = PlayerAnimationDirections.Right;
-            this.playAnimation(PlayerAnimationDirections.Right, true);
-        } else if (body.velocity.x < 0) {
-            //moving left
-            this.lastDirection = PlayerAnimationDirections.Left;
-            this.playAnimation(PlayerAnimationDirections.Left, true);
+        if (Math.abs(body.velocity.x) > Math.abs(body.velocity.y)) {
+            if (body.velocity.x < 0) {
+                this.lastDirection = PlayerAnimationDirections.Left;
+            } else if (body.velocity.x > 0) {
+                this.lastDirection = PlayerAnimationDirections.Right;
+            }
+        } else {
+            if (body.velocity.y < 0) {
+                this.lastDirection = PlayerAnimationDirections.Up;
+            } else if (body.velocity.y > 0) {
+                this.lastDirection = PlayerAnimationDirections.Down;
+            }
        }
+        this.playAnimation(this.lastDirection, true);

        this.setDepth(this.y);

--- a/front/src/Phaser/Game/EmbeddedWebsiteManager.ts
+++ b/front/src/Phaser/Game/EmbeddedWebsiteManager.ts
@ -16,7 +16,8 @@ export class EmbeddedWebsiteManager {
            if (website === undefined) {
                throw new Error('Cannot find embedded website with name "' + name + '"');
            }
-            const rect = website.iframe.getBoundingClientRect();
+
+            const scale = website.scale ?? 1;
            return {
                url: website.url,
                name: website.name,
@ -26,9 +27,11 @@ export class EmbeddedWebsiteManager {
                position: {
                    x: website.phaserObject.x,
                    y: website.phaserObject.y,
-                    width: rect["width"],
-                    height: rect["height"],
+                    width: website.phaserObject.width * scale,
+                    height: website.phaserObject.height * scale,
                },
+                origin: website.origin,
+                scale: website.scale,
            };
        });

@ -59,7 +62,9 @@ export class EmbeddedWebsiteManager {
                    createEmbeddedWebsiteEvent.position.height,
                    createEmbeddedWebsiteEvent.visible ?? true,
                    createEmbeddedWebsiteEvent.allowApi ?? false,
-                    createEmbeddedWebsiteEvent.allow ?? ""
+                    createEmbeddedWebsiteEvent.allow ?? "",
+                    createEmbeddedWebsiteEvent.origin ?? "map",
+                    createEmbeddedWebsiteEvent.scale ?? 1
                );
            }
        );
@ -107,10 +112,18 @@ export class EmbeddedWebsiteManager {
                    website.phaserObject.y = embeddedWebsiteEvent.y;
                }
                if (embeddedWebsiteEvent?.width !== undefined) {
-                    website.iframe.style.width = embeddedWebsiteEvent.width + "px";
+                    website.position.width = embeddedWebsiteEvent.width;
+                    website.iframe.style.width = embeddedWebsiteEvent.width / website.phaserObject.scale + "px";
                }
                if (embeddedWebsiteEvent?.height !== undefined) {
-                    website.iframe.style.height = embeddedWebsiteEvent.height + "px";
+                    website.position.height = embeddedWebsiteEvent.height;
+                    website.iframe.style.height = embeddedWebsiteEvent.height / website.phaserObject.scale + "px";
+                }
+
+                if (embeddedWebsiteEvent?.scale !== undefined) {
+                    website.phaserObject.scale = embeddedWebsiteEvent.scale;
+                    website.iframe.style.width = website.position.width / embeddedWebsiteEvent.scale + "px";
+                    website.iframe.style.height = website.position.height / embeddedWebsiteEvent.scale + "px";
                }
            }
        );
@ -125,7 +138,9 @@ export class EmbeddedWebsiteManager {
        height: number,
        visible: boolean,
        allowApi: boolean,
-        allow: string
+        allow: string,
+        origin: "map" | "player" | undefined,
+        scale: number | undefined
    ): void {
        if (this.embeddedWebsites.has(name)) {
            throw new Error('An embedded website with the name "' + name + '" already exists in your map');
@ -135,9 +150,9 @@ export class EmbeddedWebsiteManager {
            name,
            url,
            /*x,
-            y,
-            width,
-            height,*/
+y,
+width,
+height,*/
            allow,
            allowApi,
            visible,
@ -147,6 +162,8 @@ export class EmbeddedWebsiteManager {
                width,
                height,
            },
+            origin,
+            scale,
        };

        const embeddedWebsite = this.doCreateEmbeddedWebsite(embeddedWebsiteEvent, visible);
@ -161,22 +178,43 @@ export class EmbeddedWebsiteManager {
        const absoluteUrl = new URL(embeddedWebsiteEvent.url, this.gameScene.MapUrlFile).toString();

        const iframe = document.createElement("iframe");
+        const scale = embeddedWebsiteEvent.scale ?? 1;
+
        iframe.src = absoluteUrl;
        iframe.tabIndex = -1;
-        iframe.style.width = embeddedWebsiteEvent.position.width + "px";
-        iframe.style.height = embeddedWebsiteEvent.position.height + "px";
+        iframe.style.width = embeddedWebsiteEvent.position.width / scale + "px";
+        iframe.style.height = embeddedWebsiteEvent.position.height / scale + "px";
        iframe.style.margin = "0";
        iframe.style.padding = "0";
        iframe.style.border = "none";

+        const domElement = new DOMElement(
+            this.gameScene,
+            embeddedWebsiteEvent.position.x,
+            embeddedWebsiteEvent.position.y,
+            iframe
+        );
+        domElement.setOrigin(0, 0);
+        if (embeddedWebsiteEvent.scale) {
+            domElement.scale = embeddedWebsiteEvent.scale;
+        }
+        domElement.setVisible(visible);
+
+        switch (embeddedWebsiteEvent.origin) {
+            case "player":
+                this.gameScene.CurrentPlayer.add(domElement);
+                break;
+            case "map":
+            default:
+                this.gameScene.add.existing(domElement);
+        }
+
        const embeddedWebsite = {
            ...embeddedWebsiteEvent,
-            phaserObject: this.gameScene.add
-                .dom(embeddedWebsiteEvent.position.x, embeddedWebsiteEvent.position.y, iframe)
-                .setVisible(visible)
-                .setOrigin(0, 0),
+            phaserObject: domElement,
            iframe: iframe,
        };
+
        if (embeddedWebsiteEvent.allowApi) {
            iframeListener.registerIframe(iframe);
        }
--- a/front/src/Phaser/Game/EmoteManager.ts
+++ b/front/src/Phaser/Game/EmoteManager.ts
@ -1,13 +1,13 @@
-import { emoteEventStream } from "../../Connexion/EmoteEventStream";
 import type { GameScene } from "./GameScene";
 import type { Subscription } from "rxjs";
+import type { RoomConnection } from "../../Connexion/RoomConnection";

 export class EmoteManager {
    private subscription: Subscription;

-    constructor(private scene: GameScene) {
-        this.subscription = emoteEventStream.stream.subscribe((event) => {
-            const actor = this.scene.MapPlayersByKey.get(event.userId);
+    constructor(private scene: GameScene, private connection: RoomConnection) {
+        this.subscription = connection.emoteEventMessageStream.subscribe((event) => {
+            const actor = this.scene.MapPlayersByKey.get(event.actorUserId);
            if (actor) {
                actor.playEmote(event.emote);
            }
--- a/front/src/Phaser/Game/GameMap.ts
+++ b/front/src/Phaser/Game/GameMap.ts
@ -81,7 +81,14 @@ export class GameMap {
        let depth = -2;
        for (const layer of this.flatLayers) {
            if (layer.type === "tilelayer") {
-                this.phaserLayers.push(phaserMap.createLayer(layer.name, terrains, 0, 0).setDepth(depth));
+                this.phaserLayers.push(
+                    phaserMap
+                        .createLayer(layer.name, terrains, (layer.x || 0) * 32, (layer.y || 0) * 32)
+                        .setDepth(depth)
+                        .setAlpha(layer.opacity)
+                        .setVisible(layer.visible)
+                        .setSize(layer.width, layer.height)
+                );
            }
            if (layer.type === "objectgroup" && layer.name === "floorLayer") {
                depth = DEPTH_OVERLAY_INDEX;
--- a/front/src/Phaser/Game/GameMapPropertiesListener.ts
+++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts
@ -123,7 +123,7 @@ export class GameMapPropertiesListener {
                            .then((coWebsite) => {
                                const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
                                if (coWebsiteOpen && coWebsiteOpen.state === OpenCoWebsiteState.MUST_BE_CLOSE) {
-                                    coWebsiteManager.closeCoWebsite(coWebsite);
+                                    coWebsiteManager.closeCoWebsite(coWebsite).catch((e) => console.error(e));
                                    this.coWebsitesOpenByLayer.delete(layer);
                                    this.coWebsitesActionTriggerByLayer.delete(layer);
                                } else {
@ -132,7 +132,8 @@ export class GameMapPropertiesListener {
                                        state: OpenCoWebsiteState.OPENED,
                                    });
                                }
-                            });
+                            })
+                            .catch((e) => console.error(e));

                        layoutManagerActionStore.removeAction(actionUuid);
                    };
@ -198,7 +199,7 @@ export class GameMapPropertiesListener {
                    }

                    if (coWebsiteOpen.coWebsite !== undefined) {
-                        coWebsiteManager.closeCoWebsite(coWebsiteOpen.coWebsite);
+                        coWebsiteManager.closeCoWebsite(coWebsiteOpen.coWebsite).catch((e) => console.error(e));
                    }

                    this.coWebsitesOpenByLayer.delete(layer);
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@ -1,7 +1,7 @@
 import type { Subscription } from "rxjs";
 import AnimatedTiles from "phaser-animated-tiles";
 import { Queue } from "queue-typescript";
-import { get } from "svelte/store";
+import { get, Unsubscriber } from "svelte/store";

 import { userMessageManager } from "../../Administration/UserMessageManager";
 import { connectionManager } from "../../Connexion/ConnectionManager";
@ -40,7 +40,6 @@ import { ReconnectingSceneName } from "../Reconnecting/ReconnectingScene";
 import { GameMap } from "./GameMap";
 import { PlayerMovement } from "./PlayerMovement";
 import { PlayersPositionInterpolator } from "./PlayersPositionInterpolator";
-import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream";
 import { DirtyScene } from "./DirtyScene";
 import { TextUtils } from "../Components/TextUtils";
 import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
@ -60,7 +59,6 @@ import type {
    PositionInterface,
    RoomJoinedMessageInterface,
 } from "../../Connexion/ConnexionModels";
-import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
 import type { RoomConnection } from "../../Connexion/RoomConnection";
 import type { ActionableItem } from "../Items/ActionableItem";
 import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
@ -90,7 +88,10 @@ import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
 import { deepCopy } from "deep-copy-ts";
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import { MapStore } from "../../Stores/Utils/MapStore";
-import { SetPlayerDetailsMessage } from "../../Messages/generated/messages_pb";
+import { followUsersColorStore, followUsersStore } from "../../Stores/FollowStore";
+import { getColorRgbFromHue } from "../../WebRtc/ColorGenerator";
+import Camera = Phaser.Cameras.Scene2D.Camera;
+import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";

 export interface GameSceneInitInterface {
    initPosition: PointInterface | null;
@ -165,9 +166,11 @@ export class GameScene extends DirtyScene {
    private createPromise: Promise<void>;
    private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
    private iframeSubscriptionList!: Array<Subscription>;
-    private peerStoreUnsubscribe!: () => void;
-    private emoteUnsubscribe!: () => void;
-    private emoteMenuUnsubscribe!: () => void;
+    private peerStoreUnsubscribe!: Unsubscriber;
+    private emoteUnsubscribe!: Unsubscriber;
+    private emoteMenuUnsubscribe!: Unsubscriber;
+    private followUsersColorStoreUnsubscribe!: Unsubscriber;
+
    private biggestAvailableAreaStoreUnsubscribe!: () => void;
    MapUrlFile: string;
    roomUrl: string;
@ -206,6 +209,8 @@ export class GameScene extends DirtyScene {
    private objectsByType = new Map<string, ITiledMapObject[]>();
    private embeddedWebsiteManager!: EmbeddedWebsiteManager;
    private loader: Loader;
+    private lastCameraEvent: WasCameraUpdatedEvent | undefined;
+    private firstCameraUpdateSent: boolean = false;

    constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
        super({
@ -236,7 +241,7 @@ export class GameScene extends DirtyScene {
        const textures = localUser?.textures;
        if (textures) {
            for (const texture of textures) {
-                loadCustomTexture(this.load, texture);
+                loadCustomTexture(this.load, texture).catch((e) => console.error(e));
            }
        }

@ -263,7 +268,7 @@ export class GameScene extends DirtyScene {
                this.load.on(
                    "filecomplete-tilemapJSON-" + this.MapUrlFile,
                    (key: string, type: string, data: unknown) => {
-                        this.onMapLoad(data);
+                        this.onMapLoad(data).catch((e) => console.error(e));
                    }
                );
                return;
@ -287,14 +292,14 @@ export class GameScene extends DirtyScene {
                this.load.on(
                    "filecomplete-tilemapJSON-" + this.MapUrlFile,
                    (key: string, type: string, data: unknown) => {
-                        this.onMapLoad(data);
+                        this.onMapLoad(data).catch((e) => console.error(e));
                    }
                );
                // If the map has already been loaded as part of another GameScene, the "on load" event will not be triggered.
                // In this case, we check in the cache to see if the map is here and trigger the event manually.
                if (this.cache.tilemap.exists(this.MapUrlFile)) {
                    const data = this.cache.tilemap.get(this.MapUrlFile);
-                    this.onMapLoad(data);
+                    this.onMapLoad(data).catch((e) => console.error(e));
                }
                return;
            }
@ -315,7 +320,7 @@ export class GameScene extends DirtyScene {
        });
        this.load.scenePlugin("AnimatedTiles", AnimatedTiles, "animatedTiles", "animatedTiles");
        this.load.on("filecomplete-tilemapJSON-" + this.MapUrlFile, (key: string, type: string, data: unknown) => {
-            this.onMapLoad(data);
+            this.onMapLoad(data).catch((e) => console.error(e));
        });
        //TODO strategy to add access token
        this.load.tilemapTiledJSON(this.MapUrlFile, this.MapUrlFile);
@ -323,7 +328,7 @@ export class GameScene extends DirtyScene {
        // In this case, we check in the cache to see if the map is here and trigger the event manually.
        if (this.cache.tilemap.exists(this.MapUrlFile)) {
            const data = this.cache.tilemap.get(this.MapUrlFile);
-            this.onMapLoad(data);
+            this.onMapLoad(data).catch((e) => console.error(e));
        }

        //eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -401,21 +406,23 @@ export class GameScene extends DirtyScene {
            this.load.on("complete", () => {
                // FIXME: the factory might fail because the resources might not be loaded yet...
                // We would need to add a loader ended event in addition to the createPromise
-                this.createPromise.then(async () => {
-                    itemFactory.create(this);
+                this.createPromise
+                    .then(async () => {
+                        itemFactory.create(this);

-                    const roomJoinedAnswer = await this.connectionAnswerPromise;
+                        const roomJoinedAnswer = await this.connectionAnswerPromise;

-                    for (const object of objectsOfType) {
-                        // TODO: we should pass here a factory to create sprites (maybe?)
+                        for (const object of objectsOfType) {
+                            // TODO: we should pass here a factory to create sprites (maybe?)

-                        // Do we have a state for this object?
-                        const state = roomJoinedAnswer.items[object.id];
+                            // Do we have a state for this object?
+                            const state = roomJoinedAnswer.items[object.id];

-                        const actionableItem = itemFactory.factory(this, object, state);
-                        this.actionableItems.set(actionableItem.getId(), actionableItem);
-                    }
-                });
+                            const actionableItem = itemFactory.factory(this, object, state);
+                            this.actionableItems.set(actionableItem.getId(), actionableItem);
+                        }
+                    })
+                    .catch((e) => console.error(e));
            });
        }
    }
@ -444,10 +451,6 @@ export class GameScene extends DirtyScene {
            this.pinchManager = new PinchManager(this);
        }

-        this.messageSubscription = worldFullMessageStream.stream.subscribe((message) =>
-            this.showWorldFullError(message)
-        );
-
        const playerName = gameManager.getPlayerName();
        if (!playerName) {
            throw "playerName is not set";
@ -485,11 +488,11 @@ export class GameScene extends DirtyScene {
                if (exitSceneUrl !== undefined) {
                    this.loadNextGame(
                        Room.getRoomPathFromExitSceneUrl(exitSceneUrl, window.location.toString(), this.MapUrlFile)
-                    );
+                    ).catch((e) => console.error(e));
                }
                const exitUrl = this.getExitUrl(layer);
                if (exitUrl !== undefined) {
-                    this.loadNextGameFromExitUrl(exitUrl);
+                    this.loadNextGameFromExitUrl(exitUrl).catch((e) => console.error(e));
                }
            }
            if (layer.type === "objectgroup") {
@ -519,7 +522,9 @@ export class GameScene extends DirtyScene {
                            object.height,
                            object.visible,
                            allowApi ?? false,
-                            ""
+                            "",
+                            "map",
+                            1
                        );
                    }
                }
@ -527,7 +532,7 @@ export class GameScene extends DirtyScene {
        }

        this.gameMap.exitUrls.forEach((exitUrl) => {
-            this.loadNextGameFromExitUrl(exitUrl);
+            this.loadNextGameFromExitUrl(exitUrl).catch((e) => console.error(e));
        });

        this.startPositionCalculator = new StartPositionCalculator(
@ -548,7 +553,10 @@ export class GameScene extends DirtyScene {
        mediaManager.setUserInputManager(this.userInputManager);

        if (localUserStore.getFullscreen()) {
-            document.querySelector("body")?.requestFullscreen();
+            document
+                .querySelector("body")
+                ?.requestFullscreen()
+                .catch((e) => console.error(e));
        }

        //notify game manager can to create currentUser in map
@ -613,8 +621,6 @@ export class GameScene extends DirtyScene {
            this.connect();
        }

-        this.emoteManager = new EmoteManager(this);
-
        let oldPeerNumber = 0;
        this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
            const newPeerNumber = peers.size;
@ -646,9 +652,26 @@ export class GameScene extends DirtyScene {
            }
        });

-        Promise.all([this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises]).then(() => {
-            this.scene.wake();
+        this.followUsersColorStoreUnsubscribe = followUsersColorStore.subscribe((color) => {
+            if (color !== undefined) {
+                this.CurrentPlayer.setOutlineColor(color);
+                this.connection?.emitPlayerOutlineColor(color);
+            } else {
+                this.CurrentPlayer.removeOutlineColor();
+                this.connection?.emitPlayerOutlineColor(null);
+            }
        });
+
+        Promise.all([this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises])
+            .then(() => {
+                this.scene.wake();
+            })
+            .catch((e) =>
+                console.error(
+                    "Some scripts failed to load ot the connection failed to establish to WorkAdventure server",
+                    e
+                )
+            );
    }

    /**
@ -679,7 +702,7 @@ export class GameScene extends DirtyScene {
                playersStore.connectToRoomConnection(this.connection);
                userIsAdminStore.set(this.connection.hasTag("admin"));

-                this.connection.onUserJoins((message: MessageUserJoined) => {
+                this.connection.userJoinedMessageStream.subscribe((message) => {
                    const userMessage: AddPlayerInterface = {
                        userId: message.userId,
                        characterLayers: message.characterLayers,
@ -693,31 +716,33 @@ export class GameScene extends DirtyScene {
                    this.addPlayer(userMessage);
                });

-                this.connection.onUserMoved((message: UserMovedMessage) => {
-                    const position = message.getPosition();
+                this.connection.userMovedMessageStream.subscribe((message) => {
+                    const position = message.position;
                    if (position === undefined) {
                        throw new Error("Position missing from UserMovedMessage");
                    }

                    const messageUserMoved: MessageUserMovedInterface = {
-                        userId: message.getUserid(),
+                        userId: message.userId,
                        position: ProtobufClientUtils.toPointInterface(position),
                    };

                    this.updatePlayerPosition(messageUserMoved);
                });

-                this.connection.onUserLeft((userId: number) => {
-                    this.removePlayer(userId);
+                this.connection.userLeftMessageStream.subscribe((message) => {
+                    this.removePlayer(message.userId);
                });

-                this.connection.onGroupUpdatedOrCreated((groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
-                    this.shareGroupPosition(groupPositionMessage);
-                });
+                this.connection.groupUpdateMessageStream.subscribe(
+                    (groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
+                        this.shareGroupPosition(groupPositionMessage);
+                    }
+                );

-                this.connection.onGroupDeleted((groupId: number) => {
+                this.connection.groupDeleteMessageStream.subscribe((message) => {
                    try {
-                        this.deleteGroup(groupId);
+                        this.deleteGroup(message.groupId);
                    } catch (e) {
                        console.error(e);
                    }
@ -729,7 +754,7 @@ export class GameScene extends DirtyScene {
                    this.createSuccessorGameScene(true, true);
                });

-                this.connection.onActionableEvent((message) => {
+                this.connection.itemEventMessageStream.subscribe((message) => {
                    const item = this.actionableItems.get(message.itemId);
                    if (item === undefined) {
                        console.warn(
@ -742,18 +767,29 @@ export class GameScene extends DirtyScene {
                    item.fire(message.event, message.state, message.parameters);
                });

-                this.connection.onPlayerDetailsUpdated((message) => {
+                this.connection.playerDetailsUpdatedMessageStream.subscribe((message) => {
+                    if (message.details === undefined) {
+                        throw new Error("Malformed message. Missing details in PlayerDetailsUpdatedMessage");
+                    }
                    this.pendingEvents.enqueue({
                        type: "PlayerDetailsUpdated",
-                        details: message,
+                        details: {
+                            userId: message.userId,
+                            outlineColor: message.details.outlineColor,
+                            removeOutlineColor: message.details.removeOutlineColor,
+                        },
                    });
                });

                /**
                 * Triggered when we receive the JWT token to connect to Jitsi
                 */
-                this.connection.onStartJitsiRoom((jwt, room) => {
-                    this.startJitsi(room, jwt);
+                this.connection.sendJitsiJwtMessageStream.subscribe((message) => {
+                    this.startJitsi(message.jitsiRoom, message.jwt);
+                });
+
+                this.messageSubscription = this.connection.worldFullMessageStream.subscribe((message) => {
+                    this.showWorldFullError(message);
                });

                // When connection is performed, let's connect SimplePeer
@ -828,12 +864,15 @@ export class GameScene extends DirtyScene {
                    });
                });

+                this.emoteManager = new EmoteManager(this, this.connection);
+
                // this.gameMap.onLeaveLayer((layers) => {
                //     layers.forEach((layer) => {
                //         iframeListener.sendLeaveLayerEvent(layer.name);
                //     });
                // });
-            });
+            })
+            .catch((e) => console.error(e));
    }

    //todo: into dedicated classes
@ -886,7 +925,7 @@ export class GameScene extends DirtyScene {
            if (newValue) {
                this.onMapExit(
                    Room.getRoomPathFromExitSceneUrl(newValue as string, window.location.toString(), this.MapUrlFile)
-                );
+                ).catch((e) => console.error(e));
            } else {
                setTimeout(() => {
                    layoutManagerActionStore.removeAction("roomAccessDenied");
@ -895,7 +934,9 @@ export class GameScene extends DirtyScene {
        });
        this.gameMap.onPropertyChange(GameMapProperties.EXIT_URL, (newValue, oldValue) => {
            if (newValue) {
-                this.onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString()));
+                this.onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString())).catch((e) =>
+                    console.error(e)
+                );
            } else {
                setTimeout(() => {
                    layoutManagerActionStore.removeAction("roomAccessDenied");
@ -1081,21 +1122,47 @@ ${escapedMessage}
        this.iframeSubscriptionList.push(
            iframeListener.playSoundStream.subscribe((playSoundEvent) => {
                const url = new URL(playSoundEvent.url, this.MapUrlFile);
-                soundManager.playSound(this.load, this.sound, url.toString(), playSoundEvent.config);
+                soundManager
+                    .playSound(this.load, this.sound, url.toString(), playSoundEvent.config)
+                    .catch((e) => console.error(e));
            })
        );

        this.iframeSubscriptionList.push(
-            iframeListener.stopSoundStream.subscribe((stopSoundEvent) => {
-                const url = new URL(stopSoundEvent.url, this.MapUrlFile);
-                soundManager.stopSound(this.sound, url.toString());
+            iframeListener.trackCameraUpdateStream.subscribe(() => {
+                if (!this.firstCameraUpdateSent) {
+                    this.cameras.main.on("followupdate", (camera: Camera) => {
+                        const cameraEvent: WasCameraUpdatedEvent = {
+                            x: camera.worldView.x,
+                            y: camera.worldView.y,
+                            width: camera.worldView.width,
+                            height: camera.worldView.height,
+                            zoom: camera.scaleManager.zoom,
+                        };
+                        if (
+                            this.lastCameraEvent?.x == cameraEvent.x &&
+                            this.lastCameraEvent?.y == cameraEvent.y &&
+                            this.lastCameraEvent?.width == cameraEvent.width &&
+                            this.lastCameraEvent?.height == cameraEvent.height &&
+                            this.lastCameraEvent?.zoom == cameraEvent.zoom
+                        ) {
+                            return;
+                        }
+
+                        this.lastCameraEvent = cameraEvent;
+                        iframeListener.sendCameraUpdated(cameraEvent);
+                        this.firstCameraUpdateSent = true;
+                    });
+
+                    iframeListener.sendCameraUpdated(this.cameras.main);
+                }
            })
        );

        this.iframeSubscriptionList.push(
            iframeListener.loadSoundStream.subscribe((loadSoundEvent) => {
                const url = new URL(loadSoundEvent.url, this.MapUrlFile);
-                soundManager.loadSound(this.load, this.sound, url.toString());
+                soundManager.loadSound(this.load, this.sound, url.toString()).catch((e) => console.error(e));
            })
        );

@ -1106,11 +1173,15 @@ ${escapedMessage}
        );
        this.iframeSubscriptionList.push(
            iframeListener.loadPageStream.subscribe((url: string) => {
-                this.loadNextGameFromExitUrl(url).then(() => {
-                    this.events.once(EVENT_TYPE.POST_UPDATE, () => {
-                        this.onMapExit(Room.getRoomPathFromExitUrl(url, window.location.toString()));
-                    });
-                });
+                this.loadNextGameFromExitUrl(url)
+                    .then(() => {
+                        this.events.once(EVENT_TYPE.POST_UPDATE, () => {
+                            this.onMapExit(Room.getRoomPathFromExitUrl(url, window.location.toString())).catch((e) =>
+                                console.error(e)
+                            );
+                        });
+                    })
+                    .catch((e) => console.error(e));
            })
        );
        let scriptedBubbleSprite: Sprite;
@ -1151,6 +1222,12 @@ ${escapedMessage}
            })
        );

+        this.iframeSubscriptionList.push(
+            iframeListener.setPropertyStream.subscribe((setProperty) => {
+                this.setPropertyLayer(setProperty.layerName, setProperty.propertyName, setProperty.propertyValue);
+            })
+        );
+
        iframeListener.registerAnswerer("openCoWebsite", async (openCoWebsite, source) => {
            if (!source) {
                throw new Error("Unknown query source");
@ -1221,6 +1298,7 @@ ${escapedMessage}
                roomId: this.roomUrl,
                tags: this.connection ? this.connection.getAllTags() : [],
                variables: this.sharedVariablesManager.variables,
+                playerVariables: localUserStore.getAllUserProperties(),
                userRoomToken: this.connection ? this.connection.userRoomToken : "",
            };
        });
@ -1311,6 +1389,22 @@ ${escapedMessage}
            })
        );

+        iframeListener.registerAnswerer("setVariable", (event, source) => {
+            switch (event.target) {
+                case "global": {
+                    this.sharedVariablesManager.setVariable(event, source);
+                    break;
+                }
+                case "player": {
+                    localUserStore.setUserProperty(event.key, event.value);
+                    break;
+                }
+                default: {
+                    const _exhaustiveCheck: never = event.target;
+                }
+            }
+        });
+
        iframeListener.registerAnswerer("removeActionMessage", (message) => {
            layoutManagerActionStore.removeAction(message.uuid);
        });
@ -1329,6 +1423,13 @@ ${escapedMessage}
            this.CurrentPlayer.removeOutlineColor();
            this.connection?.emitPlayerOutlineColor(null);
        });
+
+        iframeListener.registerAnswerer("getPlayerPosition", () => {
+            return {
+                x: this.CurrentPlayer.x,
+                y: this.CurrentPlayer.y,
+            };
+        });
    }

    private setPropertyLayer(
@ -1337,7 +1438,7 @@ ${escapedMessage}
        propertyValue: string | number | boolean | undefined
    ): void {
        if (propertyName === GameMapProperties.EXIT_URL && typeof propertyValue === "string") {
-            this.loadNextGameFromExitUrl(propertyValue);
+            this.loadNextGameFromExitUrl(propertyValue).catch((e) => console.error(e));
        }
        this.gameMap.setLayerProperty(layerName, propertyName, propertyValue);
    }
@ -1422,7 +1523,7 @@ ${escapedMessage}

    public cleanupClosingScene(): void {
        // stop playing audio, close any open website, stop any open Jitsi
-        coWebsiteManager.closeCoWebsites();
+        coWebsiteManager.closeCoWebsites().catch((e) => console.error(e));
        // Stop the script, if any
        const scripts = this.getScriptUrls(this.mapFile);
        for (const script of scripts) {
@ -1443,6 +1544,7 @@ ${escapedMessage}
        this.peerStoreUnsubscribe();
        this.emoteUnsubscribe();
        this.emoteMenuUnsubscribe();
+        this.followUsersColorStoreUnsubscribe();
        this.biggestAvailableAreaStoreUnsubscribe();
        iframeListener.unregisterAnswerer("getState");
        iframeListener.unregisterAnswerer("loadTileset");
@ -1452,6 +1554,7 @@ ${escapedMessage}
        iframeListener.unregisterAnswerer("openCoWebsite");
        iframeListener.unregisterAnswerer("getCoWebsites");
        iframeListener.unregisterAnswerer("setPlayerOutline");
+        iframeListener.unregisterAnswerer("setVariable");
        this.sharedVariablesManager?.close();
        this.embeddedWebsiteManager?.close();

@ -1930,6 +2033,7 @@ ${escapedMessage}

        this.loader.resize();
    }
+
    private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
        for (const layer of this.mapFile.layers) {
            if (layer.type === "objectgroup" && layer.name === "floorLayer") {
@ -1942,6 +2046,7 @@ ${escapedMessage}
        }
        return undefined;
    }
+
    private reposition(): void {
        // Recompute camera offset if needed
        biggestAvailableAreaStore.recompute();
@ -1960,7 +2065,9 @@ ${escapedMessage}
        const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
        const jitsiWidth = allProps.get(GameMapProperties.JITSI_WIDTH) as number | undefined;

-        jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth);
+        jitsiFactory
+            .start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth)
+            .catch((e) => console.error(e));
        this.connection?.setSilent(true);
        mediaManager.hideGameOverlay();
        analyticsClient.enteredJitsi(roomName, this.room.id);
--- a/front/src/Phaser/Game/PlayerMovement.ts
+++ b/front/src/Phaser/Game/PlayerMovement.ts
@ -41,7 +41,7 @@ export class PlayerMovement {
            oldX: this.startPosition.x,
            oldY: this.startPosition.y,
            direction: this.endPosition.direction,
-            moving: true,
+            moving: this.endPosition.moving,
        };
    }
 }
--- a/front/src/Phaser/Game/SharedVariablesManager.ts
+++ b/front/src/Phaser/Game/SharedVariablesManager.ts
@ -3,6 +3,7 @@ import { iframeListener } from "../../Api/IframeListener";
 import type { GameMap } from "./GameMap";
 import type { ITiledMapLayer, ITiledMapObject } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
+import type { SetVariableEvent } from "../../Api/Events/SetVariableEvent";

 interface Variable {
    defaultValue: unknown;
@ -41,58 +42,58 @@ export class SharedVariablesManager {
            this._variables.set(name, value);
        }

-        roomConnection.onSetVariable((name, value) => {
+        roomConnection.variableMessageStream.subscribe(({ name, value }) => {
            this._variables.set(name, value);

            // On server change, let's notify the iframes
            iframeListener.setVariable({
                key: name,
                value: value,
+                target: "global",
            });
        });
+    }

-        // When a variable is modified from an iFrame
-        iframeListener.registerAnswerer("setVariable", (event, source) => {
-            const key = event.key;
+    public setVariable(event: SetVariableEvent, source: MessageEventSource | null): void {
+        const key = event.key;

-            const object = this.variableObjects.get(key);
+        const object = this.variableObjects.get(key);

-            if (object === undefined) {
-                const errMsg =
-                    'A script is trying to modify variable "' +
-                    key +
-                    '" but this variable is not defined in the map.' +
-                    'There should be an object in the map whose name is "' +
-                    key +
-                    '" and whose type is "variable"';
-                console.error(errMsg);
-                throw new Error(errMsg);
-            }
+        if (object === undefined) {
+            const errMsg =
+                'A script is trying to modify variable "' +
+                key +
+                '" but this variable is not defined in the map.' +
+                'There should be an object in the map whose name is "' +
+                key +
+                '" and whose type is "variable"';
+            console.error(errMsg);
+            throw new Error(errMsg);
+        }

-            if (object.writableBy && !this.roomConnection.hasTag(object.writableBy)) {
-                const errMsg =
-                    'A script is trying to modify variable "' +
-                    key +
-                    '" but this variable is only writable for users with tag "' +
-                    object.writableBy +
-                    '".';
-                console.error(errMsg);
-                throw new Error(errMsg);
-            }
+        if (object.writableBy && !this.roomConnection.hasTag(object.writableBy)) {
+            const errMsg =
+                'A script is trying to modify variable "' +
+                key +
+                '" but this variable is only writable for users with tag "' +
+                object.writableBy +
+                '".';
+            console.error(errMsg);
+            throw new Error(errMsg);
+        }

-            // Let's stop any propagation of the value we set is the same as the existing value.
-            if (JSON.stringify(event.value) === JSON.stringify(this._variables.get(key))) {
-                return;
-            }
+        // Let's stop any propagation of the value we set is the same as the existing value.
+        if (JSON.stringify(event.value) === JSON.stringify(this._variables.get(key))) {
+            return;
+        }

-            this._variables.set(key, event.value);
+        this._variables.set(key, event.value);

-            // Dispatch to the room connection.
-            this.roomConnection.emitSetVariableEvent(key, event.value);
+        // Dispatch to the room connection.
+        this.roomConnection.emitSetVariableEvent(key, event.value);

-            // Dispatch to other iframes
-            iframeListener.dispatchVariableToOtherIframes(key, event.value, source);
-        });
+        // Dispatch to other iframes
+        iframeListener.dispatchVariableToOtherIframes(key, event.value, source);
    }

    private static findVariablesInMap(gameMap: GameMap): Map<string, Variable> {
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@ -40,19 +40,21 @@ export class CustomizeScene extends AbstractCharacterScene {
    }

    preload() {
-        this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
-            bodyResourceDescriptions.forEach((bodyResourceDescription) => {
-                if (
-                    bodyResourceDescription.level == undefined ||
-                    bodyResourceDescription.level < 0 ||
-                    bodyResourceDescription.level > 5
-                ) {
-                    throw "Texture level is null";
-                }
-                this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
-            });
-            this.lazyloadingAttempt = true;
-        });
+        this.loadCustomSceneSelectCharacters()
+            .then((bodyResourceDescriptions) => {
+                bodyResourceDescriptions.forEach((bodyResourceDescription) => {
+                    if (
+                        bodyResourceDescription.level == undefined ||
+                        bodyResourceDescription.level < 0 ||
+                        bodyResourceDescription.level > 5
+                    ) {
+                        throw "Texture level is null";
+                    }
+                    this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
+                });
+                this.lazyloadingAttempt = true;
+            })
+            .catch((e) => console.error(e));

        this.layers = loadAllLayers(this.load);
        this.lazyloadingAttempt = false;
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@ -41,12 +41,14 @@ export class SelectCharacterScene extends AbstractCharacterScene {
    }

    preload() {
-        this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
-            bodyResourceDescriptions.forEach((bodyResourceDescription) => {
-                this.playerModels.push(bodyResourceDescription);
-            });
-            this.lazyloadingAttempt = true;
-        });
+        this.loadSelectSceneCharacters()
+            .then((bodyResourceDescriptions) => {
+                bodyResourceDescriptions.forEach((bodyResourceDescription) => {
+                    this.playerModels.push(bodyResourceDescription);
+                });
+                this.lazyloadingAttempt = true;
+            })
+            .catch((e) => console.error(e));
        this.playerModels = loadAllDefaultModels(this.load);
        this.lazyloadingAttempt = false;

--- a/front/src/Phaser/Map/ITiledMap.ts
+++ b/front/src/Phaser/Map/ITiledMap.ts
@ -162,6 +162,7 @@ export interface ITiledTileSet {

    imageheight: number;
    imagewidth: number;
+    columns: number;
    margin: number;
    name: string;
    properties?: ITiledMapProperty[];
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@ -1,16 +1,17 @@
 import { PlayerAnimationDirections } from "./Animation";
 import type { GameScene } from "../Game/GameScene";
-import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
+import { ActiveEventList, UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
 import { Character } from "../Entity/Character";
+import type { RemotePlayer } from "../Entity/RemotePlayer";
+
+import { get } from "svelte/store";
 import { userMovingStore } from "../../Stores/GameStore";
+import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";

 export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";

 export class Player extends Character {
-    private previousDirection: string = PlayerAnimationDirections.Down;
-    private wasMoving: boolean = false;
-
    constructor(
        Scene: GameScene,
        x: number,
@ -29,71 +30,105 @@ export class Player extends Character {
        this.getBody().setImmovable(false);
    }

-    moveUser(delta: number): void {
-        //if user client on shift, camera and player speed
-        let direction = null;
-        let moving = false;
-
-        const activeEvents = this.userInputManager.getEventListForGameTick();
-        const speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 25 : 9;
-        const moveAmount = speedMultiplier * 20;
-
-        let x = 0;
-        let y = 0;
+    private inputStep(activeEvents: ActiveEventList, x: number, y: number) {
+        // Process input events
        if (activeEvents.get(UserInputEvent.MoveUp)) {
-            y = -moveAmount;
-            direction = PlayerAnimationDirections.Up;
-            moving = true;
+            y = y - 1;
        } else if (activeEvents.get(UserInputEvent.MoveDown)) {
-            y = moveAmount;
-            direction = PlayerAnimationDirections.Down;
-            moving = true;
+            y = y + 1;
        }
+
        if (activeEvents.get(UserInputEvent.MoveLeft)) {
-            x = -moveAmount;
-            direction = PlayerAnimationDirections.Left;
-            moving = true;
+            x = x - 1;
        } else if (activeEvents.get(UserInputEvent.MoveRight)) {
-            x = moveAmount;
-            direction = PlayerAnimationDirections.Right;
-            moving = true;
+            x = x + 1;
        }
-        moving = moving || activeEvents.get(UserInputEvent.JoystickMove);

-        if (x !== 0 || y !== 0) {
+        // Compute movement deltas
+        const followMode = get(followStateStore) !== "off";
+        const speedup = activeEvents.get(UserInputEvent.SpeedUp) && !followMode ? 25 : 9;
+        const moveAmount = speedup * 20;
+        x = x * moveAmount;
+        y = y * moveAmount;
+
+        // Compute moving state
+        const joystickMovement = activeEvents.get(UserInputEvent.JoystickMove);
+        const moving = x !== 0 || y !== 0 || joystickMovement;
+
+        // Compute direction
+        let direction = this.lastDirection;
+        if (moving && !joystickMovement) {
+            if (Math.abs(x) > Math.abs(y)) {
+                direction = x < 0 ? PlayerAnimationDirections.Left : PlayerAnimationDirections.Right;
+            } else {
+                direction = y < 0 ? PlayerAnimationDirections.Up : PlayerAnimationDirections.Down;
+            }
+        }
+
+        // Send movement events
+        const emit = () => this.emit(hasMovedEventName, { moving, direction, x: this.x, y: this.y });
+        if (moving) {
            this.move(x, y);
-            this.emit(hasMovedEventName, { moving, direction, x: this.x, y: this.y, oldX: x, oldY: y });
-        } else if (this.wasMoving && moving) {
-            // slow joystick movement
-            this.move(0, 0);
-            this.emit(hasMovedEventName, {
-                moving,
-                direction: this.previousDirection,
-                x: this.x,
-                y: this.y,
-                oldX: x,
-                oldY: y,
-            });
-        } else if (this.wasMoving && !moving) {
+            emit();
+        } else if (get(userMovingStore)) {
            this.stop();
-            this.emit(hasMovedEventName, {
-                moving,
-                direction: this.previousDirection,
-                x: this.x,
-                y: this.y,
-                oldX: x,
-                oldY: y,
-            });
+            emit();
        }

-        if (direction !== null) {
-            this.previousDirection = direction;
-        }
-        this.wasMoving = moving;
+        // Update state
        userMovingStore.set(moving);
    }

-    public isMoving(): boolean {
-        return this.wasMoving;
+    private computeFollowMovement(): number[] {
+        // Find followed WOKA and abort following if we lost it
+        const player = this.scene.MapPlayersByKey.get(get(followUsersStore)[0]);
+        if (!player) {
+            this.scene.connection?.emitFollowAbort();
+            followStateStore.set("off");
+            return [0, 0];
+        }
+
+        // Compute movement direction
+        const xDistance = player.x - this.x;
+        const yDistance = player.y - this.y;
+        const distance = Math.pow(xDistance, 2) + Math.pow(yDistance, 2);
+        if (distance < 2000) {
+            return [0, 0];
+        }
+        const xMovement = xDistance / Math.sqrt(distance);
+        const yMovement = yDistance / Math.sqrt(distance);
+        return [xMovement, yMovement];
+    }
+
+    public moveUser(delta: number): void {
+        const activeEvents = this.userInputManager.getEventListForGameTick();
+        const state = get(followStateStore);
+        const role = get(followRoleStore);
+
+        if (activeEvents.get(UserInputEvent.Follow)) {
+            if (state === "off" && this.scene.groups.size > 0) {
+                this.sendFollowRequest();
+            } else if (state === "active") {
+                followStateStore.set("ending");
+            }
+        }
+
+        let x = 0;
+        let y = 0;
+        if ((state === "active" || state === "ending") && role === "follower") {
+            [x, y] = this.computeFollowMovement();
+        }
+        this.inputStep(activeEvents, x, y);
+    }
+
+    public sendFollowRequest() {
+        this.scene.connection?.emitFollowRequest();
+        followRoleStore.set("leader");
+        followStateStore.set("active");
+    }
+
+    public startFollowing() {
+        followStateStore.set("active");
+        this.scene.connection?.emitFollowConfirmation();
    }
 }
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@ -31,6 +31,10 @@ export class WaScaleManager {
            height: height * devicePixelRatio,
        });

+        if (gameSize.width == 0) {
+            return;
+        }
+
        this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;

        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
--- a/front/src/Phaser/UserInput/UserInputManager.ts
+++ b/front/src/Phaser/UserInput/UserInputManager.ts
@ -16,6 +16,7 @@ export enum UserInputEvent {
    MoveDown,
    SpeedUp,
    Interact,
+    Follow,
    Shout,
    JoystickMove,
 }
@ -147,6 +148,10 @@ export class UserInputManager {
                event: UserInputEvent.Interact,
                keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE, false),
            },
+            {
+                event: UserInputEvent.Follow,
+                keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F, false),
+            },
            {
                event: UserInputEvent.Shout,
                keyInstance: this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F, false),
--- a/front/src/Stores/FollowStore.ts
+++ b/front/src/Stores/FollowStore.ts
@ -0,0 +1,89 @@
+import { derived, writable } from "svelte/store";
+import { getColorRgbFromHue } from "../WebRtc/ColorGenerator";
+import { gameManager } from "../Phaser/Game/GameManager";
+
+type FollowState = "off" | "requesting" | "active" | "ending";
+type FollowRole = "leader" | "follower";
+
+export const followStateStore = writable<FollowState>("off");
+export const followRoleStore = writable<FollowRole>("leader");
+
+function createFollowUsersStore() {
+    const { subscribe, update, set } = writable<number[]>([]);
+
+    return {
+        subscribe,
+        addFollowRequest(leader: number): void {
+            followStateStore.set("requesting");
+            followRoleStore.set("follower");
+            set([leader]);
+        },
+        addFollower(user: number): void {
+            update((followers) => {
+                followers.push(user);
+                return followers;
+            });
+        },
+        /**
+         * Removes the follower from the store.
+         * Will update followStateStore and followRoleStore if nobody is following anymore.
+         * @param user
+         */
+        removeFollower(user: number): void {
+            update((followers) => {
+                const oldFollowerCount = followers.length;
+                followers = followers.filter((id) => id !== user);
+
+                if (followers.length === 0 && oldFollowerCount > 0) {
+                    followStateStore.set("off");
+                    followRoleStore.set("leader");
+                }
+
+                return followers;
+            });
+        },
+        stopFollowing(): void {
+            set([]);
+            followStateStore.set("off");
+            followRoleStore.set("leader");
+        },
+    };
+}
+
+export const followUsersStore = createFollowUsersStore();
+
+/**
+ * This store contains the color of the follow group. It is derived from the ID of the leader.
+ */
+export const followUsersColorStore = derived(
+    [followStateStore, followRoleStore, followUsersStore],
+    ([$followStateStore, $followRoleStore, $followUsersStore]) => {
+        if ($followStateStore !== "active") {
+            return undefined;
+        }
+
+        if ($followUsersStore.length === 0) {
+            return undefined;
+        }
+
+        let leaderId: number;
+        if ($followRoleStore === "leader") {
+            // Let's get my ID by a quite complicated way....
+            leaderId = gameManager.getCurrentGameScene().connection?.getUserId() ?? 0;
+        } else {
+            leaderId = $followUsersStore[0];
+        }
+
+        // Let's compute a random hue between 0 and 1 that varies enough to be interesting
+        const hue = ((leaderId * 197) % 255) / 255;
+
+        let { r, g, b } = getColorRgbFromHue(hue);
+        if ($followRoleStore === "follower") {
+            // Let's make the followers very slightly darker
+            r *= 0.9;
+            g *= 0.9;
+            b *= 0.9;
+        }
+        return (Math.round(r * 255) << 16) | (Math.round(g * 255) << 8) | Math.round(b * 255);
+    }
+);
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@ -360,32 +360,27 @@ const implementCorrectTrackBehavior = getNavigatorType() === NavigatorType.firef
 /**
 * Stops the camera from filming
 */
-function applyCameraConstraints(currentStream: MediaStream | null, constraints: MediaTrackConstraints | boolean): void {
+async function applyCameraConstraints(
+    currentStream: MediaStream | null,
+    constraints: MediaTrackConstraints | boolean
+): Promise<void[]> {
    if (!currentStream) {
-        return;
-    }
-    for (const track of currentStream.getVideoTracks()) {
-        toggleConstraints(track, constraints).catch((e) =>
-            console.error("Error while setting new camera constraints:", e)
-        );
+        return [];
    }
+    return Promise.all(currentStream.getVideoTracks().map((track) => toggleConstraints(track, constraints)));
 }

 /**
 * Stops the microphone from listening
 */
-function applyMicrophoneConstraints(
+async function applyMicrophoneConstraints(
    currentStream: MediaStream | null,
    constraints: MediaTrackConstraints | boolean
-): void {
+): Promise<void[]> {
    if (!currentStream) {
-        return;
-    }
-    for (const track of currentStream.getAudioTracks()) {
-        toggleConstraints(track, constraints).catch((e) =>
-            console.error("Error while setting new audio constraints:", e)
-        );
+        return [];
    }
+    return Promise.all(currentStream.getAudioTracks().map((track) => toggleConstraints(track, constraints)));
 }

 async function toggleConstraints(track: MediaStreamTrack, constraints: MediaTrackConstraints | boolean): Promise<void> {
@ -477,8 +472,8 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
            }
        }

-        applyMicrophoneConstraints(currentStream, constraints.audio || false);
-        applyCameraConstraints(currentStream, constraints.video || false);
+        applyMicrophoneConstraints(currentStream, constraints.audio || false).catch((e) => console.error(e));
+        applyCameraConstraints(currentStream, constraints.video || false).catch((e) => console.error(e));

        if (implementCorrectTrackBehavior) {
            //on good navigators like firefox, we can instantiate the stream once and simply disable or enable the tracks as needed
--- a/front/src/Stores/PlayersStore.ts
+++ b/front/src/Stores/PlayersStore.ts
@ -3,6 +3,7 @@ import type { PlayerInterface } from "../Phaser/Game/PlayerInterface";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { getRandomColor } from "../WebRtc/ColorGenerator";
 import { localUserStore } from "../Connexion/LocalUserStore";
+import room from "../Api/iframe/room";

 let idCount = 0;

@ -19,7 +20,8 @@ function createPlayersStore() {
        connectToRoomConnection: (roomConnection: RoomConnection) => {
            players = new Map<number, PlayerInterface>();
            set(players);
-            roomConnection.onUserJoins((message) => {
+            // TODO: it would be cool to unsubscribe properly here
+            roomConnection.userJoinedMessageStream.subscribe((message) => {
                update((users) => {
                    users.set(message.userId, {
                        userId: message.userId,
@ -33,9 +35,9 @@ function createPlayersStore() {
                    return users;
                });
            });
-            roomConnection.onUserLeft((userId) => {
+            roomConnection.userLeftMessageStream.subscribe((message) => {
                update((users) => {
-                    users.delete(userId);
+                    users.delete(message.userId);
                    return users;
                });
            });
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@ -156,7 +156,7 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
                    error: e instanceof Error ? e : new Error("An unknown error happened"),
                });
            }
-        })();
+        })().catch((e) => console.error(e));
    }
 );

--- a/front/src/Stores/TypeMessageStore/BanMessageStore.ts
+++ b/front/src/Stores/TypeMessageStore/BanMessageStore.ts
@ -1,5 +1,3 @@
-import { writable } from "svelte/store";
+import { createMessageStore } from "./MessageStore";

-export const banMessageVisibleStore = writable(false);
-
-export const banMessageContentStore = writable("");
+export const banMessageStore = createMessageStore();
--- a/front/src/Stores/TypeMessageStore/MessageStore.ts
+++ b/front/src/Stores/TypeMessageStore/MessageStore.ts
@ -0,0 +1,29 @@
+import { writable } from "svelte/store";
+import { v4 as uuidv4 } from "uuid";
+
+export interface Message {
+    id: string;
+    text: string;
+}
+
+/**
+ * A store that contains a list of messages to be displayed.
+ */
+export function createMessageStore() {
+    const { subscribe, update } = writable<Message[]>([]);
+
+    return {
+        subscribe,
+        addMessage: (text: string): void => {
+            update((messages: Message[]) => {
+                return [...messages, { id: uuidv4(), text }];
+            });
+        },
+        clearMessageById: (id: string): void => {
+            update((messages: Message[]) => {
+                messages = messages.filter((message) => message.id !== id);
+                return messages;
+            });
+        },
+    };
+}
--- a/front/src/Stores/TypeMessageStore/TextMessageStore.ts
+++ b/front/src/Stores/TypeMessageStore/TextMessageStore.ts
@ -1,5 +1,3 @@
-import { writable } from "svelte/store";
+import { createMessageStore } from "./MessageStore";

-export const textMessageVisibleStore = writable(false);
-
-export const textMessageContentStore = writable("");
+export const textMessageStore = createMessageStore();
--- a/front/src/Url/UrlManager.ts
+++ b/front/src/Url/UrlManager.ts
@ -44,7 +44,7 @@ class UrlManager {
        if (window.location.pathname === room.id) return;
        //Set last room visited! (connected or nor, must to be saved in localstorage and cache API)
        //use href to keep # value
-        localUserStore.setLastRoomUrl(room.href);
+        localUserStore.setLastRoomUrl(room.href).catch((e) => console.error(e));
        const hash = window.location.hash;
        const search = room.search.toString();
        history.pushState({}, "WorkAdventure", room.id + (search ? "?" + search : "") + hash);
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@ -149,7 +149,7 @@ class CoWebsiteManager {
            }

            buttonCloseCoWebsites.blur();
-            this.closeCoWebsites();
+            this.closeCoWebsites().catch((e) => console.error(e));
        });

        const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId);
@ -515,70 +515,72 @@ class CoWebsiteManager {
                throw new Error("Too many we");
            }

-            Promise.resolve(callback(this.cowebsiteBufferDom)).then((iframe) => {
-                iframe?.classList.add("pixel");
+            Promise.resolve(callback(this.cowebsiteBufferDom))
+                .then((iframe) => {
+                    iframe?.classList.add("pixel");

-                if (!iframe.id) {
-                    do {
-                        iframe.id = "cowebsite-iframe-" + (Math.random() + 1).toString(36).substring(7);
-                    } while (this.getCoWebsiteById(iframe.id));
-                }
-
-                const onloadPromise = new Promise<void>((resolve) => {
-                    iframe.onload = () => resolve();
-                });
-
-                const icon = this.generateCoWebsiteIcon(iframe);
-
-                const coWebsite = {
-                    iframe,
-                    icon,
-                    position: position ?? this.coWebsites.length,
-                };
-
-                // Iframe management on mobile
-                icon.addEventListener("click", () => {
-                    if (this.isSmallScreen()) {
-                        this.moveRightPreviousCoWebsite(coWebsite, 0);
+                    if (!iframe.id) {
+                        do {
+                            iframe.id = "cowebsite-iframe-" + (Math.random() + 1).toString(36).substring(7);
+                        } while (this.getCoWebsiteById(iframe.id));
                    }
-                });

-                this.coWebsites.push(coWebsite);
-                this.cowebsiteSubIconsDom.appendChild(icon);
+                    const onloadPromise = new Promise<void>((resolve) => {
+                        iframe.onload = () => resolve();
+                    });

-                const onTimeoutPromise = new Promise<void>((resolve) => {
-                    setTimeout(() => resolve(), 2000);
-                });
+                    const icon = this.generateCoWebsiteIcon(iframe);

-                this.currentOperationPromise = this.currentOperationPromise
-                    .then(() => Promise.race([onloadPromise, onTimeoutPromise]))
-                    .then(() => {
-                        if (coWebsite.position === 0) {
-                            this.openMain();
-                            if (widthPercent) {
-                                this.widthPercent = widthPercent;
-                            }
+                    const coWebsite = {
+                        iframe,
+                        icon,
+                        position: position ?? this.coWebsites.length,
+                    };

-                            setTimeout(() => {
-                                this.fire();
+                    // Iframe management on mobile
+                    icon.addEventListener("click", () => {
+                        if (this.isSmallScreen()) {
+                            this.moveRightPreviousCoWebsite(coWebsite, 0);
+                        }
+                    });
+
+                    this.coWebsites.push(coWebsite);
+                    this.cowebsiteSubIconsDom.appendChild(icon);
+
+                    const onTimeoutPromise = new Promise<void>((resolve) => {
+                        setTimeout(() => resolve(), 2000);
+                    });
+
+                    this.currentOperationPromise = this.currentOperationPromise
+                        .then(() => Promise.race([onloadPromise, onTimeoutPromise]))
+                        .then(() => {
+                            if (coWebsite.position === 0) {
+                                this.openMain();
+                                if (widthPercent) {
+                                    this.widthPercent = widthPercent;
+                                }
+
+                                setTimeout(() => {
+                                    this.fire();
+                                    position !== undefined
+                                        ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
+                                        : this.moveCoWebsite(coWebsite, coWebsite.position);
+                                }, animationTime);
+                            } else {
                                position !== undefined
                                    ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
                                    : this.moveCoWebsite(coWebsite, coWebsite.position);
-                            }, animationTime);
-                        } else {
-                            position !== undefined
-                                ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
-                                : this.moveCoWebsite(coWebsite, coWebsite.position);
-                        }
+                            }

-                        return resolve(coWebsite);
-                    })
-                    .catch((err) => {
-                        console.error("Error loadCoWebsite => ", err);
-                        this.removeCoWebsiteFromStack(coWebsite);
-                        return reject();
-                    });
-            });
+                            return resolve(coWebsite);
+                        })
+                        .catch((err) => {
+                            console.error("Error loadCoWebsite => ", err);
+                            this.removeCoWebsiteFromStack(coWebsite);
+                            return reject();
+                        });
+                })
+                .catch((e) => console.error("Error loadCoWebsite >=> ", e));
        });
    }

@ -603,17 +605,21 @@ class CoWebsiteManager {
        return this.currentOperationPromise;
    }

-    public closeJitsi() {
+    public async closeJitsi() {
        const jitsi = this.searchJitsi();
        if (jitsi) {
-            this.closeCoWebsite(jitsi);
+            return this.closeCoWebsite(jitsi);
        }
    }

    public closeCoWebsites(): Promise<void> {
        this.currentOperationPromise = this.currentOperationPromise.then(() => {
+            const promises: Promise<void>[] = [];
            this.coWebsites.forEach((coWebsite: CoWebsite) => {
-                this.closeCoWebsite(coWebsite);
+                promises.push(this.closeCoWebsite(coWebsite));
+            });
+            return Promise.all(promises).then(() => {
+                return;
            });
        });
        return this.currentOperationPromise;
--- a/front/src/WebRtc/ColorGenerator.ts
+++ b/front/src/WebRtc/ColorGenerator.ts
@ -1,13 +1,29 @@
 export function getRandomColor(): string {
+    const { r, g, b } = getColorRgbFromHue(Math.random());
+    return toHexa(r, g, b);
+}
+
+function toHexa(r: number, g: number, b: number): string {
+    return "#" + Math.floor(r * 256).toString(16) + Math.floor(g * 256).toString(16) + Math.floor(b * 256).toString(16);
+}
+
+export function getColorRgbFromHue(hue: number): { r: number; g: number; b: number } {
    const golden_ratio_conjugate = 0.618033988749895;
-    let hue = Math.random();
    hue += golden_ratio_conjugate;
    hue %= 1;
    return hsv_to_rgb(hue, 0.5, 0.95);
 }

+function stringToDouble(string: string): number {
+    let num = 1;
+    for (const char of string.split("")) {
+        num *= char.charCodeAt(0);
+    }
+    return (num % 255) / 255;
+}
+
 //todo: test this.
-function hsv_to_rgb(hue: number, saturation: number, brightness: number): string {
+function hsv_to_rgb(hue: number, saturation: number, brightness: number): { r: number; g: number; b: number } {
    const h_i = Math.floor(hue * 6);
    const f = hue * 6 - h_i;
    const p = brightness * (1 - saturation);
@ -48,5 +64,9 @@ function hsv_to_rgb(hue: number, saturation: number, brightness: number): string
        default:
            throw "h_i cannot be " + h_i;
    }
-    return "#" + Math.floor(r * 256).toString(16) + Math.floor(g * 256).toString(16) + Math.floor(b * 256).toString(16);
+    return {
+        r,
+        g,
+        b,
+    };
 }
--- a/front/src/WebRtc/JitsiFactory.ts
+++ b/front/src/WebRtc/JitsiFactory.ts
@ -1,5 +1,5 @@
 import { JITSI_URL } from "../Enum/EnvironmentVariable";
-import { coWebsiteManager } from "./CoWebsiteManager";
+import { CoWebsite, coWebsiteManager } from "./CoWebsiteManager";
 import { requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
 import { get } from "svelte/store";

@ -140,8 +140,8 @@ class JitsiFactory {
        interfaceConfig?: object,
        jitsiUrl?: string,
        jitsiWidth?: number
-    ): void {
-        coWebsiteManager.addCoWebsite(
+    ): Promise<CoWebsite> {
+        return coWebsiteManager.addCoWebsite(
            async (cowebsiteDiv) => {
                // Jitsi meet external API maintains some data in local storage
                // which is sent via the appData URL parameter when joining a
@ -200,7 +200,7 @@ class JitsiFactory {
        const jitsiCoWebsite = coWebsiteManager.searchJitsi();

        if (jitsiCoWebsite) {
-            coWebsiteManager.closeJitsi();
+            coWebsiteManager.closeJitsi().catch((e) => console.error(e));
        }

        this.jitsiApi.removeListener("audioMuteStatusChanged", this.audioCallback);
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@ -75,23 +75,25 @@ export class SimplePeer {
     */
    private initialise() {
        //receive signal by gemer
-        this.Connection.receiveWebrtcSignal((message: WebRtcSignalReceivedMessageInterface) => {
+        this.Connection.webRtcSignalToClientMessageStream.subscribe((message: WebRtcSignalReceivedMessageInterface) => {
            this.receiveWebrtcSignal(message);
        });

        //receive signal by gemer
-        this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcSignalReceivedMessageInterface) => {
-            this.receiveWebrtcScreenSharingSignal(message);
-        });
+        this.Connection.webRtcScreenSharingSignalToClientMessageStream.subscribe(
+            (message: WebRtcSignalReceivedMessageInterface) => {
+                this.receiveWebrtcScreenSharingSignal(message);
+            }
+        );

        mediaManager.showGameOverlay();

        //receive message start
-        this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
+        this.Connection.webRtcStartMessageStream.subscribe((message: UserSimplePeerInterface) => {
            this.receiveWebrtcStart(message);
        });

-        this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {
+        this.Connection.webRtcDisconnectMessageStream.subscribe((data: WebRtcDisconnectMessageInterface): void => {
            this.closeConnection(data.userId);
        });
    }
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@ -9,30 +9,34 @@ import {
 } from "./Api/Events/IframeEvent";
 import chat from "./Api/iframe/chat";
 import type { IframeCallback } from "./Api/iframe/IframeApiContribution";
-import nav from "./Api/iframe/nav";
+import nav, { CoWebsite } from "./Api/iframe/nav";
 import controls from "./Api/iframe/controls";
 import ui from "./Api/iframe/ui";
 import sound from "./Api/iframe/sound";
 import room, { setMapURL, setRoomId } from "./Api/iframe/room";
-import state, { initVariables } from "./Api/iframe/state";
+import { createState } from "./Api/iframe/state";
 import player, { setPlayerName, setTags, setUserRoomToken, setUuid } from "./Api/iframe/player";
 import type { ButtonDescriptor } from "./Api/iframe/Ui/ButtonDescriptor";
 import type { Popup } from "./Api/iframe/Ui/Popup";
 import type { Sound } from "./Api/iframe/Sound/Sound";
 import { answerPromises, queryWorkadventure } from "./Api/iframe/IframeApiContribution";
+import camera from "./Api/iframe/camera";
+
+const globalState = createState("global");

 // Notify WorkAdventure that we are ready to receive data
 const initPromise = queryWorkadventure({
    type: "getState",
    data: undefined,
-}).then((state) => {
-    setPlayerName(state.nickname);
-    setRoomId(state.roomId);
-    setMapURL(state.mapUrl);
-    setTags(state.tags);
-    setUuid(state.uuid);
-    initVariables(state.variables as Map<string, unknown>);
-    setUserRoomToken(state.userRoomToken);
+}).then((gameState) => {
+    setPlayerName(gameState.nickname);
+    setRoomId(gameState.roomId);
+    setMapURL(gameState.mapUrl);
+    setTags(gameState.tags);
+    setUuid(gameState.uuid);
+    globalState.initVariables(gameState.variables as Map<string, unknown>);
+    player.state.initVariables(gameState.playerVariables as Map<string, unknown>);
+    setUserRoomToken(gameState.userRoomToken);
 });

 const wa = {
@ -43,7 +47,8 @@ const wa = {
    sound,
    room,
    player,
-    state,
+    camera,
+    state: globalState,

    onInit(): Promise<void> {
        return initPromise;
@ -131,17 +136,17 @@ const wa = {
    /**
     * @deprecated Use WA.nav.openCoWebSite instead
     */
-    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
+    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): Promise<CoWebsite> {
        console.warn("Method WA.openCoWebSite is deprecated. Please use WA.nav.openCoWebSite instead");
-        nav.openCoWebSite(url, allowApi, allowPolicy);
+        return nav.openCoWebSite(url, allowApi, allowPolicy);
    },

    /**
     * @deprecated Use WA.nav.closeCoWebSite instead
     */
-    closeCoWebSite(): void {
+    closeCoWebSite(): Promise<void> {
        console.warn("Method WA.closeCoWebSite is deprecated. Please use WA.nav.closeCoWebSite instead");
-        nav.closeCoWebSite();
+        return nav.closeCoWebSite();
    },

    /**
@ -225,7 +230,5 @@ window.addEventListener(
                callback?.callback(payloadData);
            }
        }
-
-        // ...
    }
 );
--- a/front/style/style.scss
+++ b/front/style/style.scss
@ -1066,6 +1066,7 @@ div.action.danger p.action-body{
    width: 100%;
    height: 100%;
    pointer-events: none;
+    user-select: none;

    & > div {
        position: relative;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path d="M9.5,5.5c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S8.4,5.5,9.5,5.5z M5.75,8.9L3,23h2.1l1.75-8L9,17v6h2v-7.55L8.95,13.4 l0.6-3C10.85,12,12.8,13,15,13v-2c-1.85,0-3.45-1-4.35-2.45L9.7,6.95C9.35,6.35,8.7,6,8,6C7.75,6,7.5,6.05,7.25,6.15L2,8.3V13h2 V9.65L5.75,8.9 M13,2v7h3.75v14h1.5V9H22V2H13z M18.01,8V6.25H14.5v-1.5h3.51V3l2.49,2.5L18.01,8z"/></svg>