feat: less bad launches

src/components/App.vue

@@ -7,6 +7,7 @@ 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';
@@ -19,6 +20,7 @@ const store = usePkgStore();
 store.setupListeners();
 
 const currentTab = ref('3');
+const startEnabled = ref(true);
 
 const loadProfile = async () => {
     await store.reloadProfile();
@@ -49,9 +51,8 @@ const loadProfile = async () => {
 const isProfileDisabled = computed(() => store.profile === null);
 
 const startline = async () => {
+    startEnabled.value = false;
     await invoke('startline');
-
-    //startDisabled.value = true;
 };
 
 onOpenUrl((urls) => {
@@ -61,6 +62,10 @@ onOpenUrl((urls) => {
 onMounted(async () => {
     await loadProfile();
 });
+
+listen('launch-end', () => {
+    startEnabled.value = true;
+});
 </script>
 
 <template>
@@ -82,7 +87,7 @@ onMounted(async () => {
                     ></Tab>
                     <div class="grow"></div>
                     <Button
-                        :disabled="false"
+                        :disabled="!startEnabled"
                         icon="pi pi-play"
                         label="START"
                         aria-label="start"

src/components/ModListEntry.vue

@@ -4,6 +4,7 @@ import ToggleSwitch from 'primevue/toggleswitch';
 import { open } from '@tauri-apps/plugin-shell';
 import InstallButton from './InstallButton.vue';
 import ModTitlecard from './ModTitlecard.vue';
+import UpdateButton from './UpdateButton.vue';
 import { usePkgStore } from '../stores';
 import { Package } from '../types';
 
@@ -21,6 +22,7 @@ const toggle = async (value: boolean) => {
 <template>
     <div class="flex items-center">
         <ModTitlecard showVersion :pkg="pkg" />
+        <UpdateButton :pkg="pkg" />
         <ToggleSwitch
             class="scale-[1.33] shrink-0"
             inputId="switch"
@@ -28,7 +30,7 @@ const toggle = async (value: boolean) => {
             :modelValue="store.isEnabled(pkg)"
             v-on:value-change="toggle"
         />
-        <InstallButton />
+        <InstallButton :pkg="pkg" />
         <Button
             rounded
             icon="pi pi-folder"

src/components/ModStore.vue

@@ -11,7 +11,12 @@ onMounted(() => {
 </script>
 
 <template>
-    <div v-for="p in pkgs.allRemote" class="flex flex-row">
+    <div
+        v-for="p in pkgs.allRemote.sort((p1, p2) =>
+            p1.name.localeCompare(p2.name)
+        )"
+        class="flex flex-row"
+    >
         <ModStoreEntry :pkg="p" />
     </div>
 </template>

src/components/ModTitlecard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { Package } from '../types';
+import { needsUpdate } from '../util';
 
 const props = defineProps({
     pkg: Object as () => Package,
@@ -39,11 +40,19 @@ const iconSrc = () => {
             >
                 by&nbsp;{{ pkg.namespace }}
             </span>
-            <span
-                v-if="showVersion && pkg?.loc?.version"
-                class="text-sm opacity-75 m-2"
-            >
-                {{ pkg?.loc?.version ?? '?.?.?' }}
+            <span class="m-2">
+                <span
+                    v-if="showVersion && pkg?.loc?.version"
+                    class="text-sm opacity-75"
+                >
+                    {{ pkg?.loc?.version ?? '?.?.?' }}
+                </span>
+                <span
+                    v-if="showVersion && needsUpdate(pkg)"
+                    class="text-sm opacity-75"
+                >
+                    -> {{ pkg?.rmt?.version ?? '?.?.?' }}</span
+                >
             </span>
         </div>
         <div class="text-sm opacity-75">

src/components/UpdateButton.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { invoke } from '@tauri-apps/api/core';
+import { Package } from '../types';
+import { needsUpdate, pkgKey } from '../util';
+
+const props = defineProps({
+    pkg: Object as () => Package,
+});
+
+const install = async () => {
+    if (props.pkg === undefined) {
+        return;
+    }
+
+    try {
+        await invoke('install_package', { key: pkgKey(props.pkg) });
+    } catch (err) {
+        console.error(err);
+        if (props.pkg !== undefined) {
+            props.pkg.js.busy = false;
+        }
+    }
+
+    //if (rv === 'Deferred') { /* download progress */ }
+};
+</script>
+
+<template>
+    <Button
+        v-if="needsUpdate(pkg) && !pkg?.js.busy"
+        rounded
+        icon="pi pi-sync"
+        severity="success"
+        aria-label="remove"
+        size="small"
+        class="self-center mr-4"
+        style="width: 2rem; height: 2rem"
+        v-on:click="install()"
+    />
+</template>

src/util.ts

@@ -20,3 +20,23 @@ export const changePrimaryColor = (game: 'Ongeki' | 'Chunithm') => {
 };
 
 export const pkgKey = (pkg: Package) => `${pkg.namespace}-${pkg.name}`;
+
+export const needsUpdate = (pkg: Package | undefined) => {
+    const loc = pkg?.loc?.version;
+    const rmt = pkg?.rmt?.version;
+
+    if (loc === undefined || rmt === undefined) {
+        return false;
+    }
+
+    const [l1, l2, l3] = loc.split('.');
+    const [r1, r2, r3] = rmt.split('.');
+
+    if (l1 === r1) {
+        if (l2 === r2) {
+            return l3 < r3;
+        }
+        return l2 < r2;
+    }
+    return l1 < r1;
+};