From 06d403ebe353d8bc3f07d144e25fb3177897c8c1 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 26 Jan 2022 10:40:13 +0100
Subject: [PATCH] simplify actionsMenu

---
 .../Components/ActionsMenu/ActionsMenu.svelte | 50 ++++++++-----------
 front/src/Components/App.svelte               |  5 +-
 front/src/Phaser/Entity/RemotePlayer.ts       | 47 +++++++----------
 front/src/Phaser/Game/GameScene.ts            |  1 -
 front/src/Stores/ActionsMenuStore.ts          | 39 +++++++++------
 front/src/Stores/GameStore.ts                 |  4 --
 6 files changed, 67 insertions(+), 79 deletions(-)

diff --git a/front/src/Components/ActionsMenu/ActionsMenu.svelte b/front/src/Components/ActionsMenu/ActionsMenu.svelte
index 053502eb..632401e7 100644
--- a/front/src/Components/ActionsMenu/ActionsMenu.svelte
+++ b/front/src/Components/ActionsMenu/ActionsMenu.svelte
@@ -1,16 +1,13 @@
 <script lang="typescript">
     import { fly } from "svelte/transition";
-    import { ActionsMenuInterface, actionsMenuStore } from '../../Stores/ActionsMenuStore';
-    import { requestActionsMenuStore, actionsMenuPlayerNameStore, requestVisitCardsStore } from '../../Stores/GameStore';
-    import { onDestroy, onMount,  } from "svelte";
+    import { ActionsMenuData, actionsMenuStore } from '../../Stores/ActionsMenuStore';
+    import { onDestroy } from "svelte";
 
     import type { Unsubscriber } from "svelte/store";
 
-    let possibleActions: Map<string, ActionsMenuInterface>;
-    let playerName: string | null;
+    let actionsMenuData: ActionsMenuData | undefined;
 
     let actionsMenuStoreUnsubscriber: Unsubscriber | null;
