Add page for debugging varying iframe sizes.

BattlesnakeOfficial · Aug 6, 2023 · aa5e999 · aa5e999
1 parent 1658316
commit aa5e999
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/src/routes/debug/iframes/+page.svelte b/src/routes/debug/iframes/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	let gameId = $page.url.searchParams.get('game');
+
+	const configs = [
+		{
+			title: 'Recent Games on Leaderboard (1x1)',
+			url: 'https://play.battlesnake.com/leaderboards',
+			width: '300px',
+			aspectRatio: '1 / 1',
+			src: `/?game=${gameId}&showControls=false&showScoreboard=false&autoplay=true&fps=10`
+		},
+		{
+			title: 'SM Screen Size (1x1)',
+			url: `https://play.battlesnake.com/game/${gameId}`,
+			width: '640px',
+			aspectRatio: '1 / 1',
+			src: `/?game=${gameId}&autoplay=true&fps=10`
+		},
+		{
+			title: 'MD Screen Size (1x1)',
+			url: `https://play.battlesnake.com/game/${gameId}`,
+			width: '768px',
+			aspectRatio: '1 / 1',
+			src: `/?game=${gameId}&autoplay=true&fps=10`
+		},
+		{
+			title: 'LG Screen Size (16x9)',
+			url: `https://play.battlesnake.com/game/${gameId}`,
+			width: '1024px',
+			aspectRatio: '16 / 9',
+			src: `/?game=${gameId}&autoplay=true&fps=10`
+		},
+		{
+			title: 'XL Screen Size (16x9)',
+			url: `https://play.battlesnake.com/game/${gameId}`,
+			width: '1280px',
+			aspectRatio: '16 / 9',
+			src: `/?game=${gameId}&autoplay=true&fps=10`
+		},
+		{
+			title: 'Full Width (16x9)',
+			url: `https://play.battlesnake.com/game/${gameId}`,
+			width: '100%',
+			aspectRatio: '16 / 9',
+			src: `/?game=${gameId}&autoplay=true&fps=10`
+		}
+	];
+</script>
+
+<div class="flex flex-col align-center m-4 text-center w-full">
+	{#each configs as config}
+		<div class="mb-16">
+			<p class="text-xl font-bold text-center">{config.title}</p>
+			<p class="text-center text-blue-500 mb-2">
+				<a href={config.url}>{config.url}</a>
+			</p>
+			<div
+				class="rounded-sm border-2 border-solid border-pink-500 m-auto"
+				style:width={config.width}
+				style:aspect-ratio={config.aspectRatio}
+				style:max-height={'720px'}
+			>
+				<iframe title={config.title} src={config.src} scrolling="no" class="w-full h-full" />
+			</div>
+		</div>
+	{/each}
+</div>