feat: slightly better config

src/components/Options.vue

@@ -1,25 +1,119 @@
 <script setup lang="ts">
-import { usePkgStore } from '../stores';
+import { computed } from 'vue';
 import Fieldset from 'primevue/fieldset';
+import InputNumber from 'primevue/inputnumber';
+import InputText from 'primevue/inputtext';
+import RadioButton from 'primevue/radiobutton';
 import Toggle from 'primevue/toggleswitch';
+import { usePkgStore } from '../stores';
 
 const store = usePkgStore();
+const _cfg = <T extends string | number | boolean>(key: string, dflt: T) =>
+    computed({
+        get() {
+            return (store.cfg(key) as T) ?? dflt;
+        },
+        async set(value) {
+            await store.set_cfg(key, value ?? dflt);
+        },
+    });
 
-const setValue = async (value: boolean) => {
-    await store.set_cfg('intel', value);
-}
+const cfgIntel = _cfg('intel', false);
+const cfgRezW = _cfg('rez-w', 1080);
+const cfgRezH = _cfg('rez-h', 1920);
+const cfgDisplayMode = _cfg('display-mode', 'borderless');
+const cfgAime = _cfg('aime', true);
+const cfgAimeCode = _cfg('aime-code', '00001111222233334444');
 </script>
 
 <template>
-    <Fieldset>
-        <div class="flex w-full flex-col">
+    <Fieldset legend="Launch options" :toggleable="true">
+        <div class="flex w-full flex-col gap-1">
             <label for="switch" class="flex flex-row w-full p-2">
-                <div class="grow">OpenSSL crash workaround for Intel ≥10th gen</div>
-                <Toggle
-                    inputId="switch"
-                    :modelValue="store.cfg('intel') === 'true'"
-                    v-on:value-change="setValue" />
+                <div class="grow">
+                    OpenSSL crash workaround for Intel ≥10th gen
+                </div>
+                <Toggle inputId="switch" v-model="cfgIntel" />
+            </label>
+            <label
+                id="resolution"
+                class="flex flex-row w-full p-2 gap-2 items-center"
+            >
+                <div class="grow">Resolution</div>
+                <InputNumber
+                    class="shrink"
+                    size="small"
+                    :min="480"
+                    :max="9999"
+                    :use-grouping="false"
+                    v-model="cfgRezW"
+                />
+                x
+                <InputNumber
+                    class="shrink"
+                    size="small"
+                    :min="640"
+                    :max="9999"
+                    :use-grouping="false"
+                    v-model="cfgRezH"
+                />
+            </label>
+            <label class="flex flex-row w-full p-2 gap-2">
+                <div class="grow">Display mode</div>
+                <div class="flex items-center gap-2">
+                    <RadioButton
+                        v-model="cfgDisplayMode"
+                        inputId="ingredient1"
+                        name="window"
+                        value="window"
+                    />
+                    <label for="ingredient1">window</label>
+                </div>
+                <div class="flex items-center gap-2">
+                    <RadioButton
+                        v-model="cfgDisplayMode"
+                        inputId="ingredient2"
+                        name="borderless"
+                        value="borderless"
+                    />
+                    <label for="ingredient2">borderless window</label>
+                </div>
+                <div class="flex items-center gap-2">
+                    <RadioButton
+                        v-model="cfgDisplayMode"
+                        inputId="ingredient3"
+                        name="fullscreen"
+                        value="fullscreen"
+                    />
+                    <label for="ingredient3">fullscreen</label>
+                </div>
+            </label>
+            <label for="switch" class="flex flex-row w-full p-2">
+                <div class="grow">Aime emulation</div>
+                <Toggle inputId="switch" v-model="cfgAime" />
+            </label>
+            <label class="flex flex-row w-full p-2 items-center">
+                <div class="grow">Aime code</div>
+                <InputText
+                    class="shrink"
+                    size="small"
+                    :disabled="store.cfg('aime') === false"
+                    :minlength="20"
+                    :maxlength="20"
+                    placeholder="00000000000000000000"
+                    v-model="cfgAimeCode"
+                />
             </label>
         </div>
     </Fieldset>
 </template>
+
+<style>
+#resolution .p-inputnumber-input {
+    width: 4rem;
+}
+
+.p-inputtext {
+    font-family: monospace;
+}
+</style>