feat(queue & game): queue and library UIs

pages/library.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row h-full">
-    <div class="flex-none h-full w-64 bg-zinc-950 px-2 py-1">
+    <div class="flex-none max-h-full overflow-y-scroll w-64 bg-zinc-950 px-2 py-1">
       <ul class="flex flex-col gap-y-1">
         <NuxtLink
           v-for="(nav, navIdx) in navigation"

pages/library/[id]/index.vue

@@ -6,7 +6,7 @@
     <div class="absolute flex top-0 h-fit inset-x-0 z-[-20]">
       <img :src="bannerUrl" class="w-full h-auto object-cover" />
       <h1
-        class="absolute inset-x-0 w-full text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50"
+        class="absolute inset-x-0 w-fit mx-auto text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50 p-4 shadow-xl bg-zinc-900/80 rounded"
       >
         {{ game.mName }}
       </h1>
@@ -24,6 +24,34 @@
           :status="status"
         />
       </div>
+
+      <div class="flex flex-row">
+        <div>
+          <div
+            v-if="showPreview"
+            v-html="previewHTML"
+            class="mt-12 prose prose-invert prose-blue max-w-none"
+          />
+          <div
+            v-else
+            v-html="descriptionHTML"
+            class="mt-12 prose prose-invert prose-blue max-w-none"
+          />
+
+          <button
+            v-if="showReadMore"
+            class="mt-8 w-full inline-flex items-center gap-x-6"
+            @click="() => (showPreview = !showPreview)"
+          >
+            <div class="grow h-[1px] bg-zinc-700 rounded-full" />
+            <span
+              class="uppercase text-sm font-semibold font-display text-zinc-600"
+              >Click to read {{ showPreview ? "more" : "less" }}</span
+            >
+            <div class="grow h-[1px] bg-zinc-700 rounded-full" />
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -323,8 +351,8 @@ import {
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { XCircleIcon } from "@heroicons/vue/24/solid";
 import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-import type { Game, GameStatus } from "~/types";
+import MarkdownIt from "markdown-it";
+import moment from "moment";
 
 const route = useRoute();
 const id = route.params.id.toString();
@@ -334,6 +362,32 @@ const game = ref(rawGame);
 
 const bannerUrl = await useObject(game.value.mBannerId);
 
+const md = MarkdownIt();
+
+const showPreview = ref(true);
+const gameDescriptionCharacters = game.value.mDescription.split("");
+
+// First new line after x characters
+const descriptionSplitIndex = gameDescriptionCharacters.findIndex(
+  (v, i, arr) => {
+    // If we're at the last element, we return true.
+    // So we don't have to handle a -1 from this findIndex
+    if (i + 1 == arr.length) return true;
+    if (i < 500) return false;
+    if (v != "\n") return false;
+    return true;
+  }
+);
+
+const previewDescription = gameDescriptionCharacters
+  .slice(0, descriptionSplitIndex + 1) // Slice a character after
+  .join("");
+const previewHTML = md.render(previewDescription);
+
+const descriptionHTML = md.render(game.value.mDescription);
+
+const showReadMore = previewHTML != descriptionHTML;
+
 const installFlowOpen = ref(false);
 const versionOptions = ref<
   undefined | Array<{ versionName: string; platform: string }>

pages/queue.vue

@@ -1,24 +1,91 @@
 <template>
-  <draggable v-model="queue.queue" @end="onEnd">
-    <template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
-      <div class="text-white">
-        {{ element.id }}
-      </div>
-    </template>
-  </draggable>
-  {{ current }}
-  {{ rest }}
+  <div class="bg-zinc-950 p-4 min-h-full">
+    <draggable v-model="queue.queue" @end="onEnd">
+      <template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
+        <li
+          v-if="games[element.id]"
+          :key="element.id"
+          class="mb-4 bg-zinc-900 rounded-lg relative flex justify-between gap-x-6 py-5 px-4"
+        >
+          <div class="flex items-center max-w-md gap-x-4">
+            <img
+              class="size-24 flex-none bg-zinc-800 object-cover rounded"
+              :src="games[element.id].cover"
+              alt=""
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-xl font-semibold text-zinc-100">
+                <NuxtLink :href="`/library/${element.id}`">
+                  <span class="absolute inset-x-0 -top-px bottom-0" />
+                  {{ games[element.id].game.mName }}
+                </NuxtLink>
+              </p>
+              <p class="mt-1 flex text-xs/5 text-gray-500">
+                {{ games[element.id].game.mShortDescription }}
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-x-4">
+            <div class="hidden sm:flex sm:flex-col sm:items-end">
+              <p class="text-md text-zinc-500 uppercase font-display font-bold">
+                {{ element.status }}
+              </p>
+              <div
+                v-if="element.progress"
+                class="mt-1 w-96 bg-zinc-800 rounded-lg overflow-hidden"
+              >
+                <div
+                  class="h-2 bg-blue-600"
+                  :style="{ width: `${element.progress * 100}%` }"
+                />
+              </div>
+            </div>
+            <ChevronRightIcon
+              class="size-5 flex-none text-gray-400"
+              aria-hidden="true"
+            />
+          </div>
+        </li>
+        <p v-else>Loading...</p>
+      </template>
+    </draggable>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
+import type { Game, GameStatus } from "~/types";
 
 const queue = useQueueState();
 
 const current = computed(() => queue.value.queue.at(0));
 const rest = computed(() => queue.value.queue.slice(1));
 
+const games: Ref<{
+  [key: string]: { game: Game; status: Ref<GameStatus>; cover: string };
+}> = ref({});
+
+watch(queue, (v) => {
+  loadGamesForQueue(v);
+});
+
+function loadGamesForQueue(v: typeof queue.value) {
+  for (const { id } of v.queue) {
+    if (games.value[id]) return;
+    (async () => {
+      const gameData = await useGame(id);
+      const cover = await useObject(gameData.game.mCoverId);
+      games.value[id] = { ...gameData, cover };
+    })();
+  }
+}
+
+loadGamesForQueue(queue.value);
+
 async function onEnd(event: { oldIndex: number; newIndex: number }) {
-  await invoke("move_game_in_queue", { oldIndex: event.oldIndex, newIndex: event.newIndex });
+  await invoke("move_game_in_queue", {
+    oldIndex: event.oldIndex,
+    newIndex: event.newIndex,
+  });
 }
 </script>