Settings overhaul

src/components/Nav.vue

@@ -42,7 +42,7 @@
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="Direction.Down" xoffset="-66px">
+            <Tooltip display="Settings" :direction="Direction.Down" xoffset="-66px">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>
@@ -59,7 +59,7 @@
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="Direction.Right">
+            <Tooltip display="Settings" :direction="Direction.Right">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>

src/components/Options.vue

@@ -2,18 +2,27 @@
     <Modal v-model="isOpen">
         <template v-slot:header>
             <div class="header">
-                <h2>Options</h2>
+                <h2>Settings</h2>
+                <div class="option-tabs">
+                    <button :class="{selected: isTab('behaviour')}" @click="setTab('behaviour')">Behaviour</button>
+                    <button :class="{selected: isTab('appearance')}" @click="setTab('appearance')">Appearance</button>
+                </div>
             </div>
         </template>
         <template v-slot:body>
-            <Select title="Theme" :options="themes" v-model="theme" />
+            <div v-if="isTab('behaviour')">
-            <component :is="settingFieldsComponent" />
+                <Toggle :title="unthrottledTitle" v-model="unthrottled" />
-            <Toggle title="Show TPS" v-model="showTPS" />
+                <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
-            <hr />
+                <Toggle :title="offlineProdTitle" v-model="offlineProd" />
-            <Toggle title="Unthrottled" v-model="unthrottled" />
+                <Toggle :title="autosaveTitle" v-model="autosave" />
-            <Toggle :title="offlineProdTitle" v-model="offlineProd" />
+                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()">Manually save</FeedbackButton>
-            <Toggle :title="autosaveTitle" v-model="autosave" />
+            </div>
-            <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
+            <div v-if="isTab('appearance')">
+                <Select :title="themeTitle" :options="themes" v-model="theme" />
+                <component :is="settingFieldsComponent" />
+                <Toggle :title="showTPSTitle" v-model="showTPS" />
+                <Toggle :title="alignModifierUnitsTitle" v-model="alignUnits" />
+            </div>
         </template>
     </Modal>
 </template>
@@ -21,20 +30,34 @@
 <script setup lang="tsx">
 import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
+import { save } from "util/save";
 import rawThemes from "data/themes";
 import { jsx } from "features/feature";
 import Tooltip from "features/tooltips/Tooltip.vue";
 import player from "game/player";
 import settings, { settingFields } from "game/settings";
-import { camelToTitle } from "util/common";
+import { camelToTitle, Direction } from "util/common";
 import { coerceComponent, render } from "util/vue";
 import { computed, ref, toRefs } from "vue";
 import Select from "./fields/Select.vue";
 import Toggle from "./fields/Toggle.vue";
+import FeedbackButton from "./fields/FeedbackButton.vue";
 
 const isOpen = ref(false);
