@turnipxenon/pineapple 2.4.13 → 2.4.15

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)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PinyaBaseLayout from "$pkg/components/layouts/PineappleBaseLayout.svelte";
+	import PinyaBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
 	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 </script>
 

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

@@ -2,7 +2,7 @@
 	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 
 	import { createGoToFunction } from "$pkg/util/create_go_to_function";
-	import PineappleBaseLayout from "$pkg/components/layouts/PineappleBaseLayout.svelte";
+	import PineappleBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
 </script>
 
 <svelte:head>
@@ -18,8 +18,8 @@
 	<h1 class="mb-8">Directory</h1>
 
 	<div class="btn-group-vertical variant-filled-secondary">
-		<button on:click={createGoToFunction("personal")}><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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	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 = [
+		"Niko",
+		"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>
+	<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>
+	<meta content="Welcome to {PUBLIC_CRINGE_USERNAME}'s Home" name="og:title" />
+	<meta
+		content="Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!"
+		name="og:description"
+	/>
+</svelte:head>
+
+<div class="card default-card">
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
+			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
+		}}><h3>Test custom toast</h3></button>
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
+			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">
+    .default-card {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2em;
+    }
+</style>

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

package/src/lib/components/layouts/PineappleBaseLayout.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-    // For auto dark/light mode
-    import {AppBar, AppShell, autoModeWatcher, LightSwitch} from "@skeletonlabs/skeleton";
-    import RandomizedBackground from "$lib/components/RandomizedBackground.svelte";
-
-    // navigation
-    import {page} from "$app/stores";
-    // store
-    import {enableBackground} from "$lib/store";
-    import type {BreadcrumbData} from "$lib/types/BreadcrumbData";
-    // assets
-    import DialogOverlay from "$lib/components/DialogOverlay.svelte";
-    import AresLogo from "$lib/assets/characters/ares/ares_logo.webp";
-    import FABIcon from "$lib/assets/placeholder/placeholder_circle.png";
-    import {enableDialogueOverlay} from "$lib/components/dialog_manager/DialogManagerStore";
-    // todo: clean up all these imports!
-
-    let pages: BreadcrumbData[] = [];
-
-    const updateBreadcrumb = (pathname: string) => {
-        pages = [];
-        let basePath = "";
-        pathname.split("/").forEach((value, index) => {
-            if (index === 0) {
-                basePath = "/";
-                pages.push({
-                    path: "/",
-                    name: "Home"
-                });
-                return;
-            }
-
-            if (value === "") {
-                return;
-            }
-
-            basePath += value + "/";
-            pages.push({
-                path: basePath,
-                name: value
-            });
-        });
-        pages = pages;
-    };
-
-    $: updateBreadcrumb($page.url.pathname); // run every time we navigate
-
-    let enableBackgroundValue = true;
-    enableBackground.subscribe((value) => {
-        enableBackgroundValue = value;
-    });
-
-    let enableDialogueOverlayValue = true;
-    enableDialogueOverlay.subscribe((value) => {
-        enableDialogueOverlayValue = value;
-    });
-</script>
-
-<!-- App Shell -->
-<svelte:head>
-	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
-</svelte:head>
-
-<!--todo: turn off hidden when it's time-->
-<button type="button" class="fab" on:click={()=>{
-    enableDialogueOverlay.set(!enableDialogueOverlayValue);
-}}>
-	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
-</button>
-
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar slotDefault="place-content-start" slotTrail="place-content-end">
-			<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}
-				/>
-				<span class="mr-2"/>
-				<ol class="breadcrumb">
-					{#each pages as crumb, i}
-						{#if i < pages.length - 1}
-							<li class="crumb">
-								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-							</li>
-							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
-						{:else}
-							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
-						{/if}
-					{/each}
-				</ol>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<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}
-</AppShell>
-
-<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-box-height: clamp(15em, 50vw, 18em);
-    }
-
-    .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;
-    }
-
-    .ares-logo {
-        object-fit: contain;
-        height: 2em;
-        margin-inline-end: 0.5em;
-    }
-
-    /* breadcrumb does not work due to a lot of magic stuff i do
-       the code below is from skeleton's tailwind css:
-       https://github.com/skeletonlabs/skeleton/blob/54f4ecedabf2be6d94a670b56dc8821095ca3fc9/packages/plugin/src/styles/components/breadcrumbs.css
-
-       it likely disappeared due to code gen shenanigans and package magic */
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
-        @apply flex items-center space-x-4 w-full overflow-x-auto;
-        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
-    }
-
-    .crumb {
-        @apply flex justify-center items-center space-x-2;
-    }
-
-    .crumb-separator {
-        @apply flex text-surface-700-200-token opacity-50;
-    }
-
-    /* === Auto-Responsive === */
-
-    .breadcrumb li {
-        @apply hidden md:block;
-    }
-
-    .breadcrumb li:nth-last-child(3),
-    .breadcrumb li:nth-last-child(2),
-    .breadcrumb li:nth-last-child(1) {
-        @apply block;
-    }
-
-    .fab {
-		    position: fixed;
-		    bottom: 2em;
-    }
-
-    .fab:dir(ltr) {
-		    right: 2em;
-    }
-
-    .fab:dir(rtl) {
-		    left: 2em;
-    }
-</style>