npm - @turnipxenon/pineapple - Versions diffs - 3.0.0 → 3.1.0-alpha.2 - Mend

@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/README.md CHANGED Viewed

@@ -26,3 +26,88 @@ yarn build
 You can preview the production build with `yarn preview`.
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+## Installing as a package
+```bash
+yarn add @turnipxenon2/pineapple
+```
+**Manual steps**
+We still have to do some manual set up to our project to make it work.
+1. **Configure Tailwind.** Open your global stylesheet in `/src/app.css` and add the following imports:
+```css
+@import 'tailwindcss';
+@import '@skeletonlabs/skeleton/optional/presets';
+@import '@skeletonlabs/skeleton';
+@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '../node_modules/@turnipxenon/pineapple/dist/styles/app.css';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
+@source '../node_modules/@turnipxenon/pineapple/dist/styles'
+```
+2. **Set Active Theme.** Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.
+```html
+<html lang="en" data-theme="turnip">
+...
+</html>
+```
+3. We have to setup +layout.svelte to and import some dependencies
+As a reference as to why we need to do above, we use the UI framework Skeleton, which has the same setup. But, we have to make some modifications to make our project and Skeleton to work as a package.
+**Reference**
+- https://next.skeleton.dev/docs/get-started/installation/sveltekit
+- https://inlang.com/m/gerre34r/library-inlang-paraglideJs/sveltekit
+- Just use skeleton or use the base project?
+**Current steps how to use this package in another project**
+1. Create using Skeleton: https://next.skeleton.dev/docs/get-started/installation/sveltekit
+2. Follow instructions and skeleton UI package
+3. Install pineapple
+4. Set up ModeWatcher and Modals, primarily in +layout.svelte
+5. Set up ParaglideJS internationalization (beta not SvelteKit)
+6. Add this to `+layout.svelte`
+```sveltehtml
+<script lang="ts">
+	import { PinyaPageLayout, PinyaBase } from '@turnipxenon/pineapple/templates';
+	import '../app.css';
+	let { children } = $props();
+</script>
+<PinyaBase>
+	<PinyaPageLayout>
+		{@render children()}
+	</PinyaPageLayout>
+</PinyaBase>
+```
+TODO: if we are happy with our base, publish it to github and link the corresponding git commits here
+## Local linking
+1. In pineapple, run `yarn link`
+2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+**To unlink:**
+1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+2. In pineapple, run `yarn unlink`
+3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
+To reinstall a single package: `yarn add @turnipxenon/pineapple --no-package-lock --no-save`

package/dist/components/blog_template/BlogTemplate.svelte CHANGED Viewed

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import "./blog-template.css";
-	import { enableBackground } from "../../store";
-	import { onDestroy, onMount } from "svelte";
+	import { onDestroy, onMount, type Snippet } 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";
+	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
+	import { appState } from "../../ui/templates/index";
 	// grab page meta from the adjacent meta.json
 	interface Props {
@@ -13,7 +13,7 @@
 		shouldFillWholePage?: boolean;
 		shouldEnableDialogOverlay?: boolean;
 		includeDataNoSnippet?: boolean;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 	let {
@@ -24,7 +24,6 @@
 		children
 	}: Props = $props();
-	enableBackground.set(!shouldFillWholePage);
 	let initialDialogState = false;
 	onMount(() => {
@@ -33,10 +32,11 @@
 	});
 	onDestroy(() => {
-		enableBackground.set(true);
+		appState.bgOpacity = 1;
 		enableDialogueOverlay.set(initialDialogState);
 	});
+	appState.bgOpacity = shouldFillWholePage ? 0.2 : 1;
 </script>
 {#if shouldFillWholePage}
@@ -46,21 +46,18 @@
 		</BlogTemplateInner>
 	</div>
 {:else}
-	<Card includeDataNoSnippet={includeDataNoSnippet}>
-		{#snippet content()}
-				<div  class="default-card">
-				<BlogTemplateInner pageMeta={pageMeta}>
-					{@render children?.()}
-				</BlogTemplateInner>
-			</div>
-			{/snippet}
-	</Card>
+	<PinyaCard {includeDataNoSnippet} widthClass="max-w-4xl">
+		<BlogTemplateInner pageMeta={pageMeta}>
+			{@render children?.()}
+		</BlogTemplateInner>
+	</PinyaCard>
 {/if}
 <style>
     .whole-page {
-        height: 100%;
+        height: 100vh;
         width: 100%;
-        max-width: var(--default-card-max-width);
+        padding-right: 2em;
+        padding-left: 2em;
     }
 </style>

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

@@ -1,11 +1,12 @@
 import "./blog-template.css";
-import type { SimplePageMeta } from "../navigation_component/index";
+import { type Snippet } from "svelte";
+import type { SimplePageMeta } from "../../ui/modules/NavigationMenu/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;
     shouldEnableDialogOverlay?: boolean;
     includeDataNoSnippet?: boolean;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
 }
 declare const BlogTemplate: import("svelte").Component<Props, {}, "">;
 type BlogTemplate = ReturnType<typeof BlogTemplate>;

package/dist/components/blog_template/BlogTemplateInner.svelte CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>