@turnipxenon/pineapple 2.4.25 → 2.4.26

package/.idea/workspace.xml

@@ -4,7 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add page query param creator" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add OverridableMeta component">
+      <change beforePath="$PROJECT_DIR$/src/lib/components/overrideable_meta/OverridableMeta.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/overrideable_meta/OverridableMeta.svelte" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -20,7 +22,6 @@
       <list>
         <option value="ChildA" />
         <option value="DeepLazyComponent" />
-        <option value="+page.svelte" />
         <option value="StickySeparatorElement" />
         <option value="CarouselElement" />
         <option value="SocialSection" />
@@ -36,13 +37,16 @@
         <option value="GameSection" />
         <option value="ProjectSection" />
         <option value="TypeScript File" />
+        <option value="+page.svelte" />
+        <option value="OverrideableMeta" />
+        <option value="index.ts" />
       </list>
     </option>
   </component>
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="6a23be06c0482005bd0be5fdcf6f94083ed08c64" />
+        <entry key="$PROJECT_DIR$" value="main" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -84,7 +88,7 @@
     "WebServerToolWindowFactoryState": "false",
     "git-widget-placeholder": "turnip/dev",
     "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/assets/placeholder",
+    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(seaweed)/portfolio/actual",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -104,20 +108,21 @@
 }]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)\portfolio\actual" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)\portfolio" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\assets\placeholder" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\scripts\pineapple_fiber" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\overrideable_meta" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\types" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\template\Seaweed" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
     </key>
     <key name="es6.move.members.recent.items">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\types\RootLayoutProps.ts" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\util\util.ts" />
     </key>
   </component>
@@ -219,23 +224,8 @@
       <workItem from="1711108187279" duration="1163000" />
       <workItem from="1711115902471" duration="148000" />
       <workItem from="1711116299202" duration="1291000" />
-      <workItem from="1711179012668" duration="13200000" />
-    </task>
-    <task id="LOCAL-00041" summary="Turn the portfolio site into a template">
-      <option name="closed" value="true" />
-      <created>1710129280477</created>
-      <option name="number" value="00041" />
-      <option name="presentableId" value="LOCAL-00041" />
-      <option name="project" value="LOCAL" />
-      <updated>1710129280477</updated>
-    </task>
-    <task id="LOCAL-00042" summary="Add content replacer v1">
-      <option name="closed" value="true" />
-      <created>1710193203814</created>
-      <option name="number" value="00042" />
-      <option name="presentableId" value="LOCAL-00042" />
-      <option name="project" value="LOCAL" />
-      <updated>1710193203814</updated>
+      <workItem from="1711179012668" duration="14397000" />
+      <workItem from="1711206704484" duration="3335000" />
     </task>
     <task id="LOCAL-00043" summary="Testing toggleable content">
       <option name="closed" value="true" />
@@ -613,7 +603,23 @@
       <option name="project" value="LOCAL" />
       <updated>1711192223071</updated>
     </task>
-    <option name="localTasksCounter" value="90" />
+    <task id="LOCAL-00090" summary="Hide advanced settings when letChaos is true">
+      <option name="closed" value="true" />
+      <created>1711193116101</created>
+      <option name="number" value="00090" />
+      <option name="presentableId" value="LOCAL-00090" />
+      <option name="project" value="LOCAL" />
+      <updated>1711193116101</updated>
+    </task>
+    <task id="LOCAL-00091" summary="Add OverridableMeta component">
+      <option name="closed" value="true" />
+      <created>1711210030592</created>
+      <option name="number" value="00091" />
+      <option name="presentableId" value="LOCAL-00091" />
+      <option name="project" value="LOCAL" />
+      <updated>1711210030593</updated>
+    </task>
+    <option name="localTasksCounter" value="92" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -671,8 +677,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Add custom toast" />
-    <MESSAGE value="Add simple text toast and toast queue" />
     <MESSAGE value="Enforce stricter typing for Toast components" />
     <MESSAGE value="Add dismissable toast" />
     <MESSAGE value="Adjust default toast body styling and add shadow to toast" />
@@ -696,6 +700,8 @@
     <MESSAGE value="Refactor GameSection out of SeaweedTemplate" />
     <MESSAGE value="Remove unnecessary imports and variables in SeaweedTemplate" />
     <MESSAGE value="Add page query param creator" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add page query param creator" />
+    <MESSAGE value="Hide advanced settings when letChaos is true" />
+    <MESSAGE value="Add OverridableMeta component" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add OverridableMeta component" />
   </component>
 </project>

package/.svelte-kit/__package__/components/overrideable_meta/OverridableMeta.svelte

