@turnipxenon/pineapple 2.1.1 → 2.3.1

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -0,0 +1,95 @@
+<script>import "../../theme.postcss";
+import "$lib/app.postcss";
+import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
+import RandomizedBackground from "../RandomizedBackground.svelte";
+import { enableBackground } from "../../store";
+import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import { writable } from "svelte/store";
+import { fly } from "svelte/transition";
+export let shouldDisplayLeadingIcons = false;
+let enableBackgroundValue = true;
+enableBackground.subscribe((value) => {
+  enableBackgroundValue = value;
+});
+enableDialogueOverlay.set(false);
+let shouldDisplaySocialIcons = writable(false);
+</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"
+		        background="app-shell-token">
+			<svelte:fragment slot="lead">
+				<span class="lead-slot-placeholder"></span>
+
+				{#if $$slots.extraLeadingIcons && shouldDisplayLeadingIcons}
+					<div transition:fly={{x:-10}}>
+						<slot name="extraLeadingIcons" />
+					</div>
+				{:else if $$slots.extraLeadingIcons}
+					<div hidden>
+						<slot name="extraLeadingIcons" />
+					</div>
+				{/if}
+			</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 shouldDisplaySocialIcons={shouldDisplaySocialIcons} />
+		<div class="footer-space" />
+	</div>
+	<!-- todo: eventually re-add	-->
+	<!--	<DialogOverlay />-->
+</AppShell>
+
+<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-box-height: clamp(15em, 50vw, 18em);
+    }
+
+    .default-page-container {
+        max-width: 2100px;
+        margin: 4em auto;
+        flex-direction: column;
+        z-index: 0;
+    }
+
+    .lead-slot-placeholder {
+        height: 3em;
+        margin-inline-end: 0.5em;
+    }
+
+    /*todo: consider left handedness or customizability*/
+    /*.fab {*/
+    /*    @apply btn-icon variant-filled-surface;*/
+    /*    position: fixed;*/
+    /*    height: 5em;*/
+    /*    width: 5em;*/
+    /*    bottom: 3em;*/
+    /*    right: 2em;*/
+    /*    box-shadow: 0.5em 0.5em 0.5em gray;*/
+    /*}*/
+</style>

package/dist/components/layouts/SeaweedBaseLayout.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import "../../theme.postcss";
+import "$lib/app.postcss";
+declare const __propDef: {
+    props: {
+        shouldDisplayLeadingIcons?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        extraLeadingIcons: {};
+        default: {
+            shouldDisplaySocialIcons: import("svelte/store").Writable<boolean>;
+        };
+    };
+};
+export type SeaweedBaseLayoutProps = typeof __propDef.props;
+export type SeaweedBaseLayoutEvents = typeof __propDef.events;
+export type SeaweedBaseLayoutSlots = typeof __propDef.slots;
+export default class SeaweedBaseLayout extends SvelteComponent<SeaweedBaseLayoutProps, SeaweedBaseLayoutEvents, SeaweedBaseLayoutSlots> {
+}
+export {};

package/dist/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const ItchBadgeHotLink = "https://static.itch.io/images/badge.svg";
+export declare const ItchLogoHotLink = "https://static.itch.io/images/itchio-textless-black.svg";

package/dist/consts.js

@@ -0,0 +1,2 @@
+export const ItchBadgeHotLink = "https://static.itch.io/images/badge.svg";
+export const ItchLogoHotLink = "https://static.itch.io/images/itchio-textless-black.svg";

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
+export { default as LazyAsset } from "./components/LazyAsset.svelte";
+export * from "./components/dialog_manager/DialogManagerStore";
+export * from "./components/dialog_manager/DialogManager";
+export * from "./components/dialog_manager/DialogUtils";
+export * from "./types/pineapple_fiber/PortraitType";
+export * from "./types/pineapple_fiber/DialogDetail";
+export * from "./util/stable_random";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
+export { default as LazyAsset } from "./components/LazyAsset.svelte";
+export * from "./components/dialog_manager/DialogManagerStore";
+export * from "./components/dialog_manager/DialogManager";
+export * from "./components/dialog_manager/DialogUtils";
+export * from "./types/pineapple_fiber/PortraitType";
+export * from "./types/pineapple_fiber/DialogDetail";
+export * from "./util/stable_random";

package/dist/scripts/SetDefaultEnvironment.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scripts/SetDefaultEnvironment.js

