@turnipxenon/pineapple 2.4.13 → 2.4.15

package/dist/components/dialog_manager/DialogManager.js

@@ -4,7 +4,7 @@
 import { writable } from "svelte/store";
 import { DialogState } from "../../types/pineapple_fiber/DialogState";
 import { tweened } from "svelte/motion";
-import { cubicOut } from "svelte/easing";
+import { backOut } from "svelte/easing";
 import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
 import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 import AresBlushing from "../../assets/characters/ares/ares_blushing.webp";
@@ -17,10 +17,11 @@ import AresSurprised from "../../assets/characters/ares/ares_surprised.webp";
 import AresYay from "../../assets/characters/ares/ares_yay.webp";
 import { defaultDialogMessage, dialogVariableStore, enableDialogueOverlay, updateRate } from "./DialogManagerStore";
 import { DialogProcessor } from "./DialogProcessor";
+import { parseYarn } from "../../scripts/pineapple_fiber/PineappleFiberParser";
 const shouldDebugYarn = false;
 export class DialogManager {
     dialogMessageMap = new Map();
-    dialogMessageList = [];
+    currentDialogTree = [];
     fullCurrentMessage = defaultDialogMessage[0].textContent;
     currentMessageMeta = defaultDialogMessage[0];
     currentMessage = writable("");
@@ -30,9 +31,10 @@ export class DialogManager {
     currentPortrait = writable();
     portraitMap = new Map();
     currentState = DialogState.Visible;
+    currentReadableState = writable(this.currentState);
     hidePercent = tweened(100, {
         duration: 400,
-        easing: cubicOut
+        easing: backOut
     }); // 100 = 100%
     skipNextActiveTime = 0;
     dialogProcessor = new DialogProcessor();
@@ -40,16 +42,23 @@ export class DialogManager {
     _setDialogChoiceQueue = [];
     _setDialogChoiceMutex = false;
     onSetDialogListeners = [];
+    enableDialogueOverlayCache = false;
     constructor() {
         enableDialogueOverlay.subscribe((value) => {
             // todo: investigate why we cant put setDialogDefault inside the then clause
             // ISSUE #82 https://github.com/TurnipXenon/pineapple/issues/82
+            this.enableDialogueOverlayCache = value;
             if (value) {
-                this.hidePercent.set(0);
-                this.setDialogToDefault();
+                this.hidePercent.set(0).then(() => {
+                    this.currentState = DialogState.Visible;
+                    this.currentReadableState.set(this.currentState);
+                });
             }
             else {
-                this.hidePercent.set(100);
+                this.hidePercent.set(100).then(() => {
+                    this.currentState = DialogState.Invisible;
+                    this.currentReadableState.set(this.currentState);
+                });
                 this.setDialogTree([{ textContent: "" }]);
             }
         });
@@ -78,12 +87,12 @@ export class DialogManager {
      * sets the possible dialog that might appear on the Dialog UI
      * note that it overwrites the previous tree and does not append on it due to the possibility
      * of node name conflicts
-     * @param newMessageList
+     * @param newDialogTree
      */
-    setDialogTree = (newMessageList) => {
-        this.dialogMessageList = newMessageList;
+    setDialogTree = (newDialogTree) => {
+        this.currentDialogTree = newDialogTree;
         this.dialogMessageMap.clear();
-        newMessageList.map((value) => {
+        newDialogTree.map((value) => {
             if (value.dialogId) {
                 this.dialogMessageMap.set(value.dialogId, value);
             }
@@ -100,7 +109,7 @@ export class DialogManager {
             this.portraitMap.set(PortraitType.AresSurprised.toString(), AresSurprised);
             this.portraitMap.set(PortraitType.AresYay.toString(), AresYay);
         }
-        this.setDialogChoice(newMessageList[0]);
+        this.setDialogChoice(newDialogTree[0]);
     };
     /**
      * Remember to call this before SetDialogTree
@@ -236,4 +245,19 @@ export class DialogManager {
         ++this.currentIndex;
         window.requestAnimationFrame(this.update);
     };
+    enableDialogOverlay(enable) {
+        enableDialogueOverlay.set(enable);
+    }
+    toggleDialogOverlay() {
+        enableDialogueOverlay.set(!this.enableDialogueOverlayCache);
+    }
+    ;
+    async parseAndSetDialogTree(dialogYarn) {
+        return parseYarn(dialogYarn)
+            .then((dialogTree) => {
+            console.log(dialogTree);
+            this.setDialogTree(dialogTree);
+            return dialogTree;
+        });
+    }
 }

package/dist/components/dialog_manager/DialogManagerStore.js

@@ -26,7 +26,7 @@ export const updateRate = 40 / 1000; // *at least* 40ms per letter
 // todo: if we go through doing yarn to typescript, move this!
 export const defaultDialogMessage = [
     {
-        textContent: `<p>Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
+        textContent: `<p>I don't really have anything to say. Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
     }
 ];
 /**

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -56,8 +56,8 @@ let shouldDisplaySocialIcons = writable(false);
 
 <style>
     :root {
-        --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-start-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
         --dialog-box-height: clamp(15em, 50vw, 18em);
     }
 

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

@@ -2,10 +2,12 @@
 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 CloseIcon from "../../assets/icons/close.svg";
+import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import Toast from "./toast/Toast.svelte";
+import DialogOverlay from "../DialogOverlay.svelte";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -40,6 +42,7 @@ let enableDialogueOverlayValue = true;
 enableDialogueOverlay.subscribe((value) => {
   enableDialogueOverlayValue = value;
 });
+enableDialogueOverlay.set(false);
 </script>
 
 <!-- App Shell -->
@@ -49,23 +52,30 @@ enableDialogueOverlay.subscribe((value) => {
 
 <!--todo: turn off hidden when it's time-->
 <button type="button" class="fab" on:click={()=>{
-    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+	dialogManager.toggleDialogOverlay()
 }}>
-	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{#if (enableDialogueOverlayValue)}
+		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+	{:else }
+		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{/if}
 </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}
@@ -80,31 +90,52 @@ 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>
+
+	<DialogOverlay></DialogOverlay>
+
+	<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>
     :root {
-        --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-start-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-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 {
@@ -112,7 +143,6 @@ enableDialogueOverlay.subscribe((value) => {
         align-items: center;
         justify-content: center;
         margin-top: 4em;
-        margin-left: clamp(1em, 15vw, 10em);
         margin-right: 1em;
         flex-direction: column;
         z-index: 0;
@@ -194,15 +224,21 @@ enableDialogueOverlay.subscribe((value) => {
 }
 
     .fab {
-		    position: fixed;
-		    bottom: 2em;
+        position: fixed;
+        bottom: var(--fab-margin);
+        width: 4em;
+        border-radius: 50%;
+    }
+
+    .fab > img {
+        width: 100%;
     }
 
     .fab:dir(ltr) {
-		    right: 2em;
+        right: var(--fab-margin);
     }
 
     .fab:dir(rtl) {
-		    left: 2em;
+        left: var(--fab-margin);
     }
 </style>

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";

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

@@ -0,0 +1,48 @@
+<script>import CloseIcon from "../../../assets/icons/close.svg";
+export let props;
+export let dismissToastCallback;
+export let shouldEnableButton = false;
+</script>
+
+<div class="body-container">
+	<!-- todo: support markdown? -->
+	<button class="btn"
+	        disabled={!shouldEnableButton}
+	        on:click={dismissToastCallback}>
+		<img class="img-icon" src={CloseIcon} alt="close button">
+	</button>
+	<div class="text-container">
+		<span>{props.message}</span>
+	</div>
+</div>
+
+<style>
+    .body-container {
+        display: flex;
+        gap: 1em;
+    }
+
+    .text-container {
+        margin-top: 0.25lh;
+        margin-right: 1em;
+    }
+
+    .text-container:dir(rtl) {
+        margin-left: 1em;
+    }
+
+    .btn {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .btn) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .btn {
+        border-radius: 8px;
+		    padding: 0.5em;
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "./DefaultToastBody";
+import type { DismissToastCallback } from "./Toast";
+declare const __propDef: {
+    props: {
+        props: Props;
+        dismissToastCallback: DismissToastCallback | undefined;
+        shouldEnableButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultToastBodyProps = typeof __propDef.props;
+export type DefaultToastBodyEvents = typeof __propDef.events;
+export type DefaultToastBodySlots = typeof __propDef.slots;
+export default class DefaultToastBody extends SvelteComponent<DefaultToastBodyProps, DefaultToastBodyEvents, DefaultToastBodySlots> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+import type { DefaultToastPair } from "./DefaultToastBody";
+import type { TestCustomToastPair } from "./custom-toast/TestCustomToast";
+/**
+ * Default toast duration is 5 seconds
+ */
+export declare const DefaultToastParamsDuration = 5000;
+export type CustomToastPairs = DefaultToastPair | TestCustomToastPair;
+export type DismissToastCallback = () => void;
+export interface ToastParams {
+    componentAndProps: CustomToastPairs;
+    /**
+     * Time in millisecond. If undefined, defaults to DefaultToastParamsDuration
+     */
+    duration?: number;
+}
+/**
+ * todo: do not call directly documentation
+ */
+export declare const activeToast: import("svelte/store").Writable<ToastParams | undefined>;
+export declare const toastQueue: ToastParams[];
+/**
+ *
+ * @param newToast
+ */
+export declare const showComponentInToast: (newToast: ToastParams) => void;
+export declare const showTextInToast: (message: string) => void;

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

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import DefaultToastBody from "./DefaultToastBody.svelte";
+/**
+ * Default toast duration is 5 seconds
+ */
+export const DefaultToastParamsDuration = 5000;
+/**
+ * todo: do not call directly documentation
+ */
+export const activeToast = writable();
+export const toastQueue = [];
+/**
+ *
+ * @param newToast
+ */
+export const showComponentInToast = (newToast) => {
+    // todo: queue component
+    activeToast.update((currentToast) => {
+        if (currentToast !== undefined) {
+            toastQueue.push(newToast);
+            return currentToast;
+        }
+        else {
+            return newToast;
+        }
+    });
+};
+export const showTextInToast = (message) => {
+    showComponentInToast({
+        componentAndProps: {
+            component: DefaultToastBody,
+            props: {
+                message
+            }
+        }
+    });
+};

package/dist/components/pineapple/toast/Toast.svelte

@@ -0,0 +1,90 @@
+<script>import {
+  activeToast,
+  DefaultToastParamsDuration,
+  toastQueue
+} from "./Toast";
+import {} from "svelte";
+import Card from "../../Card.svelte";
+import { spring, tweened } from "svelte/motion";
+let localComponent;
+let localProps;
+const HIDDEN_VALUE = -15;
+const SHOWN_VALUE = 0;
+const progress = tweened(0, { duration: DefaultToastParamsDuration });
+const position = spring(HIDDEN_VALUE);
+position.damping = 0.4;
+let isDismissed = false;
+let shouldEnableButton = false;
+const onToastDisappear = () => {
+  localComponent = void 0;
+  activeToast.update(() => {
+    if (toastQueue.length === 0) {
+      return void 0;
+    }
+    return toastQueue.shift();
+  });
+};
+activeToast.subscribe((params) => {
+  if (!params) {
+    return;
+  }
+  if (params.componentAndProps?.component === localComponent) {
+    return;
+  }
+  localComponent = params.componentAndProps.component;
+  localProps = params.componentAndProps.props;
+  progress.set(0, { duration: 0 }).then(() => {
+    position.set(SHOWN_VALUE).then(() => {
+      shouldEnableButton = true;
+      progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
+        shouldEnableButton = false;
+        if (isDismissed) {
+          return;
+        }
+        position.set(HIDDEN_VALUE).then(onToastDisappear);
+      });
+    });
+  });
+});
+const dismissToast = () => {
+  shouldEnableButton = false;
+  isDismissed = true;
+  position.set(HIDDEN_VALUE).then(onToastDisappear);
+};
+</script>
+
+{#if (localComponent !== undefined)}
+	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
+		<!-- todo: adjust shadow to be more dynamic or transparent -->
+		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+			<div slot="content">
+				{#if (localProps !== undefined)}
+					<svelte:component this={localComponent}
+					                  props={localProps}
+					                  dismissToastCallback={dismissToast}
+					                  shouldEnableButton={shouldEnableButton} />
+				{:else }
+					<svelte:component this={localComponent} />
+				{/if}
+				<progress id="toast-progress" value={$progress/100}></progress>
+			</div>
+		</Card>
+	</div>
+{/if}
+
+<style>
+    .toast-positioner {
+        position: fixed;
+        /* 12em = this component's margin (4em) + fab margin + width (8em) */
+        max-width: calc(100vw - 12em);
+		    z-index: 100;
+    }
+
+    .toast-positioner:dir(ltr) {
+        left: 2em;
+    }
+
+    .toast-positioner:dir(rtl) {
+        right: 2em;
+    }
+</style>

package/dist/components/pineapple/toast/Toast.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.d.ts

@@ -0,0 +1,5 @@
+import TestCustomToast from "./TestCustomToast.svelte";
+export interface TestCustomToastPair {
+    component: typeof TestCustomToast;
+    props: undefined;
+}

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.js

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

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte

@@ -0,0 +1 @@
+<h1>Testing bad custom card</h1>

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TestCustomToastProps */
+/** @typedef {typeof __propDef.events}  TestCustomToastEvents */
+/** @typedef {typeof __propDef.slots}  TestCustomToastSlots */
+export default class TestCustomToast extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TestCustomToastProps = typeof __propDef.props;
+export type TestCustomToastEvents = typeof __propDef.events;
+export type TestCustomToastSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

package/dist/scripts/pineapple_fiber/PineappleFiberParser.d.ts

@@ -0,0 +1,2 @@
+import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
+export declare const parseYarn: (fileContent: string) => Promise<DialogDetail[]>;