Game specialisation & delta versions (#323)

* feat: game specialisation, auto-guess extensions

* fix: enforce specialisation specific schema at API level

* fix: lint

* feat: partial work on depot endpoints

* feat: bump torrential

* feat: dummy version creation for depot uploads

* fix: lint

* fix: types

* fix: lint

* feat: depot version import

* fix: lint

* fix: remove any type

* fix: lint

* fix: push update interval

* fix: cpu usage calculation

* feat: delta version support

* feat: style tweaks for selectlaunch.vue

* fix: lint

components/ExecutorWidget.vue

@@ -4,7 +4,7 @@
     class="flex space-x-4 rounded-md bg-zinc-900/50 px-6 outline -outline-offset-1 outline-white/10 w-fit text-xs font-bold text-zinc-100"
   >
     <div class="inline-flex gap-x-2 items-center">
-      <img :src="executor.gameIcon" class="size-6" />
+      <img :src="useObject(executor.gameIcon)" class="size-6" />
       <span>{{ executor.gameName }}</span>
     </div>
     <div class="flex items-center">

components/GameEditor/VersionConfig.vue

@@ -28,12 +28,9 @@
       :executor="{
         launchId: props.config.launchId,
         gameName: props.config.executor.gameVersion.game.mName,
-        gameIcon: useObject(
-          props.config.executor.gameVersion.game.mIconObjectId,
-        ),
-        versionName:
-          props.config.executor.gameVersion.displayName ??
-          props.config.executor.gameVersion.versionPath,
+        gameIcon: props.config.executor.gameVersion.game.mIconObjectId,
+        versionName: (props.config.executor.gameVersion.displayName ??
+          props.config.executor.gameVersion.versionPath)!,
         launchName: props.config.executor.name,
         platform: props.config.executor.platform,
       }"

components/GameSearchResultWidget.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex flex-row items-center gap-x-2">
-    <img :src="game.icon" class="w-12 h-12 rounded-sm object-cover" />
+    <img
+      :src="rawIcon ? game.icon : useObject(game.icon)"
+      class="w-12 h-12 rounded-sm object-cover"
+    />
     <div class="flex flex-col items-left">
       <h1 class="font-semibold font-display text-lg text-zinc-100">
         {{ game.name }}
@@ -18,7 +21,8 @@
 <script setup lang="ts">
 import type { GameMetadataSearchResult } from "~/server/internal/metadata/types";
 
