@turnipxenon/pineapple 2.4.14 → 2.4.15

package/.svelte-kit/__package__/scripts/pineapple_fiber/PineappleFiberParser.js

@@ -0,0 +1,137 @@
+import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
+const shouldDebug = false;
+export const parseYarn = async (fileContent) => {
+    const dialogDetailList = [];
+    fileContent.split("===").map((unparsedNode) => {
+        // todo: detect empty nodes
+        // todo: improve the code readability
+        if (unparsedNode.trim() === "") {
+            return;
+        }
+        const dialogDetails = {
+            // todo: dissect the line below and give comments because it is complex
+            dialogId: unparsedNode
+                .slice(unparsedNode.indexOf("title: "))
+                .split("\n")[0]
+                .split(" ")
+                .pop()
+                ?.trim(),
+            portraitType: PortraitType.AresNeutral,
+            textContent: "" // will be filled later below
+        };
+        let portraitUnset = true;
+        // parse the PineappleFiber metatags
+        const unparsedBody = unparsedNode.split("---").pop().trim();
+        const bodyList = unparsedBody.split("\n");
+        let contentIndexStart = 0;
+        for (let index = 0; index < bodyList.length; index++) {
+            const possibleTagPair = bodyList[index].split(": ");
+            const possibleTagName = possibleTagPair[0].toLowerCase();
+            if (!["portrait"].includes(possibleTagName)) {
+                break;
+            }
+            contentIndexStart = index + 1; // increase count for each viable tah
+            switch (possibleTagName) {
+                case "portrait":
+                    portraitUnset = false;
+                    // todo: implement a way to match the appropriate portrait based on the metatag
+                    // from https://stackoverflow.com/a/17381004/17836168
+                    dialogDetails.portraitType =
+                        PortraitType[possibleTagPair[1].trim()];
+                    if (shouldDebug) {
+                        console.log("Portrait detected:", possibleTagPair[1], " => ", dialogDetails.portraitType);
+                    }
+                    break;
+            }
+        }
+        // portrait check
+        if (portraitUnset) {
+            console.warn(`Portrait missing for node: ${dialogDetails.dialogId}`);
+            dialogDetails.portraitType = PortraitType.AresNeutral;
+        }
+        // remove the metatags from the body
+        const unprocessedContent = bodyList.slice(contentIndexStart).join("\n");
+        const contentPair = unprocessedContent.split("<ChoiceBreak>");
+        if (contentPair.length === 2) {
+            // parse for the choice names in the options
+            let ChoiceParsingState;
+            (function (ChoiceParsingState) {
+                ChoiceParsingState[ChoiceParsingState["Free"] = 0] = "Free";
+                ChoiceParsingState[ChoiceParsingState["Line"] = 1] = "Line"; // previously detected an option, will try to detect for the next option
+            })(ChoiceParsingState || (ChoiceParsingState = {}));
+            let parsingState = ChoiceParsingState.Free;
+            const currentChoiceDetail = { jumpNode: "", name: "" };
+            const choiceList = [];
+            let shouldSkipChoices = false;
+            const checkChoiceForSave = () => {
+                if (currentChoiceDetail.name !== "") {
+                    choiceList.push({
+                        name: currentChoiceDetail.name,
+                        jumpNode: currentChoiceDetail.jumpNode
+                    });
+                }
+            };
+            contentPair[1]
+                .trim()
+                .split("\n")
+                .filter((line) => {
+                const trimmedLine = line.trim();
+                if (shouldSkipChoices) {
+                    return false;
+                }
+                if (trimmedLine.startsWith("// ignore the rest")) {
+                    shouldSkipChoices = true;
+                    return false;
+                }
+                return true;
+            })
+                .map((line) => {
+                const trimmedLine = line.trim();
+                switch (parsingState) {
+                    case ChoiceParsingState.Free:
+                        if (trimmedLine.startsWith("->")) {
+                            // save previous choice
+                            checkChoiceForSave();
+                            // write start of new choice
+                            currentChoiceDetail.name = trimmedLine.split(" ").pop();
+                            parsingState = ChoiceParsingState.Line;
+                        }
+                        break;
+                    case ChoiceParsingState.Line:
+                        if (trimmedLine.startsWith("<<jump")) {
+                            const jumpNode = trimmedLine.split(" ").pop();
+                            currentChoiceDetail.jumpNode = jumpNode.slice(0, jumpNode.length - 2); // remove ">>"
+                            parsingState = ChoiceParsingState.Free;
+                        }
+                        break;
+                    default:
+                        console.error(`Unimplemented parsing state: ${parsingState}`);
+                        break;
+                }
+            });
+            checkChoiceForSave();
+            dialogDetails.textContent = contentPair[0];
+            // handle choice start tags to a href
+            choiceList.forEach((choiceDetail) => {
+                const keyword = `<choice ${choiceDetail.name}>`;
+                while (dialogDetails.textContent.includes(keyword)) {
+                    dialogDetails.textContent = dialogDetails.textContent.replace(keyword, `<a class="choice-${choiceDetail.jumpNode} dialog-choice" title="Click to continue the dialog">`);
+                }
+            });
+            const externalKeyword = "<a href=";
+            while (dialogDetails.textContent.includes(externalKeyword)) {
+                dialogDetails.textContent = dialogDetails.textContent.replace(externalKeyword, "<a target=\"_blank\" class=\"external-link\" href="); // make all external tags with a custom cursor
+            }
+            const choiceEndKeyword = "</choice>";
+            while (dialogDetails.textContent.includes(choiceEndKeyword)) {
+                dialogDetails.textContent = dialogDetails.textContent.replace(choiceEndKeyword, "</a>"); // convert all choice end tags to a tags
+            }
+        }
+        else {
+            // assume only one which indicates it is choiceless
+            dialogDetails.textContent = unprocessedContent;
+        }
+        dialogDetailList.push(dialogDetails);
+    });
+    return dialogDetailList;
+};

