Merge branch 'develop' into 2daysLimit

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
2022-01-05 11:47:31 +01:00 · 2022-01-05 11:47:31 +01:00 · 8b758a0053
commit 8b758a0053
parent 5d729d0560 8059af43e9
57 changed files with 2041 additions and 2119 deletions
--- 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/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/FollowMenu/FollowMenu.svelte
+++ b/front/src/Components/FollowMenu/FollowMenu.svelte
@ -0,0 +1,208 @@
+<!--
+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.connection?.emitFollowRequest();
+        followRoleStore.set("leader");
+        followStateStore.set("active");
+    }
+
+    function acceptFollowRequest() {
+        gameScene.CurrentPlayer.enableFollowing();
+        gameScene.connection?.emitFollowConfirmation();
+    }
+
+    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"}
+    <div class="interact-menu nes-container is-rounded">
+        {#if $followRoleStore === "follower"}
+            <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>
+        {:else if $followRoleStore === "leader"}
+            <section class="interact-menu-question">
+                <p>Should never be displayed</p>
+            </section>
+        {/if}
+    </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/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;
@ -59,6 +60,10 @@
        localUserStore.setForceCowebsiteTrigger(forceCowebsiteTrigger);
    }

+    function changeIgnoreFollowRequests() {
+        localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
+    }
+
    function closeMenu() {
        menuVisiblilityStore.set(false);
    }
@ -123,6 +128,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/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/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";
--- 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";
@ -128,6 +129,13 @@ class LocalUserStore {
        return localStorage.getItem(forceCowebsiteTriggerKey) === "true";
    }

+    setIgnoreFollowRequests(value: boolean): void {
+        localStorage.setItem(ignoreFollowRequests, value.toString());
+    }
+    getIgnoreFollowRequests(): boolean {
+        return localStorage.getItem(ignoreFollowRequests) === "true";
+    }
+
    setLastRoomUrl(roomUrl: string): void {
        localStorage.setItem(lastRoomUrl, roomUrl.toString());
        if ("caches" in window) {
--- 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
@ -30,6 +30,9 @@ import {
    PingMessage,
    EmoteEventMessage,
    EmotePromptMessage,
+    FollowRequestMessage,
+    FollowConfirmationMessage,
+    FollowAbortMessage,
    SendUserMessage,
    BanUserMessage,
    VariableMessage,
@ -59,7 +62,10 @@ import { adminMessagesService } from "./AdminMessagesService";
 import { worldFullMessageStream } from "./WorldFullMessageStream";
 import { connectionManager } from "./ConnectionManager";
 import { emoteEventStream } from "./EmoteEventStream";
+import { get } from "svelte/store";
 import { warningContainerStore } from "../Stores/MenuStore";
+import { followStateStore, followRoleStore, followUsersStore } from "../Stores/FollowStore";
+import { localUserStore } from "./LocalUserStore";

 const manualPingDelay = 20000;

@ -262,6 +268,21 @@ export class RoomConnection implements RoomConnection {
                warningContainerStore.activateWarningContainer();
            } else if (message.hasRefreshroommessage()) {
                //todo: implement a way to notify the user the room was refreshed.
+            } else if (message.hasFollowrequestmessage()) {
+                const requestMessage = message.getFollowrequestmessage();
+                if (!localUserStore.getIgnoreFollowRequests()) {
+                    followUsersStore.addFollowRequest(requestMessage.getLeader());
+                }
+            } else if (message.hasFollowconfirmationmessage()) {
+                const responseMessage = message.getFollowconfirmationmessage();
+                followUsersStore.addFollower(responseMessage.getFollower());
+            } else if (message.hasFollowabortmessage()) {
+                const abortMessage = message.getFollowabortmessage();
+                if (get(followRoleStore) === "follower") {
+                    followUsersStore.stopFollowing();
+                } else {
+                    followUsersStore.removeFollower(abortMessage.getFollower());
+                }
            } else if (message.hasErrormessage()) {
                const errorMessage = message.getErrormessage() as ErrorMessage;
                console.error("An error occurred server side: " + errorMessage.getMessage());
@ -746,6 +767,43 @@ export class RoomConnection implements RoomConnection {
        this.socket.send(clientToServerMessage.serializeBinary().buffer);
    }

+    public emitFollowRequest(): void {
+        if (!this.userId) {
+            return;
+        }
+        const message = new FollowRequestMessage();
+        message.setLeader(this.userId);
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setFollowrequestmessage(message);
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
+
+    public emitFollowConfirmation(): void {
+        if (!this.userId) {
+            return;
+        }
+        const message = new FollowConfirmationMessage();
+        message.setLeader(get(followUsersStore)[0]);
+        message.setFollower(this.userId);
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setFollowconfirmationmessage(message);
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
+
+    public emitFollowAbort(): void {
+        const isLeader = get(followRoleStore) === "leader";
+        const hasFollowers = get(followUsersStore).length > 0;
+        if (!this.userId || (isLeader && !hasFollowers)) {
+            return;
+        }
+        const message = new FollowAbortMessage();
+        message.setLeader(isLeader ? this.userId : get(followUsersStore)[0]);
+        message.setFollower(isLeader ? 0 : this.userId);
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setFollowabortmessage(message);
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
+
    public getAllTags(): string[] {
        return this.tags;
    }
--- 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/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/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";
@ -91,6 +91,8 @@ 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";

 export interface GameSceneInitInterface {
    initPosition: PointInterface | null;
@ -165,9 +167,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;
@ -646,6 +650,16 @@ export class GameScene extends DirtyScene {
            }
        });

+        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();
        });
@ -1443,6 +1457,7 @@ ${escapedMessage}
        this.peerStoreUnsubscribe();
        this.emoteUnsubscribe();
        this.emoteMenuUnsubscribe();
+        this.followUsersColorStoreUnsubscribe();
        this.biggestAvailableAreaStoreUnsubscribe();
        iframeListener.unregisterAnswerer("getState");
        iframeListener.unregisterAnswerer("loadTileset");
--- 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/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,99 @@ 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 enableFollowing() {
+        followStateStore.set("active");
+    }
+
+    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) {
+                followStateStore.set("requesting");
+                followRoleStore.set("leader");
+            } 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);
    }
 }
