some more game project page progress

Small-Fish-Dev · Oct 22, 2024 · 7d81cd7 · 7d81cd7
1 parent ee3e84d
commit 7d81cd7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/src/lib/types/Games.ts b/src/lib/types/Games.ts
@@ -63,7 +63,14 @@ export const Games: Game[] = [
 		title: 'In This House',
 		summary:
 			'Spooky Robathon with 3 levels and 3 monsters trying to kick you out. 1st Place winner of the Mighty Brick Game Jam.',
-		media: ['/blogs/example/ex.png', '/blogs/frostrial/clothes.png'],
+		media: [
+			'/blogs/example/ex.png',
+			'/blogs/frostrial/clothes.png',
+			'/blogs/example/ex.png',
+			'/blogs/frostrial/clothes.png',
+			'/blogs/example/ex.png',
+			'/blogs/frostrial/clothes.png'
+		],
 		contributors: ['ubre', 'Grodbert', 'ceitine', 'gio', 'rndtrash', 'Luke', 'CyberAgent'],
 		date: new Date(2023, 10, 20),
 		state: GameState['Dead Till Revival'],

diff --git a/src/routes/games/+layout.svelte b/src/routes/games/+layout.svelte
@@ -16,6 +16,8 @@
 	onMount(() => {
 		window.history.replaceState(null, '', `/games/${game.slug}`);
 	});
+
+	let mediaIndex: number = 0;
 </script>
 
 <slot />
@@ -24,11 +26,11 @@
 	<title>Games / {game.title}</title>
 </svelte:head>
 
-<div class="flex h-screen w-full justify-center font-poppins">
+<div class="flex h-screen w-full justify-center overflow-x-hidden bg-[#222222] font-poppins">
 	<!-- Main content -->
-	<div class="flex h-full w-full flex-row bg-blue xl:w-[85%]">
+	<div class="flex h-full w-full flex-row xl:w-[85%]">
 		<!-- Media and navigation -->
-		<div class="flex w-[65%] flex-shrink flex-col">
+		<div class="flex w-[65%] flex-shrink flex-col gap-10">
 			<!-- Navigation -->
 			<div class="flex flex-col gap-2 px-10 pt-5">
 				<p class="text-lg text-gray">quick fish games navigation:</p>
@@ -45,6 +47,45 @@
 					{/each}
 				</div>
 			</div>
+
+			<!-- Active media -->
+			<div class="relative flex h-full w-full pb-40">
+				{#if game.media && game.media[mediaIndex]}
+					{@const src = game.media[mediaIndex]}
+
+					<div class="relative flex w-full justify-center bg-black">
+						{#if src.endsWith('mp4')}
+							<video {src} />
+						{:else}
+							<div
+								class="absolute left-0 -ml-60 h-full w-[110vw] overflow-x-hidden blur-md brightness-50"
+							>
+								<img class="h-full w-full" {src} loading="lazy" />
+							</div>
+							<img
+								class="z-20 h-full object-contain"
+								{src}
+								alt={`image ${mediaIndex}`}
+								loading="lazy"
+							/>
+						{/if}
+					</div>
+
+					<div
+						class="absolute bottom-0 z-30 flex h-40 w-full -translate-y-[20%] flex-row items-start justify-center gap-8 px-4 drop-shadow-sm"
+					>
+						{#each game.media as media, i}
+							{@const activeClass = i == mediaIndex ? '-translate-y-4' : 'brightness-50'}
+							<button
+								class="flex aspect-video flex-grow basis-0 justify-center bg-black transition-all hover:-translate-y-2 hover:cursor-pointer hover:brightness-110 {activeClass}"
+								on:click={() => (mediaIndex = i)}
+							>
+								<img src={media} class="h-full" alt="media" />
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
 		</div>
 
 		<!-- Information container -->