@@ -0,0 +1,51 @@
+<!--
+OverridableMeta is convenient Svelte component allowing each page to override the head meta values
+based on their +page.ts.
+
+For example:
+<code>
+// +page.ts
+
+import type { OverridableMetaProps } from "../..";
+
+export const load = async (): Promise<OverridableMetaProps> => {
+	return {
+		title: "CustomTitle",
+	};
+};
+</code>
+-->
+
+<script>import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+export let rootUrl = "http://localhost:5173";
+export let title = "Welcome to my portfolio";
+export let ogTitle = "Turnip time!";
+export let ogDescription = "Welcome to Turnip's test portfolio";
+export let ogImage = WebThumbnailImage;
+import { page } from "$app/stores";
+const data = {
+  title: "Welcome to my portfolio",
+  ogUrl: "https://www.crouton.net/",
+  ogTitle: "Turnip time!",
+  ogDescription: "Welcome to Turnip's test portfolio",
+  ogImage: WebThumbnailImage
+};
+page.subscribe((p) => {
+  const pageData = p.data;
+  data.title = pageData.title ?? title;
+  data.ogUrl = `${rootUrl}${p.url.pathname}`;
+  data.ogTitle = pageData.ogTitle ?? ogTitle;
+  data.ogDescription = pageData.ogDescription ?? ogDescription;
+  data.ogImage = pageData.ogImage ?? ogImage;
+});
+</script>
+
+<svelte:head>
+	<meta charset="utf-8" />
+	<title>{data.title}</title>
+	<meta name="twitter:card" content="summary" />
+	<meta property="og:url" content={data.ogUrl} />
+	<meta property="og:title" content={data.ogTitle} />
+	<meta property="og:description" content={data.ogDescription} />
+	<meta property="og:image" content={data.ogImage} />
+</svelte:head>

package/.svelte-kit/__package__/components/overrideable_meta/OverridableMeta.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        rootUrl?: string | undefined;
+        title?: string | undefined;
+        ogTitle?: string | undefined;
+        ogDescription?: string | undefined;
+        ogImage?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type OverridableMetaProps_ = typeof __propDef.props;
+export { OverridableMetaProps_ as OverridableMetaProps };
+export type OverridableMetaEvents = typeof __propDef.events;
+export type OverridableMetaSlots = typeof __propDef.slots;
+export default class OverridableMeta extends SvelteComponent<OverridableMetaProps_, OverridableMetaEvents, OverridableMetaSlots> {
+}

package/.svelte-kit/__package__/components/overrideable_meta/OverridableMetaProps.d.ts

@@ -0,0 +1,7 @@
+export interface OverridableMetaProps {
+    title?: string;
+    ogUrl?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
+}

package/.svelte-kit/__package__/components/overrideable_meta/OverridableMetaProps.js

@@ -0,0 +1 @@
+export {};

package/.svelte-kit/__package__/components/overrideable_meta/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OverridableMeta } from "./OverridableMeta.svelte";
+export * from "./OverridableMetaProps";

package/.svelte-kit/__package__/components/overrideable_meta/index.js

@@ -0,0 +1,3 @@
+// noinspection JSUnusedGlobalSymbols
+export { default as OverridableMeta } from "./OverridableMeta.svelte";
+export * from "./OverridableMetaProps";

package/.svelte-kit/__package__/index.d.ts

@@ -2,6 +2,7 @@ export { default as PineappleLayoutBase } from "./components/pineapple/Pineapple
 export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
+export * from "./components/overrideable_meta/index.ts";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";

package/.svelte-kit/__package__/index.js

@@ -1,7 +1,9 @@
+// noinspection JSUnusedGlobalSymbols
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/Seaweed/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
+export * from "./components/overrideable_meta/index.ts";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";

package/.svelte-kit/__package__/template/Seaweed/GameSection.svelte

@@ -21,187 +21,187 @@ const chefWingsWarning = {
     }
   }
 };
