@turnipxenon/pineapple 1.1.2

package/src/lib/components/LazyAsset.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+    import {LazyAssetStatus, LazyAssetType} from "$lib/components/LazyAssetType";
+    import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
+    import {onMount} from "svelte";
+
+    export let src: string;
+	export let alt: string;
+
+	// in pixels
+	export let width: string;
+	export let height: string;
+
+	// playsinline autoplay muted loop
+	// whatever your heart's content
+	export let props = {};
+	// todo: add size and alt text
+
+	props = {
+		...props,
+		alt,
+		width,
+		height
+	};
+
+	// auto detect asset type
+	let extension = "";
+	const getAssetType = (): LazyAssetType => {
+		const srcArray = src.split(".");
+		extension = srcArray[srcArray.length - 1];
+		switch (extension) {
+			case "png":
+			case "webp":
+			case "gif":
+			case "jpg":
+				return LazyAssetType.Image;
+			case "ogg":
+			case "webm":
+			case "mp4":
+				return LazyAssetType.Video;
+			default:
+				console.log(`Unknown asset type for: ${src}`);
+				return LazyAssetType.Unknown;
+		}
+	};
+	const assetType: LazyAssetType = getAssetType();
+
+	let actualSrc = "";
+	let status: LazyAssetStatus = LazyAssetStatus.Loading;
+
+	onMount(async () => {
+		const path = src.includes("https://") ? src : `${window.location.origin}${src}`;
+
+        switch(assetType) {
+            case LazyAssetType.Image: {
+                const img = new Image();
+                img.onload = () => {
+                    actualSrc = path;
+                    status = LazyAssetStatus.Loaded;
+                }
+                img.src = path;
+                break;
+            }
+            case LazyAssetType.Video: {
+                fetch(path)
+                    .then(resp => resp.blob())
+                    .then(blob => {
+                        actualSrc = URL.createObjectURL(blob);
+                        status = LazyAssetStatus.Loaded;
+                    })
+                    .catch(error => {
+                        console.warn(error);
+                        status = LazyAssetStatus.Error;
+                    });
+                break;
+            }
+            case LazyAssetType.Unknown: {
+                console.warn("Unknown asset: ", path)
+                status = LazyAssetStatus.Error;
+                break;
+            }
+
+        }
+	});
+</script>
+
+{#if status === LazyAssetStatus.Loaded}
+	{#if assetType === LazyAssetType.Image}
+		<img src={actualSrc} alt="Placeholder image" {...props} />
+	{:else if assetType === LazyAssetType.Video}
+		<video playsinline autoplay muted loop {...props} poster={BgTiledAres} style="object-fit: scale-down">
+			<source src={actualSrc} type={`video/${extension}`} />
+			Your browser does not support the video tag.
+		</video>
+	{:else}
+		<img src={actualSrc} alt="Placeholder image" />
+	{/if}
+{:else}
+	<img class="rotate" src={BgTiledAres} {...props} style="object-fit: scale-down" />
+{/if}
+
+<style lang="postcss">
+    .rotate {
+        animation: rotation 4s infinite linear;
+    }
+
+    @keyframes rotation {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(359deg);
+        }
+    }
+</style>

package/src/lib/components/LazyAssetType.ts

@@ -0,0 +1,11 @@
+export enum LazyAssetType {
+	Image,
+	Video,
+	Unknown
+}
+
+export enum LazyAssetStatus {
+	Loading,
+	Loaded,
+	Error
+}

package/src/lib/components/PineappleBaseLayout.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	// The ordering of these imports is critical to your app working properly
+	import "../theme.postcss";
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	import "@skeletonlabs/skeleton/styles/all.css";
+	// Most of your app wide CSS should be put in this file
+	import "../app.postcss";
+	// 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 { 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>
+
+<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;
+    }
+</style>

