@hkdigital/lib-core 0.3.1

package/dist/features/game-box/gamebox.util.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Get game width for landscape mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnLandscape]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnLandscape({ windowWidth, windowHeight, aspectOnLandscape }: {
+    windowWidth: number;
+    windowHeight: number;
+    aspectOnLandscape?: number;
+}): number;
+/**
+ * Get game width for portrait mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnPortrait]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnPortrait({ windowWidth, windowHeight, aspectOnPortrait }: {
+    windowWidth: number;
+    windowHeight: number;
+    aspectOnPortrait?: number;
+}): number;
+export const ERROR_WINDOW_SIZE_NOT_LANDSCAPE: "Window size is not landsccape";
+export const ERROR_WINDOW_SIZE_NOT_PORTRAIT: "Window size is not portrait";

package/dist/features/game-box/gamebox.util.js

@@ -0,0 +1,83 @@
+export const ERROR_WINDOW_SIZE_NOT_LANDSCAPE = 'Window size is not landsccape';
+
+export const ERROR_WINDOW_SIZE_NOT_PORTRAIT = 'Window size is not portrait';
+
+/**
+ * Get game width for landscape mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnLandscape]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnLandscape({
+  windowWidth,
+  windowHeight,
+  aspectOnLandscape
+}) {
+  if (!windowHeight) {
+    return 0;
+  }
+
+  if (windowWidth < windowHeight) {
+    throw new Error(ERROR_WINDOW_SIZE_NOT_LANDSCAPE);
+  }
+
+  if (!aspectOnLandscape) {
+    // No game aspect specified for landscape
+    // => return full width
+    return windowWidth;
+  }
+
+  const windowAspect = windowWidth / windowHeight;
+
+  if (windowAspect > aspectOnLandscape) {
+    // aspect of window if wider than game aspect => fill height
+    return aspectOnLandscape * windowHeight;
+  } else {
+    // aspect of game is wider => fill width
+    return windowWidth;
+  }
+}
+
+/**
+ * Get game width for portrait mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnPortrait]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnPortrait({
+  windowWidth,
+  windowHeight,
+  aspectOnPortrait
+}) {
+  if (!windowHeight) {
+    return 0;
+  }
+
+  if (windowHeight < windowWidth) {
+    throw new Error(ERROR_WINDOW_SIZE_NOT_PORTRAIT);
+  }
+
+  if (!aspectOnPortrait) {
+    // No game aspect specified for portrait
+    // => return full width
+    return windowWidth;
+  }
+
+  const windowAspect = windowWidth / windowHeight;
+
+  if (windowAspect > aspectOnPortrait) {
+    // aspect of window if wider than game aspect => fill height
+    return aspectOnPortrait * windowHeight;
+  } else {
+    // aspect of game is wider => fill width
+    return windowWidth;
+  }
+}

package/dist/features/hk-app-layout/HkAppLayout.state.svelte.d.ts

@@ -0,0 +1,6 @@
+export class AppLayoutState {
+    landscapeOnSmallScreen: boolean;
+}
+export const createOrGetState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;
+export const createState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;
+export const getState: (contextKey?: import("../../typedef").ContextKey) => AppLayoutState;

package/dist/features/hk-app-layout/HkAppLayout.state.svelte.js

@@ -0,0 +1,25 @@
+import { defineStateContext } from '../../util/svelte/state-context';
+
+import { browser } from '$app/environment';
+
+import { MediaQuery } from 'svelte/reactivity';
+
+/* ------------------------------------------------------- Define state class */
+
+export class AppLayoutState {
+	landscapeOnSmallScreen = $state(false);
+
+	constructor() {
+		if (browser) {
+			let mq = new MediaQuery('(max-height: 400px');
+
+			$effect(() => {
+				this.landscapeOnSmallScreen = mq.matches ? true : false;
+			});
+		}
+	}
+}
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] = defineStateContext(AppLayoutState);

package/dist/features/hk-app-layout/HkAppLayout.svelte