-</script>
-
-<Card>
-	<div class="section-card title-card" slot="content">
-		<h1 class="text-center">Games</h1>
-	</div>
-</Card>
-
-<section class="games-section">
-
-	<Card>
-		<section class="game-card" slot="content">
-			<video playsinline autoplay muted loop preload="none">
-				video unavailable. original video contains pengi gameplay showing the dynamic dialog
-				layout and character animation.
-				<source src={HeaderPengi} type="video/mp4">
-			</video>
-
-			<section class="game-card-body">
-
-				<h1>Pengi</h1>
-
-				<blockquote>
-					Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
-					money...
-				</blockquote>
-
-				<p>
-					Pengi is a text-based adventure made in <span class="qt-unity">Unity</span>. I acted as the sole
-					programmer for the team. Most of the work revolves around UI and creating <a
-					href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
-					to use to create expressive stage directions in the script.
-				</p>
-
-				<section class="game-link-section">
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://github.com/GreenTea-M/ProjectPengi"
-					        on:click={()=> window.open("https://github.com/GreenTea-M/ProjectPengi")}>
-						<img alt="github icon" src={GithubIcon}>
-					</button>
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://turnipxenon.itch.io/pengi"
-					        on:click={()=> window.open("https://turnipxenon.itch.io/pengi")}>
-						<img alt="itch.io icon" src={ItchLogoHotLink}>
-					</button>
-				</section>
-			</section>
-		</section>
-	</Card>
-
-	<Card>
-		<section class="game-card" slot="content">
-			<!-- todo: move the image crop a bit lower -->
-			<video playsinline autoplay muted loop preload="none" id="hepcat-video">
-				<source src={HeaderHepCat} type="video/mp4">
-			</video>
-
-			<section class="game-card-body">
-
-				<h1>Hepcat</h1>
-
-				<blockquote>
-					"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
-				</blockquote>
-
-
-				<p>This is a course project made by a team of six for <a
-					href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
-					href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
-				</p>
-
-				<p>
-					Hep Cat is a rhythm game made in <a
-					href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank" class="qt-rpgmaker">
-					RPG Maker MV</a> with the help of additional custom-made <span class="qt-js">Javascript</span> plugins. I
-					wrote the rhythm game plugin's framework. For this plugin to work, I
-					had to write a <span class="qt-python">Python</span> script that parses osu! files into readable JSON
-					files.
-				</p>
-
-
-				<section class="game-link-section">
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
-					        on:click={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
-						<img alt="bitbucket icon" src={BitbucketIcon}>
-					</button>
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://just-a-phantom.itch.io/hep-cat"
-					        on:click={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
-						<img alt="itch.io icon" src={ItchLogoHotLink}>
-					</button>
-				</section>
-			</section>
-		</section>
-	</Card>
-
-	<Card>
-		<section class="game-card" slot="content">
-			<img src={HeaderChefWings} alt="todo" loading="lazy">
-			<section class="game-card-body">
-
-				<h1>Chef Wings</h1>
-				<p>
-					A “roguelite-lite” where you gather ingredients in a procedurally-generated dungeon and use
-					them to cook for customers and then critics!
-				</p>
-				<p>
-					I built and documented several of the game’s systems including the game state management
-					system that extends <span class="qt-unity">Unity’s</span> existing Monobehavior lifecycle with new events,
-					and the dialogue, event, and level systems that coordinate the game flow using the interactive
-					dialogue tool YarnSpinner
-				</p>
-
-				<section class="game-link-section">
-					<button type="button" class="game-button turnip-button"
-					        title="https://selk.io/birb-project/trunk/"
-					        on:click={()=>modalStore.trigger(chefWingsWarning)}>
-						<img alt="itch.io icon" src={LinkIcon}>
-						<span>selk.io/birb-project/trunk/</span>
-					</button>
-				</section>
-			</section>
-		</section>
-	</Card>
-	<Card>
-		<section class="game-card" slot="content">
-			<video playsinline autoplay muted loop preload="none">
-				<source src={HeaderSoulwork} type="video/mp4">
-			</video>
-			<section class="game-card-body">
-
-				<h1>Soulwork</h1>
-
-				<p>
-					Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
-					This project is a Time to Game Jam entry, restricting game development to be under 48
-					hours.
-				</p>
-				<p>
-					I helped make the level designing tools used by the designers to drag-and-drop objects
-					on the stage. I also helped program the unique physics-based gameplay mechanic. This was
-					was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
-				</p>
-
-
-				<section class="game-link-section">
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://github.com/Zeyu-Li/Clockwork"
-					        on:click={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
-						<img alt="github icon" src={GithubIcon}>
-					</button>
-					<button type="button" class="game-button turnip-button"
-					        role="link"
-					        title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
-					        on:click={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
-						<img alt="itch.io icon" src={ItchLogoHotLink}>
-					</button>
-				</section>
-			</section>
-		</section>
-	</Card>
-	<Card overrideStyle="align-self: flex-start;">
-		<section class="game-card itch-promo" slot="content">
-			<h1 class="mb-12 text-center">Check out my itch.io page for more games</h1>
-
-			<section class="game-link-section">
-				<button type="button" class="btn variant-filled-primary turnip-button"
-				        role="link"
-				        title="https://turnipxenon.itch.io/"
-				        on:click={() => window.open("https://turnipxenon.itch.io/")}>
-					<img src={ItchLogoHotLink} class="long-btn-image" alt="itch icon">
-					<span>TurnipXenon</span>
-				</button>
-			</section>
-
-		</section>
-	</Card>
-</section>
+</script>
+
+<Card>
+	<div class="section-card title-card" slot="content">
+		<h1 class="text-center">Games</h1>
+	</div>
+</Card>
+
+<section class="games-section">
+
+	<Card>
+		<section class="game-card" slot="content">
+			<video playsinline autoplay muted loop preload="none">
+				video unavailable. original video contains pengi gameplay showing the dynamic dialog
+				layout and character animation.
+				<source src={HeaderPengi} type="video/mp4">
+			</video>
+
+			<section class="game-card-body">
+
+				<h1>Pengi</h1>
+
+				<blockquote>
+					Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+					money...
+				</blockquote>
+
+				<p>
+					Pengi is a text-based adventure made in <span class="qt-unity">Unity</span>. I acted as the sole
+					programmer for the team. Most of the work revolves around UI and creating <a
+					href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
+					to use to create expressive stage directions in the script.
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/GreenTea-M/ProjectPengi"
+					        on:click={()=> window.open("https://github.com/GreenTea-M/ProjectPengi")}>
+						<img alt="github icon" src={GithubIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://turnipxenon.itch.io/pengi"
+					        on:click={()=> window.open("https://turnipxenon.itch.io/pengi")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
+			</section>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="game-card" slot="content">
+			<!-- todo: move the image crop a bit lower -->
+			<video playsinline autoplay muted loop preload="none" id="hepcat-video">
+				<source src={HeaderHepCat} type="video/mp4">
+			</video>
+
+			<section class="game-card-body">
+
+				<h1>Hepcat</h1>
+
+				<blockquote>
+					"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
+				</blockquote>
+
+
+				<p>This is a course project made by a team of six for <a
+					href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
+					href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
+				</p>
+
+				<p>
+					Hep Cat is a rhythm game made in <a
+					href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank" class="qt-rpgmaker">
+					RPG Maker MV</a> with the help of additional custom-made <span class="qt-js">Javascript</span> plugins. I
+					wrote the rhythm game plugin's framework. For this plugin to work, I
+					had to write a <span class="qt-python">Python</span> script that parses osu! files into readable JSON
+					files.
+				</p>
+
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
+					        on:click={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
+						<img alt="bitbucket icon" src={BitbucketIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://just-a-phantom.itch.io/hep-cat"
+					        on:click={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
+			</section>
+		</section>
+	</Card>
+
+	<Card>
+		<section class="game-card" slot="content">
+			<img src={HeaderChefWings} alt="todo" loading="lazy">
+			<section class="game-card-body">
+
+				<h1>Chef Wings</h1>
+				<p>
+					A “roguelite-lite” where you gather ingredients in a procedurally-generated dungeon and use
+					them to cook for customers and then critics!
+				</p>
+				<p>
+					I built and documented several of the game’s systems including the game state management
+					system that extends <span class="qt-unity">Unity’s</span> existing Monobehavior lifecycle with new events,
+					and the dialogue, event, and level systems that coordinate the game flow using the interactive
+					dialogue tool YarnSpinner
+				</p>
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        title="https://selk.io/birb-project/trunk/"
+					        on:click={()=>modalStore.trigger(chefWingsWarning)}>
+						<img alt="itch.io icon" src={LinkIcon}>
+						<span>selk.io/birb-project/trunk/</span>
+					</button>
+				</section>
+			</section>
+		</section>
+	</Card>
+	<Card>
+		<section class="game-card" slot="content">
+			<video playsinline autoplay muted loop preload="none">
+				<source src={HeaderSoulwork} type="video/mp4">
+			</video>
+			<section class="game-card-body">
+
+				<h1>Soulwork</h1>
+
+				<p>
+					Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
+					This project is a Time to Game Jam entry, restricting game development to be under 48
+					hours.
+				</p>
+				<p>
+					I helped make the level designing tools used by the designers to drag-and-drop objects
+					on the stage. I also helped program the unique physics-based gameplay mechanic. This was
+					was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
+				</p>
+
+
+				<section class="game-link-section">
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://github.com/Zeyu-Li/Clockwork"
+					        on:click={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
+						<img alt="github icon" src={GithubIcon}>
+					</button>
+					<button type="button" class="game-button turnip-button"
+					        role="link"
+					        title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
+					        on:click={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
+						<img alt="itch.io icon" src={ItchLogoHotLink}>
+					</button>
+				</section>
+			</section>
+		</section>
+	</Card>
+	<Card overrideStyle="align-self: flex-start;">
+		<section class="game-card itch-promo" slot="content">
+			<h1 class="mb-12 text-center">Check out my itch.io page for more games</h1>
+
+			<section class="game-link-section">
+				<button type="button" class="btn variant-filled-primary turnip-button"
+				        role="link"
+				        title="https://turnipxenon.itch.io/"
+				        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+					<img src={ItchLogoHotLink} class="long-btn-image" alt="itch icon">
+					<span>TurnipXenon</span>
+				</button>
+			</section>
+
+		</section>
+	</Card>
+</section>