lucalise/ghostv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use proper aspect ratio and sizing for games

Browse Source
This commit is contained in:
lucalise
2026-01-20 19:56:36 -08:00
parent 37fa5d4838
commit 2bc6d1bdb0
1 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/routes/p/[id]/+page.svelte
View File

@@ -16,11 +16,8 @@
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
await containerRef.requestFullscreen(); await containerRef.requestFullscreen();
isFullscreen = true;
iframeRef?.focus();
} else { } else {
await document.exitFullscreen(); await document.exitFullscreen();
isFullscreen = false;
} }
}; };
@@ -45,7 +42,7 @@
<svelte:document onfullscreenchange={handleFullscreenChange} /> <svelte:document onfullscreenchange={handleFullscreenChange} />
<main class="flex min-h-screen flex-col items-center px-4 py-8"> <main class="flex min-h-screen flex-col items-center px-4 py-8">
<div class="relative mb-6 flex w-full max-w-4xl items-center justify-center"> <div class="relative mb-6 flex w-full max-w-6xl items-center justify-center">
<Button.Root <Button.Root
class="absolute left-0 flex items-center gap-2 rounded-md px-3 py-2 text-gray-400 transition-colors hover:bg-gray-800 hover:text-white" class="absolute left-0 flex items-center gap-2 rounded-md px-3 py-2 text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
onclick={() => goto('/')} onclick={() => goto('/')}
@@ -54,17 +51,17 @@
<span>Back</span> <span>Back</span>
</Button.Root> </Button.Root>
<h1 class="text-xl font-semibold text-white">Project {id}</h1> <h1 class="text-xl font-semibold text-white"></h1>
</div> </div>
<div <div
bind:this={containerRef} bind:this={containerRef}
class="relative w-full max-w-4xl overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-gray-700/80" class="relative w-full max-w-6xl overflow-hidden rounded-md bg-black shadow-2xl ring-1 ring-gray-700/80"
class:max-w-none={isFullscreen} class:max-w-none={isFullscreen}
class:h-screen={isFullscreen} class:h-screen={isFullscreen}
class:rounded-none={isFullscreen} class:rounded-none={isFullscreen}
> >
<div class="aspect-video" class:aspect-auto={isFullscreen} class:h-full={isFullscreen}> <div class="aspect-1152/648" class:aspect-auto={isFullscreen} class:h-full={isFullscreen}>
<iframe <iframe
bind:this={iframeRef} bind:this={iframeRef}
{src} {src}