@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.1

package/dist/components/blog_template/BlogTemplate.svelte

@@ -3,7 +3,7 @@
 	import { enableBackground } from "../../store";
 	import { onDestroy, onMount } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
-	import type { SimplePageMeta } from "../navigation_component/index";
+	import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 	import { default as Card } from "../Card.svelte";
 

package/dist/components/blog_template/BlogTemplate.svelte.d.ts

@@ -1,5 +1,5 @@
 import "./blog-template.css";
-import type { SimplePageMeta } from "../navigation_component/index";
+import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;

package/dist/components/blog_template/BlogTemplateInner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SimplePageMeta } from "../navigation_component/index";
+	import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 
 	interface Props {
 		pageMeta: SimplePageMeta;

package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SimplePageMeta } from "../navigation_component/index";
+import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     children?: import('svelte').Snippet;

package/dist/components/dialog_manager/DialogMangerInit.d.ts

@@ -1,2 +1,2 @@
 import type { IDialogManager } from "./IDialogManager";
-export declare const getDialogManager: () => Promise<IDialogManager>;
+export declare const getDialogManager: () => Promise<IDialogManager | undefined>;

package/dist/components/dialog_manager/IDialogManager.d.ts

@@ -13,7 +13,7 @@ export interface IDialogManager {
     currentIndex: number;
     previousTimestamp: number;
     isDoneTransition: boolean;
-    currentPortrait: Writable<unknown>;
+    currentPortrait: Writable<string>;
     portraitMap: Map<string, any>;
     currentState: DialogState;
     currentReadableState: Writable<DialogState>;

package/dist/components/dialog_overlay/DialogOverlay.svelte

@@ -4,9 +4,17 @@
 	import { DialogState } from "../../types/pineapple_fiber/DialogState";
 	import { getDialogManager } from "../dialog_manager/DialogMangerInit";
 	import type { IDialogManager } from "../dialog_manager/IDialogManager";
+	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
+	import { appState } from "../../ui/templates/index";
+	import CloseIcon from "../../assets/icons/close.svg";
+	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
+	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import { PinyaButton } from "../../ui/elements/index";
+	import { slide } from "svelte/transition";
 
 	let currentMessage = $state("");
 	let currentPortrait = $state(AresHappy);
+	let isMounted = $state(false);
 
 	let hidePercent = $state(100);
 	let isHidden = $state(true);
@@ -36,6 +44,7 @@
 				});
 
 				dialogManager.update(0);
+				isMounted = true;
 			});
 
 	});
@@ -44,6 +53,12 @@
 		dialogManager?.skipAnimation();
 	};
 
+	let enableDialogueOverlayValue = $state(true);
+	enableDialogueOverlay.subscribe((value) => {
+		enableDialogueOverlayValue = value;
+	});
+
+	enableDialogueOverlay.set(appState.enableDialogOnByDefault ?? false);
 </script>
 
 <div class="dialog-elements"
@@ -53,18 +68,64 @@
 	<div class="dialog-portrait-container">
 		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	</div>
-	<div class="card dialog-box preset-tonal-primary border border-primary-500" onclick={onDialogClick}>
-		<div class="card dialog-name">
-			<p><b>Turnip</b></p>
-		</div>
-		<section class="dialog-padding">
+	<div
+		tabindex="0"
+		role="button"
+		class="dialog-box"
+		onclick={onDialogClick}
+		onkeyup={(e) => {
+			if (e.key === 'j') {
+				onDialogClick()
+;			}
+		}}
+	>
+		<PinyaCard
+			widthClass=""
+			paddingClass=""
+			className="dialog-name"
+		>
+			<div>
+				<b class="fake-h1">Turnip</b>
+			</div>
+		</PinyaCard>
+		<PinyaCard
+			widthClass="w-full"
+			className="dialog-text"
+		>
 			<!-- Made for 140 characters, like the original tweets -->
 			{@html currentMessage}
-		</section>
+		</PinyaCard>
 	</div>
 </div>
 
