@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/dist/ui/elements/pinya-button/component.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { ColorScheme } from '..';
+	import { ButtonVariant, type PinyaButtonProps } from './props';
+
+	let {
+		children,
+		colorScheme = ColorScheme.Primary,
+		paddingClass = '',
+		buttonVariant = ButtonVariant.Default,
+		colorClass = '',
+		...props
+	}: PinyaButtonProps = $props();
+
+	paddingClass = paddingClass
+		? paddingClass
+		: (
+			buttonVariant === ButtonVariant.Image
+				? 'pl-3 pr-3 pt-2 pb-2'
+				: 'pl-3 pr-3'
+		);
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Custom:
+				return colorClass;
+			case ColorScheme.Warning:
+				return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
+			default:
+				console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<button
+	{...props}
+	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
+	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
+>
+	{@render children()}
+</button>

package/dist/ui/elements/pinya-button/component.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type PinyaButtonProps } from './props';
+declare const Component: import("svelte").Component<PinyaButtonProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/elements/pinya-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './component.svelte';
+export * from './props';

package/dist/ui/elements/pinya-button/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './component.svelte';
+export * from './props';

package/dist/ui/elements/pinya-button/props.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { GeneralUIProps } from '../GeneralUIProps';
+import type { WrapperProps } from '../WrapperProps';
+export declare enum ButtonVariant {
+    Default = 0,
+    Image = 1,
+    SmallIcon = 2
+}
+export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
+    paddingClass?: string;
+    buttonVariant?: ButtonVariant;
+    colorClass?: string;
+};

package/dist/ui/elements/pinya-button/props.js

@@ -0,0 +1,6 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
+    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
+    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
+})(ButtonVariant || (ButtonVariant = {}));