-const { game } = defineProps<{
+const { game, rawIcon = true } = defineProps<{
   game: Omit<GameMetadataSearchResult, "year"> & { sourceName?: string };
+  rawIcon?: boolean;
 }>();
 </script>

components/ImportVersionLaunchRow.vue

@@ -87,6 +87,11 @@
                       :is="PLATFORM_ICONS[guess.platform]"
                       class="size-5"
                     />
+                    <img
+                      v-if="guess.type === 'executor'"
+                      :src="useObject(guess.icon)"
+                      class="size-5"
+                    />
                   </span>
 
                   <span
@@ -119,7 +124,7 @@
                   <span
                     :class="['block truncate', selected && 'font-semibold']"
                   >
-                    {{ launchProcessQuery }}
+                    '{{ launchProcessQuery }}'
                   </span>
 
                   <span
@@ -137,6 +142,28 @@
           </div>
         </Combobox>
       </div>
+      <div
+        v-if="props.type && props.type === 'Executor'"
+        class="ml-1 mt-2 rounded-lg bg-blue-900/10 p-1 outline outline-blue-900"
+      >
+        <div class="flex items-center">
+          <div class="shrink-0">
+            <InformationCircleIcon
+              class="size-5 text-blue-500"
+              aria-hidden="true"
+            />
+          </div>
+          <div class="ml-2 inline-flex items-center">
+            <p class="text-sm text-blue-200">
+              <span
+                class="font-mono bg-zinc-950 text-zinc-100 py-1 px-0.5 rounded-xl"
+                >{executor}</span
+              >
+              is replaced with the game's launch command for executors.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
     <SelectorPlatform
       :model-value="launchConfiguration.platform"
@@ -145,7 +172,7 @@
     >
       {{ $t("library.admin.import.version.platform") }}
     </SelectorPlatform>
-    <div>
+    <div v-if="props.type && props.type === 'Game' && props.allowExecutor">
       <h1 class="block text-sm font-medium leading-6 text-zinc-100">
         Executor
       </h1>
@@ -170,6 +197,15 @@
         </button>
       </div>
     </div>
+    <div v-if="props.type && props.type === 'Executor'">
+      <p class="block text-sm font-medium leading-6 text-zinc-100">
+        Auto-suggest extensions
+      </p>
+      <SelectorFileExtension
+        v-model="launchConfiguration.suggestions!"
+        class="mt-2"
+      />
+    </div>
     <ModalSelectLaunch
       v-model="selectLaunchOpen"
       class="-mt-2"
@@ -190,9 +226,10 @@ import {
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { InformationCircleIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import type { ExecutorLaunchObject } from "~/composables/frontend";
-import type { Platform } from "~/prisma/client/enums";
+import type { GameType, Platform } from "~/prisma/client/enums";
 
 import type { ImportVersion } from "~/server/api/v1/admin/import/version/index.post";
+import type { VersionGuess } from "~/server/internal/library";
 
 const launchProcessQuery = ref("");
 
@@ -227,10 +264,15 @@ function updatePlatform(v: Platform | undefined) {
 }
 
 const props = defineProps<{
-  versionGuesses: Array<{ platform: Platform; filename: string }> | undefined;
+  versionGuesses: Array<VersionGuess> | undefined;
   needsName: boolean;
+  allowExecutor?: boolean;
+  type?: GameType;
 }>();
 
+if (props.type && props.type === "Executor")
+  launchConfiguration.value.suggestions ??= [];
+
 const selectLaunchOpen = ref(false);
 
 const launchFilteredVersionGuesses = computed(() =>
@@ -246,7 +288,20 @@ function updateLaunchCommand(command: string) {
       (v) => v.filename == command,
     );
     if (autosetGuess) {
-      launchConfiguration.value.platform = autosetGuess.platform;
+      if (autosetGuess.type === "platform") {
+        launchConfiguration.value.platform = autosetGuess.platform;
+      } else if (autosetGuess.type === "executor") {
+        console.log(autosetGuess.executorId);
+        executor.value = {
+          launchId: autosetGuess.executorId,
+          gameName: autosetGuess.gameName,
+          gameIcon: autosetGuess.icon,
+          versionName: autosetGuess.launchName,
+          launchName: autosetGuess.launchName,
+          platform: autosetGuess.platform,
+        } satisfies ExecutorLaunchObject;
+        launchConfiguration.value.platform = autosetGuess.platform;
+      }
     }
   }
 }

components/Modal/AddCompanyGame.vue

@@ -164,6 +164,8 @@ async function addGame() {
 }
 
 async function search(query: string) {
-  return await $dropFetch("/api/v1/admin/search/game", { query: { q: query } });
+  return await $dropFetch("/api/v1/admin/search/game?type=Game", {
+    query: { q: query },
+  });
 }
 </script>

components/Modal/SelectLaunch.vue

@@ -3,7 +3,7 @@
     <template #default>
       <div>
         <h1 as="h3" class="text-lg font-medium leading-6 text-white">
-          Pick a launch option
+          Select a launch option
         </h1>
         <p class="mt-1 text-zinc-400 text-sm">
           Select a launch option as an executor for your new launch option.
@@ -28,14 +28,14 @@
         </div>
       </div>
       <div class="mt-2 space-y-4">
-        <div
-          class="inline-flex items-center w-full gap-x-2 text-zinc-100 font-bold"
-        >
-          Game:
+        <div>
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            Search for an executor
+          </h1>
           <SelectorGame
             :search="search"
             :model-value="game"
-            class="w-full"
+            class="w-full mt-2"
             @update:model-value="(value) => updateGame(value)"
           />
         </div>
@@ -45,28 +45,27 @@
         >
           No versions imported.
         </div>
-        <div
-          v-else-if="versions !== undefined"
-          class="inline-flex items-center w-full gap-x-2 text-zinc-100 font-bold"
-        >
-          Version:
+        <div v-else-if="versions !== undefined">
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            Select a version
+          </h1>
           <SelectorCombox
             :search="
               (v) =>
                 Object.values(versions!)
                   .filter((k) =>
-                    (k.displayName || k.versionPath)
+                    (k.displayName || k.versionPath)!
                       .toLowerCase()
                       .includes(v.toLowerCase()),
                   )
                   .map((v) => ({
                     id: v.versionId,
-                    name: v.displayName ?? v.versionPath,
+                    name: (v.displayName ?? v.versionPath)!,
                   }))
             "
             :display="(v) => v.name"
             :model-value="version"
-            class="w-full"
+            class="w-full mt-2"
             @update:model-value="updateVersion"
           >
             <template #default="{ value }">
@@ -74,11 +73,10 @@
             </template>
           </SelectorCombox>
         </div>
-        <div
-          v-if="versions && version"
-          class="inline-flex items-center w-full gap-x-2 text-zinc-100 font-bold"
-        >
-          Launch:
+        <div v-if="versions && version">
+          <h1 class="block text-sm font-medium leading-6 text-zinc-100">
+            Select a launch command
+          </h1>
           <SelectorCombox
             :search="
               (v) =>
@@ -99,7 +97,7 @@
             "
             :display="(v) => v.name"
             :model-value="launchId"
-            class="w-full"
+            class="w-full mt-2"
             @update:model-value="(v) => (launchId = v)"
           >
             <template #default="{ value }">
@@ -169,7 +167,7 @@ const versions = ref<
           platform: Platform;
         }[];
         versionId: string;
-        versionPath: string;
+        versionPath: string | null;
       };
     }
   | undefined
