@turnipxenon/pineapple 1.1.2 → 2.2.1

package/dist/components/DialogOverlay.svelte

@@ -1,93 +0,0 @@
-<script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
-import { onMount } from "svelte";
-import { dialogManager } from "./dialog_manager/DialogManagerStore";
-let currentMessage = "";
-dialogManager.currentMessage.subscribe((value) => {
-  currentMessage = value;
-});
-let currentPortrait = AresHappy;
-dialogManager.currentPortrait.subscribe((value) => {
-  if (value) {
-    currentPortrait = value;
-  }
-});
-onMount(() => {
-  dialogManager.update(0);
-});
-let hidePercent = 100;
-dialogManager.hidePercent.subscribe((value) => {
-  hidePercent = value * 0.4;
-});
-const onDialogClick = () => {
-  dialogManager.skipAnimation();
-};
-</script>
-
-<div class="dialog-elements" 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">
-			<p><b>Turnip</b></p>
-		</div>
-		<section class="dialog-padding">
-			<!-- Made for 140 characters, like the original tweets -->
-			{@html currentMessage}
-		</section>
-	</div>
-</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;
-	}
-</style>

package/dist/components/DialogOverlay.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DialogOverlayProps = typeof __propDef.props;
-export type DialogOverlayEvents = typeof __propDef.events;
-export type DialogOverlaySlots = typeof __propDef.slots;
-export default class DialogOverlay extends SvelteComponent<DialogOverlayProps, DialogOverlayEvents, DialogOverlaySlots> {
-}
-export {};

package/dist/components/LazyAsset.svelte

@@ -1,96 +0,0 @@
-<script>import { LazyAssetStatus, LazyAssetType } from "./LazyAssetType";
-import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
-import { onMount } from "svelte";
-export let src;
-export let alt;
-export let width;
-export let height;
-export let props = {};
-props = {
-  ...props,
-  alt,
-  width,
-  height
-};
-let extension = "";
-const getAssetType = () => {
-  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 = getAssetType();
-let actualSrc = "";
-let status = 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>
-    .rotate {
-        animation: rotation 4s infinite linear;
-    }
-
-    @keyframes rotation {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(359deg);
-        }
-    }
-</style>

package/dist/components/LazyAsset.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src: string;
-        alt: string;
-        width: string;
-        height: string;
-        props?: {} | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LazyAssetProps = typeof __propDef.props;
-export type LazyAssetEvents = typeof __propDef.events;
-export type LazyAssetSlots = typeof __propDef.slots;
-export default class LazyAsset extends SvelteComponent<LazyAssetProps, LazyAssetEvents, LazyAssetSlots> {
-}
-export {};

package/dist/components/LazyAssetType.d.ts

@@ -1,10 +0,0 @@
-export declare enum LazyAssetType {
-    Image = 0,
-    Video = 1,
-    Unknown = 2
-}
-export declare enum LazyAssetStatus {
-    Loading = 0,
-    Loaded = 1,
-    Error = 2
-}

package/dist/components/LazyAssetType.js

@@ -1,12 +0,0 @@
-export var LazyAssetType;
-(function (LazyAssetType) {
-    LazyAssetType[LazyAssetType["Image"] = 0] = "Image";
-    LazyAssetType[LazyAssetType["Video"] = 1] = "Video";
-    LazyAssetType[LazyAssetType["Unknown"] = 2] = "Unknown";
-})(LazyAssetType || (LazyAssetType = {}));
-export var LazyAssetStatus;
-(function (LazyAssetStatus) {
-    LazyAssetStatus[LazyAssetStatus["Loading"] = 0] = "Loading";
-    LazyAssetStatus[LazyAssetStatus["Loaded"] = 1] = "Loaded";
-    LazyAssetStatus[LazyAssetStatus["Error"] = 2] = "Error";
-})(LazyAssetStatus || (LazyAssetStatus = {}));

package/dist/components/PineappleBaseLayout.svelte

