chore: Add category to PanelModal tabs

Kruptein · Nov 24, 2024 · 39eea47 · 39eea47
1 parent 59b74e2
commit 39eea47
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 45 deletions.
diff --git a/client/src/core/components/modals/PanelModal.vue b/client/src/core/components/modals/PanelModal.vue
@@ -7,7 +7,7 @@ import Modal from "./Modal.vue";
 const props = withDefaults(
     defineProps<{
         visible: boolean;
-        tabs: { name: string; component: Component; props?: object }[];
+        tabs: { category: string; name: string; component: Component; props?: object }[];
         initialSelection?: string;
     }>(),
     { initialSelection: undefined },
@@ -20,16 +20,16 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const selection = ref(props.tabs[0]?.name);
-const activeTab = computed(() => props.tabs.find((t) => t.name === selection.value));
+const selection = ref(props.tabs[0]?.category);
+const activeTab = computed(() => props.tabs.find((t) => t.category === selection.value));
 
 watchEffect(() => {
     if (props.initialSelection === undefined) {
-        if (!props.tabs.some((c) => c.name === selection.value)) {
-            selection.value = props.tabs.at(0)?.name;
+        if (!props.tabs.some((c) => c.category === selection.value)) {
+            selection.value = props.tabs.at(0)?.category;
         }
     } else {
-        if (props.tabs.some((c) => c.name === props.initialSelection)) {
+        if (props.tabs.some((c) => c.category === props.initialSelection)) {
             selection.value = props.initialSelection;
         }
     }
@@ -60,10 +60,10 @@ function hideModal(): void {
             <div id="categories">
                 <div
                     v-for="tab of tabs"
-                    :key="tab.name"
+                    :key="tab.category"
                     class="category"
-                    :class="{ selected: tab.name === selection }"
-                    @click="setSelection(tab.name)"
+                    :class="{ selected: tab.category === selection }"
+                    @click="setSelection(tab.category)"
                 >
                     {{ tab.name }}
                 </div>

diff --git a/client/src/game/systems/ui/mods.ts b/client/src/game/systems/ui/mods.ts
@@ -1,12 +1,13 @@
 import { markRaw, type Component } from "vue";
 
 import type { LocalId } from "../../id";
+import type { ShapeSettingCategory } from "../../ui/settings/shape/categories";
 import type { TrackerId } from "../trackers/models";
 
 import { uiState } from "./state";
 
-export function registerTab(component: Component, name: string, filter: (shape: LocalId) => boolean): void {
-    uiState.mutableReactive.characterTabs.push({ name, component: markRaw(component), filter });
+export function registerTab(component: Component, category: string, name: string, filter: (shape: LocalId) => boolean): void {
+    uiState.mutableReactive.characterTabs.push({ category: (category as ShapeSettingCategory), name, component: markRaw(component), filter });
 }
 
 export function registerTrackerSettings(

diff --git a/client/src/game/systems/ui/state.ts b/client/src/game/systems/ui/state.ts
@@ -2,6 +2,7 @@ import type { Component, Raw } from "vue";
 
 import type { LocalId } from "../../id";
 import { ClientSettingCategory } from "../../ui/settings/client/categories";
+import type { ShapeSettingCategory } from "../../ui/settings/shape/categories";
 import { buildState } from "../state";
 
 import type { ModTrackerSetting } from "./types";
@@ -24,7 +25,7 @@ interface UiState {
     preventContextMenu: boolean;
 
     // MOD interactions
-    characterTabs: { name: string; component: Raw<Component>; filter?: (shape: LocalId) => boolean }[];
+    characterTabs: { category: ShapeSettingCategory; name: string; component: Raw<Component>; filter?: (shape: LocalId) => boolean }[];
     modTrackerSettings: ModTrackerSetting[];
 }
 

diff --git a/client/src/game/ui/settings/client/ClientSettings.vue b/client/src/game/ui/settings/client/ClientSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, computed } from "vue";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
 import PanelModal from "../../../../core/components/modals/PanelModal.vue";
@@ -8,6 +8,7 @@ import { uiState } from "../../../systems/ui/state";
 
 import AppearanceSettings from "./AppearanceSettings.vue";
 import BehaviourSettings from "./BehaviourSettings.vue";
+import { ClientSettingCategory } from "./categories";
 import DisplaySettings from "./DisplaySettings.vue";
 import InitiativeSettings from "./InitiativeSettings.vue";
 import PerformanceSettings from "./PerformanceSettings.vue";
@@ -29,13 +30,30 @@ function close(): void {
 
 defineExpose({ close });
 
-const tabs: { name: string; component: Component }[] = [
-    { name: t('game.ui.settings.client.common.Appearance'), component: AppearanceSettings },
-    { name: t('game.ui.settings.client.common.Behaviour'), component: BehaviourSettings },
-    { name: t('game.ui.settings.client.common.Display'), component: DisplaySettings },
-    { name: t('common.initiative'), component: InitiativeSettings },
-    { name: t('game.ui.settings.client.common.Performance'), component: PerformanceSettings },
-];
+// Computed to trigger locale rerender
+const tabs = computed(() => [
+    {
+        category: ClientSettingCategory.Appearance,
+        name: t("game.ui.settings.client.common.Appearance"),
+        component: AppearanceSettings,
+    },
+    {
+        category: ClientSettingCategory.Behaviour,
+        name: t("game.ui.settings.client.common.Behaviour"),
+        component: BehaviourSettings,
+    },
+    {
+        category: ClientSettingCategory.Display,
+        name: t("game.ui.settings.client.common.Display"),
+        component: DisplaySettings,
+    },
+    { category: ClientSettingCategory.Initiative, name: t("common.initiative"), component: InitiativeSettings },
+    {
+        category: ClientSettingCategory.Performance,
+        name: t("game.ui.settings.client.common.Performance"),
+        component: PerformanceSettings,
+    },
+]);
 </script>
 
 <template>

diff --git a/client/src/game/ui/settings/dm/DmSettings.vue b/client/src/game/ui/settings/dm/DmSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, computed } from "vue";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
 import PanelModal from "../../../../core/components/modals/PanelModal.vue";
@@ -35,14 +35,45 @@ function close(): void {
 }
 defineExpose({ close });
 
-const tabs: { name: string; component: Component; props: { global: true } }[] = [
-    { name: t(DmSettingCategory.Admin), component: AdminSettings, props: { global: true } },
-    { name: t(DmSettingCategory.Features), component: FeatureSettings, props: { global: true } },
-    { name: t(DmSettingCategory.Grid), component: GridSettings, props: { global: true } },
-    { name: t(DmSettingCategory.Vision), component: VisionSettings, props: { global: true } },
-    { name: t(DmSettingCategory.Floor), component: FloorSettings, props: { global: true } },
-    { name: t(DmSettingCategory.Varia), component: VariaSettings, props: { global: true } },
-];
+// Computed to trigger locale rerender
+const tabs = computed(() => [
+    {
+        category: DmSettingCategory.Admin,
+        name: t(DmSettingCategory.Admin),
+        component: AdminSettings,
+        props: { global: true },
+    },
+    {
+        category: DmSettingCategory.Features,
+        name: t(DmSettingCategory.Features),
+        component: FeatureSettings,
+        props: { global: true },
+    },
+    {
+        category: DmSettingCategory.Grid,
+        name: t(DmSettingCategory.Grid),
+        component: GridSettings,
+        props: { global: true },
+    },
+    {
+        category: DmSettingCategory.Vision,
+        name: t(DmSettingCategory.Vision),
+        component: VisionSettings,
+        props: { global: true },
+    },
+    {
+        category: DmSettingCategory.Floor,
+        name: t(DmSettingCategory.Floor),
+        component: FloorSettings,
+        props: { global: true },
+    },
+    {
+        category: DmSettingCategory.Varia,
+        name: t(DmSettingCategory.Varia),
+        component: VariaSettings,
+        props: { global: true },
+    },
+]);
 </script>
 
 <template>

diff --git a/client/src/game/ui/settings/location/LocationSettings.vue b/client/src/game/ui/settings/location/LocationSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, computed, toRef } from "vue";
+import { computed, toRef } from "vue";
 import { useI18n } from "vue-i18n";
 
 import PanelModal from "../../../../core/components/modals/PanelModal.vue";
@@ -36,13 +36,39 @@ const locationName = computed(
     () => locationStore.activeLocations.value.find((l) => l.id === location.value)?.name ?? "",
 );
 
-const tabs: { name: string; component: Component; props?: { global: false } }[] = [
-    { name: t(LocationSettingCategory.Admin), component: AdminSettings, props: { global: false } },
-    { name: t(LocationSettingCategory.Grid), component: GridSettings, props: { global: false } },
-    { name: t(LocationSettingCategory.Vision), component: VisionSettings, props: { global: false } },
-    { name: t(LocationSettingCategory.Floor), component: FloorSettings, props: { global: false } },
-    { name: t(LocationSettingCategory.Varia), component: VariaSettings, props: { global: false } },
-];
+// Computed to trigger locale rerender
+const tabs = computed(() => [
+    {
+        category: LocationSettingCategory.Admin,
+        name: t(LocationSettingCategory.Admin),
+        component: AdminSettings,
+        props: { global: false },
+    },
+    {
+        category: LocationSettingCategory.Grid,
+        name: t(LocationSettingCategory.Grid),
+        component: GridSettings,
+        props: { global: false },
+    },
+    {
+        category: LocationSettingCategory.Vision,
+        name: t(LocationSettingCategory.Vision),
+        component: VisionSettings,
+        props: { global: false },
+    },
+    {
+        category: LocationSettingCategory.Floor,
+        name: t(LocationSettingCategory.Floor),
+        component: FloorSettings,
+        props: { global: false },
+    },
+    {
+        category: LocationSettingCategory.Varia,
+        name: t(LocationSettingCategory.Varia),
+        component: VariaSettings,
+        props: { global: false },
+    },
+]);
 </script>
 
 <template>

diff --git a/client/src/game/ui/settings/shape/ShapeSettings.vue b/client/src/game/ui/settings/shape/ShapeSettings.vue
@@ -10,6 +10,7 @@ import { selectedState } from "../../../systems/selected/state";
 import { uiState } from "../../../systems/ui/state";
 
 import AccessSettings from "./AccessSettings.vue";
+import { ShapeSettingCategory } from "./categories";
 import ExtraSettings from "./ExtraSettings.vue";
 import GridSettings from "./GridSettings.vue";
 import GroupSettings from "./GroupSettings.vue";
@@ -48,17 +49,40 @@ defineExpose({ close });
 const hasShape = computed(() => activeShapeStore.state.id !== undefined);
 
 const tabs = computed(() => {
-    const tabs: { name: string; component: Component }[] = [];
+    const tabs: { category: ShapeSettingCategory; name: string; component: Component }[] = [];
     if (!hasShape.value) return tabs;
     tabs.push(
-        { name: t('game.ui.selection.edit_dialog.properties.properties'), component: PropertySettings },
-        { name: t('common.grid'), component: GridSettings },
-        { name: t('common.trackers'), component: TrackerSettings },
-        { name: t('game.ui.selection.edit_dialog.access.access'), component: AccessSettings },
-        { name: t('game.ui.selection.edit_dialog.logic.logic'), component: LogicSettings },
+        {
+            category: ShapeSettingCategory.Properties,
+            name: t("game.ui.selection.edit_dialog.properties.properties"),
+            component: PropertySettings,
+        },
+        { category: ShapeSettingCategory.Grid, name: t("common.grid"), component: GridSettings },
+        { category: ShapeSettingCategory.Trackers, name: t("common.trackers"), component: TrackerSettings },
+        {
+            category: ShapeSettingCategory.Access,
+            name: t("game.ui.selection.edit_dialog.access.access"),
+            component: AccessSettings,
+        },
+        {
+            category: ShapeSettingCategory.Logic,
+            name: t("game.ui.selection.edit_dialog.logic.logic"),
+            component: LogicSettings,
+        },
     );
     if (owned.value) {
-        tabs.push({ name: t('game.ui.selection.edit_dialog.groups.groups'), component: GroupSettings }, { name: t('game.ui.selection.edit_dialog.extra.extra'), component: ExtraSettings });
+        tabs.push(
+            {
+                category: ShapeSettingCategory.Group,
+                name: t("game.ui.selection.edit_dialog.groups.groups"),
+                component: GroupSettings,
+            },
+            {
+                category: ShapeSettingCategory.Extra,
+                name: t("game.ui.selection.edit_dialog.extra.extra"),
+                component: ExtraSettings,
+            },
+        );
     }
     for (const charTab of uiState.mutableReactive.characterTabs) {
         if (charTab.filter?.(activeShapeStore.state.id!) ?? true) tabs.push(charTab);

diff --git a/client/src/mods/models.ts b/client/src/mods/models.ts
@@ -21,7 +21,7 @@ interface ModLoad {
 
     ui: {
         shape: {
-            registerTab: (component: Component, name: string, filter: (shape: LocalId) => boolean) => void;
+            registerTab: (component: Component, category: string, name: string, filter: (shape: LocalId) => boolean) => void;
         };
     };
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ interface ModLoad { @@
         ui: {
             shape: {
-                registerTab: (component: Component, name: string, filter: (shape: LocalId) => boolean) => void;
+                registerTab: (component: Component, category: string, name: string, filter: (shape: LocalId) => boolean) => void;
             };
         };
@@ Expand Down @@