package/src/lib/components/RandomizedBackground.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { generatedDailySeed, mulberry32Generator } from "$lib/util/stable_random";
+	import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
+	import BgTiledCorn from "$lib/assets/bg_tiled/bg_tiled_corn.png";
+	import BgTiledPineapple from "$lib/assets/bg_tiled/bg_tiled_pineapple.png";
+	import BgTiledReinhard from "$lib/assets/bg_tiled/bg_tiled_reinhard.png";
+	import BgTiledTomato from "$lib/assets/bg_tiled/bg_tiled_tomato.png";
+	import BgTiledTurnip from "$lib/assets/bg_tiled/bg_tiled_turnip.png";
+	import RandomizedImage from "$lib/components/RandomizedImage.svelte";
+
+	export let enable;
+
+	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
+
+	const seed = generatedDailySeed();
+	const rng = mulberry32Generator(seed);
+
+	const shuffle = (array: any[]): any[] => {
+		// from: community wiki @ https://stackoverflow.com/a/2450976/17836168
+		let currentIndex = array.length,
+			randomIndex;
+
+		// While there remain elements to shuffle.
+		while (currentIndex != 0) {
+			// Pick a remaining element.
+			randomIndex = Math.floor(rng() * currentIndex);
+			currentIndex--;
+
+			// And swap it with the current element.
+			[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+		}
+
+		return array;
+	};
+
+	let generatedImageList = [];
+	let component;
+
+	for (let i = 0; i < 20; i++) {
+		shuffle(imageList);
+		generatedImageList = generatedImageList.concat(imageList);
+	}
+</script>
+
+<svelte:head>
+	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
+	{#each imageList as image}
+		<link rel="preload" as="image" href={image} />
+	{/each}
+	<link
+		as="video"
+		href="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4"
+		rel="preload"
+	/>
+</svelte:head>
+
+{#if enable}
+	<div class="default-background" aria-hidden="true">
+		{#each generatedImageList as imageItem}
+			<svelte:component this={RandomizedImage} src={imageItem} {rng} />
+		{/each}
+	</div>
+{/if}
+
+<style lang="postcss">
+    .default-background {
+        position: fixed;
+        display: flex;
+        margin-top: -8rem;
+        margin-left: -8rem;
+        width: calc(100vw + 16rem);
+        height: calc(100vh + 16rem);
+        flex-wrap: wrap;
+        overflow: hidden;
+        z-index: -10;
+    }
+</style>

package/src/lib/components/RandomizedImage.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let src: URL;
+	export let rng: () => number;
+	let rotateRandom = rng() * 90 - 45;
+
+	const paddingLeft = 1 + rng() * 5;
+	const paddingRight = 1 + rng() * 5;
+	const paddingTop = 1 + rng() * 7;
+</script>
+
+<div
+	style="--paddingTop: {paddingTop}rem;
+        --paddingLeft: {paddingLeft}rem;
+        --paddingRight: {paddingRight}rem;"
+>
+	<img {src} aria-hidden="true" style="--rotateRandom:{rotateRandom}deg;" alt="" />
+</div>
+
+<style>
+	div {
+		padding-top: var(--paddingTop);
+		padding-left: var(--paddingLeft);
+		padding-right: var(--paddingRight);
+	}
+
+	img {
+		width: 8rem;
+		height: 8rem;
+		transform: rotate(var(--rotateRandom));
+	}
+</style>

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

@@ -0,0 +1,282 @@
+/**
+ * DialogManager is the object we want to interact with in Svelte
+ */
+
+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 { 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";
+import AresDisappointed from "$pkg/assets/characters/ares/ares_disappointed.webp";
+import AresLetsGo from "$pkg/assets/characters/ares/ares_lets_go.webp";
+import AresMad from "$pkg/assets/characters/ares/ares_mad.webp";
+import AresNeutral from "$pkg/assets/characters/ares/ares_neutral.webp";
+import AresSlightlyMad from "$pkg/assets/characters/ares/ares_slightly_mad.webp";
+import AresSurprised from "$pkg/assets/characters/ares/ares_surprised.webp";
+import AresYay from "$pkg/assets/characters/ares/ares_yay.webp";
+import {
+	defaultDialogMessage,
+	dialogVariableStore,
+	enableDialogueOverlay,
+	updateRate
+} from "$pkg/components/dialog_manager/DialogManagerStore";
+import { DialogProcessor } from "$pkg/components/dialog_manager/DialogProcessor";
+
+const shouldDebugYarn = false;
+
+export type OnSetDialogChoiceCallback = (newMessage: DialogDetail) => void;
+
+export class DialogManager {
+	dialogMessageMap: Map<string, DialogDetail> = new Map();
+	dialogMessageList: DialogDetail[] = [];
+	fullCurrentMessage: string = defaultDialogMessage[0].textContent;
+	currentMessageMeta: DialogDetail = defaultDialogMessage[0];
+	currentMessage = writable("");
+	currentIndex = 0;
+	previousTimestamp = 0;
+	isDoneTransition = false;
+	currentPortrait = writable();
+	portraitMap: Map<string, any> = new Map();
+	currentState = DialogState.Visible;
+	hidePercent = tweened(100, {
+		duration: 400,
+		easing: cubicOut
+	}); // 100 = 100%
+	skipNextActiveTime = 0;
+	dialogProcessor = new DialogProcessor();
+	// for queueing actions
+	_setDialogChoiceQueue: DialogDetail[] = [];
+	_setDialogChoiceMutex = false;
+	onSetDialogListeners: OnSetDialogChoiceCallback[] = [];
+
+	constructor() {
+		enableDialogueOverlay.subscribe((value) => {
+			// todo: investigate why we cant put setDialogDefault inside the then clause
+			// ISSUE #82 https://github.com/TurnipXenon/pineapple/issues/82
+			if (value) {
+				this.hidePercent.set(0);
+				this.setDialogToDefault();
+			} else {
+				this.hidePercent.set(100);
+				this.setDialogTree([{ textContent: "" }]);
+			}
+		});
+	}
+
+	/**
+	 * when users interact with the dialog, they can skip the transition like in a game
+	 * note that there is a cool down to this, check out skipNextActiveTime
+	 */
+	skipAnimation = () => {
+		if (
+			this.previousTimestamp > this.skipNextActiveTime &&
+			this.currentState == DialogState.Visible &&
+			!this.isDoneTransition // crucial for dynamic links!
+		) {
+			this.currentIndex = this.fullCurrentMessage.length - 1;
+			this.currentMessage.update(() => this.fullCurrentMessage.slice(0, this.currentIndex));
+		}
+	};
+
+	/**
+	 * hides or shows the dialog UI
+	 * @param shouldEnable
+	 */
+	enableDialog = (shouldEnable: boolean) => {
+		enableDialogueOverlay.update(() => shouldEnable);
+	};
+
+	/**
+	 * 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
+	 */
+	setDialogTree = (newMessageList: DialogDetail[]) => {
+		this.dialogMessageList = newMessageList;
+
+		this.dialogMessageMap.clear();
+		newMessageList.map((value) => {
+			if (value.dialogId) {
+				this.dialogMessageMap.set(value.dialogId!, value);
+			}
+		});
+
+		// lazy load map
+		if (this.portraitMap.size == 0) {
+			this.portraitMap.set(PortraitType.AresHappy.toString(), AresHappy);
+			this.portraitMap.set(PortraitType.AresBlushing.toString(), AresBlushing);
+			this.portraitMap.set(PortraitType.AresDisappointed.toString(), AresDisappointed);
+			this.portraitMap.set(PortraitType.AresLetsGo.toString(), AresLetsGo);
+			this.portraitMap.set(PortraitType.AresMad.toString(), AresMad);
+			this.portraitMap.set(PortraitType.AresNeutral.toString(), AresNeutral);
+			this.portraitMap.set(PortraitType.AresSlightlyMad.toString(), AresSlightlyMad);
+			this.portraitMap.set(PortraitType.AresSurprised.toString(), AresSurprised);
+			this.portraitMap.set(PortraitType.AresYay.toString(), AresYay);
+		}
+
+		this.setDialogChoice(newMessageList[0]);
+	};
+
+	/**
+	 * Remember to call this before SetDialogTree
+	 * and unsubscribe during onDestroy
+	 * @param callback
+	 */
+	subscribeToSetDialogChoice = (callback: OnSetDialogChoiceCallback) => {
+		this.onSetDialogListeners.push(callback);
+	};
+
+	/**
+	 * Remember to call this during onDestroy
+	 * @param callback
+	 * todo: double check if this works???
+	 */
+	unsubscribeToSetDialogChoice = (callback: OnSetDialogChoiceCallback) => {
+		// from: https://stackoverflow.com/a/5767357/17836168
+		const index = this.onSetDialogListeners.indexOf(callback);
+		if (index > -1) {
+			// only splice array when item is found
+			this.onSetDialogListeners.splice(index, 1); // 2nd parameter means remove one item only
+		}
+	};
+
+	/**
+	 * Sets the next dialog to show depending on which special choice a href link the user
+	 * has interacted with
+	 * @param newMessage
+	 *
+	 * you can listen to this!
+	 */
+	setDialogChoice = (newMessage: DialogDetail | undefined) => {
+		if (!newMessage || !newMessage.textContent) {
+			return;
+		}
+
+		this._setDialogChoiceQueue.push(newMessage);
+
+		if (!this._setDialogChoiceMutex) {
+			this._setDialogChoiceMutex = true; // not a true mutex but this will do
+			this._setDialogChoice();
+		}
+	};
+
+	_setDialogChoice = () => {
+		const newMessage = this._setDialogChoiceQueue.shift();
+		if (newMessage === undefined) {
+			this._setDialogChoiceMutex = false; // set it free!
+			this.onSetDialogListeners.forEach((listener) => {
+				listener(this.currentMessageMeta);
+			});
+			return;
+		}
+
+		this.currentMessageMeta = newMessage;
+
+		// set the portrait
+		let portraitValue = AresHappy;
+		if (this.currentMessageMeta.portraitType) {
+			portraitValue = this.portraitMap.get(this.currentMessageMeta.portraitType);
+		}
+		if (portraitValue) {
+			this.currentPortrait.update(() => portraitValue);
+		}
+
+		// process the dialogue here line-by-line
+		this.fullCurrentMessage = this.dialogProcessor.processDialog(this.currentMessageMeta);
+		this.currentMessage.update(() => "");
+		this.currentIndex = 0;
+		this.skipNextActiveTime = this.previousTimestamp + 1000; // guard
+		this.isDoneTransition = false; // must be after the guard
+
+		if (shouldDebugYarn) {
+			console.info(`Currently processing node: ${this.currentMessageMeta.dialogId}`);
+		}
+
+		// save that we visited AND processed the node
+		if (this.currentMessageMeta.dialogId) {
+			const key = `+${this.currentMessageMeta.dialogId}`;
+			const value = Number(dialogVariableStore.getItem(key));
+			if (isNaN(value)) {
+				dialogVariableStore.setItem(key, "1");
+			} else {
+				dialogVariableStore.setItem(key, `${value + 1}`);
+			}
+		}
+
+		// reloop this to process all messages
+		this._setDialogChoice();
+	};
+
+	setDialogToDefault = () => {
+		this.setDialogTree(defaultDialogMessage);
+	};
+
+	/**
+	 * updates the information and detail frame by frame
+	 * you can think of this like the main game loop
+	 *
+	 * @param timestamp
+	 *
+	 * todo: this might be too big we might want to refactor this method for better readability
+	 * ISSUE #81 https://github.com/TurnipXenon/pineapple/issues/81
+	 */
+	update = (timestamp: number) => {
+		if (this.currentState == DialogState.Invisible || this.currentState == DialogState.Busy) {
+			window.requestAnimationFrame(this.update);
+			return;
+		}
+
+		// if visible
+
+		// text transition loop
+		if (!this.isDoneTransition && this.currentIndex > this.fullCurrentMessage.length) {
+			const elementList = document.getElementsByClassName("dialog-choice");
+			for (const el of elementList) {
+				el.addEventListener("click", (event) => {
+					// todo: make more robust; for now we're assuming first class is our choice
+					const choice = el.classList[0].split("-")[1];
+					this.setDialogChoice(this.dialogMessageMap.get(choice));
+				});
+			}
+
+			this.isDoneTransition = true;
+		}
+
+		// guard: skip if done or if not yet time to update
+		if (
+			this.currentIndex > this.fullCurrentMessage.length ||
+			this.previousTimestamp + updateRate > timestamp
+		) {
+			window.requestAnimationFrame(this.update);
+			return;
+		}
+		this.previousTimestamp = timestamp;
+
+		// check if valid text
+		// there is an assumption that previous character is valid
+		// let validCharacterIndex = this.currentLength - 1;
+		// validCharacterIndex++;
+		// the code above is just to show you how it looks like but let's assume
+		// that currentLength = validCharacter + 1
+		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
+			this.currentIndex = Math.min(this.currentIndex, this.fullCurrentMessage.length - 1);
+		}
+
+		this.currentMessage.update(() => this.fullCurrentMessage.slice(0, this.currentIndex));
+
+		// increment
+		++this.currentIndex;
+
+		window.requestAnimationFrame(this.update);
+	};
+}