@turnipxenon/pineapple 2.4.12 → 2.4.14

package/dist/components/CarouselElement.svelte

@@ -1,21 +1,21 @@
 <script>export let activeGameIndex;
 export let selfIndex;
 import { fly, slide, scale } from "svelte/transition";
-</script>
-
-{#if (activeGameIndex === selfIndex)}
-	<!--todo: make section consistent size for all-->
-	<section class="game-showcase"
-	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		<slot/>
-	</section>
-{/if}
-
-<style>
-    .game-showcase {
-        scroll-snap-align: center;
-        border-radius: var(--theme-rounded-container);
-        margin: auto;
+</script>
+
+{#if (activeGameIndex === selfIndex)}
+	<!--todo: make section consistent size for all-->
+	<section class="game-showcase"
+	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
+		<slot/>
+	</section>
+{/if}
+
+<style>
+    .game-showcase {
+        scroll-snap-align: center;
+        border-radius: var(--theme-rounded-container);
+        margin: auto;
         width: 100%
-}
+}
 </style>

package/dist/components/Chip.svelte

@@ -1,12 +1,13 @@
-<span class="chip variant-filled-tertiary">
-<slot />
-</span>
-
-<style>
-    .chip {
-        border-radius: 1em;
-        margin: 0.25em;
-        font-weight: bold;
-        pointer-events: none;
-    }
-</style>
+<span class="chip variant-filled-tertiary">
+<slot />
+</span>
+
+<style>
+    .chip {
+        border-radius: 1em;
+        margin: 0.25em;
+        font-weight: bold;
+        pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+    }
+</style>

package/dist/components/ElementVisbilityDetector.svelte

@@ -11,8 +11,8 @@ onMount(() => {
   );
   observer.observe(stickyElem);
 });
-</script>
-
-<span bind:this={stickyElem}>
-	<slot/>
-</span>
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>

package/dist/components/SocialSection.svelte

@@ -1,160 +1,163 @@
-<script>
-	import MailIcon from "../assets/icons/mail.svg";
-	import GithubIcon from "../assets/icons/github-mark.svg";
-	import { ItchLogoHotLink } from "../consts";
-	import LinkedinIcon from "../assets/icons/linkedin.svg";
-	import { onMount } from "svelte";
-
-	export let isSmallVersion = false;
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let isSlot = false;
-
-	let shouldShowExtra = false;
-	const style = `
-		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
-		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
-	`;
-
-	onMount(() => {
-		shouldShowExtra = window.screen.availWidth >= 440;
-	});
-</script>
-
-<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title="https://github.com/TurnipXenon"
-	        on:click={() => window.open("https://github.com/TurnipXenon")}>
-		<img src={GithubIcon} alt="github icon">
-		{#if (!isSmallVersion)}
-			<span>TurnipXenon</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-		<img src={LinkedinIcon} alt="linkedikn icon">
-		{#if (!isSmallVersion)}
-			<span>{linkedinSlug}</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`mailto:${email}`}
-	        on:click={() => window.open(`mailto:${email}`)}>
-		<img src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</button>
-	{#if (shouldShowExtra)}
-		<button type="button" class="social-button turnip-button"
-		        role="link"
-		        title="https://turnipxenon.itch.io/"
-		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
-			<img src={ItchLogoHotLink} alt="itch icon">
-			{#if (!isSmallVersion)}
-				<span>TurnipXenon</span>
-			{/if}
-		</button>
-	{/if}
-</div>
-
-<style>
-    :is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-.social-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-.social-button:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.social-button {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-.social-button > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.social-button:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-:is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-    button > img {
-        max-height: 1lh;
-    }
-
-    button {
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .socials {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--preferred-justify-content);
-    }
-
-    .socials > button {
-        margin: 0 0.5em var(--preferred-overall-margin-bottom);
-    }
-
-    .socials.isSmall > button {
-        margin-left: 0.25em;
-        margin-right: 0.25em;
-    }
+<script>
+	export let isSmallVersion = false;
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let isSlot = false;
+
+	import { ItchLogoHotLink } from "../consts";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "../assets/icons/mail.svg";
+	import GithubIcon from "../assets/icons/github-mark.svg";
+	import LinkedinIcon from "../assets/icons/linkedin.svg";
+
+	let shouldShowExtra = false;
+	const style = `
+		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
+		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
+	`;
+
+	onMount(() => {
+		shouldShowExtra = window.screen.availWidth >= 440;
+	});
+</script>
+
+<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title="https://github.com/TurnipXenon"
+	        on:click={() => window.open("https://github.com/TurnipXenon")}>
+		<img src={GithubIcon} alt="github icon">
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+		<img src={LinkedinIcon} alt="linkedikn icon">
+		{#if (!isSmallVersion)}
+			<span>{linkedinSlug}</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`mailto:${email}`}
+	        on:click={() => window.open(`mailto:${email}`)}>
+		<img src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</button>
+	{#if (shouldShowExtra)}
+		<button type="button" class="social-button turnip-button"
+		        role="link"
+		        title="https://turnipxenon.itch.io/"
+		        transition:scale
+		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+			<img src={ItchLogoHotLink} alt="itch icon">
+			{#if (!isSmallVersion)}
+				<span>TurnipXenon</span>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+    :is(.dark .social-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+.social-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+.social-button:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.social-button {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+.social-button > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.social-button:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+:is(.dark .social-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+    button > img {
+        max-height: 1lh;
+    }
+
+    button {
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+    }
+
+    .socials > button {
+        margin: 0 0.5em var(--preferred-overall-margin-bottom);
+    }
+
+    .socials.isSmall > button {
+        margin-left: 0.25em;
+        margin-right: 0.25em;
+    }
 </style>

package/dist/components/StickyElement.svelte

@@ -13,24 +13,24 @@ onMount(() => {
   );
   observer.observe(stickyElem);
 });
-</script>
-
-<span transition:fly={{y: -100}}>
-{#if (isFirst && !isSticky)}
-	<!-- intentionally empty -->
-{:else if (isSticky)}
-	{" | "}
-{:else }
-	<br>
-{/if}
-	<span class="sticky-div" bind:this={stickyElem}>
-		<slot/>
-	</span>
-</span>
-
-<style>
-    .sticky-div {
-        position: sticky;
-        top: -1px;
-    }
+</script>
+
+<span transition:fly={{y: -100}}>
+{#if (isFirst && !isSticky)}
+	<!-- intentionally empty -->
+{:else if (isSticky)}
+	{" | "}
+{:else }
+	<br>
+{/if}
+	<span class="sticky-div" bind:this={stickyElem}>
+		<slot/>
+	</span>
+</span>
+
+<style>
+    .sticky-div {
+        position: sticky;
+        top: -1px;
+    }
 </style>

package/dist/components/ToggleableContent.svelte

@@ -55,12 +55,12 @@ onMount(() => {
 });
 $:
   attachGibberish(gibberishParent);
-</script>
-
-{#if toggle === ToggleableContentType.Default}
-	<slot />
-{:else if (ToggleableContentType.Gibberish === toggle)}
-	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
-		<slot />
-	</div>
+</script>
+
+{#if toggle === ToggleableContentType.Default}
+	<slot />
+{:else if (ToggleableContentType.Gibberish === toggle)}
+	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
+		<slot />
+	</div>
 {/if}

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -18,13 +18,6 @@ let shouldDisplaySocialIcons = writable(false);
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
-<!--todo: turn off hidden when it's time-->
-<!--<button type="button" class="fab" on:click={()=>{-->
-<!--    enableDialogueOverlay.set(!enableDialogueOverlayValue);-->
-<!--}}>-->
-<!--	<img src={FABIcon} alt="interactive floating action button represented as a turnip">-->
-<!--</button>-->
-
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
@@ -39,7 +32,7 @@ let shouldDisplaySocialIcons = writable(false);
 					</div>
 				{:else if $$slots.extraLeadingIcons}
 					<div hidden>
-						<slot name="extraLeadingIcons" />
+						<slot name="s" />
 					</div>
 				{/if}
 			</svelte:fragment>

package/dist/components/layouts/SeaweedBaseLayout.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
     };
     slots: {
         extraLeadingIcons: {};
+        s: {};
         default: {
             shouldDisplaySocialIcons: import("svelte/store").Writable<boolean>;
         };

package/dist/components/{layouts → pineapple}/PineappleBaseLayout.svelte

@@ -2,9 +2,10 @@
 import RandomizedBackground from "../RandomizedBackground.svelte";
 import { page } from "$app/stores";
 import { enableBackground } from "../../store";
-import DialogOverlay from "../DialogOverlay.svelte";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
+import FABIcon from "../../assets/placeholder/placeholder_circle.png";
 import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import Toast from "./toast/Toast.svelte";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -46,18 +47,28 @@ enableDialogueOverlay.subscribe((value) => {
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
+<!--todo: turn off hidden when it's time-->
+<button type="button" class="fab" on:click={()=>{
+    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+}}>
+	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+</button>
+
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
-		<AppBar slotDefault="place-content-start" slotTrail="place-content-end">
+		<AppBar
+			background="app-shell-token"
+			slotDefault="place-content-start"
+			slotTrail="place-content-end">
 			<svelte:fragment slot="lead">
 				<!--TODO: add logo or something for the lead in layout-->
 				<img
-						alt="Ares's head titled towards the left with his tongue out and winking"
-						class="ares-logo"
-						src={AresLogo}
+					alt="Ares's head titled towards the left with his tongue out and winking"
+					class="ares-logo"
+					src={AresLogo}
 				/>
-				<span class="mr-2"/>
+				<span class="mr-2" />
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
@@ -72,24 +83,30 @@ enableDialogueOverlay.subscribe((value) => {
 				</ol>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400"/>
+				<LightSwitch bgLight="bg-surface-400" />
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
 
-	<RandomizedBackground enable={enableBackgroundValue}/>
-
-	{#if enableDialogueOverlayValue}
-		<!-- Page Route Content -->
-		<div class="default-page-container">
-			<slot/>
-			<div class="footer-space"/>
-		</div>
-		<DialogOverlay/>
-	{:else}
-		<DialogOverlay/>
-		<slot/>
-	{/if}
+	<RandomizedBackground enable={enableBackgroundValue} />
+
+	<Toast></Toast>
+
+	<div class="default-page-container">
+		<slot />
+		<div class="footer-space" />
+	</div>
+	<!--{#if enableDialogueOverlayValue}-->
+	<!--	&lt;!&ndash; Page Route Content &ndash;&gt;-->
+	<!--	<div class="default-page-container">-->
+	<!--		<slot />-->
+	<!--		<div class="footer-space" />-->
+	<!--	</div>-->
+	<!--	<DialogOverlay />-->
+	<!--{:else}-->
+	<!--	<DialogOverlay />-->
+	<!--	<slot />-->
+	<!--{/if}-->
 </AppShell>
 
 <style>
@@ -97,6 +114,19 @@ enableDialogueOverlay.subscribe((value) => {
         --dialog-left-pad: clamp(0em, 5vw, 2em);
         --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
         --dialog-box-height: clamp(15em, 50vw, 18em);
+
+        /** FAB icon margin/position calculation origin:
+						Criteria:
+						- We want at mobile (360px) our margin to be at 1em (16px)
+						- We want at web (1960px) our margin to be at 2em (32px)
+
+						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
+						At 360px: margin is at 16px or 1em.
+						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
+						The calculation implies that the natural point that the margin becomes 2em is clamped on
+						wider screens is at 727px.
+				*/
+        --fab-margin: clamp(1em, 4.44vw, 2em);
     }
 
     .default-page-container {
@@ -184,4 +214,19 @@ enableDialogueOverlay.subscribe((value) => {
     .breadcrumb li:nth-last-child(1) {
         display: block;
 }
+
+    .fab {
+        position: fixed;
+        bottom: var(--fab-margin);
+        width: 4em;
+        border-radius: 50%;
+    }
+
+    .fab:dir(ltr) {
+        right: var(--fab-margin);
+    }
+
+    .fab:dir(rtl) {
+        left: var(--fab-margin);
+    }
 </style>

package/dist/components/pineapple/overlay_manager/OverlayManager.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/pineapple/toast/DefaultToastBody.d.ts

@@ -0,0 +1,8 @@
+import DefaultToastBody from "./DefaultToastBody.svelte";
+export interface Props {
+    message: string;
+}
+export interface DefaultToastPair {
+    component: typeof DefaultToastBody;
+    props: Props;
+}

package/dist/components/pineapple/toast/DefaultToastBody.js

@@ -0,0 +1 @@
+import DefaultToastBody from "./DefaultToastBody.svelte";