@turnipxenon/pineapple 2.4.14 → 2.4.15

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -4,8 +4,10 @@ import { page } from "$app/stores";
 import { enableBackground } from "../../store";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
 import FABIcon from "../../assets/placeholder/placeholder_circle.png";
-import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import CloseIcon from "../../assets/icons/close.svg";
+import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
+import DialogOverlay from "../DialogOverlay.svelte";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -40,6 +42,7 @@ let enableDialogueOverlayValue = true;
 enableDialogueOverlay.subscribe((value) => {
   enableDialogueOverlayValue = value;
 });
+enableDialogueOverlay.set(false);
 </script>
 
 <!-- App Shell -->
@@ -49,9 +52,13 @@ enableDialogueOverlay.subscribe((value) => {
 
 <!--todo: turn off hidden when it's time-->
 <button type="button" class="fab" on:click={()=>{
-    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+	dialogManager.toggleDialogOverlay()
 }}>
-	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{#if (enableDialogueOverlayValue)}
+		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+	{:else }
+		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{/if}
 </button>
 
 <AppShell>
@@ -92,6 +99,8 @@ enableDialogueOverlay.subscribe((value) => {
 
 	<Toast></Toast>
 
+	<DialogOverlay></DialogOverlay>
+
 	<div class="default-page-container">
 		<slot />
 		<div class="footer-space" />
@@ -111,8 +120,8 @@ enableDialogueOverlay.subscribe((value) => {
 
 <style>
     :root {
-        --dialog-left-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
+        --dialog-start-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
         --dialog-box-height: clamp(15em, 50vw, 18em);
 
         /** FAB icon margin/position calculation origin:
@@ -134,7 +143,6 @@ enableDialogueOverlay.subscribe((value) => {
         align-items: center;
         justify-content: center;
         margin-top: 4em;
-        margin-left: clamp(1em, 15vw, 10em);
         margin-right: 1em;
         flex-direction: column;
         z-index: 0;
@@ -222,6 +230,10 @@ enableDialogueOverlay.subscribe((value) => {
         border-radius: 50%;
     }
 
+    .fab > img {
+        width: 100%;
+    }
+
     .fab:dir(ltr) {
         right: var(--fab-margin);
     }

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

@@ -77,6 +77,7 @@ const dismissToast = () => {
         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/dist/scripts/pineapple_fiber/PineappleFiberParser.d.ts

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

package/dist/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/dist/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/dist/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/dist/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.14",
+  "version": "2.4.15",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/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/src/lib/components/DialogOverlay.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from "svelte";
 
 	import { dialogManager } from "$lib/components/dialog_manager/DialogManagerStore";
+	import { DialogState } from "$pkg/types/pineapple_fiber/DialogState";
 
 	let currentMessage = "";
 	dialogManager.currentMessage.subscribe((value) => {
@@ -21,8 +22,16 @@
 	});
 
 	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 = () => {
@@ -30,7 +39,10 @@
 	};
 </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">
@@ -44,57 +56,47 @@
 </div>
 
 <style>
-	.dialog-elements {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.dialog-elements > img {
-		transform: translateX(var(--hidePercentWidth));
-	}
-
-	.dialog-elements > div {
-		transform: translateY(var(--hidePercentHeight));
-	}
-
-	.dialog-box {
-		background-color: rgb(var(--color-surface-500) / 0.9);
-		position: fixed;
-		bottom: 0;
-		left: var(--dialog-left-pad);
-
-		width: var(--dialog-box-width); /*75em + 4em padding*/
-		height: var(--dialog-box-height);
-	}
-
-	.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 {
-		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-	}
-
-	.dialog-name {
-		@apply pt-2 px-4;
-		position: fixed;
-
-		/* 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-elements {
+        position: fixed;
+        z-index: 10;
+    }
+
+    .dialog-elements > img {
+        transform: translateX(var(--hidePercentWidth));
+    }
+
+    .dialog-elements > div {
+        transform: translateY(var(--hidePercentHeight));
+    }
+
+    .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 {
+        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+    }
+
+    .dialog-name {
+        @apply pt-2 px-4;
+        position: fixed;
+
+        /* 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;
+    }
 </style>