@@ -0,0 +1,41 @@
+import fs from "fs";
+const setupDefaultEnvironmentVariable = () => {
+    console.info("Running environment variable checks");
+    const REQUIRED_ENV = [
+        "PUBLIC_CRINGE_USERNAME",
+        "PUBLIC_TWEET1",
+        "PUBLIC_TWEET2",
+        "PUBLIC_TUMBLR",
+        "PUBLIC_TWITTER_ID"
+    ];
+    const ENV_FILEPATH = "./.env";
+    const missingEnv = [...REQUIRED_ENV];
+    // check if file exists
+    const exists = fs.existsSync(ENV_FILEPATH);
+    // iterate on every line to make sure every variable exists
+    if (exists) {
+        fs.readFileSync(ENV_FILEPATH, "utf-8")
+            .split("\n")
+            .forEach((line) => {
+            // remove from missingEnv if it's there
+            const varName = line.split("=")[0];
+            const index = missingEnv.indexOf(varName);
+            if (index !== -1) {
+                missingEnv.splice(index, 1);
+            }
+        });
+    }
+    else {
+        fs.writeFileSync(ENV_FILEPATH, "");
+    }
+    // append the remaining environments
+    if (missingEnv.length > 0) {
+        const newEnvLines = missingEnv.map((varName) => {
+            return `${varName}="PLACEHOLDER"`;
+        });
+        newEnvLines.push(""); // final line empty
+        fs.appendFileSync(ENV_FILEPATH, newEnvLines.join("\n"));
+    }
+    console.info("Finished environment variable checks");
+};
+setupDefaultEnvironmentVariable();

package/dist/scripts/pineapple_fiber/PineappleWeaver.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pineapple Fiber
+ *
+ * A script that generates Typescript files from Yarn where the choices are embedded on
+ * the dialogue itself
+ *
+ * npx vite-node src/lib/scripts/pineapple_fiber/PineappleWeaver.ts
+ */
+export {};

package/dist/scripts/pineapple_fiber/PineappleWeaver.js

@@ -0,0 +1,201 @@
+/**
+ * Pineapple Fiber
+ *
+ * A script that generates Typescript files from Yarn where the choices are embedded on
+ * the dialogue itself
+ *
+ * npx vite-node src/lib/scripts/pineapple_fiber/PineappleWeaver.ts
+ */
+import { getAllFiles } from "../util/FileManagement";
+import fs, { readFileSync } from "fs";
+import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
+const shouldDebug = false;
+const pineappleWeaverRun = () => {
+    console.info("Starting Pineapple Weaver.");
+    const BASE_PATH = "./src/routes";
+    getAllFiles(BASE_PATH, (path) => {
+        return path.split(".").pop() === "yarn";
+    }).map((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 dialogDetailToString = (detail) => {
+            if (detail.portraitType === undefined) {
+                detail.portraitType = PortraitType.AresNeutral;
+                console.error(`Missing portrait at dialog: ${detail.dialogId}`);
+                console.error(`It contains: ${detail.textContent}`);
+            }
+            return `		{
+			dialogId: "${detail.dialogId}",
+			portraitType: PortraitType.${detail.portraitType.toString()},
+			textContent: \`${detail.textContent}\`
+		},`;
+        };
+        const dialogDetailListToString = (detailList) => {
+            return detailList
+                .map((detail) => {
+                return dialogDetailToString(detail);
+            })
+                .join("\n");
+        };
+        // generate file
+        const filePathList = filePath.split(".");
+        const fileName = filePathList[filePathList.length - 2].split("/").pop();
+        const template = `// this file was generated by PineappleWeaver.ts
+// do not edit!
+			
+import type { DialogDetail } from "@turnipxenon/pineapple";
+import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
+
+class _${fileName}Yarn {
+	dialogList: DialogDetail[] = [
+${dialogDetailListToString(dialogDetailList)}
+	];
+	
+	/* Remember to call DialogManager.subscribeToSetDialogChoice before calling this in Svelte */
+	setDialogTree = () => {
+		dialogManager.setDialogTree(this.dialogList);
+	};
+}
+
+export const ${fileName}Yarn = new _${fileName}Yarn();
+`;
+        const filePathSplit = filePath.split(".");
+        filePathSplit.pop();
+        const generatedPath = `${filePathSplit.join(".")}Yarn.ts`;
+        fs.writeFileSync(generatedPath, template);
+    });
+    console.info("Finish converting all yarn files!");
+};
+pineappleWeaverRun();

package/dist/scripts/util/FileManagement.d.ts

@@ -0,0 +1,7 @@
+export declare const getDirectories: (path: string) => string[];
+/**
+ * Get all files underneath a path. The results can be filtered!
+ * @param path: path where to start finding all files underneath
+ * @param filter?: optional path filter
+ */
+export declare const getAllFiles: (path: string, filter?: ((path: string) => boolean) | undefined) => string[];

package/dist/scripts/util/FileManagement.js

