@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.10

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

@@ -1,62 +1,62 @@
-<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/SeaweedLayout/ProjectComponentProps";
-	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
-	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
-	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
-	import { ItchLogoHotLink } from "../../../consts";
-
-	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>
+<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/SeaweedLayout/ProjectComponentProps";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
+	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
+	import { ItchLogoHotLink } from "../../../consts";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
+
+	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/Soulwork.svelte

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { ItchLogoHotLink } from "../../../consts";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Soulwork";
 	export { component, key };

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

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { default as TextChip } from "../../elements/text-chip/TextChip.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "This Webpage";
 	export { component, key };
@@ -16,14 +16,16 @@
 	<FourPartCard>
 
 		{#snippet headerCover()}
-			<video
-				playsinline autoplay muted loop preload="none"
-				class="game-video-cover"
-			>
-				<source src={ThisWebsiteFootage} type="video/mp4">
-				video unavailable. original video contains clips of this website being resized and light-dark mode being
-				toggled.
-			</video>
+			{#if !props.isPineapple}
+				<video
+					playsinline autoplay muted loop preload="none"
+					class="game-video-cover"
+				>
+					<source src={ThisWebsiteFootage} type="video/mp4">
+					video unavailable. original video contains clips of this website being resized and light-dark mode being
+					toggled.
+				</video>
+			{/if}
 		{/snippet}
 
 		{#snippet header()}

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { modals } from "svelte-modals";
 	import { m } from "../../../paraglide/messages";
+	import { localizeHref } from "../../../paraglide/runtime";
 
 	import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
 	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
 	import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
-	import { modals } from "svelte-modals";
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
-	import { localizeHref } from "../../../paraglide/runtime";
 	import { appState } from "./runes.svelte";
+	import { enableBackground } from "../../../store";
+	import DialogOverlay from "../../../components/dialog_overlay/DialogOverlay.svelte";
 
 	let {
 		children,
@@ -68,12 +70,14 @@
 {@render header('hidden shadow-none w-full')}
 {@render header('fixed z-15 w-[105vw]')}
 
-<RandomizedBackground enabled={true} />
+<RandomizedBackground enabled={$enableBackground} />
 
 <div class="default-page-container">
 	{@render children?.()}
 </div>
 
+<DialogOverlay></DialogOverlay>
+
 {#if footer}
 	{@render footer()}
 {:else }

package/dist/ui/templates/PinyaPageLayout/runes.svelte.d.ts

@@ -3,6 +3,9 @@ interface AppStore {
     title: string;
     lead?: Snippet;
     isLanguagePickerAvailable: boolean;
+    allowDialog?: boolean;
+    enableDialogOnByDefault?: boolean;
+    bgOpacity: number;
 }
 export declare const appState: AppStore;
 export {};

package/dist/ui/templates/PinyaPageLayout/runes.svelte.js

@@ -1,4 +1,5 @@
 export const appState = $state({
     title: '',
     isLanguagePickerAvailable: true,
+    bgOpacity: 1,
 });

package/dist/ui/{modules/seaweed → templates/SeaweedLayout}/ChumBucket.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type PageMeta } from "../../../components/navigation_component/index";
+	import { type PageMeta } from "../../modules/NavigationMenu/index";
 	import { onMount } from "svelte";
 	import Placeholder from "../../elements/Placeholder.svelte";
 

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte

@@ -1,89 +1,66 @@
-<script lang="ts">
-	import type { ProjectGroup, SnippetMeta } from "../index";
-	import { PinyaCard } from "../../elements/index";
-
-	let {
-		title,
-		entryList
-	}: ProjectGroup = $props();
-
-	const isSpecial = $derived(entryList.length % 3 === 1);
-
-	let normalUiList: SnippetMeta[] = $derived(isSpecial
-		? [...entryList.slice(0, -4)]
-		: [...entryList]);
-	let overflowUiList: SnippetMeta[] = $derived(isSpecial
-		? [...entryList.slice(-4)]
-		: []);
-
-
-	// <!--todo: implement in seaweedlayout #migration-->
-	let inputValue = $state("");
-	let styleStr = $state("");
-	$effect(() => {
-		const termList = inputValue.split(",");
-
-		const chipList: string[] = [];
-		termList.forEach((_, idx) => {
-			termList[idx] = `.qt-${termList[idx]}`;
-			chipList.push(`.text-chip${termList[idx]}`);
-		});
-		styleStr = `<style>
-			${termList.join(", ")} {
-				font-weight: bold
-			}
-
-			${chipList.join(", ")} {
-				background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
-				color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
-			}
-			</style>`;
-	});
-</script>
-
-<div class="mt-8 flex flex-col items-center">
-	<PinyaCard widthClass="w-full" className="mb-8">
-		<h2>{title}</h2>
-	</PinyaCard>
-	<div class="normal-project-container">
-		{#each normalUiList as ui (ui.key)}
-			{@render ui.component({})}
-		{/each}
-	</div>
-	<div class="overflow-project-container">
-		{#each overflowUiList as ui (ui.key)}
-			{@render ui.component({})}
-		{/each}
-	</div>
-</div>
-
-<!--todo: implement in seaweedlayout #migration-->
-<!--{@html styleStr}-->
-
-<!-- Force tailwind to pickup some classes -->
-<div class="hidden rounded-2xl hover:brightness-110"></div>
-
-<style>
-    .normal-project-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        margin: auto;
-        /* 3 containers + 2 gaps + extra rem */
-        max-width: calc((28rem * 3) + 5rem);
-        justify-content: center;
-        margin-bottom: 2rem;
-        align-items: start;
-    }
-
-    .overflow-project-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        margin: auto;
-        /* 2 containers + 1 gap + extra rem */
-        max-width: calc((28rem * 2) + 3rem);
-        justify-content: center;
-        align-items: start;
-    }
+<script lang="ts">
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import { PinyaCard } from "../../elements/index";
+
+	let {
+		title,
+		entryList,
+		projectComponentProps,
+	}: ProjectGroup = $props();
+
+	const isSpecial = $derived(entryList.length % 3 === 1);
+
+	let normalUiList: SnippetMeta[] = $derived(isSpecial
+		? [...entryList.slice(0, -4)]
+		: [...entryList]);
+	let overflowUiList: SnippetMeta[] = $derived(isSpecial
+		? [...entryList.slice(-4)]
+		: []);
+</script>
+
+<div class="mt-8 flex flex-col items-center">
+	<PinyaCard widthClass="w-full" className="mb-8">
+		<h2>{title}</h2>
+	</PinyaCard>
+	<div class="normal-project-container">
+		{#each normalUiList as ui (ui.key)}
+			{@render ui.component(projectComponentProps ?? {})}
+		{/each}
+	</div>
+	<div class="overflow-project-container">
+		{#each overflowUiList as ui (ui.key)}
+			{@render ui.component(projectComponentProps ?? {})}
+		{/each}
+	</div>
+</div>
+
+<!--todo: implement in seaweedlayout #migration-->
+<!--{@html styleStr}-->
+
+<!-- Force tailwind to pickup some classes -->
+<div class="hidden rounded-2xl hover:brightness-110"></div>
+
+<style>
+    .normal-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 3 containers + 2 gaps + extra rem */
+        max-width: calc((28rem * 3) + 5rem);
+        justify-content: center;
+        margin-bottom: 2rem;
+        align-items: start;
+    }
+
+    .overflow-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 2 containers + 1 gap + extra rem */
+        max-width: calc((28rem * 2) + 3rem);
+        justify-content: center;
+        align-items: start;
+    }
 </style>

package/dist/ui/templates/SeaweedLayout/ProjectComponentProps.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
 export interface ProjectComponentProps {
+    isPineapple?: boolean;
 }
 export type ComponentSnippet = Snippet<[ProjectComponentProps]>;