From 3916d9c58e803e30ef6d4a24cc0a0c7c75c75b96 Mon Sep 17 00:00:00 2001
From: Lurkars <git@8lh.de>
Date: Sun, 19 Dec 2021 12:51:19 +0100
Subject: [PATCH] Add follow button to ui, improved flow

---
 front/src/Components/App.svelte               |  4 +-
 .../Components/FollowMenu/FollowMenu.svelte   | 40 +++++++++++++++++++
 front/src/Components/images/follow.svg        |  1 +
 front/src/Phaser/Player/Player.ts             |  7 ++++
 front/src/Stores/FollowStore.ts               |  1 +
 5 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 front/src/Components/images/follow.svg

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 5f09beef..36f815bd 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, followRoleStore, followStates, followRoles } from "../Stores/FollowStore";
     import FollowMenu from "./FollowMenu/FollowMenu.svelte";
 
     export let game: Game;
@@ -104,7 +104,7 @@
             <ReportMenu />
         </div>
     {/if}
-    {#if $followStateStore !== followStates.off}
+    {#if $followStateStore !== followStates.off || $followRoleStore === followRoles.open}
         <div>
             <FollowMenu />
         </div>
diff --git a/front/src/Components/FollowMenu/FollowMenu.svelte b/front/src/Components/FollowMenu/FollowMenu.svelte
index 983fc507..e26032bb 100644
--- a/front/src/Components/FollowMenu/FollowMenu.svelte
+++ b/front/src/Components/FollowMenu/FollowMenu.svelte
@@ -6,6 +6,7 @@ vim: ft=typescript
     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,
@@ -76,6 +77,11 @@ vim: ft=typescript
         followUsersStore.set([]);
     }
 
+    function request() {
+        followStateStore.set(followStates.requesting);
+        followRoleStore.set(followRoles.leader);
+    }
+
     function onKeyDown(e: KeyboardEvent) {
         if (e.key === "Escape") {
             reset();
@@ -152,6 +158,33 @@ vim: ft=typescript
     </div>
 {/if}
 
+{#if followRole === followRoles.open}
+    <button
+        type="button"
+        class="nes-btn is-primary follow-menu-button"
+        on:click|preventDefault={request}
+        title="Ask others to follow"><img class="background-img" src={followImg} alt="" /></button
+    >
+{/if}
+
+{#if followState === followStates.active || followState === followStates.ending}
+    {#if followRole === followRoles.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 if followUsers.length > 0}
+        <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;
@@ -212,6 +245,13 @@ vim: ft=typescript
         }
     }
 
+    .follow-menu-button {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        pointer-events: all;
+    }
+
     @media only screen and (max-width: 800px) {
         div.interact-status {
             width: 100vw;
diff --git a/front/src/Components/images/follow.svg b/front/src/Components/images/follow.svg
new file mode 100644
index 00000000..d965d35f
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index f37927e3..feed1b4e 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -114,6 +114,13 @@ export class Player extends Character {
         const state = get(followStateStore);
         const role = get(followRoleStore);
 
+        if (state === followStates.off && this.scene.groups.size > 0) {
+            followRoleStore.set(followRoles.open);
+        } else if (this.scene.groups.size == 0) {
+            followStateStore.set(followStates.off);
+            followRoleStore.set(followRoles.leader);
+        }
+
         if (activeEvents.get(UserInputEvent.Follow)) {
             if (state === followStates.off && this.scene.groups.size > 0) {
                 followStateStore.set(followStates.requesting);
diff --git a/front/src/Stores/FollowStore.ts b/front/src/Stores/FollowStore.ts
index 6c85ab17..5e16b240 100644
--- a/front/src/Stores/FollowStore.ts
+++ b/front/src/Stores/FollowStore.ts
@@ -8,6 +8,7 @@ export const followStates = {
 };
 
 export const followRoles = {
+    open: "open",
     leader: "leader",
     follower: "follower",
 };