+
+{#if appState.allowDialog && isMounted}
+	<div class="fab-container" in:slide>
+		<PinyaButton
+			classes="fab"
+			onclick={()=>{
+	getDialogManager().then(dm => dm.toggleDialogOverlay());
+}}>
+			{#if (enableDialogueOverlayValue)}
+				<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+			{:else }
+				<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
+			{/if}
+		</PinyaButton>
+	</div>
+{/if}
+
 <style>
+    :global(.dialog-text) {
+        height: 100%;
+        padding: 1.2lh 2rem 0.5lh;
+    }
+
+    :global(.dialog-box *,.dialog-name *) {
+        font-size: clamp(1em, 5vw, 1.3em);
+        line-height: 1.5em;
+    }
+
     .dialog-elements {
         position: fixed;
         z-index: 10;
@@ -82,11 +143,6 @@
         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;
@@ -97,19 +153,18 @@
         padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
     }
 
-    .dialog-name {
-        padding-top: 2rem;
-        padding-left: 4rem;
-        padding-right: 4rem;
+    :global(.dialog-name) {
+        padding-left: 2rem;
+        padding-right: 2rem;
         position: fixed;
     }
 
-    .dialog-name:dir(ltr) {
+    :global(.dialog-name:dir(ltr)) {
         /* for centering vertically */
         transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
     }
 
-    .dialog-name:dir(rtl) {
+    :global(.dialog-name:dir(rtl)) {
         /* for centering vertically */
         transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
     }
@@ -138,4 +193,59 @@
     .dialog-portrait:dir(rtl) {
         transform: scaleX(-1);
     }
+
+
+    .dialog-box {
+        background-color: var(--color-surface-500);
+        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));
+        border-radius: 1rem;
+    }
+
+    .dark .dialog-box {
+        background-color: rgb(var(--color-surface-900) / 0.95);
+        --tw-ring-color: rgb(var(--color-text-400));
+        /*background-color: red;*/
+    }
+
+    :global(.fab) {
+        /*@apply btn preset-filled-tertiary-500;*/
+        background-color: var(--color-tertiary-500);
+        padding: 0.3rem;
+        width: 4em;
+        border-radius: 50%;
+        z-index: 100;
+        box-shadow: 3px 3px 3px var(--shadow-color);
+        margin-bottom: var(--fab-margin);
+    }
+
+    .fab-container {
+        position: fixed;
+		    bottom: 0;
+    }
+
+    .fab-container:dir(ltr) {
+        right: 0;
+    }
+
+    .fab-container:dir(rtl) {
+        left: 0;
+    }
+
+    :global(.fab > img) {
+        width: 100%;
+        filter: brightness(0) invert(1);
+    }
+
+    :global(.fab:dir(ltr)) {
+        margin-right: var(--fab-margin);
+    }
+
+    :global(.fab:dir(rtl)) {
+        margin-left: var(--fab-margin);
+    }
+
 </style>

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -90,12 +90,6 @@
 </div>
 
 <style>
-    :root {
-        --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);
-    }
-
     .default-page-container {
         max-width: 2100px;
         margin: 4em auto;

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -137,25 +137,6 @@
 </div>
 
 <style>
-    :root {
-        --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:
-						Criteria:
-						- We want at mobile (360px) our margin to be at 1em (16px)
-						- We want at web (1960px) our margin to be at 2em (32px)
-
-						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
-						At 360px: margin is at 16px or 1em.
-						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
-						The calculation implies that the natural point that the margin becomes 2em is clamped on
-						wider screens is at 727px.
-				*/
-        --fab-margin: clamp(1em, 4.44vw, 2em);
-    }
-
     /*todo*/
     /*@apply flex justify-center items-center;*/
     .default-page-container {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export * from "./components/index";
 export * from "./components/overrideable_meta/index";
-export * from "./components/navigation_component/index";
+export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";

package/dist/index.js

@@ -2,7 +2,7 @@
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export * from "./components/index";
 export * from "./components/overrideable_meta/index";
-export * from "./components/navigation_component/index";
+export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";

package/dist/styles/app.css

@@ -10,16 +10,25 @@
 
 @custom-variant turnip (&:where([data-theme=turnip], [data-theme=turnip] *));
 
+html {
+    --dialog-start-pad: clamp(0em, 5vw, 2em);
+    --dialog-box-width: min(calc(54em), calc(100vw - var(--dialog-start-pad) - 2px));
+    --dialog-box-height: clamp(15em, 50vw, 18em);
+    --fab-margin: 1rem;
+}
+
 .footer-space {
     width: 100%;
     height: calc(var(--dialog-box-height) + 4em);
 }
 
 a.dialog-choice {
+    font-size: inherit;
     cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
 }
 
 a.external-link {
+    font-size: inherit;
     cursor: url("$pkg/assets/icons/external-link.svg"), auto;
 }
 
@@ -37,20 +46,6 @@ a.external-link {
     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;*/
-}
 
 @layer base {
     .game-link-section {

package/dist/ui/components/ModalBase.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-	import { scale } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	import type { ModalProps } from 'svelte-modals';
-
-	import { onMount, type Snippet } from 'svelte';
-	import { PinyaCard } from '../elements';
-
-	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
-	interface ModalBaseProps extends ModalProps {
-		children: Snippet,
-	}
-
-	let {
-		children,
-		isOpen,
-		close
-	}: ModalBaseProps = $props();
-
-	let container: HTMLDivElement;
-	onMount(() => {
-		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
-		if (focusableElement) {
-			(focusableElement as HTMLElement).focus();
-		}
-
-		document.addEventListener('keydown', (e) => {
-			if (e.code === 'Escape') {
-				close();
-			}
-		});
-	});
-</script>
-
-{#if isOpen}
-	<dialog aria-modal="true" in:scale|global={{
-		start: 0.95,
-		duration: 750,
-		easing: elasticOut,
-		opacity: 0.9
-	}}>
-		<div class="interactable" bind:this={container}>
-			<PinyaCard
-				widthClass="max-w-xl2"
-				paddingClass="pl-8 pr-8 pt-4 pb-8"
-			>
-				{@render children?.()}
-			</PinyaCard>
-		</div>
-	</dialog>
-{/if}
-
-<style>
-    dialog {
-        padding: 0;
-        background-color: transparent;
-        border-color: transparent;
-        z-index: 20;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        /* allow click-through to backdrop */
-        pointer-events: none;
-    }
-
-    .interactable {
-        pointer-events: auto;
-    }
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	import type { ModalProps } from 'svelte-modals';
+
+	import { onMount, type Snippet } from 'svelte';
+	import { PinyaCard } from '../elements';
+
+	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
+	interface ModalBaseProps extends ModalProps {
+		children: Snippet,
+	}
+
+	let {
+		children,
+		isOpen,
+		close
+	}: ModalBaseProps = $props();
+
+	let container: HTMLDivElement;
+	onMount(() => {
+		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
+		if (focusableElement) {
+			(focusableElement as HTMLElement).focus();
+		}
+
+		document.addEventListener('keydown', (e) => {
+			if (e.code === 'Escape') {
+				close();
+			}
+		});
+	});
+</script>
+
+{#if isOpen}
+	<dialog aria-modal="true" in:scale|global={{
+		start: 0.95,
+		duration: 750,
+		easing: elasticOut,
+		opacity: 0.9
+	}}>
+		<div class="interactable" bind:this={container}>
+			<PinyaCard
+				widthClass="max-w-xl2"
+				paddingClass="pl-8 pr-8 pt-4 pb-8"
+			>
+				{@render children?.()}
+			</PinyaCard>
+		</div>
+	</dialog>
+{/if}
+
+<style>
+    dialog {
+        padding: 0;
+        background-color: transparent;
+        border-color: transparent;
+        z-index: 20;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* allow click-through to backdrop */
+        pointer-events: none;
+    }
+
+    .interactable {
+        pointer-events: auto;
+    }
 </style>

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value = $bindable(),
-		children,
-	}: {
-		value: string[],
-		children: Snippet,
-	} = $props();
-</script>
-
-<Accordion
-	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
-	{value}
-	onValueChange={(e) => (value = e.value)}
-	collapsible
->
-	{@render children()}
+<script lang="ts">
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(),
+		children,
+	}: {
+		value: string[],
+		children: Snippet,
+	} = $props();
+</script>
+
+<Accordion
+	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
+	{value}
+	onValueChange={(e) => (value = e.value)}
+	collapsible
+>
+	{@render children()}
 </Accordion>

package/dist/ui/components/accordion/PinyaAccordionItem.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	// noinspection ES6UnusedImports
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value,
-		control: controlSnippet,
-		panel: panelSnippet,
-	}: {
-		value: string,
-		control: Snippet;
-		panel: Snippet;
-	} = $props();
-</script>
-
-<Accordion.Item
-	{value}
-	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
->
-	<!-- Control -->
-	{#snippet control()}
-		{@render controlSnippet()}
-	{/snippet}
-	<!-- Panel -->
-	{#snippet panel()}
-		{@render panelSnippet()}
-	{/snippet}
+<script lang="ts">
+	// noinspection ES6UnusedImports
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value,
+		control: controlSnippet,
+		panel: panelSnippet,
+	}: {
+		value: string,
+		control: Snippet;
+		panel: Snippet;
+	} = $props();
+</script>
+
+<Accordion.Item
+	{value}
+	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
+>
+	<!-- Control -->
+	{#snippet control()}
+		{@render controlSnippet()}
+	{/snippet}
+	<!-- Panel -->
+	{#snippet panel()}
+		{@render panelSnippet()}
+	{/snippet}
 </Accordion.Item>