From fd012d6c699c65bd18fbf3d27f6fd02a6cf53bec Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Mon, 24 Jan 2022 16:27:57 +0100
Subject: [PATCH] ActionsMenu WIP

---
 .../Components/ActionsMenu/ActionsMenu.svelte | 69 +++++++++++++++++++
 front/src/Components/App.svelte               |  6 +-
 front/src/Phaser/Entity/RemotePlayer.ts       |  5 +-
 front/src/Phaser/Game/GameScene.ts            |  1 +
 front/src/Stores/GameStore.ts                 |  2 +
 5 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 front/src/Components/ActionsMenu/ActionsMenu.svelte

diff --git a/front/src/Components/ActionsMenu/ActionsMenu.svelte b/front/src/Components/ActionsMenu/ActionsMenu.svelte
new file mode 100644
index 00000000..3f60e4d8
--- /dev/null
+++ b/front/src/Components/ActionsMenu/ActionsMenu.svelte
@@ -0,0 +1,69 @@
+<script lang="typescript">
+    import { fly } from "svelte/transition";
+    import { requestActionsMenuStore, requestVisitCardsStore } from '../../Stores/GameStore';
+
+    // export parameters here to show more menu options
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+            closeActionsMenu();
+        }
+    }
+
+    function closeActionsMenu() {
+        requestActionsMenuStore.set(false);
+    }
+
+    function showVisitingCard() {
+        // requestVisitCardsStore.set(true);
+    }
+
+</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>Actions</h2>
+    <nav>
+        <button
+            type="button"
+            class="nes-btn"
+            on:click|preventDefault={() => { console.log('clicked on button'); }}
+        >
+            Visiting Card
+        </button>
+    </nav>
+</div>
+
+<style lang="scss">
+    .actions-menu {        
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: 230px !important;
+        height: 300px !important;
+        margin-top: 200px;
+
+        pointer-events: auto;
+        font-family: "Press Start 2P";
+        background-color: #333333;
+        color: whitesmoke;
+
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        nav button {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+
+        .nes-btn.is-error.close {
+            position: absolute;
+            top: -20px;
+            right: -20px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index a1277ed2..ef097ce3 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 } from "../Stores/GameStore";
+    import { requestVisitCardsStore, requestActionsMenuStore } from "../Stores/GameStore";
 
     import type { Game } from "../Phaser/Game/Game";
     import { chatVisibilityStore } from "../Stores/ChatStore";
@@ -48,6 +48,7 @@
     import { followStateStore } from "../Stores/FollowStore";
     import { peerStore } from "../Stores/PeerStore";
     import FollowMenu from "./FollowMenu/FollowMenu.svelte";
+import ActionsMenu from './ActionsMenu/ActionsMenu.svelte';
 
     export let game: Game;
 </script>
@@ -152,6 +153,9 @@
     {#if $requestVisitCardsStore}
         <VisitCard visitCardUrl={$requestVisitCardsStore} />
     {/if}
+    {#if $requestActionsMenuStore}
+        <ActionsMenu />
+    {/if}
     {#if $errorStore.length > 0}
         <div>
             <ErrorDialog />
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 1cd03d12..428bd8aa 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -2,7 +2,7 @@ import type { GameScene } from "../Game/GameScene";
 import type { PointInterface } from "../../Connexion/ConnexionModels";
 import { Character } from "../Entity/Character";
 import type { PlayerAnimationDirections } from "../Player/Animation";
-import { requestVisitCardsStore } from "../../Stores/GameStore";
+import { requestVisitCardsStore, requestActionsMenuStore } from "../../Stores/GameStore";
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
@@ -44,7 +44,8 @@ export class RemotePlayer extends Character {
 
         this.on("pointerdown", (event: Phaser.Input.Pointer) => {
             if (event.downElement.nodeName === "CANVAS") {
-                requestVisitCardsStore.set(this.visitCardUrl);
+                // requestVisitCardsStore.set(this.visitCardUrl);
+                requestActionsMenuStore.set(true);
             }
         });
     }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 05c0483f..f530af81 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1915,6 +1915,7 @@ ${escapedMessage}
         }
 
         const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, addPlayerData.characterLayers);
+        console.log(addPlayerData);
         const player = new RemotePlayer(
             addPlayerData.userId,
             this,
diff --git a/front/src/Stores/GameStore.ts b/front/src/Stores/GameStore.ts
index e5298b7c..a8000bab 100644
--- a/front/src/Stores/GameStore.ts
+++ b/front/src/Stores/GameStore.ts
@@ -4,6 +4,8 @@ export const userMovingStore = writable(false);
 
 export const requestVisitCardsStore = writable<string | null>(null);
 
+export const requestActionsMenuStore = writable(true);
+
 export const userIsAdminStore = writable(false);
 
 export const limitMapStore = writable(false);