@turnipxenon/pineapple 2.4.13 → 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/client/app.js

@@ -15,7 +15,7 @@ export const server_loads = [];
 
 export const dictionary = {
 		"/(pineapple)": [4,[2]],
-		"/(pineapple)/personal": [5,[2]],
+		"/(pineapple)/pineapple": [5,[2]],
 		"/(seaweed)/portfolio": [~6,[3]],
 		"/(seaweed)/portfolio/actual": [7,[3]]
 	};

package/.svelte-kit/generated/client/nodes/5.js

@@ -1 +1 @@
-export { default as component } from "../../../../src/routes/(pineapple)/personal/+page.svelte";
+export { default as component } from "../../../../src/routes/(pineapple)/pineapple/+page.svelte";

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: "1kjhsuz"
+	version_hash: "1nwz0uu"
 };
 
 export async function get_hooks() {

package/.svelte-kit/types/route_meta_data.json

@@ -2,7 +2,7 @@
 	"/(seaweed)": [],
 	"/(pineapple)": [],
 	"/": [],
-	"/(pineapple)/personal": [],
+	"/(pineapple)/pineapple": [],
 	"/(seaweed)/portfolio": [
 		"src/routes/(seaweed)/portfolio/+page.server.ts"
 	],

package/.svelte-kit/types/src/routes/$types.d.ts

@@ -11,7 +11,7 @@ type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Pa
 type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
-type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/personal" | "/(seaweed)/portfolio" | "/(seaweed)/portfolio/actual" | null
+type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/pineapple" | "/(seaweed)/portfolio" | "/(seaweed)/portfolio/actual" | null
 type LayoutParams = RouteParams & {  }
 type LayoutParentData = EnsureDefined<{}>;
 

package/.svelte-kit/types/src/routes/(pineapple)/$types.d.ts

@@ -12,7 +12,7 @@ type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
 type PageParentData = Omit<EnsureDefined<import('../$types.js').LayoutData>, keyof LayoutData> & EnsureDefined<LayoutData>;
-type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/personal"
+type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/pineapple"
 type LayoutParams = RouteParams & {  }
 type LayoutParentData = EnsureDefined<import('../$types.js').LayoutData>;
 

package/.svelte-kit/types/src/routes/(pineapple)/{personal → pineapple}/$types.d.ts

@@ -4,7 +4,7 @@ type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 // @ts-ignore
 type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
 type RouteParams = {  };
-type RouteId = '/(pineapple)/personal';
+type RouteId = '/(pineapple)/pineapple';
 type MaybeWithVoid<T> = {} extends T ? T | void : T;
 export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
 type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>

package/dist/app.postcss

@@ -41,11 +41,11 @@ html, body {
 }
 
 /* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img {
+.turnip-button > img, .img-icon {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
-.dark .turnip-button > img {
+.dark .turnip-button > img, .dark .img-icon {
     filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
@@ -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;
@@ -164,4 +164,44 @@ a:active {
 .accordion-item {
     @apply variant-filled-primary rounded-md;
 }
+
 /* endregion Accordion css for handling missing styles in package */
+
+:root {
+    --shadow-color: rgba(91, 79, 54, 0.5);
+}
+
+/* todo: adjust shadow for each component + change depending on dark mode or not */
+.fab, #shell-header {
+    box-shadow: 3px 3px 3px var(--shadow-color);
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    /*background-color: red;*/
+    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/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/dist/components/Card.svelte

@@ -1,5 +1,5 @@
 <script>export let margin = "0";
-export let marginBottom = "3em";
+export let marginBottom = "2lh";
 export let overrideStyle = "";
 export let includeDataNoSnippet = true;
 const style = `

package/dist/components/Chip.svelte

@@ -8,5 +8,6 @@
         margin: 0.25em;
         font-weight: bold;
         pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
 </style>

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[]>;
 }