@@ -0,0 +1,251 @@
+<script>
+	/**
+	 * @example
+	 * // file.svelte
+	 * <script>
+	 * import AppLayout from '.../components/layout';
+	 * <_/script>
+	 *
+	 * <AppLayout>
+	 *   {#snippet bgSnippet()}
+	 *     <BgGradient />
+	 *   {/snippet}
+	 *
+	 *   {#snippet bottomSnippet()}
+	 *     <BottomBar />
+	 *   {/snippet}
+	 *
+	 *   Main content
+	 *
+	 * </AppLayout>
+	 */
+
+	import { useResizeObserver } from '../../util/svelte/observe/index.js';
+
+	/**
+	 * @typedef AppLayoutProps
+	 *
+	 * @property {import('svelte').Snippet|undefined} [bgPageSnippet]
+	 * @property {import('svelte').Snippet|undefined} [bgSnippet]
+	 * @property {import('svelte').Snippet|undefined} [topSnippet]
+	 * @property {import('svelte').Snippet|undefined} [bottomSnippet]
+	 * @property {import('svelte').Snippet} children
+	 */
+
+	/** @type {AppLayoutProps} */
+	let {
+		// > Functional
+
+		/** @type {boolean} */
+		// hasAuth = false,
+
+		bgPageSnippet,
+		bgSnippet,
+
+		topSnippet,
+		bottomSnippet,
+
+		children
+
+		// > Style
+
+		// base = '',
+		// bg = '',
+		// classes = '',
+
+		// > Background (child) styles
+
+		// > AppTop (child) styles
+
+		// appTopBase = '',
+		// appTopBg = '',
+		// appTopPadding = '',
+		// appTopMargin = '',
+		// appTopClasses = ''
+	} = $props();
+
+	// setAppLayoutContext({});
+
+	// Observe AppLayoutHeight
+
+	/** @type {HTMLElement|null} */
+	let elemAppLayout = $state(null);
+	let elemAppLayoutHeight = $state(0);
+	let elemAppLayoutWidth = $state(0);
+
+	useResizeObserver(
+		() => elemAppLayout,
+		(entries) => {
+			for (const { contentRect } of entries) {
+				// console.log('elemLayoutHeight', entry.contentRect.height);
+				elemAppLayoutHeight = contentRect.height;
+				elemAppLayoutWidth = contentRect.width;
+				break;
+			}
+		}
+	);
+
+	// Observe layoutTopHeight
+
+	/** @type {HTMLElement|null} */
+	// let elemLayoutTop = $state(null);
+	// let elemLayoutTopHeight = $state(0);
+
+	// useResizeObserver(
+	//   () => elemLayoutTop,
+	//   (entries) => {
+	//     for (const entry of entries) {
+	//       console.log('elemLayoutTopHeight', entry.contentRect.height);
+	//       elemLayoutTopHeight = entry.contentRect.height;
+	//       break;
+	//     }
+	//   }
+	// );
+
+	// Observe layoutContentHeight
+
+	/** @type {HTMLElement|null} */
+	let elemLayoutContent = $state(null);
+	let elemLayoutContentHeight = $state(0);
+
+	useResizeObserver(
+		() => elemLayoutContent,
+		(entries) => {
+			for (const entry of entries) {
+				// console.log('elemLayoutHeight', entry.contentRect.height);
+				elemLayoutContentHeight = entry.contentRect.height;
+				break;
+			}
+		}
+	);
+
+	// Observe layoutBottomHeight
+
+	/** @type {HTMLElement|null} */
+	let elemLayoutBottom = $state(null);
+
+	let elemLayoutBottomHeight = $state(0);
+
+	useResizeObserver(
+		() => elemLayoutBottom,
+		(entries) => {
+			for (const entry of entries) {
+				// console.log('elemLayoutBottomRect', entry.contentRect);
+				elemLayoutBottomHeight = entry.contentRect.height;
+				break;
+			}
+		}
+	);
+
+	let contentMarginBottom = $derived(elemLayoutBottomHeight);
+
+	let innerWidth = $state(0);
+	let innerHeight = $state(0);
+	let outerHeight = $state(0);
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight bind:outerHeight />
+
+<div data-layout-page-bg class="fixed z-0 h-screen w-screen">
+	{#if bgPageSnippet}
+		{@render bgPageSnippet()}
+	{/if}
+</div>
+
+<!-- <div
+  data-app-layout
+  class="g-no-select g-no-double-tab-zoom relative z-10 mx-auto grid min-h-lvh w-full grid-cols-[1fr] place-items-stretch border-8 border-green-500"
+  bind:this={elemAppLayout}
+> -->
+<div
+	data-app-layout
+	class="g-no-select g-no-double-tab-zoom relative z-10 mx-auto min-h-svh w-full"
+	bind:this={elemAppLayout}
+>
+	<!-- BG (fixed)) -->
+
+	<div
+		data-layout-bg
+		class="relative bottom-0 z-20 h-svh w-full"
+		style:position={elemAppLayoutWidth ? 'fixed' : 'static'}
+		style:width={elemAppLayoutWidth ? `${elemAppLayoutWidth}px` : 'auto'}
+	>
+		{#if bgSnippet}
+			{@render bgSnippet()}
+		{/if}
+	</div>
+
+	<!-- FG (top, content) -->
+
+	<div data-layout-fg class="relative z-30 flex min-h-svh w-full flex-col">
+		<div data-layout-top class="relative z-40 w-full">
+			{#if topSnippet}
+				{@render topSnippet()}
+			{/if}
+		</div>
+
+		<div
+			data-layout-content
+			class="relative z-40 flex w-full grow flex-col"
+			bind:this={elemLayoutContent}
+			style:margin-bottom={`${contentMarginBottom}px`}
+		>
+			<!-- <div class="border text-white">
+        Top height: [{elemLayoutTopHeight}]<br />
+        Content height: [{elemLayoutContentHeight}]<br />
+        Bottom height: [{elemLayoutBottomHeight}]<br />
+        App Layout height: [{elemAppLayoutHeight}]<br />
+        Content margin bottom [{contentMarginBottom}]<br />
+        innerWidth [{innerWidth}]<br />
+        innerHeight [{innerHeight}]
+      </div> -->
+			<!-- -webkit-font-smoothing: antialiased; -->
+			{@render children()}
+		</div>
+	</div>
+
+	<!-- Bottom (fixed) -->
+
+	<div
+		data-layout-bottom
+		bind:this={elemLayoutBottom}
+		class="bottom-0 z-50 mx-auto"
+		style:position={elemAppLayoutWidth ? 'fixed' : 'static'}
+		style:width={elemAppLayoutWidth ? `${elemAppLayoutWidth}px` : 'auto'}
+	>
+		{#if bottomSnippet}
+			{@render bottomSnippet()}
+		{/if}
+
+		<!-- <AppBottom
+      base={appTopBase}
+      bg={appTopBg}
+      padding={appTopPadding}
+      margin={appTopMargin}
+      classes={appTopClasses}
+    /> -->
+	</div>
+</div>
+
+<style>
+	[data-layout-page-bg] {
+		overflow: hidden;
+	}
+
+	[data-layout-bg] {
+		grid-area: 1 / 1 / 2 / 2; /* row-start, col-start, row-end, col-end */
+		overflow: hidden;
+	}
+
+	[data-layout-fg] {
+		grid-area: 1 / 1 / 2 / 2; /* row-start, col-start, row-end, col-end */
+	}
+
+	/*
+    * Shift contents of page to the left when scrollbar appears,
+    * so content like tab bars stay centered
+    */
+	/*:global(html:not(.no-scrollbar-shift-fix)) {
+		padding-left: calc(100vw - 100%);
+	}*/
+</style>

package/dist/features/hk-app-layout/HkAppLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+export default HkAppLayout;
+type HkAppLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<AppLayoutProps>): void;
+};
+declare const HkAppLayout: import("svelte").Component<{
+    bgPageSnippet?: import("svelte").Snippet | undefined;
+    bgSnippet?: import("svelte").Snippet | undefined;
+    topSnippet?: import("svelte").Snippet | undefined;
+    bottomSnippet?: import("svelte").Snippet | undefined;
+    children: import("svelte").Snippet;
+}, {}, "">;
+type AppLayoutProps = {
+    bgPageSnippet?: import("svelte").Snippet | undefined;
+    bgSnippet?: import("svelte").Snippet | undefined;
+    topSnippet?: import("svelte").Snippet | undefined;
+    bottomSnippet?: import("svelte").Snippet | undefined;
+    children: import("svelte").Snippet;
+};

package/dist/features/image-box/ImageBox.svelte

@@ -0,0 +1,210 @@
+<script>
+	import { ImageLoader } from '../../classes/svelte/image/index.js';
+	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
+	import { toSingleImageMeta } from '../../util/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: import('../../typedef/image.js').ObjectPosition,
+	 *   imageMeta?: import('../../typedef').ImageSource,
+	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   id?: string|Symbol
+	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress, id: string|Symbol) => void,
+	 *   [attr: string]: any
+	 * }}
+	 */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Image data
+		imageMeta,
+		imageLoader,
+
+		// Accessibility
+		alt = '',
+
+		// Identification
+		id = Symbol('ImageBox'),
+
+		// Events
+		onProgress,
+
+		// Additional attributes
+		...attrs
+	} = $props();
+
+	// if (!imageMeta) {
+	// 	throw new Error('Missing [imageMeta]');
+	// }
+
+	/** @type {HTMLDivElement|undefined} */
+	let containerElem = $state();
+
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
+
+	// For single image meta
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		// Setup variants loader for responsive images
+		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
+			variantsLoader = new ImageVariantsLoader(imageMeta, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		// Handle single image meta
+		else if (imageMeta && !variantsLoader) {
+			imageMeta_ = toSingleImageMeta(imageMeta);
+		}
+	});
+
+	// Handle progress reporting
+	$effect(() => {
+		if (!onProgress) return;
+
+		// Report progress from variants loader
+		if (variantsLoader) {
+			onProgress(variantsLoader.progress, id);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress, id);
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_) {
+			metaWidth = imageMeta_.width ?? 0;
+			metaHeight = imageMeta_.height ?? 0;
+		}
+	});
+
+	$effect(() => {
+		if (!imageMeta && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.loaded) {
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+		return () => resizeObserver.disconnect();
+	});
+
+	$effect(() => {
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-component="image-box"
+	bind:this={containerElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-component='image-box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/features/image-box/ImageBox.svelte.d.ts

@@ -0,0 +1,38 @@
+export default ImageBox;
+type ImageBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        aspect?: string;
+        overflow?: string;
+        fit?: "fill" | "cover" | "contain";
+        position?: string;
+        imageMeta?: ImageSource;
+        imageLoader?: ImageLoader;
+        alt?: string;
+        id?: string | Symbol;
+        onProgress?: (progress: LoadingProgress, id: string | Symbol) => void;
+    }>): void;
+};
+declare const ImageBox: import("svelte").Component<{
+    [attr: string]: any;
+    base?: string;
+    bg?: string;
+    classes?: string;
+    width?: string;
+    height?: string;
+    aspect?: string;
+    overflow?: string;
+    fit?: "contain" | "cover" | "fill";
+    position?: import("../../typedef/image.js").ObjectPosition;
+    imageMeta?: import("../../typedef").ImageSource;
+    imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
+    alt?: string;
+    id?: string | Symbol;
+    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress, id: string | Symbol) => void;
+}, {}, "">;

package/dist/features/image-box/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ImageBox } from "./ImageBox.svelte";
+declare const _default: {};
+export default _default;
+export type ImageMeta = any;

package/dist/features/image-box/index.js

@@ -0,0 +1,5 @@
+/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
+
+export { default as ImageBox } from './ImageBox.svelte';
+
+export default {};

package/dist/features/image-box/typedef.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {};
+export default _default;
+export type ObjectFit = ("contain" | "cover" | "fill" | "none" | "scale-down");
+export type ObjectPosition = ("left" | "center" | "right" | "top" | "bottom" | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | `${number}% ${number}%` | `${number}px ${number}px`);