From d37165219c2ddea8fcda0f3463c7773b7eb79199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 24 Dec 2021 15:49:25 +0100
Subject: [PATCH] Migrating followStates and followRoles from a const object to
 a type restricted to only the string values allowed. This allows for more
 secure code (compilation checks) and simpler code too (we can pass strings
 instead of const values)

---
 front/src/Components/App.svelte               |  4 +-
 .../Components/FollowMenu/FollowMenu.svelte   | 44 ++++++++-----------
 front/src/Connexion/RoomConnection.ts         |  6 +--
 front/src/Phaser/Player/Player.ts             | 26 +++++------
 front/src/Stores/FollowStore.ts               | 35 ++++++---------
 5 files changed, 46 insertions(+), 69 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index f9d1c697..e9db2b77 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -42,7 +42,7 @@
     import AudioManager from "./AudioManager/AudioManager.svelte";
     import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
     import ReportMenu from "./ReportMenu/ReportMenu.svelte";
-    import { followStateStore, followStates } from "../Stores/FollowStore";
+    import { followStateStore } from "../Stores/FollowStore";
     import { peerStore } from "../Stores/PeerStore";
     import FollowMenu from "./FollowMenu/FollowMenu.svelte";
 
@@ -104,7 +104,7 @@
             <ReportMenu />
         </div>
     {/if}
