Files
STARTLINER/src/components/Options.vue

147 lines
4.5 KiB
Vue

<script setup lang="ts">
import { computed, ref } 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 { invoke } from '../invoke';
import { usePrfStore } from '../stores';
const prf = usePrfStore();
const _cfg = <T extends string | number | boolean>(key: string, dflt: T) =>
computed({
get() {
return (prf.cfg(key) as T) ?? dflt;
},
async set(value) {
await prf.setCfg(key, value ?? dflt);
},
});
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', false);
const aimeCode = ref('');
(async () => {
try {
aimeCode.value = await invoke('read_profile_data', {
path: 'aime.txt',
});
} catch (e) {
aimeCode.value = '';
}
})();
const aimeCodeModel = computed({
get() {
return aimeCode.value;
},
async set(value: string) {
aimeCode.value = value;
if (value.match(/^[0-9]{20}$/)) {
await invoke('write_profile_data', {
path: 'aime.txt',
content: aimeCode.value,
});
}
},
});
</script>
<template>
<Fieldset legend="Launch options" :toggleable="true">
<div class="flex w-full flex-col gap-1">
<label for="switch1" class="flex flex-row w-full p-2">
<div class="grow">
OpenSSL bug workaround for Intel 10th gen
</div>
<Toggle inputId="switch1" 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="switch2" class="flex flex-row w-full p-2">
<div class="grow">Aime emulation</div>
<Toggle inputId="switch2" 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="prf.cfg('aime') !== true"
:maxlength="20"
placeholder="00000000000000000000"
v-model="aimeCodeModel"
/>
</label>
</div>
</Fieldset>
</template>
<style>
#resolution .p-inputnumber-input {
width: 4rem;
}
.p-inputtext {
font-family: monospace;
}
</style>