STARTLINER/src/components/OptionList.vue

<script setup lang="ts">
import { computed } from 'vue';
import InputNumber from 'primevue/inputnumber';
import SelectButton from 'primevue/selectbutton';
import ToggleSwitch from 'primevue/toggleswitch';
import FileEditor from './FileEditor.vue';
import OptionCategory from './OptionCategory.vue';
import OptionRow from './OptionRow.vue';
import AimeOptions from './options/Aime.vue';
import DisplayOptions from './options/Display.vue';
import KeyboardOptions from './options/Keyboard.vue';
import MiscOptions from './options/Misc.vue';
import NetworkOptions from './options/Network.vue';
import SegatoolsOptions from './options/Segatools.vue';
import StartlinerOptions from './options/Startliner.vue';
import { usePrfStore } from '../stores';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const prf = usePrfStore();

const blacklistMinModel = computed({
    get() {
        if (prf.current?.data.mu3_ini?.blacklist === undefined) {
            return null;
        }
        return prf.current?.data.mu3_ini?.blacklist[0];
    },
    set(value: number) {
        prf.current!.data.mu3_ini!.blacklist = [
            value,
            prf.current!.data.mu3_ini!.blacklist?.[1] ?? 19999,
        ];
    },
});

const blacklistMaxModel = computed({
    get() {
        if (prf.current?.data.mu3_ini?.blacklist === undefined) {
            return null;
        }
        return prf.current?.data.mu3_ini.blacklist[1];
    },
    set(value: number) {
        prf.current!.data.mu3_ini!.blacklist = [
            prf.current!.data.mu3_ini!.blacklist?.[0] ?? 10000,
            value,
        ];
    },
});

prf.reload();
</script>

<template>
    <SegatoolsOptions />
    <DisplayOptions />
    <NetworkOptions />
    <AimeOptions />
    <MiscOptions />
    <OptionCategory
        title="Extensions"
        v-if="prf.current?.meta.game === 'chunithm'"
    >
        <OptionRow :title="t('cfg.extensions.saekawa')">
            <FileEditor
                filename="saekawa.toml"
                promptname="saekawa config file"
                extension="toml"
            /> </OptionRow
    ></OptionCategory>
    <OptionCategory
        :title="t('cfg.extensions.title')"
        v-if="prf.current?.meta.game === 'ongeki'"
    >
        <OptionRow :title="t('cfg.extensions.inohara')">
            <FileEditor
                filename="inohara.cfg"
                promptname="inohara config file"
                extension="cfg"
            />
        </OptionRow>
        <OptionRow :title="t('cfg.extensions.bepInExConsole')">
            <!-- @vue-expect-error -->
            <ToggleSwitch v-model="prf.current!.data.bepinex.console" />
        </OptionRow>

        <OptionRow
            :title="t('cfg.extensions.audioMode')"
            :tooltip="t('cfg.extensions.audioTooltip')"
        >
            <SelectButton
                v-model="prf.current!.data.mu3_ini!.audio"
                :options="[
                    { title: t('cfg.extensions.audioShared'), value: 'Shared' },
                    { title: t('cfg.extensions.audio6Ch'), value: 'Excl6Ch' },
                    { title: t('cfg.extensions.audio2Ch'), value: 'Excl2Ch' },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
        /></OptionRow>

        <OptionRow
            :title="t('cfg.extensions.sampleRate')"
            v-if="
                prf.current?.data.mods.includes(
                    '7EVENDAYSHOLIDAYS-ExclusiveAudio'
                )
            "
        >
            <SelectButton
                v-model="prf.current!.data.mu3_ini!.sample_rate"
                :disabled="prf.current!.data.mu3_ini!.audio === 'Shared'"
                :options="[
                    { title: '44.1KHz', value: 44100 },
                    { title: '48KHz', value: 48000 },
                    { title: '96KHz', value: 96000 },
                    { title: '192KHz', value: 192000 },
                ]"
                :allow-empty="false"
                option-label="title"
                option-value="value"
        /></OptionRow>

        <OptionRow
            v-if="
                prf.current?.data.mods.includes('7EVENDAYSHOLIDAYS-Blacklist')
            "
            class="number-input"
            :title="t('cfg.extensions.blacklist')"
            :tooltip="t('cfg.extensions.blacklistTooltip')"
            ><InputNumber
                class="shrink"
                size="small"
                :min="9000"
                :max="99999"
                placeholder="10000"
                :use-grouping="false"
                :allow-empty="false"
                v-model="blacklistMinModel" />
            ~
            <InputNumber
                class="shrink"
                size="small"
                :min="10000"
                :max="99999"
                placeholder="19999"
                :use-grouping="false"
                :allow-empty="false"
                v-model="blacklistMaxModel"
        /></OptionRow>
        <OptionRow
            class="number-input"
            title="GP"
            v-if="
                prf.current?.data.mods.includes('7EVENDAYSHOLIDAYS-DisableGP')
            "
            ><InputNumber
                class="shrink"
                size="small"
                :min="0"
                :max="9999"
                :use-grouping="false"
                :allow-empty="false"
                v-model="prf.current!.data.mu3_ini!.gp"
            />
        </OptionRow>
        <OptionRow
            :title="t('cfg.extensions.bonusTracks')"
            :tooltip="t('cfg.extensions.bonusTracksTooltip')"
            v-if="
                prf.current?.data.mods.includes(
                    '7EVENDAYSHOLIDAYS-UnlockAllMusic'
                )
            "
        >
            <ToggleSwitch
                v-model="prf.current!.data.mu3_ini!.enable_bonus_tracks"
            />
        </OptionRow>
    </OptionCategory>
    <KeyboardOptions />
    <StartlinerOptions />
</template>

<style>
.number-input .p-inputnumber-input {
    width: 4rem;
}

.p-inputtext {
    width: 40vw;
    font-family: monospace !important;
}

.p-select {
    width: 40vw;
}
</style>