Ryan/drop-app
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-app.git synced 2025-11-14 00:31:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(queue & game): queue and library UIs

Browse Source
This commit is contained in:
DecDuck
2024-12-17 20:29:54 +11:00
parent 3f71149289
commit 0a20139a7c
12 changed files with 255 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
pages/library/[id]/index.vue
View File

@ -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 }>