Profectus/src/components/system/Options.vue

<template>
    <Modal v-model="isOpen">
        <template v-slot:header>
            <div class="header">
                <h2>Options</h2>
            </div>
        </template>
        <template v-slot:body>
            <Select title="Theme" :options="themes" v-model="theme" />
            <Select title="Show Milestones" :options="msDisplayOptions" v-model="msDisplay" />
            <Toggle title="Show TPS" v-model="showTPS" />
            <Toggle title="Hide Maxed Challenges" v-model="hideChallenges" />
            <Toggle title="Unthrottled" v-model="unthrottled" />
            <Toggle :title="offlineProdTitle" v-model="offlineProd" />
            <Toggle :title="autosaveTitle" v-model="autosave" />
            <Toggle :title="isPausedTitle" v-model="isPaused" />
        </template>
    </Modal>
</template>

<script setup lang="tsx">
import Modal from "@/components/system/Modal.vue";
import rawThemes from "@/data/themes";
import { MilestoneDisplay } from "@/features/milestone";
import player from "@/game/player";
import settings from "@/game/settings";
import { camelToTitle } from "@/util/common";
import { computed, ref, toRef, toRefs } from "vue";
import Toggle from "../fields/Toggle.vue";
import Select from "../fields/Select.vue";
import Tooltip from "./Tooltip.vue";

const isOpen = ref(false);

defineExpose({
    open() {
        isOpen.value = true;
    }
});

const themes = Object.keys(rawThemes).map(theme => ({
    label: camelToTitle(theme),
    value: theme
}));

// TODO allow features to register options
const msDisplayOptions = Object.values(MilestoneDisplay).map(option => ({
    label: camelToTitle(option),
    value: option
}));

const { showTPS, hideChallenges, theme, msDisplay, unthrottled } = toRefs(settings);
const { autosave, offlineProd } = toRefs(player);
const devSpeed = toRef(player, "devSpeed");
const isPaused = computed({
    get() {
        return devSpeed.value === 0;
    },
    set(value: boolean) {
        devSpeed.value = value ? null : 0;
    }
});

const offlineProdTitle = (
    <template>
        Offline Production<Tooltip display="Save-specific">*</Tooltip>
    </template>
);
const autosaveTitle = (
    <template>
        Autosave<Tooltip display="Save-specific">*</Tooltip>
    </template>
);
const isPausedTitle = (
    <template>
        Pause game<Tooltip display="Save-specific">*</Tooltip>
    </template>
);
</script>

<style scoped>
.header {
    margin-bottom: -10px;
}

*:deep() .tooltip-container {
    display: inline;
    margin-left: 5px;
}
</style>