@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha.1

package/dist/assets/icons/icon-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm40-83q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z"/></svg>

package/dist/assets/icons/icon-dark-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/dist/assets/icons/icon-light-mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

package/dist/assets/icons/icon-settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

package/dist/components/Card.svelte

@@ -1,59 +1,61 @@
-<script>export let margin = "0";
-export let marginBottom = "2lh";
-export let overrideStyle = "";
-export let includeDataNoSnippet = true;
-export let additionalClass = [];
-export let turnOnLightModeBorder = true;
-const style = `
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	interface Props {
+		margin?: string;
+		marginBottom?: string;
+		overrideStyle?: string;
+		includeDataNoSnippet?: boolean;
+		additionalClass?: string[];
+		turnOnLightModeBorder?: boolean;
+		content?: import('svelte').Snippet<[any]>;
+	}
+
+	let {
+		margin = "0",
+		marginBottom = "2lh",
+		overrideStyle = "",
+		includeDataNoSnippet = true,
+		additionalClass = [],
+		turnOnLightModeBorder = true,
+		content
+	}: Props = $props();
+
+	// warning: don't forget the semi-colon when adding new style!
+	const style = `
 		--turnip-card-margin: ${margin};
 		--turnip-card-margin-bottom: ${marginBottom};
 		${overrideStyle};
 	`;
-if (!$$slots.content) {
-  console.error("Missing content slot in card. No content will be displayed.");
-}
-const originalClasses = ["card", "turnip-card"].concat(additionalClass).join(" ");
-let classes = originalClasses.slice();
-const toggleLightModeBorder = (turnOnLightModeBorder2) => {
-  classes = originalClasses;
-  if (turnOnLightModeBorder2) {
-    classes += " light-mode-border";
-  }
-};
-$:
-  toggleLightModeBorder(turnOnLightModeBorder);
+
+	if (!content) {
+		console.error("Missing content slot in card. No content will be displayed.");
+	}
+
+	const originalClasses = ["card", "turnip-card bg-surface-100 dark:bg-surface-900"].concat(additionalClass).join(" ");
+	let classes = $state(originalClasses.slice());
+	const toggleLightModeBorder = (turnOnLightModeBorder: boolean) => {
+		classes = originalClasses;
+		if (turnOnLightModeBorder) {
+			classes += " light-mode-border border-surface-600 border-2 dark:border-0";
+		}
+	};
+	run(() => {
+		toggleLightModeBorder(turnOnLightModeBorder);
+	});
 </script>
 
 {#if (includeDataNoSnippet)}
 	<div class={classes} style={style} data-nosnippet>
-		<slot name="content" class="card" />
+		{@render content?.({ class: "card", })}
 	</div>
 {:else }
 	<div class={classes} style={style}>
-		<slot name="content" class="card" />
+		{@render content?.({ class: "card", })}
 	</div>
 {/if}
 
 <style>
-    /*noinspection CssUnusedSymbol*/
-    .light-mode-border {
-        border-width: 2px;
-        --tw-border-opacity: 1;
-        border-color: rgb(var(--color-surface-600) / var(--tw-border-opacity));
-}
-    :is(.dark .light-mode-border) {
-        border-width: 0px;
-}
-
-    /*noinspection CssUnusedSymbol*/
-    .turnip-card {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
-}
-    :is(.dark .turnip-card) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
-}
     .turnip-card {
         margin: var(--turnip-card-margin);
         margin-bottom: var(--turnip-card-margin-bottom);

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

@@ -1,25 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        margin?: string | undefined;
-        marginBottom?: string | undefined;
-        overrideStyle?: string | undefined;
-        includeDataNoSnippet?: boolean | undefined;
-        additionalClass?: string[] | undefined;
-        turnOnLightModeBorder?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        content: {
-            class: string;
-        };
-    };
-};
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+interface Props {
+    margin?: string;
+    marginBottom?: string;
+    overrideStyle?: string;
+    includeDataNoSnippet?: boolean;
+    additionalClass?: string[];
+    turnOnLightModeBorder?: boolean;
+    content?: import('svelte').Snippet<[any]>;
 }
-export {};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/CarouselElement.svelte

@@ -1,21 +1,28 @@
-<script>export let activeGameIndex;
-export let selfIndex;
-import { fly, slide, scale } from "svelte/transition";
+<script lang="ts">
+
+    import {fly, slide, scale} from "svelte/transition";
+    interface Props {
+        activeGameIndex: number;
+        selfIndex: number;
+        children?: import('svelte').Snippet;
+    }
+
+    let { activeGameIndex, selfIndex, children }: Props = $props();
+
 </script>
 
 {#if (activeGameIndex === selfIndex)}
 	<!--todo: make section consistent size for all-->
 	<section class="game-showcase"
 	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		<slot/>
+		{@render children?.()}
 	</section>
 {/if}
 
 <style>
     .game-showcase {
-        scroll-snap-align: center;
-        border-radius: var(--theme-rounded-container);
+        @apply snap-center rounded-container;
         margin: auto;
-        width: 100%
-}
+        width: 100%;
+    }
 </style>

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        activeGameIndex: number;
-        selfIndex: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CarouselElementProps = typeof __propDef.props;
-export type CarouselElementEvents = typeof __propDef.events;
-export type CarouselElementSlots = typeof __propDef.slots;
-export default class CarouselElement extends SvelteComponent<CarouselElementProps, CarouselElementEvents, CarouselElementSlots> {
+interface Props {
+    activeGameIndex: number;
+    selfIndex: number;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const CarouselElement: import("svelte").Component<Props, {}, "">;
+type CarouselElement = ReturnType<typeof CarouselElement>;
+export default CarouselElement;

package/dist/components/ElementVisbilityDetector.svelte

@@ -1,18 +1,27 @@
-<script>import { onMount } from "svelte";
-export let isVisible = true;
-let stickyElem;
-let observer;
-onMount(() => {
-  observer = new IntersectionObserver(
-    ([e]) => {
-      isVisible = e.intersectionRatio >= 1;
-    },
-    { threshold: [1] }
-  );
-  observer.observe(stickyElem);
-});
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    interface Props {
+        isVisible?: boolean;
+        children?: import('svelte').Snippet;
+    }
+
+    let { isVisible = $bindable(true), children }: Props = $props();
+
+    let stickyElem: HTMLElement = $state();
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isVisible = e.intersectionRatio >= 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
 </script>
 
 <span bind:this={stickyElem}>
-	<slot/>
+	{@render children?.()}
 </span>

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

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        isVisible?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ElementVisbilityDetectorProps = typeof __propDef.props;
-export type ElementVisbilityDetectorEvents = typeof __propDef.events;
-export type ElementVisbilityDetectorSlots = typeof __propDef.slots;
-export default class ElementVisbilityDetector extends SvelteComponent<ElementVisbilityDetectorProps, ElementVisbilityDetectorEvents, ElementVisbilityDetectorSlots> {
+interface Props {
+    isVisible?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const ElementVisbilityDetector: import("svelte").Component<Props, {}, "isVisible">;
+type ElementVisbilityDetector = ReturnType<typeof ElementVisbilityDetector>;
+export default ElementVisbilityDetector;

package/dist/components/LazyAsset.svelte

@@ -1,68 +1,96 @@
-<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 lang="ts">
+    import {LazyAssetStatus, LazyAssetType} from "./LazyAssetType";
+    import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
+    import {onMount} from "svelte";
+
+
+	// in pixels
+
+	// playsinline autoplay muted loop
+	// whatever your heart's content
+	interface Props {
+		src: string;
+		alt: string;
+		width: string;
+		height: string;
+		props?: any;
+	}
+
+	let {
+		src,
+		alt,
+		width,
+		height,
+		props = $bindable({})
+	}: Props = $props();
+	// todo: add size and alt text
+
+	props = {
+		...props,
+		alt,
+		width,
+		height
+	};
+
+	// auto detect asset type
+	let extension = $state("");
+	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 = $state("");
+	let status: LazyAssetStatus = $state(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}

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

@@ -1,20 +1,10 @@
-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> {
+interface Props {
+    src: string;
+    alt: string;
+    width: string;
+    height: string;
+    props?: any;
 }
-export {};
+declare const LazyAsset: import("svelte").Component<Props, {}, "props">;
+type LazyAsset = ReturnType<typeof LazyAsset>;
+export default LazyAsset;

package/dist/components/PineappleSlideToggle.svelte

@@ -1,12 +1,24 @@
-<script>export let checked = false;
-export let name;
-export let onChange = void 0;
-import { SlideToggle } from "@skeletonlabs/skeleton";
+<script lang="ts">
+
+	import { Switch } from "@skeletonlabs/skeleton-svelte";
+	interface Props {
+		checked?: boolean;
+		name: string;
+		onChange?: undefined | (() => void);
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		name,
+		onChange = undefined,
+		children
+	}: Props = $props();
 </script>
 
-<SlideToggle name={name}
+<Switch name={name}
              background="bg-surface-700 dark:bg-surface-700"
              bind:checked={checked}
              on:change={onChange}>
-	<slot />
-</SlideToggle>
+	{@render children?.()}
+</Switch>

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

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        checked?: boolean | undefined;
-        name: string;
-        onChange?: undefined | (() => void);
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PineappleSlideToggleProps = typeof __propDef.props;
-export type PineappleSlideToggleEvents = typeof __propDef.events;
-export type PineappleSlideToggleSlots = typeof __propDef.slots;
-export default class PineappleSlideToggle extends SvelteComponent<PineappleSlideToggleProps, PineappleSlideToggleEvents, PineappleSlideToggleSlots> {
+interface Props {
+    checked?: boolean;
+    name: string;
+    onChange?: undefined | (() => void);
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const PineappleSlideToggle: import("svelte").Component<Props, {}, "checked">;
+type PineappleSlideToggle = ReturnType<typeof PineappleSlideToggle>;
+export default PineappleSlideToggle;

package/dist/components/RandomizedBackground.svelte

@@ -1,29 +1,48 @@
-<script>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";
-import { generatedDailySeed, mulberry32Generator } from "../util/util";
-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 = [];
-for (let i = 0; i < 20; i++) {
-  shuffle(imageList);
-  generatedImageList = generatedImageList.concat(imageList);
-}
+<script lang="ts">
+	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";
+	import { generatedDailySeed, mulberry32Generator } from "../util/util";
+
+	interface Props {
+		enable: any;
+	}
+
+	let { enable }: Props = $props();
+
+	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: string[] = $state([]);
+
+	for (let i = 0; i < 20; i++) {
+		shuffle(imageList);
+		generatedImageList = generatedImageList.concat(imageList);
+	}
 </script>
 
 <svelte:head>
@@ -42,7 +61,7 @@ for (let i = 0; i < 20; i++) {
 {#if enable}
 	<div class="default-background" aria-hidden="true">
 		{#each generatedImageList as imageItem}
-			<svelte:component this={RandomizedImage} src={imageItem} {rng} />
+			<RandomizedImage src={imageItem} {rng} />
 		{/each}
 	</div>
 {/if}

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

@@ -1,16 +1,6 @@
-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> {
+interface Props {
+    enable: any;
 }
-export {};
+declare const RandomizedBackground: import("svelte").Component<Props, {}, "">;
+type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
+export default RandomizedBackground;