changed games page to display project entries; moved games from project page to games

src/routes/games/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
-    import Content from "$lib/content.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import TableOfContents from "$lib/table-of-contents.svelte";
     import LinkList from "$lib/link-list.svelte";
+    import type { Project } from '$lib/projects';
+    import { games } from '$lib/projects';
 </script>
 
 <svelte:head>
@@ -14,21 +17,38 @@
     subtitle="Just some small game projects"
 />
 
-<Content>
-    <p>Here you'll find all the game projects I've put online!</p>
+<ContentSidebar>
 
-    <p>Do note: the things on here are mostly quick projects, largely unfinished, and possibly not fun.</p>
+    <TableOfContents slot="side-left" />
+    
+    <div slot="main">
+        <p>Here you'll find all the game projects I've put online!</p>
+        {#each games as game}
+            {@render gameSummary({ game: game })}
+        {/each}
+    </div>
 
-    <LinkList entries={
-        [
-            {
-                text: "Swords & Stuff – Unity 2D RPG (unfinished)",
-                link: "swordsnstuff",
-            },
-            {
-                text: "Magician – Online Multiplayer Card Game (not playable)",
-                link: "magician",
-            }
-        ]
-    }></LinkList>
-</Content>
+</ContentSidebar>
+
+{#snippet gameSummary({
+    game
+}: {
+    game: Project;
+})}
+    <div>
+        <h3 id="{game.id}">{game.title}</h3>
+        {#if game.subtitle}
+        <p class="project-subtitle">» {game.subtitle}</p>
+        {/if}
+        {#if game.banner}
+        <img class="project-banner" src="{game.banner}">
+        {/if}
+        {#if game.icon}
+        <img class="project-icon" src="{game.icon}">
+        {/if}
+        {#each game.paragraphs as paragraph}
+            <p>{@html paragraph}</p>
+        {/each}
+        <LinkList entries={game.links} />
+    </div>
+{/snippet}