package/dist/ui/elements/pinya-card/component.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./props";
+
+let {
+	paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
+	flexClass = "flex flex-col",
+	widthClass = "max-w-md",
+	borderClass = "border-[2px] border-primary-500 dark:border-0",
+	marginClass = "",
+	className,
+	children
+}: PinyaCardProps = $props();
+</script>
+
+<div
+	class={`card bg-surface-200 dark:bg-surface-900 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
+>
+	{@render children?.()}
+</div>

package/dist/ui/elements/pinya-card/component.svelte.d.ts

@@ -0,0 +1,7 @@
+/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./props";
+declare const Component: import("svelte").Component<PinyaCardProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/ui/elements/pinya-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./component.svelte";
+export * from "./props";

package/dist/ui/elements/pinya-card/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./component.svelte";
+export * from "./props";

package/dist/ui/elements/pinya-card/props.d.ts

@@ -0,0 +1,10 @@
+import type { WrapperProps } from '..';
+export interface PinyaCardProps extends WrapperProps {
+    paddingClass?: string;
+    className?: string;
+    flexClass?: string;
+    widthClass?: string;
+    borderClass?: string;
+    marginClass?: string;
+    includeDataNoSnippet?: boolean;
+}

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends string">
+	import { Combobox } from '@skeletonlabs/skeleton-svelte';
+	import { getLocale, localizeHref } from '../../../paraglide/runtime';
+	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
+
+	let {
+		contentZIndex = 'auto',
+		value = $bindable(),
+		onValueChange = () => {},
+		onValueChangeBase = undefined,
+		...props
+	}: PinyaComboboxProps<T> = $props();
+
+	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
+		value = e.value as T[];
+		onValueChange(e);
+	};
+</script>
+
+<Combobox
+	width="w-full"
+	labelText="text-md"
+	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
+	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
+	inputGroupButton="size-[3rem]"
+	inputGroupArrow="size-[2rem] m-auto"
+	contentBackground="bg-surface-100-900 border-primary-500 border-2"
+	zIndex={contentZIndex}
+	optionActive="bg-secondary-400-600"
+	optionHover="hover:brightness-75 dark:hover:brightness-125"
+	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
+	{value}
+	{...props}
+/>

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { PinyaComboboxProps } from "./PinyaComboboxProps";
+declare class __sveltets_Render<T extends string> {
+    props(): PinyaComboboxProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PinyaCombobox: $$IsomorphicComponent;
+type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
+export default PinyaCombobox;

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts

@@ -0,0 +1,18 @@
+export interface GenericComboboxItem<T extends string> {
+    label: string;
+    value: T;
+}
+export interface ValueChangeDetails<T extends string> {
+    value: string[];
+    items: T[];
+}
+export interface PinyaComboboxProps<T extends string> {
+    data: GenericComboboxItem<T>[];
+    defaultValue: T[];
+    value: T[];
+    label: string;
+    placeholder: string;
+    onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
+    onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
+    contentZIndex?: string;
+}

package/dist/ui/elements/text-chip/TextChip.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { TextChipProps } from "./TextChipProps";
+
+	let { children, queryClass = "" }: TextChipProps = $props();
+</script>
+
+<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
+
+<style>
+    /*noinspection CssUnusedSymbol*/
+    :global(.highlight-chip.text-chip) {
+        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+    }
+</style>

package/dist/ui/elements/text-chip/TextChip.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TextChipProps } from "./TextChipProps";
+declare const TextChip: import("svelte").Component<TextChipProps, {}, "">;
+type TextChip = ReturnType<typeof TextChip>;
+export default TextChip;

package/dist/ui/elements/text-chip/TextChipProps.d.ts

@@ -0,0 +1,4 @@
+import type { WrapperProps } from "../index";
+export interface TextChipProps extends WrapperProps {
+    queryClass?: string;
+}

package/dist/ui/elements/text-chip/index.d.ts

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

package/dist/ui/elements/text-chip/index.js

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

package/dist/ui/modules/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./seaweed";
+export * from "./projects";

package/dist/ui/modules/index.js

@@ -0,0 +1,2 @@
+export * from "./seaweed";
+export * from "./projects";

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { ModalProps } from 'svelte-modals';
+	import { setMode, userPrefersMode } from 'mode-watcher';
+
+	import { m } from '../../../../paraglide/messages';
+	import ModalBase from '../../../components/ModalBase.svelte';
+	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
+	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
+	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
+	import LanguagePicker from './LanguagePicker.svelte';
+
+	let props: ModalProps = $props();
+
+
+	interface ToggleItem {
+		key: 'light' | 'dark' | 'system'
+		imageSrc: string,
+		label: string,
+	}
+
+	const modes: ToggleItem[] = [
+		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
+		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
+		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
+	];
+
+	let selectedItem: ToggleItem = $state(modes[0]);
+
+	// when mode is edited outside, adjust toggle button
+	// do not use runes here because we only want explicit changes outside
+	// our control here!
+	userPrefersMode.subscribe((value) => {
+		const si = modes.find(m => m.key === value);
+		if (selectedItem !== si && si) {
+			selectedItem = si;
+		}
+	});
+
+	// when mode is changed inside the button, adjust the mode
+	$effect(() => {
+		switch (selectedItem?.key) {
+			case 'dark':
+				setMode('dark');
+				break;
+			case 'light':
+				setMode('light');
+				break;
+			case 'system':
+				setMode('system');
+				break;
+			default:
+				break;
+		}
+	});
+</script>
+
+<ModalBase {...props}>
+	<div class="wrapper">
+		<h2>{m.settings()}</h2>
+
+		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
+			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
+			{#each modes as mode (mode)}
+				<button
+					type="button"
+					title={mode.label}
+					class={`btn pt-3 pb-3 hover:brightness-125
+				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
+				`}
+					onclick={() => { setMode(mode.key) }}
+				>
+					<img
+						src={mode.imageSrc}
+						aria-hidden="true"
+						alt=""
+						class={`icon
+					${mode.key === selectedItem.key ? 'reverse' : ''}
+					`}
+					>
+					{mode.label}
+				</button>
+			{/each}
+		</fieldset>
+
+		<LanguagePicker />
+
+		<div class="actions">
+			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
+							title="Close modal">
+				Close
+			</button>
+		</div>
+	</div>
+</ModalBase>
+
+<style>
+    .actions {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1.4lh;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        text-align: start;
+        gap: 1lh;
+    }
+</style>

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalProps } from 'svelte-modals';
+declare const GeneralSettingsModal: import("svelte").Component<ModalProps<any>, {}, "">;
+type GeneralSettingsModal = ReturnType<typeof GeneralSettingsModal>;
+export default GeneralSettingsModal;

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getLocale, localizeHref } from "../../../../paraglide/runtime";
+	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
+
+	interface ComboxData {
+		label: string;
+		value: "en" | "fr" | "tl";
+	}
+
+	const comboboxData: ComboxData[] = [
+		{ label: "English", value: "en" },
+		{ label: "French", value: "fr" },
+		{ label: "Tagalog", value: "tl" }
+	];
+
+	let selectedCountry = $state([getLocale()]);
+
+	interface ValueDetail {
+		value: string[];
+	}
+
+	const onValueChange = (e: ValueDetail) => {
+		const data = comboboxData.find((d) => d.value === e.value[0]);
+		if (data) {
+			selectedCountry = [data.value];
+			location.href = localizeHref("./", { locale: data.value });
+		}
+	};
+</script>
+
+<PinyaCombobox
+	data={comboboxData}
+	value={selectedCountry}
+	defaultValue={selectedCountry}
+	label="Select Language"
+	placeholder="Select Language"
+	{onValueChange}
+/>

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LanguagePicker: import("svelte").Component<Record<string, never>, {}, "">;
+type LanguagePicker = ReturnType<typeof LanguagePicker>;
+export default LanguagePicker;

package/dist/ui/modules/projects/Hepcat.svelte

@@ -0,0 +1,71 @@
+<script module lang="ts">
+	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
+	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
+	import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
+	import { FourPartCard } from "../../components/index.js";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Hepcat";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video playsinline autoplay muted loop preload="none" id="hepcat-video" class="game-video-cover">
+				<source src={HeaderHepCat} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Hepcat</h3>
+
+			<blockquote>
+				"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
+			</blockquote>
+		{/snippet}
+
+
+		<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 <span class="qt-rhythm">rhythm</span> 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">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
+				onclick={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
+				<ImageIcon alt="bitbucket icon" src={BitbucketIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://just-a-phantom.itch.io/hep-cat"
+				onclick={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
+				<ImageIcon alt="itch.io icon" src={ItchLogoHotLink}></ImageIcon>
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}
+
+
+<style>
+    #hepcat-video {
+        object-position: top;
+        max-height: 64rem;
+    }
+</style>

package/dist/ui/modules/projects/Hepcat.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
+declare const key = "Hepcat";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Hepcat: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Hepcat = InstanceType<typeof Hepcat>;
+export default Hepcat;

package/dist/ui/modules/projects/Pengi.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import type { ProjectComponentProps } from "../../templates/index";
+	import { FourPartCard } from "../../components/index.js";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Pengi";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video class="rounded-t-xl max-h-64 not-prose object-cover w-full" 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>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Pengi</h3>
+
+			<blockquote>
+				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+				money...
+			</blockquote>
+		{/snippet}
+
+		<p>
+			Pengi is a text-based adventure made in <span class='qt-unity'>Unity</span> (<span class='qt-cs'>C#</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">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Github"
+				title="https://github.com/GreenTea-M/ProjectPengi"
+				onclick={() => window.open("https://github.com/GreenTea-M/ProjectPengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={GithubIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Itch.io"
+				title="https://turnipxenon.itch.io/pengi"
+				onclick={() => window.open("https://turnipxenon.itch.io/pengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={ItchLogoHotLink} />
+			</PinyaButton>
+		</section>
+
+	</FourPartCard>
+{/snippet}

package/dist/ui/modules/projects/Pengi.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/index";
+declare const key = "Pengi";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pengi: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pengi = InstanceType<typeof Pengi>;
+export default Pengi;

package/dist/ui/modules/projects/Soulwork.svelte

@@ -0,0 +1,55 @@
+<script module lang="ts">
+	import HeaderSoulwork from '../../../assets/temp/header-soulwork.mp4';
+	import GithubIcon from '../../../assets/icons/github-mark.svg';
+	import type { ProjectComponentProps } from "../../templates/index";
+	import { FourPartCard } from "../../components/index";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Soulwork";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video
+				playsinline autoplay muted loop preload="none"
+				class="game-video-cover"
+			>
+				<source src={HeaderSoulwork} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h1>Soulwork</h1>
+		{/snippet}
+
+		<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">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://github.com/Zeyu-Li/Clockwork"
+				onclick={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
+				<ImageIcon alt="github icon" src={GithubIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
+				onclick={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
+				<ImageIcon alt="itch.io icon" src={ItchLogoHotLink} />
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}