72 lines
2.1 KiB
Svelte
72 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import type { Game, GameFile, Tag } from '$lib/types';
|
|
import DownloadButton from '$lib/components/DownloadButton.svelte';
|
|
import TagEditor from '$lib/components/TagEditor.svelte';
|
|
import MetaEditor from '$lib/components/MetaEditor.svelte';
|
|
import ScreenshotGallery from '$lib/components/ScreenshotGallery.svelte';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
const game = $derived(data.game as Game);
|
|
const files = $derived(data.files as GameFile[]);
|
|
const tags = $derived(data.tags as Tag[]);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{game.title} — Game Grid</title>
|
|
</svelte:head>
|
|
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- Hero image -->
|
|
{#if game.has_wide || game.has_cover}
|
|
<div class="mb-8 rounded-xl overflow-hidden bg-gray-800 aspect-video max-h-80">
|
|
<img
|
|
src="/api/cover/{game.slug}?wide={(game.has_wide ? '1' : '0')}"
|
|
alt={game.title}
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
<!-- Cover art (portrait) -->
|
|
{#if game.has_cover}
|
|
<div class="flex-none w-40 md:w-48">
|
|
<div class="aspect-[2/3] rounded-lg overflow-hidden bg-gray-800 shadow-xl">
|
|
<img src="/api/cover/{game.slug}" alt={game.title} class="w-full h-full object-cover" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<h1 class="text-3xl font-bold text-white mb-2">{game.title}</h1>
|
|
|
|
{#if game.genre}
|
|
<p class="text-purple-400 text-sm font-medium mb-4">{game.genre}</p>
|
|
{/if}
|
|
|
|
<TagEditor tags={tags} gameSlug={game.slug} loggedIn={data.loggedIn} />
|
|
|
|
<div class="mt-6">
|
|
<DownloadButton {files} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<MetaEditor {game} loggedIn={data.loggedIn} />
|
|
</div>
|
|
|
|
{#if data.screenshots.length > 0}
|
|
<div class="mt-8">
|
|
<h2 class="text-lg font-semibold text-gray-200 mb-3">Screenshots</h2>
|
|
<ScreenshotGallery screenshots={data.screenshots} />
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="mt-8">
|
|
<a href="/" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">← Back to library</a>
|
|
</div>
|
|
</div>
|