-    let actionsMenuPlayerNameStoreUnsubscriber: Unsubscriber | null;
 
     function onKeyDown(e: KeyboardEvent) {
         if (e.key === "Escape") {
@@ -19,45 +16,40 @@
     }
 
     function closeActionsMenu() {
-        requestActionsMenuStore.set(false);
+        actionsMenuStore.clear();
     }
 
     actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe(value => {
-        possibleActions = value;
-    });
-
-    actionsMenuPlayerNameStoreUnsubscriber = actionsMenuPlayerNameStore.subscribe(value => {
-        playerName = value;
+        actionsMenuData = value;
     });
 
     onDestroy(() => {
         if (actionsMenuStoreUnsubscriber) {
             actionsMenuStoreUnsubscriber();
         }
-        if (actionsMenuPlayerNameStoreUnsubscriber) {
-            actionsMenuPlayerNameStoreUnsubscriber();
-        }
     });
 
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="actions-menu nes-container is-rounded">
-    <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
-    <h2>{playerName}</h2>
-    <div class="actions">
-        {#each [...possibleActions] as [key, menuAction]}
-            <button
-                type="button"
-                class="nes-btn"
-                on:click|preventDefault={() => { menuAction.callback(); }}
-            >
-                {menuAction.displayName}
-            </button>
-            {/each}
+{#if actionsMenuData}
+    <div class="actions-menu nes-container is-rounded">
+        <button type="button" class="nes-btn is-error close" on:click={closeActionsMenu}>&times</button>
+        <h2>{actionsMenuData.playerName}</h2>
+        <div class="actions">
+            {#each [...actionsMenuData.actions] as { actionName, callback }}
+                <button
+                    type="button"
+                    class="nes-btn"
+                    on:click|preventDefault={() => { callback(); }}
+                >
+                    {actionName}
+                </button>
+                {/each}
+        </div>
     </div>
-</div>
+{/if}
 
 <style lang="scss">
     .actions-menu {        
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index ef097ce3..366c3d85 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -17,7 +17,7 @@
     import { loginSceneVisibleStore } from "../Stores/LoginSceneStore";
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
     import VisitCard from "./VisitCard/VisitCard.svelte";
-    import { requestVisitCardsStore, requestActionsMenuStore } from "../Stores/GameStore";
+    import { requestVisitCardsStore } from "../Stores/GameStore";
 
     import type { Game } from "../Phaser/Game/Game";
     import { chatVisibilityStore } from "../Stores/ChatStore";
@@ -49,6 +49,7 @@
     import { peerStore } from "../Stores/PeerStore";
     import FollowMenu from "./FollowMenu/FollowMenu.svelte";
 import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
+import { actionsMenuStore } from '../Stores/ActionsMenuStore';
 
     export let game: Game;
 </script>
@@ -153,7 +154,7 @@ import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
     {#if $requestVisitCardsStore}
         <VisitCard visitCardUrl={$requestVisitCardsStore} />
     {/if}
-    {#if $requestActionsMenuStore}
+    {#if $actionsMenuStore}
         <ActionsMenu />
     {/if}
     {#if $errorStore.length > 0}
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index ec690bf6..7012ea3b 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -1,6 +1,6 @@
 
-import { requestVisitCardsStore, requestActionsMenuStore, actionsMenuPlayerNameStore } from "../../Stores/GameStore";
-import { actionsMenuStore } from '../../Stores/ActionsMenuStore';
+import { requestVisitCardsStore } from "../../Stores/GameStore";
+import { ActionsMenuData, actionsMenuStore } from '../../Stores/ActionsMenuStore';
 import { Character } from "../Entity/Character";
 import type { GameScene } from "../Game/GameScene";
 import type { PointInterface } from "../../Connexion/ConnexionModels";
@@ -14,8 +14,8 @@ export class RemotePlayer extends Character {
     userId: number;
     private visitCardUrl: string | null;
 
-    private actionsMenuRequested: boolean = false;
-    private actionsMenuRequestedUnsubscriber: Unsubscriber;
+    private isActionsMenuInitialized: boolean = false;
+    private actionsMenuStoreUnsubscriber: Unsubscriber;
 
     constructor(
         userId: number,
@@ -47,43 +47,34 @@ export class RemotePlayer extends Character {
         //set data
         this.userId = userId;
         this.visitCardUrl = visitCardUrl;
-        this.actionsMenuRequestedUnsubscriber = requestActionsMenuStore.subscribe((value: boolean) => {
-            this.actionsMenuRequested = value;
+        this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
+            this.isActionsMenuInitialized = value ? true : false;
         });
 
-        this.on("pointerdown", (event: Phaser.Input.Pointer) => {
+        this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => {
             if (event.downElement.nodeName === "CANVAS") {
-                if (this.actionsMenuRequested) {
-                    actionsMenuPlayerNameStore.set(null);
-                    requestActionsMenuStore.set(false);
+                if (this.isActionsMenuInitialized) {
+                    actionsMenuStore.clear();
                     return;
                 }
-                actionsMenuStore.addPossibleAction(
-                    "visit-card",
+                actionsMenuStore.initialize(this.PlayerValue);
+                actionsMenuStore.addAction(
                     "Visiting Card", () => {
                         requestVisitCardsStore.set(this.visitCardUrl);
-                        actionsMenuStore.clearActions();
-                        requestActionsMenuStore.set(false);
+                        actionsMenuStore.clear();
                 });
-                actionsMenuStore.addPossibleAction(
-                    "log-hello",
+                actionsMenuStore.addAction(
                     "Log Hello", () => {
                         console.log('HELLO');
-                        // requestActionsMenuStore.set(false);
                 });
-                actionsMenuStore.addPossibleAction(
-                    "log-goodbye",
+                actionsMenuStore.addAction(
                     "Log Goodbye", () => {
                         console.log('GOODBYE');
-                        // requestActionsMenuStore.set(false);
                 });
-                actionsMenuStore.addPossibleAction(
-                    "clear",
-                    "Clear Actions", () => {
-                        actionsMenuStore.clearActions();
+                actionsMenuStore.addAction(
+                    "Clear Goodbye Action", () => {
+                        actionsMenuStore.removeAction("Log Goodbye");
                 });
-                actionsMenuPlayerNameStore.set(this.PlayerValue);
-                requestActionsMenuStore.set(true);
             }
         });
     }
@@ -101,8 +92,8 @@ export class RemotePlayer extends Character {
     }
 
     public destroy(): void {
-        this.actionsMenuRequestedUnsubscriber();
-        requestActionsMenuStore.set(false);
+        this.actionsMenuStoreUnsubscriber();
+        actionsMenuStore.clear();
         super.destroy();
     }
 }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 458d35a4..0c69d19a 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1917,7 +1917,6 @@ ${escapedMessage}
         }
 
         const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, addPlayerData.characterLayers);
-        console.log(addPlayerData);
         const player = new RemotePlayer(
             addPlayerData.userId,
             this,
diff --git a/front/src/Stores/ActionsMenuStore.ts b/front/src/Stores/ActionsMenuStore.ts
index c3c2b56b..0ba483a3 100644
--- a/front/src/Stores/ActionsMenuStore.ts
+++ b/front/src/Stores/ActionsMenuStore.ts
@@ -1,34 +1,43 @@
 import { writable } from "svelte/store";
 
-export interface ActionsMenuInterface {
-    displayName: string;
-    callback: Function;
+export interface ActionsMenuData {
+    playerName: string;
+    actions: {actionName: string, callback: Function }[];
 }
 
 function createActionsMenuStore() {
 
-    const actions = new Map<string, ActionsMenuInterface>();
-    const { subscribe, update, set } = writable<Map<string, ActionsMenuInterface>>(actions);
+    const { subscribe, update, set } = writable<ActionsMenuData | undefined>(undefined);
 
     return {
         subscribe,
-        addPossibleAction: (key: string, displayName: string, callback: Function) => {
-            update((actions) => {
-                actions.set(key, { displayName, callback });
-                return actions;
+        initialize: (playerName: string) => {
+            set({
+                playerName,
+                actions: [],
             });
         },
-        removePossibleAction: (key: string) => {
-            update((actions) => {
-                actions.delete(key);
-                return actions;
+        addAction: (actionName: string, callback: Function) => {
+            update((data) => {
+                data?.actions.push({ actionName, callback });
+                return data;
+            });
+        },
+        removeAction: (actionName: string) => {
+            update((data) => {
+                const actionIndex = data?.actions.findIndex(action => action.actionName === actionName);
+                console.log(actionIndex);
+                if (actionIndex !== undefined && actionIndex != -1) {
+                    data?.actions.splice(actionIndex, 1);
+                }
+                return data;
             });
         },
         /**
          * Hides menu
          */
-        clearActions: () => {
-            set(new Map<string, ActionsMenuInterface>());
+        clear: () => {
+            set(undefined);
         }
     };
 }
diff --git a/front/src/Stores/GameStore.ts b/front/src/Stores/GameStore.ts
index 76c7f1c6..e5298b7c 100644
--- a/front/src/Stores/GameStore.ts
+++ b/front/src/Stores/GameStore.ts
@@ -4,10 +4,6 @@ export const userMovingStore = writable(false);
 
 export const requestVisitCardsStore = writable<string | null>(null);
 
-export const requestActionsMenuStore = writable(false);
-
-export const actionsMenuPlayerNameStore = writable<string | null>(null);
-
 export const userIsAdminStore = writable(false);
 
 export const limitMapStore = writable(false);