+const currentTab = ref("behaviour");
+
+function isTab(tab: string): boolean {
+    return tab == currentTab.value;
+}
+
+function setTab(tab: string) {
+    currentTab.value = tab;
+}
 
 defineExpose({
+    isTab,
+    setTab,
+    save,
     open() {
         isOpen.value = true;
     }
@@ -49,7 +72,7 @@ const settingFieldsComponent = computed(() => {
     return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
 });
 
-const { showTPS, theme, unthrottled } = toRefs(settings);
+const { showTPS, theme, unthrottled, alignUnits } = toRefs(settings);
 const { autosave, offlineProd } = toRefs(player);
 const isPaused = computed({
     get() {
@@ -60,30 +83,85 @@ const isPaused = computed({
     }
 });
 
+const unthrottledTitle = jsx(() => (
+    <span class="option-title">
+        Unthrottled
+        <desc>Allow the game to run as fast as possible. Not battery friendly.</desc>
+    </span>
+));
 const offlineProdTitle = jsx(() => (
-    <span>
+    <span class="option-title">
-        Offline Production<Tooltip display="Save-specific">*</Tooltip>
+        Offline Production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Simulate production that occurs while the game is closed.</desc>
     </span>
 ));
 const autosaveTitle = jsx(() => (
-    <span>
+    <span class="option-title">
-        Autosave<Tooltip display="Save-specific">*</Tooltip>
+        Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Automatically save the game every second or when the game is closed.</desc>
     </span>
 ));
 const isPausedTitle = jsx(() => (
-    <span>
+    <span class="option-title">
-        Pause game<Tooltip display="Save-specific">*</Tooltip>
+        Pause game<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        <desc>Stop everything from moving.</desc>
+    </span>
+));
+const themeTitle = jsx(() => (
+    <span class="option-title">
+        Theme
+        <desc>How the game looks.</desc>
+    </span>
+));
+const showTPSTitle = jsx(() => (
+    <span class="option-title">
+        Show TPS
+        <desc>Show TPS meter at the bottom-left corner of the page.</desc>
+    </span>
+));
+const alignModifierUnitsTitle = jsx(() => (
+    <span class="option-title">
+        Align modifier units
+        <desc>Align numbers to the beginning of the unit in modifier view.</desc>
     </span>
 ));
 </script>
 
-<style scoped>
+<style>
-.header {
+.option-tabs {
+    border-bottom: 2px solid var(--outline);
+    margin-top: 10px;
     margin-bottom: -10px;
 }
 
-*:deep() .tooltip-container {
+.option-tabs button {
+    background-color: transparent;
+    color: var(--foreground);
+    margin-bottom: -2px;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px 20px;
+    border: none;
+    border-bottom: 2px solid var(--foreground);
+}
+
+.option-tabs button:not(.selected) {
+    border-bottom-color: transparent;
+}
+
+.option-title .tooltip-container {
     display: inline;
     margin-left: 5px;
 }
+.option-title desc {
+    display: block;
+    opacity: 0.6;
+    font-size: small;
+    width: 300px;
+    margin-left: 0;
+}
+
+.save-button {
+    text-align: right;
+}
 </style>

src/components/common/modifiers.css

@@ -8,10 +8,13 @@
 }
 
 .modifier-amount {
-    flex-basis: 100px;
     flex-shrink: 0;
     text-align: right;
 }
+:not(:first-of-type, :last-of-type) > .modifier-amount::after {
+    content: var(--unit);
+    opacity: 0;
+}
 
 .modifier-description {
     flex-grow: 1;

src/components/fields/Select.vue

@@ -87,6 +87,10 @@ function onUpdate(value: SelectOption) {
     background-color: var(--bought);
 }
 
+.vue-input input {
+    font-size: inherit;
+}
+
 .vue-input input::placeholder {
     color: var(--link);
 }

src/components/fields/Toggle.vue

@@ -43,14 +43,16 @@ input {
 
 span {
     width: 100%;
+    padding-right: 41px;
     position: relative;
 }
 
 /* track */
 input + span::before {
     content: "";
-    float: right;
+    position: absolute;
-    margin: 5px 0 5px 10px;
+    top: calc(50% - 7px);
+    right: 0px;
     border-radius: 7px;
     width: 36px;
     height: 14px;
@@ -64,7 +66,7 @@ input + span::before {
 input + span::after {
     content: "";
     position: absolute;
-    top: 2px;
+    top: calc(50% - 10px);
     right: 16px;
     border-radius: 50%;
     width: 20px;

src/data/common.tsx

@@ -13,6 +13,7 @@ import type { Modifier } from "game/modifiers";
 import type { Persistent } from "game/persistence";
 import { DefaultValue, persistent } from "game/persistence";
 import player from "game/player";
+import settings from "game/settings";
 import type { DecimalSource } from "util/bignum";
 import Decimal, { format, formatSmall, formatTime } from "util/bignum";
 import type { WithRequired } from "util/common";
@@ -335,7 +336,12 @@ export function createCollapsibleModifierSections(
             return (
                 <>
                     {hasPreviousSection ? <br /> : null}
-                    <div>
+                    <div
+                        style={{
+                            "--unit":
+                                settings.alignUnits && s.unit != null ? "'" + s.unit + "'" : ""
+                        }}
+                    >
                         {header}
                         <br />
                         {modifiers}

src/features/challenges/challenge.tsx

@@ -313,7 +313,12 @@ globalBus.on("loadSettings", settings => {
 registerSettingField(
     jsx(() => (
         <Toggle
-            title="Hide Maxed Challenges"
+            title={jsx(() => (
+                <span class="option-title">
+                    Hide maxed challenges
+                    <desc>Hide challenges that have been fully completed.</desc>
+                </span>
+            ))}
             onUpdate:modelValue={value => (settings.hideChallenges = value)}
             modelValue={settings.hideChallenges}
         />

src/features/milestones/milestone.tsx

@@ -221,7 +221,12 @@ const msDisplayOptions = Object.values(MilestoneDisplay).map(option => ({
 registerSettingField(
     jsx(() => (
         <Select
-            title="Show Milestones"
+            title={jsx(() => (
+                <span class="option-title">
+                    Show milestones
+                    <desc>Select which milestones to display based on criterias.</desc>
+                </span>
+            ))}
             options={msDisplayOptions}
             onUpdate:modelValue={value => (settings.msDisplay = value as MilestoneDisplay)}
             modelValue={settings.msDisplay}

src/game/modifiers.tsx

@@ -1,6 +1,7 @@
 import "components/common/modifiers.css";
 import type { CoercableComponent } from "features/feature";
 import { jsx } from "features/feature";
+import settings from "game/settings";
 import type { DecimalSource } from "util/bignum";
 import Decimal, { formatSmall } from "util/bignum";
 import type { WithRequired } from "util/common";
@@ -326,7 +327,7 @@ export function createModifierSection({
 }: ModifierSectionOptions) {
     const total = modifier.apply(base ?? 1);
     return (
-        <div>
+        <div style={{ "--unit": settings.alignUnits && unit != null ? "'" + unit + "'" : "" }}>
             <h3>
                 {title}
                 {subtitle == null ? null : <span class="subtitle"> ({subtitle})</span>}

src/game/settings.ts

@@ -18,6 +18,8 @@ export interface Settings {
     theme: Themes;
     /** Whether or not to cap the project at 20 ticks per second. */
     unthrottled: boolean;
+    /** Whether to align modifiers to the unit. */
+    alignUnits: boolean;
 }
 
 const state = reactive<Partial<Settings>>({
@@ -25,7 +27,8 @@ const state = reactive<Partial<Settings>>({
     saves: [],
     showTPS: true,
     theme: Themes.Nordic,
-    unthrottled: false
+    unthrottled: false,
+    alignUnits: false
 });
 
 watch(
@@ -57,7 +60,8 @@ export const hardResetSettings = (window.hardResetSettings = () => {
         active: "",
         saves: [],
         showTPS: true,
-        theme: Themes.Nordic
+        theme: Themes.Nordic,
+        alignUnits: false
     };
     globalBus.emit("loadSettings", settings);
     Object.assign(state, settings);