@turnipxenon/pineapple 2.4.14 → 2.4.16

package/src/lib/components/dialog_manager/DialogManager.ts

@@ -6,7 +6,7 @@ import { writable } from "svelte/store";
 import type { DialogDetail } from "$pkg/types/pineapple_fiber/DialogDetail";
 import { DialogState } from "$pkg/types/pineapple_fiber/DialogState";
 import { tweened } from "svelte/motion";
-import { cubicOut } from "svelte/easing";
+import { backOut } from "svelte/easing";
 import { PortraitType } from "$pkg/types/pineapple_fiber/PortraitType";
 import AresHappy from "$pkg/assets/characters/ares/ares_happy.webp";
 import AresBlushing from "$pkg/assets/characters/ares/ares_blushing.webp";
@@ -24,6 +24,7 @@ import {
 	updateRate
 } from "$pkg/components/dialog_manager/DialogManagerStore";
 import { DialogProcessor } from "$pkg/components/dialog_manager/DialogProcessor";
+import { parseYarn } from "$pkg/scripts/pineapple_fiber/PineappleFiberParser";
 
 const shouldDebugYarn = false;
 
@@ -31,7 +32,7 @@ export type OnSetDialogChoiceCallback = (newMessage: DialogDetail) => void;
 
 export class DialogManager {
 	dialogMessageMap: Map<string, DialogDetail> = new Map();
-	dialogMessageList: DialogDetail[] = [];
+	currentDialogTree: DialogDetail[] = [];
 	fullCurrentMessage: string = defaultDialogMessage[0].textContent;
 	currentMessageMeta: DialogDetail = defaultDialogMessage[0];
 	currentMessage = writable("");
@@ -41,9 +42,10 @@ export class DialogManager {
 	currentPortrait = writable();
 	portraitMap: Map<string, any> = 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();
@@ -51,16 +53,23 @@ export class DialogManager {
 	_setDialogChoiceQueue: DialogDetail[] = [];
 	_setDialogChoiceMutex = false;
 	onSetDialogListeners: OnSetDialogChoiceCallback[] = [];
+	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: "" }]);
 			}
 		});