package/.svelte-kit/__package__/scripts/pineapple_fiber/PineappleWeaver.js

@@ -9,147 +9,16 @@
 import { getAllFiles } from "../util/FileManagement";
 import fs, { readFileSync } from "fs";
 import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
-const shouldDebug = false;
+import { parseYarn } from "./PineappleFiberParser";
 const pineappleWeaverRun = () => {
     console.info("Starting Pineapple Weaver.");
     const BASE_PATH = "./src/routes";
     getAllFiles(BASE_PATH, (path) => {
         return path.split(".").pop() === "yarn";
-    }).map((filePath) => {
+    }).map(async (filePath) => {
         console.info(`Converting: ${filePath}`);
         const fileContent = readFileSync(filePath, "utf-8");
-        const dialogDetailList = [];
-        fileContent.split("===").map((unparsedNode) => {
-            // todo: detect empty nodes
-            // todo: improve the code readability
-            if (unparsedNode.trim() === "") {
-                return;
-            }
-            const dialogDetails = {
-                // todo: dissect the line below and give comments because it is complex
-                dialogId: unparsedNode
-                    .slice(unparsedNode.indexOf("title: "))
-                    .split("\n")[0]
-                    .split(" ")
-                    .pop()
-                    ?.trim(),
-                portraitType: PortraitType.AresNeutral,
-                textContent: "" // will be filled later below
-            };
-            let portraitUnset = true;
-            // parse the PineappleFiber metatags
-            const unparsedBody = unparsedNode.split("---").pop().trim();
-            const bodyList = unparsedBody.split("\n");
-            let contentIndexStart = 0;
-            for (let index = 0; index < bodyList.length; index++) {
-                const possibleTagPair = bodyList[index].split(": ");
-                const possibleTagName = possibleTagPair[0].toLowerCase();
-                if (!["portrait"].includes(possibleTagName)) {
-                    break;
-                }
-                contentIndexStart = index + 1; // increase count for each viable tah
-                switch (possibleTagName) {
-                    case "portrait":
-                        portraitUnset = false;
-                        // todo: implement a way to match the appropriate portrait based on the metatag
-                        // from https://stackoverflow.com/a/17381004/17836168
-                        dialogDetails.portraitType =
-                            PortraitType[possibleTagPair[1].trim()];
-                        if (shouldDebug) {
-                            console.log("Portrait detected:", possibleTagPair[1], " => ", dialogDetails.portraitType);
-                        }
-                        break;
-                }
-            }
-            // portrait check
-            if (portraitUnset) {
-                console.warn(`Portrait missing for node: ${dialogDetails.dialogId}`);
-                dialogDetails.portraitType = PortraitType.AresNeutral;
-            }
-            // remove the metatags from the body
-            const unprocessedContent = bodyList.slice(contentIndexStart).join("\n");
-            const contentPair = unprocessedContent.split("<ChoiceBreak>");
-            if (contentPair.length === 2) {
-                // parse for the choice names in the options
-                let ChoiceParsingState;
-                (function (ChoiceParsingState) {
-                    ChoiceParsingState[ChoiceParsingState["Free"] = 0] = "Free";
-                    ChoiceParsingState[ChoiceParsingState["Line"] = 1] = "Line"; // previously detected an option, will try to detect for the next option
-                })(ChoiceParsingState || (ChoiceParsingState = {}));
-                let parsingState = ChoiceParsingState.Free;
-                const currentChoiceDetail = { jumpNode: "", name: "" };
-                const choiceList = [];
-                let shouldSkipChoices = false;
-                const checkChoiceForSave = () => {
-                    if (currentChoiceDetail.name !== "") {
-                        choiceList.push({
-                            name: currentChoiceDetail.name,
-                            jumpNode: currentChoiceDetail.jumpNode
-                        });
-                    }
-                };
-                contentPair[1]
-                    .trim()
-                    .split("\n")
-                    .filter((line) => {
-                    const trimmedLine = line.trim();
-                    if (shouldSkipChoices) {
-                        return false;
-                    }
-                    if (trimmedLine.startsWith("// ignore the rest")) {
-                        shouldSkipChoices = true;
-                        return false;
-                    }
-                    return true;
-                })
-                    .map((line) => {
-                    const trimmedLine = line.trim();
-                    switch (parsingState) {
-                        case ChoiceParsingState.Free:
-                            if (trimmedLine.startsWith("->")) {
-                                // save previous choice
-                                checkChoiceForSave();
-                                // write start of new choice
-                                currentChoiceDetail.name = trimmedLine.split(" ").pop();
-                                parsingState = ChoiceParsingState.Line;
-                            }
-                            break;
-                        case ChoiceParsingState.Line:
-                            if (trimmedLine.startsWith("<<jump")) {
-                                const jumpNode = trimmedLine.split(" ").pop();
-                                currentChoiceDetail.jumpNode = jumpNode.slice(0, jumpNode.length - 2); // remove ">>"
-                                parsingState = ChoiceParsingState.Free;
-                            }
-                            break;
-                        default:
-                            console.error(`Unimplemented parsing state: ${parsingState}`);
-                            break;
-                    }
-                });
-                checkChoiceForSave();
-                dialogDetails.textContent = contentPair[0];
-                // handle choice start tags to a href
-                choiceList.forEach((choiceDetail) => {
-                    const keyword = `<choice ${choiceDetail.name}>`;
-                    while (dialogDetails.textContent.includes(keyword)) {
-                        dialogDetails.textContent = dialogDetails.textContent.replace(keyword, `<a class="choice-${choiceDetail.jumpNode} dialog-choice" title="Click to continue the dialog">`);
-                    }
-                });
-                const externalKeyword = "<a href=";
-                while (dialogDetails.textContent.includes(externalKeyword)) {
-                    dialogDetails.textContent = dialogDetails.textContent.replace(externalKeyword, '<a target="_blank" class="external-link" href='); // make all external tags with a custom cursor
-                }
-                const choiceEndKeyword = "</choice>";
-                while (dialogDetails.textContent.includes(choiceEndKeyword)) {
-                    dialogDetails.textContent = dialogDetails.textContent.replace(choiceEndKeyword, "</a>"); // convert all choice end tags to a tags
-                }
-            }
-            else {
-                // assume only one which indicates it's choiceless
-                dialogDetails.textContent = unprocessedContent;
-            }
-            dialogDetailList.push(dialogDetails);
-        });
+        const dialogDetailList = await parseYarn(fileContent);
         const dialogDetailToString = (detail) => {
             if (detail.portraitType === undefined) {
                 detail.portraitType = PortraitType.AresNeutral;

package/.svelte-kit/__package__/types/pineapple_fiber/DialogState.d.ts

@@ -1,5 +1,6 @@
 export declare enum DialogState {
     Invisible = 0,
     Visible = 1,
-    Busy = 2
+    Busy = 2,
+    Inherit = 3
 }

package/.svelte-kit/__package__/types/pineapple_fiber/DialogState.js

@@ -3,4 +3,5 @@ export var DialogState;
     DialogState[DialogState["Invisible"] = 0] = "Invisible";
     DialogState[DialogState["Visible"] = 1] = "Visible";
     DialogState[DialogState["Busy"] = 2] = "Busy";
+    DialogState[DialogState["Inherit"] = 3] = "Inherit";
 })(DialogState || (DialogState = {}));

package/.svelte-kit/ambient.d.ts

@@ -46,6 +46,7 @@ declare module '$env/static/private' {
 	export const HOMEDRIVE: string;
 	export const HOMEPATH: string;
 	export const IDEA_INITIAL_DIRECTORY: string;
+	export const IJ_RESTARTER_LOG: string;
 	export const INIT_CWD: string;
 	export const JAVA_HOME: string;
 	export const LOCALAPPDATA: string;
@@ -239,6 +240,7 @@ declare module '$env/dynamic/private' {
 		HOMEDRIVE: string;
 		HOMEPATH: string;
 		IDEA_INITIAL_DIRECTORY: string;
+		IJ_RESTARTER_LOG: string;
 		INIT_CWD: string;
 		JAVA_HOME: string;
 		LOCALAPPDATA: string;

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "3q1q8i"
+	version_hash: "1nwz0uu"
 };
 
 export async function get_hooks() {

package/dist/app.postcss

@@ -92,7 +92,7 @@ ul {
 .default-page-container {
     @apply flex justify-center items-center;
     margin-top: 4em;
-    margin-left: clamp(1em, 15vw, 10em);
+    margin-left: 1em;
     margin-right: 1em;
     flex-direction: column;
     z-index: 0;
@@ -191,3 +191,17 @@ a:active {
     background: rgba(var(--color-secondary-500));
 }
 
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/dist/components/DialogOverlay.svelte

@@ -1,6 +1,7 @@
 <script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
 import { onMount } from "svelte";
 import { dialogManager } from "./dialog_manager/DialogManagerStore";
+import { DialogState } from "../types/pineapple_fiber/DialogState";
 let currentMessage = "";
 dialogManager.currentMessage.subscribe((value) => {
   currentMessage = value;
@@ -15,15 +16,25 @@ onMount(() => {
   dialogManager.update(0);
 });
 let hidePercent = 100;
+let isHidden = true;
 dialogManager.hidePercent.subscribe((value) => {
   hidePercent = value * 0.4;
+  isHidden = false;
+});
+dialogManager.currentReadableState.subscribe((value) => {
+  isHidden = value === DialogState.Invisible;
+  if (value === DialogState.Invisible) {
+  }
 });
 const onDialogClick = () => {
   dialogManager.skipAnimation();
 };
 </script>
 
-<div class="dialog-elements" style="--hidePercentWidth: -{hidePercent}vw; --hidePercentHeight: {hidePercent}vh">
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercent}vh;">
 	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
@@ -37,59 +48,49 @@ const onDialogClick = () => {
 </div>
 
 <style>
-	.dialog-elements {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.dialog-elements > img {
-		transform: translateX(var(--hidePercentWidth));
-	}
-
-	.dialog-elements > div {
-		transform: translateY(var(--hidePercentHeight));
-	}
+    .dialog-elements {
+        position: fixed;
+        z-index: 10;
+    }
 
-	.dialog-box {
-		background-color: rgb(var(--color-surface-500) / 0.9);
-		position: fixed;
-		bottom: 0;
-		left: var(--dialog-left-pad);
+    .dialog-elements > img {
+        transform: translateX(var(--hidePercentWidth));
+    }
 
-		width: var(--dialog-box-width); /*75em + 4em padding*/
-		height: var(--dialog-box-height);
-	}
+    .dialog-elements > div {
+        transform: translateY(var(--hidePercentHeight));
+    }
 
-	.dialog-box *,
-	.dialog-name * {
-		font-size: clamp(1em, 5vw, 1.3em);
-		line-height: 1.5em;
-	}
+    .dialog-box *,
+    .dialog-name * {
+        font-size: clamp(1em, 5vw, 1.3em);
+        line-height: 1.5em;
+    }
 
-	.dialog-padding :global(p) {
-		font-size: clamp(1em, 5vw, 1.3em) !important;
-		line-height: 1.5em !important;
-	}
+    .dialog-padding :global(p) {
+        font-size: clamp(1em, 5vw, 1.3em) !important;
+        line-height: 1.5em !important;
+    }
 
-	.dialog-padding {
-		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-	}
+    .dialog-padding {
+        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+    }
 
-	.dialog-name {
-		padding-left: 1rem;
-		padding-right: 1rem;
-		padding-top: 0.5rem;
-		position: fixed;
+    .dialog-name {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-top: 0.5rem;
+        position: fixed;
 
-		/* for centering vertically */
-		transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+        /* for centering vertically */
+        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
 }
 
-	.dialog-portrait {
-		position: fixed;
-		bottom: 0;
-		left: clamp(-4rem, calc(5vw - 5em), 0rem);
-		height: clamp(30rem, 75vw, 40rem);
-		width: auto;
-	}
+    .dialog-portrait {
+        position: fixed;
+        bottom: 0;
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+        height: clamp(30rem, 75vw, 40rem);
+        width: auto;
+    }
 </style>

package/dist/components/dialog_manager/DialogManager.d.ts

@@ -8,7 +8,7 @@ import { DialogProcessor } from "./DialogProcessor";
 export type OnSetDialogChoiceCallback = (newMessage: DialogDetail) => void;
 export declare class DialogManager {
     dialogMessageMap: Map<string, DialogDetail>;
-    dialogMessageList: DialogDetail[];
+    currentDialogTree: DialogDetail[];
     fullCurrentMessage: string;
     currentMessageMeta: DialogDetail;
     currentMessage: import("svelte/store").Writable<string>;
@@ -18,12 +18,14 @@ export declare class DialogManager {
     currentPortrait: import("svelte/store").Writable<unknown>;
     portraitMap: Map<string, any>;
     currentState: DialogState;
+    currentReadableState: import("svelte/store").Writable<DialogState>;
     hidePercent: import("svelte/motion").Tweened<number>;
     skipNextActiveTime: number;
     dialogProcessor: DialogProcessor;
     _setDialogChoiceQueue: DialogDetail[];
     _setDialogChoiceMutex: boolean;
     onSetDialogListeners: OnSetDialogChoiceCallback[];
+    enableDialogueOverlayCache: boolean;
     constructor();
     /**
      * when users interact with the dialog, they can skip the transition like in a game
@@ -39,9 +41,9 @@ export declare 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: DialogDetail[]) => void;
+    setDialogTree: (newDialogTree: DialogDetail[]) => void;
     /**
      * Remember to call this before SetDialogTree
      * and unsubscribe during onDestroy
@@ -74,4 +76,7 @@ export declare class DialogManager {
      * ISSUE #81 https://github.com/TurnipXenon/pineapple/issues/81
      */
     update: (timestamp: number) => void;
+    enableDialogOverlay(enable: boolean): void;
+    toggleDialogOverlay(): void;
+    parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]>;
 }

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);
     }