-    {#if $followStateStore !== followStates.off || $peerStore.size > 0}
+    {#if $followStateStore !== "off" || $peerStore.size > 0}
         <div>
             <FollowMenu />
         </div>
diff --git a/front/src/Components/FollowMenu/FollowMenu.svelte b/front/src/Components/FollowMenu/FollowMenu.svelte
index 6506b1d6..264b27ed 100644
--- a/front/src/Components/FollowMenu/FollowMenu.svelte
+++ b/front/src/Components/FollowMenu/FollowMenu.svelte
@@ -2,19 +2,10 @@
 vim: ft=typescript
 -->
 <script lang="ts">
-    import { onDestroy, onMount } from "svelte";
-    import type { Unsubscriber } from "svelte/store";
-    import { get } from "svelte/store";
     import { gameManager } from "../../Phaser/Game/GameManager";
     import followImg from "../images/follow.svg";
 
-    import {
-        followStateStore,
-        followRoleStore,
-        followUsersStore,
-        followRoles,
-        followStates,
-    } from "../../Stores/FollowStore";
+    import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
 
     const gameScene = gameManager.getCurrentGameScene();
 
@@ -24,8 +15,8 @@ vim: ft=typescript
 
     function sendFollowRequest() {
         gameScene.connection?.emitFollowRequest();
-        followRoleStore.set(followRoles.leader);
-        followStateStore.set(followStates.active);
+        followRoleStore.set("leader");
+        followStateStore.set("active");
     }
 
     function acceptFollowRequest() {
@@ -34,7 +25,7 @@ vim: ft=typescript
     }
 
     function abortEnding() {
-        followStateStore.set(followStates.active);
+        followStateStore.set("active");
     }
 
     function reset() {
@@ -51,9 +42,9 @@ vim: ft=typescript
 
 <svelte:window on:keydown={onKeyDown} />
 
-{#if $followStateStore === followStates.requesting}
+{#if $followStateStore === "requesting"}
     <div class="interact-menu nes-container is-rounded">
-        {#if $followRoleStore === followRoles.follower}
+        {#if $followRoleStore === "follower"}
             <section class="interact-menu-title">
                 <h2>Do you want to follow {name($followUsersStore[0])}?</h2>
             </section>
@@ -63,7 +54,7 @@ vim: ft=typescript
                 >
                 <button type="button" class="nes-btn is-error" on:click|preventDefault={reset}>No</button>
             </section>
-        {:else if $followRoleStore === followRoles.leader}
+        {:else if $followRoleStore === "leader"}
             <section class="interact-menu-question">
                 <p>Should never be displayed</p>
             </section>
@@ -71,16 +62,16 @@ vim: ft=typescript
     </div>
 {/if}
 
-{#if $followStateStore === followStates.ending}
+{#if $followStateStore === "ending"}
     <div class="interact-menu nes-container is-rounded">
         <section class="interact-menu-title">
             <h2>Interaction</h2>
         </section>
-        {#if $followRoleStore === followRoles.follower}
+        {#if $followRoleStore === "follower"}
             <section class="interact-menu-question">
                 <p>Do you want to stop following {name($followUsersStore[0])}?</p>
             </section>
-        {:else if $followRoleStore === followRoles.leader}
+        {:else if $followRoleStore === "leader"}
             <section class="interact-menu-question">
                 <p>Do you want to stop leading the way?</p>
             </section>
@@ -92,10 +83,10 @@ vim: ft=typescript
     </div>
 {/if}
 
-{#if $followStateStore === followStates.active || $followStateStore === followStates.ending}
+{#if $followStateStore === "active" || $followStateStore === "ending"}
     <div class="interact-status nes-container is-rounded">
         <section class="interact-status">
-            {#if $followRoleStore === followRoles.follower}
+            {#if $followRoleStore === "follower"}
                 <p>Following {name($followUsersStore[0])}</p>
             {:else if $followUsersStore.length === 0}
                 <p>Waiting for followers' confirmation</p>
@@ -105,15 +96,16 @@ vim: ft=typescript
                 <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
+                    {$followUsersStore.slice(0, -1).map(name).join(", ")} and {name(
+                        $followUsersStore[$followUsersStore.length - 1]
+                    )} are following you
                 </p>
             {/if}
         </section>
     </div>
 {/if}
 
-{#if $followStateStore === followStates.off}
+{#if $followStateStore === "off"}
     <button
         type="button"
         class="nes-btn is-primary follow-menu-button"
@@ -122,8 +114,8 @@ vim: ft=typescript
     >
 {/if}
 
-{#if $followStateStore === followStates.active || $followStateStore === followStates.ending}
-    {#if $followRoleStore === followRoles.follower}
+{#if $followStateStore === "active" || $followStateStore === "ending"}
+    {#if $followRoleStore === "follower"}
         <button
             type="button"
             class="nes-btn is-error follow-menu-button"
diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts
index 6e88d3d8..328f1aec 100644
--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
@@ -64,7 +64,7 @@ import { connectionManager } from "./ConnectionManager";
 import { emoteEventStream } from "./EmoteEventStream";
 import { get } from "svelte/store";
 import { warningContainerStore } from "../Stores/MenuStore";
-import { followStateStore, followRoleStore, followUsersStore, followRoles, followStates } from "../Stores/FollowStore";
+import { followStateStore, followRoleStore, followUsersStore } from "../Stores/FollowStore";
 import { localUserStore } from "./LocalUserStore";
 
 const manualPingDelay = 20000;
@@ -278,7 +278,7 @@ export class RoomConnection implements RoomConnection {
                 followUsersStore.addFollower(responseMessage.getFollower());
             } else if (message.hasFollowabortmessage()) {
                 const abortMessage = message.getFollowabortmessage() as FollowAbortMessage;
-                if (get(followRoleStore) === followRoles.follower) {
+                if (get(followRoleStore) === "follower") {
                     followUsersStore.stopFollowing();
                 } else {
                     followUsersStore.removeFollower(abortMessage.getFollower());
@@ -791,7 +791,7 @@ export class RoomConnection implements RoomConnection {
     }
 
     public emitFollowAbort(): void {
-        const isLeader = get(followRoleStore) === followRoles.leader;
+        const isLeader = get(followRoleStore) === "leader";
         const hasFollowers = get(followUsersStore).length > 0;
         if (!this.userId || (isLeader && !hasFollowers)) {
             return;
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index ac2d9d76..946bb6c4 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -6,13 +6,7 @@ import type { RemotePlayer } from "../Entity/RemotePlayer";
 
 import { get } from "svelte/store";
 import { userMovingStore } from "../../Stores/GameStore";
-import {
-    followStateStore,
-    followRoleStore,
-    followUsersStore,
-    followRoles,
-    followStates,
-} from "../../Stores/FollowStore";
+import { followStateStore, followRoleStore, followUsersStore } from "../../Stores/FollowStore";
 
 export const hasMovedEventName = "hasMoved";
 export const requestEmoteEventName = "requestEmote";
@@ -51,7 +45,7 @@ export class Player extends Character {
         }
 
         // Compute movement deltas
-        const followMode = get(followStateStore) !== followStates.off;
+        const followMode = get(followStateStore) !== "off";
         const speedup = activeEvents.get(UserInputEvent.SpeedUp) && !followMode ? 25 : 9;
         const moveAmount = speedup * 20;
         x = x * moveAmount;
@@ -90,7 +84,7 @@ export class Player extends Character {
         const player = this.scene.MapPlayersByKey.get(get(followUsersStore)[0]);
         if (!player) {
             this.scene.connection?.emitFollowAbort();
-            followStateStore.set(followStates.off);
+            followStateStore.set("off");
             return [0, 0];
         }
 
@@ -107,7 +101,7 @@ export class Player extends Character {
     }
 
     public enableFollowing() {
-        followStateStore.set(followStates.active);
+        followStateStore.set("active");
     }
 
     public moveUser(delta: number): void {
@@ -116,17 +110,17 @@ export class Player extends Character {
         const role = get(followRoleStore);
 
         if (activeEvents.get(UserInputEvent.Follow)) {
-            if (state === followStates.off && this.scene.groups.size > 0) {
-                followStateStore.set(followStates.requesting);
-                followRoleStore.set(followRoles.leader);
-            } else if (state === followStates.active) {
-                followStateStore.set(followStates.ending);
+            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 === followStates.active || state === followStates.ending) && role === followRoles.follower) {
+        if ((state === "active" || state === "ending") && role === "follower") {
             [x, y] = this.computeFollowMovement();
         }
         this.inputStep(activeEvents, x, y);
diff --git a/front/src/Stores/FollowStore.ts b/front/src/Stores/FollowStore.ts
index da878c64..ab1e61d1 100644
--- a/front/src/Stores/FollowStore.ts
+++ b/front/src/Stores/FollowStore.ts
@@ -2,20 +2,11 @@ import { derived, writable } from "svelte/store";
 import { getColorRgbFromHue } from "../WebRtc/ColorGenerator";
 import { gameManager } from "../Phaser/Game/GameManager";
 
-export const followStates = {
-    off: "off",
-    requesting: "requesting",
-    active: "active",
-    ending: "ending",
-};
+type FollowState = "off" | "requesting" | "active" | "ending";
+type FollowRole = "leader" | "follower";
 
-export const followRoles = {
-    leader: "leader",
-    follower: "follower",
-};
-
-export const followStateStore = writable(followStates.off);
-export const followRoleStore = writable(followRoles.leader);
+export const followStateStore = writable<FollowState>("off");
+export const followRoleStore = writable<FollowRole>("leader");
 
 function createFollowUsersStore() {
     const { subscribe, update, set } = writable<number[]>([]);
@@ -23,8 +14,8 @@ function createFollowUsersStore() {
     return {
         subscribe,
         addFollowRequest(leader: number): void {
-            followStateStore.set(followStates.requesting);
-            followRoleStore.set(followRoles.follower);
+            followStateStore.set("requesting");
+            followRoleStore.set("follower");
             set([leader]);
         },
         addFollower(user: number): void {
@@ -44,8 +35,8 @@ function createFollowUsersStore() {
                 followers = followers.filter((id) => id !== user);
 
                 if (followers.length === 0 && oldFollowerCount > 0) {
-                    followStateStore.set(followStates.off);
-                    followRoleStore.set(followRoles.leader);
+                    followStateStore.set("off");
+                    followRoleStore.set("leader");
                 }
 
                 return followers;
@@ -53,8 +44,8 @@ function createFollowUsersStore() {
         },
         stopFollowing(): void {
             set([]);
-            followStateStore.set(followStates.off);
-            followRoleStore.set(followRoles.leader);
+            followStateStore.set("off");
+            followRoleStore.set("leader");
         },
     };
 }
@@ -68,7 +59,7 @@ export const followUsersColorStore = derived(
     [followStateStore, followRoleStore, followUsersStore],
     ([$followStateStore, $followRoleStore, $followUsersStore]) => {
         console.log($followStateStore);
-        if ($followStateStore !== followStates.active) {
+        if ($followStateStore !== "active") {
             return undefined;
         }
 
@@ -77,7 +68,7 @@ export const followUsersColorStore = derived(
         }
 
         let leaderId: number;
-        if ($followRoleStore === followRoles.leader) {
+        if ($followRoleStore === "leader") {
             // Let's get my ID by a quite complicated way....
             leaderId = gameManager.getCurrentGameScene().connection?.getUserId() ?? 0;
         } else {
@@ -88,7 +79,7 @@ export const followUsersColorStore = derived(
         const hue = ((leaderId * 197) % 255) / 255;
 
         let { r, g, b } = getColorRgbFromHue(hue);
-        if ($followRoleStore === followRoles.follower) {
+        if ($followRoleStore === "follower") {
             // Let's make the followers very slightly darker
             r *= 0.9;
             g *= 0.9;