[Redesign] Settings

src/_managerinf/ManagerInformation.ts

@@ -4,4 +4,5 @@ export default class ManagerInformation {
     public static VERSION: VersionNumber = new VersionNumber('3.2.18');
     public static IS_PORTABLE: boolean = false;
     public static APP_NAME: string = "r2modman";
+    public static WIKI_GAME_DIRECTORY_HELP_URL = "https://github.com/ebkr/r2modmanPlus/wiki/Why-aren't-my-mods-working%3F#games-via-steam";
 }

src/components/composables/SettingSearchComposable.ts

@@ -0,0 +1,31 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue';
+
+import SearchUtils from '../../utils/SearchUtils';
+
+export type SettingSearchPhrases = MaybeRefOrGetter<(string | undefined | null)[]>;
+
+function isNonEmptyPhrase(phrase: string | undefined | null): phrase is string {
+    return phrase !== null && phrase !== undefined && phrase !== '';
+}
+
+export function useSettingSearch(
+    searchTerm: MaybeRefOrGetter<string | undefined>,
+    keyPhrases: SettingSearchPhrases
+): { isVisible: ComputedRef<boolean> } {
+    const isVisible = computed<boolean>(() => {
+        const activeSearchTerm = toValue(searchTerm);
+        if (!activeSearchTerm) {
+            return true;
+        }
+
+        const searchKeys = SearchUtils.makeKeys(activeSearchTerm);
+
+        const resolvedPhrases = toValue(keyPhrases);
+        const nonEmptyPhrases = resolvedPhrases.filter(isNonEmptyPhrase);
+        const searchableText = nonEmptyPhrases.join(' ');
+
+        return SearchUtils.isSearched(searchKeys, searchableText);
+    });
+
+    return { isVisible };
+}

src/components/modals/DependencyStringsModal.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManifestV2 from '../../model/ManifestV2';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isDependencyStringsModalOpen);
+const localModList = computed<ManifestV2[]>(() => store.state.profile.modList);
+
+function close() {
+    store.commit('closeDependencyStringsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="dependency-strings-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Dependency string list</h2>
+        </template>
+        <template v-slot:body>
+            <ul>
+                <li v-for="(mod, index) in localModList" :key="`dep-str-${index}`">
+                    {{ mod.getName() }}-{{ mod.getVersionNumber().toString() }}
+                </li>
+            </ul>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">Close</button>
+        </template>
+    </ModalCard>
+</template>

src/components/modals/IncorrectGameDirectoryModal.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import Game from '../../model/game/Game';
+
+const store = getStore<State>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const isOpen = computed(() => store.state.modals.isIncorrectGameDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectGameDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-game-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the {{ activeGame.displayName }} folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The selected executable must be any of the following:</p>
+            <ul class="list">
+                <li v-for="exe in activeGame.exeName"><strong>{{ exe }}</strong></li>
+            </ul>
+            <p class="margin-top">If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>

src/components/modals/IncorrectSteamDirectoryModal.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isIncorrectSteamDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectSteamDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-steam-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the Steam folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The Steam executable was not selected.</p>
+            <p>If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>

src/components/modals/LaunchArgumentsModal.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManagerSettings from '../../r2mm/manager/ManagerSettings';
+import GameInstructions from '../../r2mm/launching/instructions/GameInstructions';
+import GameRunnerProvider from '../../providers/generic/game/GameRunnerProvider';
+import GameInstructionParser from '../../r2mm/launching/instructions/GameInstructionParser';
+import R2Error from '../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isLaunchArgumentsModalOpen);
+
+const activeGame = computed(() => store.state.activeGame);
+const profile = computed(() => store.getters['profile/activeProfile']);
+
+const settings = ref<ManagerSettings | null>(null);
+const launchArguments = ref<string>('');
+const doorstopTarget = ref<string>('');
+const vanillaLaunchArgs = ref<string>('');
+
+async function load() {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    launchArguments.value = settings.value.getContext().gameSpecific.launchParameters;
+
+    GameInstructions.getInstructionsForGame(activeGame.value, profile.value).then(instructions => {
+        vanillaLaunchArgs.value = instructions.vanillaParameterList.map(value => `"${value}"`).join(' ');
+    });
+
+    GameRunnerProvider.instance.getGameArguments(activeGame.value, profile.value).then(target => {
+        if (target instanceof R2Error) {
+            doorstopTarget.value = '';
+        } else {
+            GameInstructionParser.parseList(target, activeGame.value, profile.value).then(instructions => {
+                if (instructions instanceof R2Error) {
+                    throw instructions;
+                }
+                doorstopTarget.value = instructions.map(value => `"${value}"`).join(' ');
+            });
+        }
+    });
+}
+
+watch(isOpen, (open) => {
+    if (open) {
+        load();
+    }
+});
+
+async function updateLaunchArguments() {
+    if (settings.value) {
+        await settings.value.setLaunchParameters(launchArguments.value);
+    }
+    close();
+}
+
+function close() {
+    store.commit('closeLaunchArgumentsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="launch-arguments-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Set custom launch arguments</h2>
+        </template>
+        <template v-slot:body>
+            <p>Some arguments are provided by default:</p>
+            <br/>
+            <p>Modded:
+                <br/>
+                <code v-if="doorstopTarget.length > 0">{{ doorstopTarget }}</code>
+                <code v-else>These arguments will be available after installing a mod loader.</code>
+            </p>
+            <br/>
+            <p>Vanilla:
+                <br/>
+                <code>{{ vanillaLaunchArgs }}</code>
+            </p>
+            <br/>
+            <p>
+                <strong>Please note that these are called against the Steam executable. Be careful when
+                    entering custom launch arguments.</strong>
+            </p>
+            <br/>
+            <input
+                v-model="launchArguments"
+                id="launch-arguments-modal-input"
+                class="input"
+                placeholder="Enter arguments"
+                autocomplete="off"
+            />
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="updateLaunchArguments">
+                Update launch arguments
+            </button>
+        </template>
+    </ModalCard>
+</template>

src/components/modals/SteamInstallationValidationModal.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isSteamInstallationValidationModalOpen);
+const activeGame = computed(() => store.state.activeGame);
+
+function close() {
+    store.commit('closeSteamInstallationValidationModal');
+}
+</script>
+
+<template>
+    <ModalCard id="steam-installation-validation-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Clearing the {{ activeGame.displayName }} installation directory</h2>
+        </template>
+        <template v-slot:body>
+            <div class="notification is-warning">
+                <p>
+                    You will not be able to launch the game until
+                    Steam has verified the integrity of the game files.
+                </p>
+            </div>
+            <p>
+                Steam will be started and will attempt to verify the
+                integrity of {{ activeGame.displayName }}.
+            </p>
+            <br/>
+            <p>
+                Please check the Steam window for validation progress.
+                If the window has not yet appeared, please be patient.
+            </p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>

src/components/settings-components/SettingsSection.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { provide, toRef } from 'vue';
+
+const props = defineProps<{ name: string }>();
+
+provide('settingsCategory', toRef(props, 'name'));
+</script>
+
+<template>
+    <section>
+        <slot></slot>
+    </section>
+</template>