mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-09 20:12:10 +10:00
321 lines
11 KiB
Vue
321 lines
11 KiB
Vue
<!-- eslint-disable vue/no-v-html -->
|
|
<template>
|
|
<div
|
|
class="mx-auto bg-zinc-950 w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
|
|
>
|
|
<!-- banner image -->
|
|
<div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20] pb-4">
|
|
<img
|
|
:src="useObject(game.mBannerObjectId)"
|
|
class="blur-sm w-full h-auto"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-950"
|
|
/>
|
|
</div>
|
|
<!-- main page -->
|
|
<div
|
|
:class="[
|
|
'max-w-7xl w-full min-h-screen mx-auto px-5 py-4 sm:px-16 sm:py-12 rounded-xl', // layout stuff
|
|
'bg-zinc-950/90 backdrop-blur-[500px] backdrop-saturate-200 backdrop-brightness-200', // make a soft, colourful glow background
|
|
]"
|
|
>
|
|
<h1
|
|
class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
|
|
>
|
|
{{ game.mName }}
|
|
</h1>
|
|
|
|
<div class="mt-8 grid grid-cols-1 lg:grid-cols-4 gap-10">
|
|
<div
|
|
class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
|
|
>
|
|
<img
|
|
class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded gameCover"
|
|
:src="useObject(game.mCoverObjectId)"
|
|
:alt="game.mName"
|
|
/>
|
|
<div class="flex items-center gap-x-2">
|
|
<AddLibraryButton :game-id="game.id" />
|
|
</div>
|
|
<NuxtLink
|
|
v-if="user?.admin"
|
|
:href="`/admin/library/g/${game.id}`"
|
|
type="button"
|
|
class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
|
|
>
|
|
{{ $t("store.openAdminDashboard") }}
|
|
<ArrowTopRightOnSquareIcon
|
|
class="-mr-0.5 h-7 w-7 p-1"
|
|
aria-hidden="true"
|
|
/>
|
|
</NuxtLink>
|
|
<table class="min-w-full">
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.released") }}
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
|
<time datetime="game.mReleased">
|
|
{{ $d(new Date(game.mReleased), "short") }}
|
|
</time>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.platform", platforms.length) }}
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
|
|
>
|
|
<IconsPlatform
|
|
v-for="platform in platforms"
|
|
:key="typeof platform === 'string' ? platform : platform.id"
|
|
:platform="
|
|
typeof platform === 'string' ? platform : platform.id
|
|
"
|
|
:fallback="
|
|
typeof platform === 'string'
|
|
? undefined
|
|
: platform.iconSvg
|
|
"
|
|
class="size-8 text-blue-600"
|
|
/>
|
|
<span
|
|
v-if="platforms.length == 0"
|
|
class="font-display uppercase font-bold text-zinc-700"
|
|
>{{ $t("store.commingSoon") }}</span
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.rating") }}
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap flex flex-row items-center gap-x-1 px-3 py-4 text-sm text-zinc-400"
|
|
>
|
|
<StarIcon
|
|
v-for="(value, idx) in ratingArray"
|
|
:key="idx"
|
|
:class="[
|
|
value ? 'text-yellow-600' : 'text-zinc-600',
|
|
'w-4 h-4',
|
|
]"
|
|
/>
|
|
<span class="text-zinc-600">{{
|
|
$t("store.reviews", [rating._sum.mReviewCount ?? 0])
|
|
}}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.tags") }}
|
|
</td>
|
|
<td class="flex flex-col gap-1 px-3 py-4 text-sm text-zinc-400">
|
|
<NuxtLink
|
|
v-for="tag in game.tags"
|
|
:key="tag.id"
|
|
:href="`/store/t/${tag.id}`"
|
|
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
|
>
|
|
{{ tag.name }}
|
|
</NuxtLink>
|
|
<span
|
|
v-if="game.tags.length == 0"
|
|
class="text-zinc-700 font-bold uppercase font-display"
|
|
>{{ $t("store.noTags") }}</span
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.developers", game.developers.length) }}
|
|
</td>
|
|
<td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
|
|
<NuxtLink
|
|
v-for="developer in game.developers"
|
|
:key="developer.id"
|
|
:href="`/store/c/${developer.id}`"
|
|
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
|
>
|
|
{{ developer.mName }}
|
|
</NuxtLink>
|
|
<span
|
|
v-if="game.developers.length == 0"
|
|
class="text-zinc-700 font-bold uppercase font-display"
|
|
>{{ $t("store.noDevelopers") }}</span
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
|
>
|
|
{{ $t("store.publishers", game.publishers.length) }}
|
|
</td>
|
|
<td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
|
|
<NuxtLink
|
|
v-for="publisher in game.publishers"
|
|
:key="publisher.id"
|
|
:href="`/store/c/${publisher.id}`"
|
|
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
|
>
|
|
{{ publisher.mName }}
|
|
</NuxtLink>
|
|
<span
|
|
v-if="game.publishers.length == 0"
|
|
class="text-zinc-700 font-bold uppercase font-display"
|
|
>{{ $t("store.noPublishers") }}</span
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="row-start-2 lg:row-start-1 lg:col-span-3">
|
|
<p class="text-lg text-zinc-400">
|
|
{{ game.mShortDescription }}
|
|
</p>
|
|
<div class="mt-6 py-4 rounded">
|
|
<VueCarousel :items-to-show="1" :wrap-around="true">
|
|
<VueSlide
|
|
v-for="image in game.mImageCarouselObjectIds"
|
|
:key="image"
|
|
>
|
|
<img
|
|
class="w-fit h-48 lg:h-96 rounded"
|
|
:src="useObject(image)"
|
|
/>
|
|
</VueSlide>
|
|
<VueSlide v-if="game.mImageCarouselObjectIds.length == 0">
|
|
<div
|
|
class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
|
|
>
|
|
{{ $t("store.noImages") }}
|
|
</div>
|
|
</VueSlide>
|
|
|
|
<template #addons>
|
|
<VueNavigation />
|
|
<CarouselPagination class="py-2 px-12" />
|
|
</template>
|
|
</VueCarousel>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
v-if="showPreview"
|
|
class="mt-12 prose prose-invert prose-blue max-w-none"
|
|
v-html="previewHTML"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="mt-12 prose prose-invert prose-blue max-w-none"
|
|
v-html="descriptionHTML"
|
|
/>
|
|
|
|
<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"
|
|
>{{
|
|
showPreview ? $t("store.readMore") : $t("store.readLess")
|
|
}}</span
|
|
>
|
|
<div class="grow h-[1px] bg-zinc-700 rounded-full" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
|
import { StarIcon } from "@heroicons/vue/24/solid";
|
|
import { micromark } from "micromark";
|
|
|
|
const route = useRoute();
|
|
const gameId = route.params.id?.toString();
|
|
if (!gameId)
|
|
throw createError({
|
|
statusCode: 404,
|
|
message: "Game not found",
|
|
fatal: true,
|
|
});
|
|
|
|
const user = useUser();
|
|
|
|
const { game, rating, platforms } = await $dropFetch(`/api/v1/games/${gameId}`);
|
|
|
|
// Preview description (first 30 lines)
|
|
const showPreview = ref(true);
|
|
const gameDescriptionCharacters = game.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 = micromark(previewDescription);
|
|
|
|
const descriptionHTML = micromark(game.mDescription);
|
|
|
|
const showReadMore = previewHTML != descriptionHTML;
|
|
|
|
// const rating = Math.round(game.mReviewRating * 5);
|
|
const averageRating = Math.round((rating._avg.mReviewRating ?? 0) * 5);
|
|
const ratingArray = Array(5)
|
|
.fill(null)
|
|
.map((_, i) => i + 1 <= averageRating);
|
|
|
|
useHead({
|
|
title: game.mName,
|
|
link: [{ rel: "icon", href: useObject(game.mIconObjectId) }],
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
h1 {
|
|
view-transition-name: header;
|
|
}
|
|
img.gameCover {
|
|
view-transition-name: selected-game;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
::view-transition-old(header),
|
|
::view-transition-new(header) {
|
|
width: auto;
|
|
}
|
|
</style>
|