--- 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,90 @@
+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]) => {
+        console.log($followStateStore);
+        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/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/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/tests/Phaser/Game/PlayerMovementTest.ts
+++ b/front/tests/Phaser/Game/PlayerMovementTest.ts
@ -1,22 +1,24 @@
 import "jasmine";
-import {PlayerMovement} from "../../../src/Phaser/Game/PlayerMovement";
+import { PlayerMovement } from "../../../src/Phaser/Game/PlayerMovement";

 describe("Interpolation / Extrapolation", () => {
    it("should interpolate", () => {
-        const playerMovement = new PlayerMovement({
-            x: 100, y: 200
-        }, 42000,
+        const playerMovement = new PlayerMovement(
+            {
+                x: 100,
+                y: 200,
+            },
+            42000,
            {
                x: 200,
                y: 100,
                oldX: 100,
                oldY: 200,
                moving: true,
-                direction: "up"
+                direction: "up",
            },
            42200
-            );
-
+        );

        expect(playerMovement.isOutdated(42100)).toBe(false);
        expect(playerMovement.isOutdated(43000)).toBe(true);
@ -26,8 +28,8 @@ describe("Interpolation / Extrapolation", () => {
            y: 150,
            oldX: 100,
            oldY: 200,
-            direction: 'up',
-            moving: true
+            direction: "up",
+            moving: true,
        });

        expect(playerMovement.getPosition(42200)).toEqual({
@ -35,8 +37,8 @@ describe("Interpolation / Extrapolation", () => {
            y: 100,
            oldX: 100,
            oldY: 200,
-            direction: 'up',
-            moving: true
+            direction: "up",
+            moving: true,
        });

        expect(playerMovement.getPosition(42300)).toEqual({
@ -44,22 +46,25 @@ describe("Interpolation / Extrapolation", () => {
            y: 50,
            oldX: 100,
            oldY: 200,
-            direction: 'up',
-            moving: true
+            direction: "up",
+            moving: true,
        });
    });

    it("should not extrapolate if we stop", () => {
-        const playerMovement = new PlayerMovement({
-                x: 100, y: 200
-            }, 42000,
+        const playerMovement = new PlayerMovement(
+            {
+                x: 100,
+                y: 200,
+            },
+            42000,
            {
                x: 200,
                y: 100,
                oldX: 100,
                oldY: 200,
                moving: false,
-                direction: "up"
+                direction: "up",
            },
            42200
        );
@ -69,22 +74,25 @@ describe("Interpolation / Extrapolation", () => {
            y: 100,
            oldX: 100,
            oldY: 200,
-            direction: 'up',
-            moving: false
+            direction: "up",
+            moving: false,
        });
    });

-    it("should should keep moving until it stops", () => {
-        const playerMovement = new PlayerMovement({
-                x: 100, y: 200
-            }, 42000,
+    it("should keep moving until it stops", () => {
+        const playerMovement = new PlayerMovement(
+            {
+                x: 100,
+                y: 200,
+            },
+            42000,
            {
                x: 200,
                y: 100,
                oldX: 100,
                oldY: 200,
                moving: false,
-                direction: "up"
+                direction: "up",
            },
            42200
        );
@ -94,8 +102,8 @@ describe("Interpolation / Extrapolation", () => {
            y: 150,
            oldX: 100,
            oldY: 200,
-            direction: 'up',
-            moving: true
+            direction: "up",
+            moving: false,
        });
    });
-})
+});
				`@ -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>