@@ -180,7 +178,9 @@ const emit = defineEmits<{
 }>();
 
 async function search(query: string) {
-  return await $dropFetch("/api/v1/admin/search/game", { query: { q: query } });
+  return await $dropFetch("/api/v1/admin/search/game", {
+    query: { q: query, type: "Executor" },
+  });
 }
 
 function updateGame(value: GameMetadataSearchResult | undefined) {

components/Selector/FileExtension.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="flex gap-1 flex-wrap">
+      <span
+        v-for="extension in model"
+        :key="extension"
+        class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 inset-ring inset-ring-blue-400/30"
+      >
+        {{ extension }}
+        <button
+          type="button"
+          class="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-500/30"
+          @click="() => removeFileExtension(extension)"
+        >
+          <span class="sr-only">Remove</span>
+          <svg
+            viewBox="0 0 14 14"
+            class="size-3.5 stroke-blue-400 group-hover:stroke-blue-300"
+          >
+            <path d="M4 4l6 6m0-6l-6 6" />
+          </svg>
+          <span class="absolute -inset-1"></span>
+        </button>
+      </span>
+      <span v-if="model.length == 0" class="text-zinc-500 text-xs"
+        >No extensions selected.</span
+      >
+    </div>
+    <Combobox
+      as="div"
+      nullable
+      :immediate="true"
+      :model-value="model"
+      class="mt-2 bg-zinc-800 rounded"
+      @update:model-value="addFileExtension"
+    >
+      <div class="relative">
+        <ComboboxInput
+          class="block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6 w-full"
+          placeholder="Start typing..."
+          :display-value="(_) => ''"
+          @change="query = $event.target.value"
+          @blur="query = ''"
+        />
+        <ComboboxButton
+          class="absolute inset-0 right-0 flex items-center justify-end rounded-r-md px-2 focus:outline-none"
+        >
+          <ChevronUpDownIcon class="size-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+
+        <ComboboxOptions
+          class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-white/5 focus:outline-none sm:text-sm"
+        >
+          <ComboboxOption
+            v-if="query"
+            v-slot="{ active, selected }"
+            :value="query"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default select-none py-2 pl-3 pr-9',
+                active
+                  ? 'bg-blue-600 text-white outline-none'
+                  : 'text-zinc-100',
+              ]"
+            >
+              <span> Add "{{ normalize(query) }}" </span>
+
+              <span
+                v-if="selected"
+                :class="[
+                  'absolute inset-y-0 right-0 flex items-center pr-4',
+                  active ? 'text-white' : 'text-blue-600',
+                ]"
+              >
+                <CheckIcon class="size-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+
+const model = defineModel<string[]>({ required: true });
+
+const query = ref("");
+
+function normalize(v: string) {
+  const k = v.toLowerCase().replaceAll(/[^a-zA-Z0-9]*/g, "");
+  if (k.startsWith(".")) return k;
+  return `.${k}`;
+}
+
+function addFileExtension(raw: string) {
+  const value = normalize(raw);
+  if (model.value.includes(value)) return;
+  model.value.push(value);
+}
+
+function removeFileExtension(extension: string) {
+  const index = model.value.findIndex((v) => v === extension);
+  if (index == -1) return;
+  model.value.splice(index, 1);
+}
+</script>

components/Selector/Game.vue

@@ -51,9 +51,9 @@
         </div>
         <div
           v-else-if="results.length == 0"
-          class="text-zinc-300 uppercase font-display font-bold text-center p-4"
+          class="text-zinc-500 uppercase font-display font-bold text-center p-4"
         >
-          No results.
+          No results
         </div>
         <ComboboxOption
           v-for="result in results"
@@ -70,7 +70,7 @@
             ]"
           >
             <span>
-              <GameSearchResultWidget :game="result" />
+              <GameSearchResultWidget :game="result" :raw-icon="false" />
             </span>
 
             <span
@@ -123,8 +123,7 @@ watch(gameSearchQuery, async (v) => {
   if (timeout) clearTimeout(timeout);
   resultsLoading.value = true;
   timeout = setTimeout(async () => {
-    const newResults = await props.search(v);
-    results.value = newResults.map((v) => ({ ...v, icon: useObject(v.icon) }));
+    results.value = await props.search(v);
     resultsLoading.value = false;
     timeout = undefined;
   }, 600);