@@ -93,13 +102,13 @@ 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: DialogDetail[]) => {
-		this.dialogMessageList = newMessageList;
+	setDialogTree = (newDialogTree: DialogDetail[]) => {
+		this.currentDialogTree = newDialogTree;
 
 		this.dialogMessageMap.clear();
-		newMessageList.map((value) => {
+		newDialogTree.map((value) => {
 			if (value.dialogId) {
 				this.dialogMessageMap.set(value.dialogId!, value);
 			}
@@ -118,7 +127,7 @@ export class DialogManager {
 			this.portraitMap.set(PortraitType.AresYay.toString(), AresYay);
 		}
 
-		this.setDialogChoice(newMessageList[0]);
+		this.setDialogChoice(newDialogTree[0]);
 	};
 
 	/**
@@ -265,7 +274,7 @@ export class DialogManager {
 		while (
 			this.fullCurrentMessage[this.currentIndex] == "<" &&
 			this.currentIndex + 1 < this.fullCurrentMessage.length
-		) {
+			) {
 			// find valid character, trap with closing
 			this.currentIndex = this.fullCurrentMessage.indexOf(">", this.currentIndex) + 1;
 			// normalize
@@ -279,4 +288,21 @@ export class DialogManager {
 
 		window.requestAnimationFrame(this.update);
 	};
+
+	enableDialogOverlay(enable: boolean) {
+		enableDialogueOverlay.set(enable);
+	}
+
+	toggleDialogOverlay() {
+		enableDialogueOverlay.set(!this.enableDialogueOverlayCache);
+	};
+
+	async parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]> {
+		return parseYarn(dialogYarn)
+			.then((dialogTree) => {
+				console.log(dialogTree);
+				this.setDialogTree(dialogTree);
+				return dialogTree;
+			});
+	}
 }

package/src/lib/components/dialog_manager/DialogManagerStore.ts

@@ -32,7 +32,7 @@ export const updateRate: number = 40 / 1000; // *at least* 40ms per letter
 // todo: if we go through doing yarn to typescript, move this!
 export const defaultDialogMessage: DialogDetail[] = [
 	{
-		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/src/lib/components/layouts/SeaweedBaseLayout.svelte

@@ -66,8 +66,8 @@
 
 <style lang="postcss">
     :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/src/lib/components/pineapple/PineappleBaseLayout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	export let showDialogByDefault = false;
+
 	// For auto dark/light mode
 	import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
 	import RandomizedBackground from "$pkg/components/RandomizedBackground.svelte";
@@ -12,8 +14,10 @@
 	// import DialogOverlay from "$lib/components/DialogOverlay.svelte";
 	import AresLogo from "$pkg/assets/characters/ares/ares_logo.webp";
 	import FABIcon from "$pkg/assets/placeholder/placeholder_circle.png";
-	import { enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
+	import CloseIcon from "$pkg/assets/icons/close.svg";
+	import { dialogManager, enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
 	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
+	import DialogOverlay from "$pkg/components/DialogOverlay.svelte";
 	// todo: clean up all these imports!
 
 	let pages: BreadcrumbData[] = [];
@@ -55,6 +59,8 @@
 	enableDialogueOverlay.subscribe((value) => {
 		enableDialogueOverlayValue = value;
 	});
+
+	enableDialogueOverlay.set(showDialogByDefault);
 </script>
 
 <!-- App Shell -->
@@ -64,9 +70,13 @@
 
 <!--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>
@@ -107,6 +117,8 @@
 
 	<Toast></Toast>
 
+	<DialogOverlay></DialogOverlay>
+
 	<div class="default-page-container">
 		<slot />
 		<div class="footer-space" />
@@ -126,8 +138,8 @@
 
 <style lang="postcss">
     :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:
@@ -147,7 +159,6 @@
     .default-page-container {
         @apply flex justify-center items-center;
         margin-top: 4em;
-        margin-left: clamp(1em, 15vw, 10em);
         margin-right: 1em;
         flex-direction: column;
         z-index: 0;
@@ -197,6 +208,10 @@
         border-radius: 50%;
     }
 
+    .fab > img {
+        width: 100%;
+    }
+
     .fab:dir(ltr) {
         right: var(--fab-margin);
     }

package/src/lib/components/pineapple/toast/Toast.svelte

@@ -101,6 +101,7 @@
         position: fixed;
         /* 12em = this component's margin (4em) + fab margin + width (8em) */
         max-width: calc(100vw - 12em);
+		    z-index: 100;
     }
 
     .toast-positioner:dir(ltr) {

package/src/lib/scripts/pineapple_fiber/PineappleFiberParser.ts

@@ -0,0 +1,177 @@
+import type { DialogDetail } from "$pkg/types/pineapple_fiber/DialogDetail";
+import { PortraitType } from "$pkg/types/pineapple_fiber/PortraitType";
+
+interface ChoiceDetail {
+	name: string;
+	jumpNode: string;
+}
+
+const shouldDebug = false;
+
+export const parseYarn = async (fileContent: string): Promise<DialogDetail[]> => {
+	const dialogDetailList: DialogDetail[] = [];
+
+	fileContent.split("===").map((unparsedNode) => {
+		// todo: detect empty nodes
+		// todo: improve the code readability
+		if (unparsedNode.trim() === "") {
+			return;
+		}
+
+		const dialogDetails: DialogDetail = {
+			// 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() as keyof typeof PortraitType];
+					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
+			enum ChoiceParsingState {
+				Free, // detects for the next option
+				Line // previously detected an option, will try to detect for the next option
+			}
+
+			let parsingState: ChoiceParsingState = ChoiceParsingState.Free;
+			const currentChoiceDetail: ChoiceDetail = { jumpNode: "", name: "" };
+			const choiceList: ChoiceDetail[] = [];
+			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/src/lib/scripts/pineapple_fiber/PineappleWeaver.ts

@@ -11,190 +11,17 @@ import { getAllFiles } from "$pkg/scripts/util/FileManagement";
 import fs, { readFileSync } from "fs";
 import type { DialogDetail } from "$pkg/types/pineapple_fiber/DialogDetail";
 import { PortraitType } from "$pkg/types/pineapple_fiber/PortraitType";
-
-// import { getAllFiles } from "../util/FileManagement";
-// import fs, { readFileSync } from "fs";
-// import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
-// import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
-
-interface ChoiceDetail {
-	name: string;
-	jumpNode: string;
-}
-
-const shouldDebug = false;
+import { parseYarn } from "$pkg/scripts/pineapple_fiber/PineappleFiberParser";
 
 const pineappleWeaverRun = () => {
 	console.info("Starting Pineapple Weaver.");
 	const BASE_PATH = "./src/routes";
 	getAllFiles(BASE_PATH, (path: string): boolean => {
 		return path.split(".").pop() === "yarn";
-	}).map((filePath) => {
+	}).map(async (filePath) => {
 		console.info(`Converting: ${filePath}`);
 		const fileContent = readFileSync(filePath, "utf-8");
-		const dialogDetailList: DialogDetail[] = [];
-
-		fileContent.split("===").map((unparsedNode) => {
-			// todo: detect empty nodes
-			// todo: improve the code readability
-			if (unparsedNode.trim() === "") {
-				return;
-			}
-
-			const dialogDetails: DialogDetail = {
-				// 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() as keyof typeof PortraitType];
-						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
-				enum ChoiceParsingState {
-					Free, // detects for the next option
-					Line // previously detected an option, will try to detect for the next option
-				}
-
-				let parsingState: ChoiceParsingState = ChoiceParsingState.Free;
-				const currentChoiceDetail: ChoiceDetail = { jumpNode: "", name: "" };
-				const choiceList: ChoiceDetail[] = [];
-				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: DialogDetail[] = await parseYarn(fileContent);
 
 		const dialogDetailToString = (detail: DialogDetail): string => {
 			if (detail.portraitType === undefined) {

package/src/lib/types/pineapple_fiber/DialogState.ts

@@ -1,5 +1,6 @@
 export enum DialogState {
 	Invisible,
 	Visible,
-	Busy
+	Busy,
+	Inherit
 }

package/src/routes/(pineapple)/+page.svelte

@@ -18,8 +18,8 @@
 	<h1 class="mb-8">Directory</h1>
 
 	<div class="btn-group-vertical variant-filled-secondary">
-		<button on:click={createGoToFunction("pineapple")}><h2>Personal</h2></button>
-		<button on:click={createGoToFunction("portfolio")}><h2>Portfolio</h2></button>
+		<button on:click={createGoToFunction("pineapple")}><h2>Pineapple playground</h2></button>
+		<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playrground</h2></button>
 	</div>
 </div>
 

package/src/routes/(pineapple)/pineapple/+page.svelte

@@ -2,6 +2,9 @@
 	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
+	import TestDialogYarn from "./TestDialog.yarn?raw";
+	import { dialogManager } from "$pkg";
+
 
 	let testingQueueNumber = 1;
 	const testingRandomPhrases = [
@@ -9,6 +12,19 @@
 		"Niko the Baikal seal",
 		"Niko the Baikal seal\nfrom Toba Aquarium"
 	];
+	const testDialogYarn = TestDialogYarn;
+
+	let parsed = false;
+	const onTestDialogClick = () => {
+		if (!parsed) {
+			dialogManager.parseAndSetDialogTree(testDialogYarn).then(() => {
+				dialogManager.toggleDialogOverlay();
+			});
+			parsed = true;
+		} else {
+			dialogManager.toggleDialogOverlay();
+		}
+	};
 </script>
 
 <svelte:head>
@@ -21,7 +37,6 @@
 </svelte:head>
 
 <div class="card default-card">
-
 	<button
 		class="btn variant-filled-secondary"
 		on:click={() => {
@@ -33,6 +48,9 @@
 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
 		}}><h3>Handy toast</h3></button>
+	<button
+		class="btn variant-filled-secondary"
+		on:click={onTestDialogClick}><h3>Test dialog</h3></button>
 </div>
 
 <style lang="postcss">

package/src/routes/(pineapple)/pineapple/TestDialog.yarn

@@ -0,0 +1,7 @@
+title: ErrorStart
+position: 0,0
+---
+Portrait: AresDisappointed
+<p>Huh... We didn't find that page. Sorry about that. You can go back to our <a href="/">homepage.</a><br>
+Gomen oomf chan o(TヘTo)</p>
+===

package/vite.config.ts

@@ -2,5 +2,6 @@ import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	assetsInclude: ['**/*.yarn']
 });