mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-12 07:42:40 +10:00
Merge branch 'develop' of https://github.com/AdenMGB/drop into AdenMGB-develop
This commit is contained in:
DecDuck
@ -1,111 +1,238 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="game">
|
<div
|
||||||
<!-- header -->
|
class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
|
||||||
<div class="relative">
|
>
|
||||||
<!-- Content -->
|
<!-- Banner background with gradient overlays -->
|
||||||
<div class="p-4">
|
<div class="absolute inset-0 z-0">
|
||||||
<!-- Back button -->
|
<img
|
||||||
|
:src="useObject(game.mBannerId)"
|
||||||
|
class="w-full h-[24rem] object-cover blur-sm scale-105"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-zinc-900/80 to-transparent opacity-90"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative z-10">
|
||||||
|
<div class="px-8 pb-4">
|
||||||
<div class="flex items-center gap-x-3 mb-4">
|
<div class="flex items-center gap-x-3 mb-4">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/library"
|
to="/library"
|
||||||
class="px-2 py-1 rounded bg-zinc-900 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||||
>
|
>
|
||||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||||
Back to Collections
|
Back to Collections
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<!-- Game title and description -->
|
||||||
class="flex flex-col lg:flex-row items-center lg:items-start gap-6 w-full lg:w-fit bg-zinc-900 p-4 rounded-xl"
|
<h1
|
||||||
|
class="text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
|
||||||
>
|
>
|
||||||
<img
|
{{ game.mName }}
|
||||||
:src="useObject(game.mCoverId)"
|
</h1>
|
||||||
class="w-32 h-auto rounded shadow-md transition-all duration-300 hover:scale-105 hover:rotate-[-2deg] hover:shadow-xl"
|
<p class="mt-4 mb-8 text-lg text-zinc-400 max-w-3xl">
|
||||||
alt=""
|
{{ game.mShortDescription }}
|
||||||
/>
|
</p>
|
||||||
<div>
|
|
||||||
<h1 class="text-3xl font-bold font-display text-zinc-100">
|
<div class="flex flex-col lg:flex-row gap-3">
|
||||||
{{ game.mName }}
|
<button
|
||||||
</h1>
|
type="button"
|
||||||
<p class="mt-2 text-lg text-zinc-400">
|
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||||
{{ game.mShortDescription }}
|
>
|
||||||
</p>
|
Open in Launcher
|
||||||
<!-- Buttons -->
|
<ArrowTopRightOnSquareIcon
|
||||||
<div class="flex flex-col lg:flex-row mt-4 flex gap-3">
|
class="-mr-0.5 h-5 w-5"
|
||||||
<button
|
aria-hidden="true"
|
||||||
type="button"
|
/>
|
||||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
</button>
|
||||||
>
|
<div class="relative z-50">
|
||||||
Open in Launcher
|
<AddLibraryButton class="font-bold" :gameId="game.id" />
|
||||||
<ArrowTopRightOnSquareIcon
|
</div>
|
||||||
class="-mr-0.5 h-5 w-5"
|
<NuxtLink
|
||||||
aria-hidden="true"
|
:to="`/store/${game.id}`"
|
||||||
/>
|
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
||||||
</button>
|
>
|
||||||
<AddLibraryButton class="font-bold" :gameId="game.id" />
|
View in Store
|
||||||
<NuxtLink
|
<ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
||||||
:to="`/store/${game.id}`"
|
</NuxtLink>
|
||||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
</div>
|
||||||
>
|
</div>
|
||||||
View in Store
|
|
||||||
<ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
<!-- Main content -->
|
||||||
</NuxtLink>
|
<div class="w-full bg-zinc-900 px-8 py-6">
|
||||||
|
<div class="mt-8 grid grid-cols-1 lg:grid-cols-4 gap-10">
|
||||||
|
<div class="lg:col-span-3 space-y-6">
|
||||||
|
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||||
|
<div
|
||||||
|
v-html="descriptionHTML"
|
||||||
|
class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-start-1 lg:col-start-4 space-y-6">
|
||||||
|
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||||
|
<h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
|
||||||
|
Game Images
|
||||||
|
</h2>
|
||||||
|
<div class="relative">
|
||||||
|
<div v-if="game.mImageCarousel.length > 0">
|
||||||
|
<div
|
||||||
|
class="relative aspect-video rounded-lg overflow-hidden cursor-pointer group"
|
||||||
|
>
|
||||||
|
<div class="absolute inset-0">
|
||||||
|
<TransitionGroup name="slide" tag="div" class="h-full">
|
||||||
|
<img
|
||||||
|
v-for="(imageId, index) in game.mImageCarousel"
|
||||||
|
:key="imageId"
|
||||||
|
:src="useObject(imageId)"
|
||||||
|
class="absolute inset-0 w-full h-full object-cover"
|
||||||
|
v-show="index === currentImageIndex"
|
||||||
|
/>
|
||||||
|
</TransitionGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 flex items-center justify-between px-4 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-if="game.mImageCarousel.length > 1"
|
||||||
|
@click.stop="previousImage()"
|
||||||
|
class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
|
||||||
|
>
|
||||||
|
<ChevronLeftIcon class="size-5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="game.mImageCarousel.length > 1"
|
||||||
|
@click.stop="nextImage()"
|
||||||
|
class="p-2 rounded-full bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900/80 transition-all duration-300 hover:scale-110"
|
||||||
|
>
|
||||||
|
<ChevronRightIcon class="size-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex justify-center gap-x-2 mt-4"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-for="(_, index) in game.mImageCarousel"
|
||||||
|
:key="index"
|
||||||
|
@click.stop="currentImageIndex = index"
|
||||||
|
class="w-2 h-2 rounded-full transition-all duration-300"
|
||||||
|
:class="[
|
||||||
|
currentImageIndex === index
|
||||||
|
? 'bg-zinc-100 scale-125'
|
||||||
|
: 'bg-zinc-600 hover:bg-zinc-500',
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- No images placeholder -->
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="aspect-video rounded-lg overflow-hidden bg-zinc-900/50 flex flex-col items-center justify-center text-center px-4"
|
||||||
|
>
|
||||||
|
<PhotoIcon class="size-12 text-zinc-500 mb-2" />
|
||||||
|
<p class="text-zinc-400 font-medium">No images available</p>
|
||||||
|
<p class="text-zinc-500 text-sm">
|
||||||
|
Game screenshots will appear here when available
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="min-h-[300px]" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
PhotoIcon,
|
||||||
ArrowTopRightOnSquareIcon,
|
ArrowTopRightOnSquareIcon,
|
||||||
ArrowUpRightIcon,
|
ArrowUpRightIcon
|
||||||
TrashIcon,
|
|
||||||
ArrowLeftIcon,
|
|
||||||
PlusIcon,
|
|
||||||
} from "@heroicons/vue/20/solid";
|
} from "@heroicons/vue/20/solid";
|
||||||
import { type Game, type GameVersion, type Collection } from "@prisma/client";
|
import { BuildingStorefrontIcon } from "@heroicons/vue/24/outline";
|
||||||
|
import { micromark } from "micromark";
|
||||||
|
import type { Game } from "@prisma/client";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const id = route.params.id.toString();
|
||||||
|
|
||||||
const collections = await useCollections();
|
const rawGame = await $dropFetch<Game>(`/api/v1/games/${id}`);
|
||||||
const library = await useLibrary();
|
const game = computed(() => {
|
||||||
const game = [...collections.value, library.value]
|
if (!rawGame) {
|
||||||
.map((e) => e.entries.map((e) => e.game))
|
throw createError({ statusCode: 404, message: 'Game not found' });
|
||||||
.flat()
|
}
|
||||||
.find((e) => e.id == route.params.id);
|
return rawGame;
|
||||||
|
});
|
||||||
|
|
||||||
if (game === undefined)
|
// Convert markdown to HTML
|
||||||
throw createError({
|
const descriptionHTML = computed(() => micromark(game.value.mDescription ?? ""));
|
||||||
statusCode: 404,
|
|
||||||
statusMessage: JSON.stringify(collections.value),
|
const currentImageIndex = ref(0);
|
||||||
});
|
|
||||||
|
function nextImage() {
|
||||||
|
if (!game.value?.mImageCarousel) return;
|
||||||
|
currentImageIndex.value = (currentImageIndex.value + 1) % game.value.mImageCarousel.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function previousImage() {
|
||||||
|
if (!game.value?.mImageCarousel) return;
|
||||||
|
currentImageIndex.value = (currentImageIndex.value - 1 + game.value.mImageCarousel.length) % game.value.mImageCarousel.length;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Fade transition for main content */
|
.slide-enter-active,
|
||||||
.fade-enter-active,
|
.slide-leave-active {
|
||||||
.fade-leave-active {
|
transition: all 0.3s ease;
|
||||||
transition: all 0.2s ease;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from,
|
.slide-enter-from {
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(30px);
|
transform: translateX(100%);
|
||||||
}
|
|
||||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
||||||
.no-scrollbar::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide scrollbar for IE, Edge and Firefox */
|
.slide-leave-to {
|
||||||
.no-scrollbar {
|
opacity: 0;
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
transform: translateX(-100%);
|
||||||
scrollbar-width: none; /* Firefox */
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgb(82 82 91) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgb(82 82 91);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.relative) {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dropdown-content) {
|
||||||
|
z-index: 20;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user