Add modal stacking and keybinding for modal close

CHANGELOG.md

@@ -28,6 +28,10 @@ All notable changes to this project will be documented in this file.
     -   Chinese localization
     -   German localization (some terminology like "Asset" or "Tracker" still english, until appropriate German term found)
     -   A dropdown selection component to switch languages in both login page and the Client Options of main menu
+-   Added Client Options modal
+-   Added keybindings pane to Client Options modal
+-   Added Escape keybinding that closes all modals and deselects all shapes
+-   Added interface to allow users to customize keybindings
 
 ### Changed
 
@@ -39,6 +43,8 @@ All notable changes to this project will be documented in this file.
 -   The version shown in the topleft area in-game will now be limited to the latest release version
 -   Basic tokens will now have their default name set to their label instead of 'Unknown shape'
 -   Mobile device users are now unable to trigger overscroll refresh by simply moving around
+-   Moved existing Client Options from menu to Client Options modal
+-   Windows now reorder so that the most recently interacted window is on top
 
 ### Fixed
 

client/src/core/components/modals/modal.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
-import { Prop } from "vue-property-decorator";
+import { Prop, Watch } from "vue-property-decorator";
+import { modalsStore } from "./store";
+import { EventBus } from "@/game/event-bus";
 
 @Component
 export default class Modal extends Vue {
@@ -20,9 +22,12 @@ export default class Modal extends Vue {
     screenY = 0;
     dragging = false;
 
+    zIndex = 8999;
+
     // Example of mounted required: opening note
     mounted(): void {
         this.updatePosition();
+        EventBus.$on("General.CloseAll", modalsStore.closeAll);
     }
     // Example of updated required: opening initiative
     updated(): void {
@@ -32,6 +37,7 @@ export default class Modal extends Vue {
     close(_event: MouseEvent): void {
         this.$emit("close");
     }
+
     updatePosition(): void {
         if (!this.positioned) {
             const container = <any>this.$refs.container;
@@ -41,6 +47,7 @@ export default class Modal extends Vue {
             this.positioned = true;
         }
     }
+
     dragStart(event: DragEvent): void {
         if (event === null || event.dataTransfer === null) return;
         event.dataTransfer.setData("Hack", "");
@@ -53,6 +60,7 @@ export default class Modal extends Vue {
         this.screenY = event.screenY;
         this.dragging = true;
     }
+
     dragEnd(event: DragEvent): void {
         this.dragging = false;
         let left = event.clientX - this.offsetX;
@@ -69,9 +77,20 @@ export default class Modal extends Vue {
         this.$refs.container.style.top = top + "px";
         this.$refs.container.style.display = "block";
     }
+
     dragOver(_event: DragEvent): void {
         if (this.dragging) this.$refs.container.style.display = "none";
     }
+
+    @Watch("visible") onVisibilityChanged(newValue: boolean, oldValue: boolean): void {
+        if (newValue && !oldValue) {
+            modalsStore.setTopModal(this);
+        }
+    }
+
+    click(): void {
+        modalsStore.setTopModal(this);
+    }
 }
 </script>
 
@@ -80,11 +99,18 @@ export default class Modal extends Vue {
         <div
             class="mask"
             :class="{ 'modal-mask': mask, 'dialog-mask': !mask }"
+            :style="{ 'z-index': zIndex }"
             @click="close"
             v-show="visible"
             @dragover.prevent="dragOver"
         >
-            <div class="modal-container" @click.stop ref="container" :style="{ 'background-color': colour }">
+            <div
+                class="modal-container"
+                @click.stop
+                @click="click"
+                ref="container"
+                :style="{ 'background-color': colour }"
+            >
                 <slot name="header" :dragStart="dragStart" :dragEnd="dragEnd"></slot>
                 <slot></slot>
             </div>
@@ -99,7 +125,7 @@ export default class Modal extends Vue {
 
 .mask {
     position: fixed;
-    z-index: 9998;
+    /*z-index: 9998;*/
     top: 0;
     left: 0;
     width: 100%;

client/src/core/components/modals/store.ts

@@ -0,0 +1,40 @@
+import Modal from "@/core/components/modals/modal.vue";
+
+import { rootStore } from "@/store";
+import { getModule, Module, Mutation, VuexModule } from "vuex-module-decorators";
+
+export interface ModalState {
+    modals: Modal[];
+}
+
+@Module({ dynamic: true, store: rootStore, name: "modals" })
+class ModalsStore extends VuexModule implements ModalState {
+    modals: Modal[] = [];
+
+    get topModal(): Modal {
+        return this.modals[0];
+    }
+
+    @Mutation
+    setTopModal(modal: Modal): void {
+        if (this.topModal === modal) return;
+        this.modals = [modal, ...this.modals.filter(item => item !== modal).slice(0, 999)];
+        this.modals.forEach((element: Modal, i: number) => {
+            element.$data.zIndex = 8999 - i;
+        });
+    }
+
+    @Mutation
+    removeFromModals(modal: Modal): void {
+        this.modals = this.modals.filter(item => item !== modal);
+    }
+
+    @Mutation
+    closeAll(): void {
+        console.log("closeAll Called!");
+        this.modals.forEach(modal => modal.$emit("close"));
+        this.modals = [];
+    }
+}
+
+export const modalsStore = getModule(ModalsStore);

client/src/game/events/keyboard.ts

@@ -124,6 +124,10 @@ export function onKeyDown(event: KeyboardEvent): void {
         } else if (event.key === "v" && event.ctrlKey) {
             // Ctrl-v - Paste
             pasteShapes();
+        } else if (event.key === "Escape") {
+            // Escape - close all open modals
+            event.preventDefault();
+            EventBus.$emit("General.CloseAll");
         } else if (event.key === "PageUp" && gameStore.selectedFloorIndex < gameStore.floors.length - 1) {
             // Page Up - Move floor up
             // Ctrl + Page Up - Move selected shapes floor up

client/src/game/ui/menu/menu.vue

@@ -7,7 +7,6 @@ import { mapState } from "vuex";
 import ColorPicker from "@/core/components/colorpicker.vue";
 import Game from "@/game/game.vue";
 import AssetNode from "@/game/ui/menu/asset_node.vue";
-import LanguageDropdown from "@/core/components/languageDropdown.vue";
 
 import { uuidv4 } from "@/core/utils";
 import { Note } from "@/game/comm/types/general";
@@ -19,7 +18,6 @@ import { EventBus } from "../../event-bus";
     components: {
         "color-picker": ColorPicker,
         "asset-node": AssetNode,
-        languageDropdown: LanguageDropdown,
     },
     computed: {
         ...mapState("game", ["assets", "notes", "markers"]),
@@ -31,30 +29,6 @@ export default class MenuBar extends Vue {
     get IS_DM(): boolean {
         return gameStore.IS_DM || gameStore.FAKE_PLAYER;
     }
-    get gridColour(): string {
-        return gameStore.gridColour;
-    }
-    set gridColour(value: string) {
-        gameStore.setGridColour({ colour: value, sync: true });
-    }
-    get fowColour(): string {
-        return gameStore.fowColour;
-    }
-    set fowColour(value: string) {
-        gameStore.setFOWColour({ colour: value, sync: true });
-    }
-    get rulerColour(): string {
-        return gameStore.rulerColour;
-    }
-    set rulerColour(value: string) {
-        gameStore.setRulerColour({ colour: value, sync: true });
-    }
-    get invertAlt(): boolean {
-        return gameStore.invertAlt;
-    }
-    set invertAlt(value: boolean) {
-        gameStore.setInvertAlt({ invertAlt: value, sync: true });
-    }
     settingsClick(event: { target: HTMLElement }): void {
         if (
             event.target.classList.contains("menu-accordion") &&
@@ -76,6 +50,10 @@ export default class MenuBar extends Vue {
         EventBus.$emit("DmSettings.Open");
     }
 
+    openClientSettings(): void {
+        EventBus.$emit("ClientSettings.Open");
+    }
+
     delMarker(marker: string): void {
         gameStore.removeMarker({ marker: marker, sync: true });
     }
@@ -151,21 +129,11 @@ export default class MenuBar extends Vue {
                 </div>
             </div>
             <!-- CLIENT OPTIONS -->
-            <button class="menu-accordion" v-t="'game.ui.menu.menu.client_options'"></button>
-            <div class="menu-accordion-panel">
-                <div class="menu-accordion-subpanel">
-                    <label for="gridColour" v-t="'game.ui.menu.menu.grid_color_set'"></label>
-                    <color-picker id="gridColour" :color.sync="gridColour" />
-                    <label for="fowColour" v-t="'game.ui.menu.menu.fow_color_set'"></label>
-                    <color-picker id="fowColour" :color.sync="fowColour" />
-                    <label for="rulerColour" v-t="'game.ui.menu.menu.ruler_color_set'"></label>
-                    <color-picker id="rulerColour" :color.sync="rulerColour" />
-                    <label for="invertAlt" v-t="'game.ui.menu.menu.invert_alt_set'"></label>
-                    <div><input id="invertAlt" type="checkbox" v-model="invertAlt" /></div>
-                    <label for="languageSelect" v-t="'locale.select'"></label>
-                    <div><languageDropdown id="languageSelect" /></div>
-                </div>
-            </div>
+            <button
+                class="menu-accordion"
+                @click="openClientSettings"
+                v-t="'game.ui.menu.menu.client_options'"
+            ></button>
         </div>
         <router-link
             to="/dashboard"

client/src/game/ui/settings/client/ClientSettings.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import GeneralSettings from "./GeneralSettings.vue";
+import ColorSettings from "./ColorSettings.vue";
+import KeyBindings from "./KeyBindings.vue";
+
+import PanelModal from "../../../../core/components/modals/PanelModal.vue";
+import { EventBus } from "@/game/event-bus";
+
+@Component({
+    components: {
+        PanelModal,
+        GeneralSettings,
+        ColorSettings,
+        KeyBindings,
+    },
+})
+export default class ClientSettings extends Vue {
+    visible = false;
+
+    mounted(): void {
+        EventBus.$on("ClientSettings.Open", () => {
+            this.visible = true;
+        });
+    }
+
+    beforeDestroy(): void {
+        EventBus.$off("ClientSettings.Open");
+    }
+
+    get categoryNames(): string[] {
+        return [
+            this.$t("common.general").toString(),
+            this.$t("common.colors").toString(),
+            this.$t("common.keys").toString(),
+        ];
+    }
+}
+</script>
+
+<template>
+    <PanelModal :visible.sync="visible" :categories="categoryNames">
+        <template v-slot:title>{{ $t("game.ui.settings.client.GeneralSettings.client_settings") }}</template>
+        <template v-slot:default="{ selection }">
+            <GeneralSettings v-show="selection === 0"></GeneralSettings>
+            <ColorSettings v-show="selection === 1"></ColorSettings>
+            <KeyBindings v-show="selection === 2"></KeyBindings>
+        </template>
+    </PanelModal>
+</template>

client/src/game/ui/settings/client/ColorSettings.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import ColorPicker from "@/core/components/colorpicker.vue";
+import { gameStore } from "@/game/store";
+
+@Component({
+    components: {
+        "color-picker": ColorPicker,
+    },
+})
+export default class ColorSettings extends Vue {
+    get gridColour(): string {
+        return gameStore.gridColour;
+    }
+    set gridColour(value: string) {
+        gameStore.setGridColour({ colour: value, sync: true });
+    }
+    get fowColour(): string {
+        return gameStore.fowColour;
+    }
+    set fowColour(value: string) {
+        gameStore.setFOWColour({ colour: value, sync: true });
+    }
+    get rulerColour(): string {
+        return gameStore.rulerColour;
+    }
+    set rulerColour(value: string) {
+        gameStore.setRulerColour({ colour: value, sync: true });
+    }
+}
+</script>
+
+<template>
+    <div class="panel restore-panel">
+        <div class="row">
+            <label for="gridColour" v-t="'game.ui.menu.menu.grid_color_set'"></label>
+            <color-picker id="gridColour" :color.sync="gridColour" />
+        </div>
+        <div class="row">
+            <label for="fowColour" v-t="'game.ui.menu.menu.fow_color_set'"></label>
+            <color-picker id="fowColour" :color.sync="fowColour" />
+        </div>
+        <div class="row">
+            <label for="rulerColour" v-t="'game.ui.menu.menu.ruler_color_set'"></label>
+            <color-picker id="rulerColour" :color.sync="rulerColour" />
+        </div>
+    </div>
+</template>

client/src/game/ui/settings/client/GeneralSettings.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import LanguageDropdown from "@/core/components/languageDropdown.vue";
+
+@Component({
+    components: {
+        languageDropdown: LanguageDropdown,
+    },
+})
+export default class GeneralSettings extends Vue {}
+</script>
+
+<template>
+    <div class="panel restore-panel">
+        <div class="row">
+            <label for="languageSelect" v-t="'locale.select'"></label>
+            <div><languageDropdown id="languageSelect" /></div>
+        </div>
+    </div>
+</template>