@@ -0,0 +1,35 @@
+import fs from "fs";
+// from https://stackoverflow.com/a/26832802
+export const getDirectories = (path) => {
+    return fs
+        .readdirSync(path)
+        .filter(function (file) {
+        return fs.statSync(path + "/" + file).isDirectory();
+    })
+        .map((value) => {
+        return path + "/" + value;
+    });
+};
+/**
+ * Get all files underneath a path. The results can be filtered!
+ * @param path: path where to start finding all files underneath
+ * @param filter?: optional path filter
+ */
+export const getAllFiles = (path, filter) => {
+    const contentList = fs.readdirSync(path);
+    const fileList = [];
+    contentList.forEach((content) => {
+        const contentName = path + "/" + content;
+        const stat = fs.statSync(contentName);
+        if (stat.isDirectory()) {
+            fileList.push(...getAllFiles(contentName, filter));
+        }
+        else {
+            // takes advantage of lazy evaluation
+            if (filter === undefined || filter(contentName)) {
+                fileList.push(contentName);
+            }
+        }
+    });
+    return fileList;
+};

package/dist/scripts/util/ManualCheck.d.ts

@@ -0,0 +1 @@
+export declare const runAll: () => void;

package/dist/scripts/util/ManualCheck.js

@@ -0,0 +1,28 @@
+import { getAllFiles } from "./FileManagement";
+import { readFileSync } from "fs";
+/**
+ * checks for manual dialog tree sets in all files except for *Yarn.ts and DialogManager.ts
+ */
+const checkManualDialogSet = () => {
+    // todo:
+    const BASE_PATH = "./src/routes";
+    getAllFiles(BASE_PATH, (path) => {
+        // from: https://stackoverflow.com/a/424006/17836168
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const filename = path.split("\\").pop().split("/").pop();
+        const isNonYarn = !filename.endsWith("Yarn.ts");
+        // takes advantage of lazy evaluation
+        // is non-yarn and is not exempted
+        return isNonYarn && !["DialogManager.ts"].includes(filename);
+    }).map((filePath) => {
+        // todo:
+        const fileContent = readFileSync(filePath, "utf-8");
+        if (fileContent.includes("dialogManager.setDialogTree")) {
+            console.warn(`Warning! Manual dialog tree set found in path: ${filePath}`);
+        }
+    });
+};
+export const runAll = () => {
+    checkManualDialogSet();
+};

package/dist/scripts/util/ManualCheckRun.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scripts/util/ManualCheckRun.js

@@ -0,0 +1,6 @@
+import { runAll } from "./ManualCheck";
+/**
+ * todo: Integrate manual check into CI check#137
+ * ISSUE #137 https://github.com/TurnipXenon/pineapple/issues/137
+ */
+runAll();

package/dist/store.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+/**
+ * Enables background in main layout
+ *
+ * @example
+ * When updating to false, remember to restore the value to true, our default value, onDestroy.
+ * Avoid async to prevent weird flashes of updates!
+ * ```
+ * import {enableBackground} from "./store.ts";
+ * enableBackground.update(() => false);
+ *
+ * onDestroy(() => {
+ *     enableBackground.update(() =>  true);
+ * });
+ * ```
+ */
+export declare const enableBackground: import("svelte/store").Writable<boolean>;

package/dist/store.js

@@ -0,0 +1,17 @@
+import { writable } from "svelte/store";
+/**
+ * Enables background in main layout
+ *
+ * @example
+ * When updating to false, remember to restore the value to true, our default value, onDestroy.
+ * Avoid async to prevent weird flashes of updates!
+ * ```
+ * import {enableBackground} from "./store.ts";
+ * enableBackground.update(() => false);
+ *
+ * onDestroy(() => {
+ *     enableBackground.update(() =>  true);
+ * });
+ * ```
+ */
+export const enableBackground = writable(true);

package/dist/styles/DefaultGridContainer.css

@@ -0,0 +1,61 @@
+.default-grid-container-title-card {
+	max-width: calc(var(--default-card-max-width) + 32rem) !important;
+	width: 100%;
+	padding: 2rem !important;
+	text-align: center !important;
+}
+
+.default-grid-container {
+	width: 100%;
+	max-width: calc(var(--default-card-max-width) + 32rem);
+	padding-top: 4rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+.default-grid-container > .card,
+.default-grid-container > .lite-wrapper {
+	width: 22rem;
+	margin: clamp(0vw, 1vw, 1.5rem);
+}
+
+.default-grid-container div h3 {
+	margin: 0.5em;
+	text-align: center;
+	font-weight: bold;
+}
+
+.default-grid-container video {
+	padding: var(--theme-border-base);
+}
+
+.default-grid-container img {
+	padding: var(--theme-border-base);
+	width: 100%;
+}
+
+.links {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+}
+
+.card.tx-badge {
+	object-fit: scale-down;
+	padding: 0.5rem;
+}
+
+img.tx-badge,
+.card.tx-badge {
+	max-height: 5rem;
+	max-width: 6rem;
+	margin: 1rem;
+}
+
+.twitter-wrapper {
+	padding: 1rem;
+}

package/dist/styles/global.css

@@ -0,0 +1 @@
+/* todo: delete if unneeded */