fix a couple bugs, some games page progress

src/lib/types/Games.ts

@@ -8,6 +8,7 @@ export interface Game {
 	state?: GameState;
 	contestDetails?: ContestDetails;
 	sboxIdent?: string;
+	slug?: string;
 }
 
 export interface ContestDetails {
@@ -19,7 +20,10 @@ export interface ContestDetails {
 export enum Placement {
 	'1st',
 	'2nd',
-	'3rd'
+	'3rd',
+	'4th',
+	'5th',
+	None
 }
 
 export enum GameState {
@@ -51,7 +55,7 @@ export const Games: Game[] = [
 		contestDetails: {
 			url: 'https://sbox.game/c/gamejam2',
 			placement: Placement['2nd'],
-			title: 'Facepunch Game Contest'
+			title: 'Facepunch Game Contest II'
 		},
 		sboxIdent: 'fish.deathcard'
 	},
@@ -111,3 +115,9 @@ export const Games: Game[] = [
 		contributors: ['ubre', 'Grodbert', 'ceitine', 'Luke', 'rndtrash', 'Mungus']
 	}
 ];
+
+// Give all games a slug!
+Games.forEach((game) => {
+	if (game.slug) return;
+	game.slug = game.title.toLowerCase().replaceAll(' ', '_').replaceAll('/[^a-z0-9]/gi', '');
+});

src/routes/games/+layout.svelte

@@ -1,21 +1,94 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { type Game, Games } from '$lib/types/Games';
+	import { type Game, Games, Placement } from '$lib/types/Games';
+	import Icon from '@iconify/svelte';
 	import { onMount } from 'svelte';
 
 	let game: Game;
 
 	$: {
 		const slug = $page.params.slug;
-		const decodedName = decodeURI(slug).toLocaleLowerCase();
-		game = Games.find((g) => g.title.toLowerCase() === decodedName) ?? Games[0];
+		const decodedName = slug?.toLocaleLowerCase();
+		game = Games.find((g) => g.slug?.toLowerCase() === decodedName) ?? Games[0];
 	}
 
 	onMount(() => {
-		window.history.replaceState(null, '', `/games/${decodeURI(game.title)}`);
+		window.history.replaceState(null, '', `/games/${game.slug}`);
 	});
 </script>
 
 <slot />
 
-<p>{game.title}</p>
+<svelte:head>
+	<title>Games / {game.title}</title>
+</svelte:head>
+
+<div class="flex h-screen w-full justify-center font-poppins">
+	<!-- Main content -->
+	<div class="flex h-full w-full flex-row bg-blue xl:w-[85%]">
+		<!-- Media and navigation -->
+		<div class="flex w-[65%] flex-shrink flex-col">
+			<!-- Navigation -->
+			<div class="flex flex-col gap-2 px-10 pt-5">
+				<p class="text-lg text-gray">quick fish games navigation:</p>
+				<div class="flex h-10 w-full flex-row gap-4 overflow-x-clip">
+					{#each Games as game}
+						{@const activeClass =
+							game.slug == $page.params.slug || (!$page.params.slug && game == Games[0])
+								? 'bg-white text-blue'
+								: 'text-white'}
+						<a
+							class="flex flex-shrink-0 items-center border-2 border-white px-4 text-center text-lg font-bold uppercase transition-all {activeClass}"
+							href="/games/{game.slug}">{game.title}</a
+						>
+					{/each}
+				</div>
+			</div>
+		</div>
+
+		<!-- Information container -->
+		<div
+			class="flex h-full w-[35%] flex-shrink-0 flex-grow flex-col bg-transparentblack1 p-8 backdrop-blur-md"
+		>
+			<!-- Contest -->
+			{#if game.contestDetails}
+				{@const placement = Placement[game.contestDetails.placement]}
+
+				<div
+					class="flex flex-row items-center gap-8 border-4 border-white p-4 placement-{placement}"
+				>
+					<Icon class="hidden text-8xl lg:flex" icon="material-symbols:trophy" />
+					<div class="flex flex-col gap-1">
+						<p class="text-xl font-bold uppercase">{game.contestDetails.title}</p>
+						<p class="text-md brightness-90">
+							{#if game.contestDetails.placement == Placement.None}
+								This game was submitted for a gamejam didn't place :(
+							{:else}
+								This game was submitted for a gamejam and placed {placement}.
+							{/if}
+						</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.placement-1st {
+		color: #ffd700;
+		border-color: #ffd700;
+	}
+
+	.placement-2nd {
+		color: #c0c0c0;
+		border-color: #c0c0c0;
+	}
+
+	.placement-3rd,
+	.placement-4th,
+	.placement-5th {
+		color: #ff5733;
+		border-color: #ff5733;
+	}
+</style>

src/routes/games/[slug]/+page.server.ts

@@ -3,7 +3,7 @@ import { Games, type Game } from '$lib/types/Games';
 /** @type {import('./$types').EntryGenerator} */
 export function entries() {
 	return Games.map(function (g) {
-		return { slug: decodeURI(g.title) };
+		return { slug: g.slug ?? 'fuck-you-kid' };
 	});
 }
 

src/routes/games/[slug]/+page.svelte

@@ -3,10 +3,10 @@
 	import { Games, type Game } from '$lib/types/Games';
 
 	function getGameFromSlug(): Boolean {
-		let slug = $page.params.slug;
-		const decodedName = decodeURI(slug);
+		const slug = $page.params.slug;
+		const decodedName = slug?.toLocaleLowerCase();
 
-		let target = Games.find((g) => g.title.toLowerCase() === decodedName.toLocaleLowerCase());
+		const target = Games.find((g) => g.slug == decodedName);
 		if (target == null) return false;
 
 		initialGame = target;

src/routes/play/[slug]/+layout.svelte

@@ -10,14 +10,11 @@
 		return ident;
 	};
 
-	function getGameFromIdent(): boolean {
+	function getGameFromSlug(): boolean {
 		const slug = $page.params.slug;
-		const decodedName = decodeURI(slug);
+		const decodedName = slug.toLocaleLowerCase();
 
-		const target = Games.find(
-			(g) =>
-				cullIdent(g.sboxIdent ?? 'fuck-you-kid').toLowerCase() === decodedName.toLocaleLowerCase()
-		);
+		const target = Games.find((g) => (g.slug ?? 'fuck-you-kid').toLowerCase() === decodedName);
 		if (target == null) return false;
 
 		game = target;
@@ -33,7 +30,7 @@
 </script>
 
 <svelte:head>
-	{#if getGameFromIdent()}
+	{#if getGameFromSlug()}
 		<meta property="og:title" content="Play {game.title}" />
 		{#if game.summary}
 			<meta property="og:description" content={game.summary} />
@@ -75,9 +72,4 @@
 	p {
 		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 	}
-
-	.pixelated {
-		image-rendering: pixelated;
-		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
-	}
 </style>

src/routes/play/[slug]/+page.server.ts

@@ -1,14 +1,9 @@
 import { Games, type Game } from '$lib/types/Games';
 
-const cullIdent = (ident: string): string => {
-	if (ident.startsWith('fish.')) ident = ident.substring(5);
-	return ident;
-};
-
 /** @type {import('./$types').EntryGenerator} */
 export function entries() {
 	return Games.filter((g) => g.sboxIdent != undefined).map(function (g) {
-		return { slug: cullIdent(decodeURI(g.sboxIdent ?? 'fuck-you-kid')) };
+		return { slug: g.slug ?? 'fuck-you-kid' };
 	});
 }
 
@@ -17,10 +12,8 @@ import { error, redirect } from '@sveltejs/kit';
 /** @type {import('./$types').PageLoad} */
 export function load({ params }) {
 	const slug = params.slug;
-	const decodedName = cullIdent(decodeURI(slug).toLocaleLowerCase());
-	const game = Games.find(
-		(g) => cullIdent(g.sboxIdent?.toLowerCase() ?? 'fuck-you-kid') === decodedName
-	);
+	const decodedName = slug.toLocaleLowerCase();
+	const game = Games.find((g) => (g.slug?.toLowerCase() ?? 'fuck-you-kid') === decodedName);
 
 	if (!game?.sboxIdent) {
 		throw error(404, {

src/routes/team/+layout.svelte

@@ -233,17 +233,19 @@
 </script>
 
 <svelte:head>
-	{#if member}
-		<title>Team / {member.name}</title>
-	{:else}
-		<title>Team</title>
-	{/if}
+	{#key member}
+		{#if member}
+			<title>Team / {member.name}</title>
+		{:else}
+			<title>Team</title>
+		{/if}
+	{/key}
 </svelte:head>
 
 <slot />
 
 <div class="h-screen w-full overflow-hidden">
-	<div class="scroll bg-pixel-large h-full w-full">
+	<div class="scroll h-full w-full bg-pixel-large">
 		{#await promise then options}
 			<canvas
 				bind:this={canvas}

tailwind.config.js

@@ -26,8 +26,8 @@ export default {
 				DEFAULT: '2px 2px 4px rgba(0, 0, 0, 0.5)'
 			},
 			height: {
-				// 54 px for navbar
-				screen: 'calc(100vh - 52px)'
+				// 64 px for navbar
+				screen: 'calc(100vh - 64px)'
 			},
 			boxShadow: {
 				xs: '3px 3px black',