From 9d4af8996c67cf0e7a8401d156571230693c9428 Mon Sep 17 00:00:00 2001 From: chisaipete Date: Mon, 8 Jun 2020 22:17:01 -0700 Subject: [PATCH 1/2] Moving client options to a separate modal --- client/src/game/ui/menu/menu.vue | 50 ++++-------------- .../ui/settings/client/ClientSettings.vue | 52 +++++++++++++++++++ .../game/ui/settings/client/ColorSettings.vue | 50 ++++++++++++++++++ .../ui/settings/client/GeneralSettings.vue | 22 ++++++++ .../game/ui/settings/client/KeyBindings.vue | 25 +++++++++ client/src/game/ui/settings/dm/DmSettings.vue | 4 +- .../ui/settings/{ => dm}/GridSettings.vue | 4 +- .../ui/settings/{ => dm}/VisionSettings.vue | 2 +- .../game/ui/settings/{ => dm}/permissions.vue | 0 .../ui/settings/location/LocationSettings.vue | 4 +- client/src/game/ui/ui.vue | 3 ++ client/src/locales/en.json | 15 +++++- 12 files changed, 182 insertions(+), 49 deletions(-) create mode 100644 client/src/game/ui/settings/client/ClientSettings.vue create mode 100644 client/src/game/ui/settings/client/ColorSettings.vue create mode 100644 client/src/game/ui/settings/client/GeneralSettings.vue create mode 100644 client/src/game/ui/settings/client/KeyBindings.vue rename client/src/game/ui/settings/{ => dm}/GridSettings.vue (97%) rename client/src/game/ui/settings/{ => dm}/VisionSettings.vue (99%) rename client/src/game/ui/settings/{ => dm}/permissions.vue (100%) diff --git a/client/src/game/ui/menu/menu.vue b/client/src/game/ui/menu/menu.vue index 1d5843042..5cb58f332 100644 --- a/client/src/game/ui/menu/menu.vue +++ b/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 { - -
-
- - - - - - - -
- -
-
-
+ +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(), + ]; + } +} + + + diff --git a/client/src/game/ui/settings/client/ColorSettings.vue b/client/src/game/ui/settings/client/ColorSettings.vue new file mode 100644 index 000000000..d22d3abda --- /dev/null +++ b/client/src/game/ui/settings/client/ColorSettings.vue @@ -0,0 +1,50 @@ + + + diff --git a/client/src/game/ui/settings/client/GeneralSettings.vue b/client/src/game/ui/settings/client/GeneralSettings.vue new file mode 100644 index 000000000..c8451c85c --- /dev/null +++ b/client/src/game/ui/settings/client/GeneralSettings.vue @@ -0,0 +1,22 @@ + + + diff --git a/client/src/game/ui/settings/client/KeyBindings.vue b/client/src/game/ui/settings/client/KeyBindings.vue new file mode 100644 index 000000000..8b9e5401d --- /dev/null +++ b/client/src/game/ui/settings/client/KeyBindings.vue @@ -0,0 +1,25 @@ + + + diff --git a/client/src/game/ui/settings/dm/DmSettings.vue b/client/src/game/ui/settings/dm/DmSettings.vue index 7f4af616d..d9cb58e72 100644 --- a/client/src/game/ui/settings/dm/DmSettings.vue +++ b/client/src/game/ui/settings/dm/DmSettings.vue @@ -3,9 +3,9 @@ import Vue from "vue"; import Component from "vue-class-component"; import AdminSettings from "./AdminSettings.vue"; -import GridSettings from "../GridSettings.vue"; +import GridSettings from "./GridSettings.vue"; // import PermissionsDmSettings from "./permissions.vue"; -import VisionSettings from "../VisionSettings.vue"; +import VisionSettings from "./VisionSettings.vue"; import PanelModal from "../../../../core/components/modals/PanelModal.vue"; import { EventBus } from "@/game/event-bus"; diff --git a/client/src/game/ui/settings/GridSettings.vue b/client/src/game/ui/settings/dm/GridSettings.vue similarity index 97% rename from client/src/game/ui/settings/GridSettings.vue rename to client/src/game/ui/settings/dm/GridSettings.vue index 650f4e0e0..8b225cbee 100644 --- a/client/src/game/ui/settings/GridSettings.vue +++ b/client/src/game/ui/settings/dm/GridSettings.vue @@ -3,8 +3,8 @@ import Vue from "vue"; import Component from "vue-class-component"; import { Prop } from "vue-property-decorator"; -import { gameSettingsStore, getLocationOption } from "../../settings"; -import { LocationOptions } from "../../comm/types/settings"; +import { gameSettingsStore, getLocationOption } from "../../../settings"; +import { LocationOptions } from "../../../comm/types/settings"; @Component export default class GridSettings extends Vue { diff --git a/client/src/game/ui/settings/VisionSettings.vue b/client/src/game/ui/settings/dm/VisionSettings.vue similarity index 99% rename from client/src/game/ui/settings/VisionSettings.vue rename to client/src/game/ui/settings/dm/VisionSettings.vue index 6438d78d6..6ba242b46 100644 --- a/client/src/game/ui/settings/VisionSettings.vue +++ b/client/src/game/ui/settings/dm/VisionSettings.vue @@ -6,7 +6,7 @@ import { Prop } from "vue-property-decorator"; import { gameStore } from "@/game/store"; import { VisibilityMode, visibilityStore } from "@/game/visibility/store"; import { layerManager } from "@/game/layers/manager"; -import { gameSettingsStore, getLocationOption } from "../../settings"; +import { gameSettingsStore, getLocationOption } from "../../../settings"; import { LocationOptions } from "@/game/comm/types/settings"; @Component diff --git a/client/src/game/ui/settings/permissions.vue b/client/src/game/ui/settings/dm/permissions.vue similarity index 100% rename from client/src/game/ui/settings/permissions.vue rename to client/src/game/ui/settings/dm/permissions.vue diff --git a/client/src/game/ui/settings/location/LocationSettings.vue b/client/src/game/ui/settings/location/LocationSettings.vue index a362fa98f..80c56425e 100644 --- a/client/src/game/ui/settings/location/LocationSettings.vue +++ b/client/src/game/ui/settings/location/LocationSettings.vue @@ -3,9 +3,9 @@ import Vue from "vue"; import Component from "vue-class-component"; import LocationAdminSettings from "./LocationAdminSettings.vue"; -import GridSettings from "../GridSettings.vue"; +import GridSettings from "../dm/GridSettings.vue"; // import PermissionsDmSettings from "./permissions.vue"; -import VisionSettings from "../VisionSettings.vue"; +import VisionSettings from "../dm/VisionSettings.vue"; import PanelModal from "../../../../core/components/modals/PanelModal.vue"; import { EventBus } from "@/game/event-bus"; diff --git a/client/src/game/ui/ui.vue b/client/src/game/ui/ui.vue index 2396c4922..ce4d85b08 100644 --- a/client/src/game/ui/ui.vue +++ b/client/src/game/ui/ui.vue @@ -7,6 +7,7 @@ import Component from "vue-class-component"; import { mapState } from "vuex"; import DmSettings from "@/game/ui/settings/dm/DmSettings.vue"; +import ClientSettings from "@/game/ui/settings/client/ClientSettings.vue"; import FloorSelect from "@/game/ui/floors.vue"; import LocationBar from "./menu/locations.vue"; import LocationSettings from "@/game/ui/settings/location/LocationSettings.vue"; @@ -23,6 +24,7 @@ import { coreStore } from "../../core/store"; @Component({ components: { DmSettings, + ClientSettings, FloorSelect, LocationBar, LocationSettings, @@ -197,6 +199,7 @@ export default class UI extends Vue { + diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 77c982ac0..2a6ab3734 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -60,7 +60,9 @@ "colors": "Colours", "version": "version", "confirm": "Confirm", - "cancel": "Cancel" + "cancel": "Cancel", + "general": "General", + "keys": "Key Bindings" }, "auth": { "login": { @@ -214,6 +216,17 @@ "dm_settings": "DM Settings" } }, + "client": { + "GeneralSettings": { + "client_settings": "Client Settings" + }, + "ColorSettings": { + + }, + "KeyBindings": { + + } + }, "common": { "overridden_msg": "Some of these settings can be overriden by location specific settings", "overridden_highlight": "highlighted", From 4a867490c7805388c5f2471af4023066f37e27bf Mon Sep 17 00:00:00 2001 From: chisaipete Date: Tue, 9 Jun 2020 20:25:04 -0700 Subject: [PATCH 2/2] Fully ported in Daniferrito's work, have basic keybindings panel in client options, with modal stacking partially working, Esc is busted --- CHANGELOG.md | 6 + client/src/core/components/modals/modal.vue | 32 +++- client/src/core/components/modals/store.ts | 40 +++++ client/src/game/events/keyboard.ts | 4 + .../game/ui/settings/client/KeyBindings.vue | 161 ++++++++++++++++++ client/src/game/ui/ui.vue | 2 +- 6 files changed, 241 insertions(+), 4 deletions(-) create mode 100644 client/src/core/components/modals/store.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b335c6de8..1f2be53f8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/client/src/core/components/modals/modal.vue b/client/src/core/components/modals/modal.vue index ec1d2b157..8b7c4f095 100644 --- a/client/src/core/components/modals/modal.vue +++ b/client/src/core/components/modals/modal.vue @@ -1,7 +1,9 @@ @@ -80,11 +99,18 @@ export default class Modal extends Vue {
-
+
@@ -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%; diff --git a/client/src/core/components/modals/store.ts b/client/src/core/components/modals/store.ts new file mode 100644 index 000000000..020c80ef8 --- /dev/null +++ b/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); diff --git a/client/src/game/events/keyboard.ts b/client/src/game/events/keyboard.ts index e5c5944d3..24f7f8d10 100644 --- a/client/src/game/events/keyboard.ts +++ b/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 diff --git a/client/src/game/ui/settings/client/KeyBindings.vue b/client/src/game/ui/settings/client/KeyBindings.vue index 8b9e5401d..719e70993 100644 --- a/client/src/game/ui/settings/client/KeyBindings.vue +++ b/client/src/game/ui/settings/client/KeyBindings.vue @@ -6,6 +6,9 @@ import { gameStore } from "@/game/store"; @Component export default class KeyBindings extends Vue { + title = "KeybindSettings"; + categories = ["General", "Selection"]; + selection = 0; get invertAlt(): boolean { return gameStore.invertAlt; } @@ -17,9 +20,167 @@ export default class KeyBindings extends Vue { + + diff --git a/client/src/game/ui/ui.vue b/client/src/game/ui/ui.vue index ce4d85b08..effcb674e 100644 --- a/client/src/game/ui/ui.vue +++ b/client/src/game/ui/ui.vue @@ -19,7 +19,7 @@ import Tools from "@/game/ui/tools/tools.vue"; import { LocalPoint } from "../geom"; import { gameStore } from "../store"; import { l2g } from "../units"; -import { coreStore } from "../../core/store"; +import { coreStore } from "@/core/store"; @Component({ components: {