@@ -1,186 +0,0 @@
-<script>import "../theme.postcss";
-import "@skeletonlabs/skeleton/styles/all.css";
-import "../app.postcss";
-import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
-import RandomizedBackground from "./RandomizedBackground.svelte";
-import { page } from "$app/stores";
-import { enableBackground } from "../store";
-import DialogOverlay from "./DialogOverlay.svelte";
-import AresLogo from "../assets/characters/ares/ares_logo.webp";
-import { enableDialogueOverlay } from "./dialog_manager/DialogManagerStore";
-let pages = [];
-const updateBreadcrumb = (pathname) => {
-  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);
-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>
-    :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 {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 4em;
-        margin-left: clamp(1em, 15vw, 10em);
-        margin-right: 1em;
-        flex-direction: column;
-        z-index: 0;
-}
-
-    .ares-logo {
-        -o-object-fit: contain;
-           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 {
-        display: flex;
-        width: 100%;
-        align-items: center;
-}
-    .breadcrumb > :not([hidden]) ~ :not([hidden]),
-    .breadcrumb-nonresponsive > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(1rem * var(--tw-space-x-reverse));
-        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
-        overflow-x: auto;
-        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
-}
-
-    .crumb {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-}
-
-    .crumb > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
-}
-    .crumb-separator {
-        display: flex;
-        opacity: 0.5;
-        color: rgb(var(--color-surface-700));
-}
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
-}
-
-    /* === Auto-Responsive === */
-
-    .breadcrumb li {
-        display: none;
-}
-
-    @media (min-width: 768px) {
-
-        .breadcrumb li {
-                display: block;
-        }
-}
-    .breadcrumb li:nth-last-child(3),
-    .breadcrumb li:nth-last-child(2),
-    .breadcrumb li:nth-last-child(1) {
-        display: block;
-}
-</style>

package/dist/components/PineappleBaseLayout.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-import "../theme.postcss";
-import "@skeletonlabs/skeleton/styles/all.css";
-import "../app.postcss";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PineappleBaseLayoutProps = typeof __propDef.props;
-export type PineappleBaseLayoutEvents = typeof __propDef.events;
-export type PineappleBaseLayoutSlots = typeof __propDef.slots;
-export default class PineappleBaseLayout extends SvelteComponent<PineappleBaseLayoutProps, PineappleBaseLayoutEvents, PineappleBaseLayoutSlots> {
-}
-export {};

package/dist/components/RandomizedBackground.svelte

@@ -1,62 +0,0 @@
-<script>import { generatedDailySeed, mulberry32Generator } from "../util/stable_random";
-import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
-import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";
-import BgTiledPineapple from "../assets/bg_tiled/bg_tiled_pineapple.png";
-import BgTiledReinhard from "../assets/bg_tiled/bg_tiled_reinhard.png";
-import BgTiledTomato from "../assets/bg_tiled/bg_tiled_tomato.png";
-import BgTiledTurnip from "../assets/bg_tiled/bg_tiled_turnip.png";
-import RandomizedImage from "./RandomizedImage.svelte";
-export let enable;
-const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
-const seed = generatedDailySeed();
-const rng = mulberry32Generator(seed);
-const shuffle = (array) => {
-  let currentIndex = array.length, randomIndex;
-  while (currentIndex != 0) {
-    randomIndex = Math.floor(rng() * currentIndex);
-    currentIndex--;
-    [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>
-    .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/dist/components/RandomizedBackground.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        enable: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RandomizedBackgroundProps = typeof __propDef.props;
-export type RandomizedBackgroundEvents = typeof __propDef.events;
-export type RandomizedBackgroundSlots = typeof __propDef.slots;
-export default class RandomizedBackground extends SvelteComponent<RandomizedBackgroundProps, RandomizedBackgroundEvents, RandomizedBackgroundSlots> {
-}
-export {};

package/dist/components/RandomizedImage.svelte

@@ -1,29 +0,0 @@
-<script>export let src;
-export let rng;
-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/dist/components/RandomizedImage.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src: URL;
-        rng: () => number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RandomizedImageProps = typeof __propDef.props;
-export type RandomizedImageEvents = typeof __propDef.events;
-export type RandomizedImageSlots = typeof __propDef.slots;
-export default class RandomizedImage extends SvelteComponent<RandomizedImageProps, RandomizedImageEvents, RandomizedImageSlots> {
-}
-export {};