feat: etc

src/components/App.vue

@@ -6,13 +6,12 @@ import TabList from 'primevue/tablist';
 import TabPanel from 'primevue/tabpanel';
 import TabPanels from 'primevue/tabpanels';
 import Tabs from 'primevue/tabs';
-import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
 import { onOpenUrl } from '@tauri-apps/plugin-deep-link';
 import { open } from '@tauri-apps/plugin-dialog';
 import ModList from './ModList.vue';
 import ModStore from './ModStore.vue';
 import Options from './Options.vue';
+import StartButton from './StartButton.vue';
 import { usePkgStore } from '../stores';
 import { changePrimaryColor } from '../util';
 
@@ -20,7 +19,6 @@ const store = usePkgStore();
 store.setupListeners();
 
 const currentTab = ref('3');
-const startEnabled = ref(false);
 
 const loadProfile = async (openWindow: boolean) => {
     await store.reloadProfile();
@@ -42,7 +40,6 @@ const loadProfile = async (openWindow: boolean) => {
     }
     if (store.profile !== null) {
         changePrimaryColor(store.profile.game);
-        startEnabled.value = true;
         currentTab.value = '0';
     }
 
@@ -51,11 +48,6 @@ const loadProfile = async (openWindow: boolean) => {
 
 const isProfileDisabled = computed(() => store.profile === null);
 
-const startline = async () => {
-    startEnabled.value = false;
-    await invoke('startline');
-};
-
 onOpenUrl((urls) => {
     console.log('deep link:', urls);
 });
@@ -63,10 +55,6 @@ onOpenUrl((urls) => {
 onMounted(async () => {
     await loadProfile(false);
 });
-
-listen('launch-end', () => {
-    startEnabled.value = true;
-});
 </script>
 
 <template>
@@ -87,15 +75,7 @@ listen('launch-end', () => {
                         ><div class="pi pi-question-circle"></div
                     ></Tab>
                     <div class="grow"></div>
-                    <Button
-                        :disabled="!startEnabled"
-                        icon="pi pi-play"
-                        label="START"
-                        aria-label="start"
-                        size="small"
-                        class="m-2.5"
-                        @click="startline()"
-                    />
+                    <StartButton />
                 </TabList>
             </div>
             <TabPanels class="w-full grow mt-[3rem]">

src/components/Options.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+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 * as path from '@tauri-apps/api/path';
+import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
 import { usePkgStore } from '../stores';
 
 const store = usePkgStore();
@@ -23,7 +25,32 @@ const cfgRezW = _cfg('rez-w', 1080);
 const cfgRezH = _cfg('rez-h', 1920);
 const cfgDisplayMode = _cfg('display-mode', 'borderless');
 const cfgAime = _cfg('aime', false);
-const cfgAimeCode = _cfg('aime-code', '');
+
+const aimeCode = ref('');
+// temp
+let aimePath = '';
+
+(async () => {
+    aimePath = await path.join(
+        await path.dataDir(),
+        'startliner/profile-ongeki-default/aime.txt'
+    );
+    aimeCode.value = await readTextFile(aimePath);
+})();
+
+path.homeDir().then(console.log);
+
+const aimeCodeModel = computed({
+    get() {
+        return aimeCode.value;
+    },
+    async set(value: string) {
+        aimeCode.value = value;
+        if (value.match(/^[0-9]{20}$/)) {
+            await writeTextFile(aimePath, aimeCode.value);
+        }
+    },
+});
 </script>
 
 <template>
@@ -98,13 +125,9 @@ const cfgAimeCode = _cfg('aime-code', '');
                     class="shrink"
                     size="small"
                     :disabled="store.cfg('aime') !== true"
-                    :invalid="
-                        store.cfg('aime') === true &&
-                        store.cfg('aime-code')?.toString().length !== 20
-                    "
                     :maxlength="20"
                     placeholder="00000000000000000000"
-                    v-model="cfgAimeCode"
+                    v-model="aimeCodeModel"
                 />
             </label>
         </div>

src/components/StartButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+import Button from 'primevue/button';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+
+type StartStatus = 'ready' | 'preparing' | 'running';
+const startStatus: Ref<StartStatus> = ref('ready');
+
+const startline = async () => {
+    startStatus.value = 'preparing';
+    await invoke('startline');
+};
+
+const kill = async () => {
+    await invoke('kill');
+    startStatus.value = 'ready';
+};
+
+listen('launch-start', () => {
+    startStatus.value = 'running';
+});
+
+listen('launch-end', () => {
+    startStatus.value = 'ready';
+});
+</script>
+
+<template>
+    <Button
+        v-if="startStatus === 'ready'"
+        :disabled="false"
+        icon="pi pi-play"
+        label="START"
+        aria-label="start"
+        size="small"
+        class="m-2.5"
+        @click="startline()"
+    />
+    <Button
+        v-else-if="startStatus === 'preparing'"
+        disabled
+        icon="pi pi-spin pi-spinner"
+        label="START"
+        aria-label="start"
+        size="small"
+        class="m-2.5"
+    />
+    <Button
+        v-else
+        :disabled="false"
+        icon="pi pi-ban"
+        label="STOP"
+        aria-label="stop"
+        size="small"
+        class="m-2.5"
+        @click="kill()"
+    />
+</template>