@hkdigital/lib-sveltekit 0.1.60 → 0.1.62

package/dist/widgets/game-box/GameBox.svelte

@@ -1,186 +1,186 @@
-<script>
-  import { onMount } from 'svelte';
-  import {
-    getGameWidthOnLandscape,
-    getGameWidthOnPortrait
-  } from './gamebox.util.js';
-  import { enableContainerScaling } from '../../util/design-system/index.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   aspectOnLandscape?: number,
-   *   aspectOnPortrait?: number,
-   *   enableScaling?: boolean,
-   *   designLandscape?: {width: number, height: number},
-   *   designPortrait?: {width: number, height: number},
-   *   clamping?: {
-   *     ui: {min: number, max: number},
-   *     textBase: {min: number, max: number},
-   *     textHeading: {min: number, max: number},
-   *     textUi: {min: number, max: number}
-   *   },
-   *   snippetLandscape?: import('svelte').Snippet,
-   *   snippetPortrait?: import('svelte').Snippet,
-   *   [attr: string]: any
-   * }}
-   */
-  const {
-    // > Style
-    base = '',
-    bg = '',
-    classes = '',
-    style = '',
-
-    // > Functional properties
-    aspectOnLandscape,
-    aspectOnPortrait,
-
-    marginLeft = 0,
-    marginRight = 0,
-
-    marginTop = 0,
-    marginBottom = 0,
-
-    // > Scaling options
-    enableScaling = false,
-    designLandscape = { width: 1920, height: 1080 },
-    designPortrait = { width: 1080, height: 1920 },
-    clamping = {
-      ui: { min: 0.3, max: 2 },
-      textBase: { min: 0.75, max: 1.5 },
-      textHeading: { min: 0.75, max: 2.25 },
-      textUi: { min: 0.5, max: 1.25 }
-    },
-
-    // > Snippets
-    snippetLandscape,
-    snippetPortrait
-  } = $props();
-
-  // > Game dimensions and state
-  let windowWidth = $state();
-  let windowHeight = $state();
-  let gameWidth = $state();
-  let gameHeight = $state();
-  let isLandscape = $derived(windowWidth > windowHeight);
-
-  // Game container reference
-  let gameContainer = $state();
-
-  // Update game dimensions based on window size and orientation
-  $effect(() => {
-    if (!windowWidth || !windowHeight) return;
-
-    const availWidth = windowWidth - marginLeft - marginRight;
-    const availHeight = windowHeight - marginTop - marginBottom;
-
-    // console.debug('GameBox margins:', {
-    //   marginLeft,
-    //   marginRight,
-    //   marginTop,
-    //   marginBottom
-    // });
-
-    let gameAspect;
-
-    if (availWidth > availHeight) {
-      gameWidth = getGameWidthOnLandscape({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnLandscape
-      });
-      gameAspect = aspectOnLandscape;
-    } else {
-      gameWidth = getGameWidthOnPortrait({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnPortrait
-      });
-      gameAspect = aspectOnPortrait;
-    }
-
-    if (gameAspect) {
-      gameHeight = gameWidth / gameAspect;
-    } else {
-      gameHeight = availHeight;
-    }
-  });
-
-  // Set up scaling if enabled, with orientation awareness
-  $effect(() => {
-    if (!enableScaling || !gameContainer || !gameWidth || !gameHeight) {
-      return () => {}; // No-op cleanup if scaling not enabled or required elements missing
-    }
-
-    // Select the appropriate design based on orientation
-    const activeDesign = isLandscape ? designLandscape : designPortrait;
-
-    // console.debug(
-    //   `GameBox scaling [${isLandscape ? 'landscape' : 'portrait'}]:`,
-    //   `game: ${gameWidth}x${gameHeight}`,
-    //   `design: ${activeDesign.width}x${activeDesign.height}`
-    // );
-
-    // Apply scaling with the current design based on orientation
-    return enableContainerScaling({
-      container: gameContainer,
-      design: activeDesign,
-      clamping,
-      getDimensions: () => ({
-        width: gameWidth,
-        height: gameHeight
-      })
-    });
-  });
-
-  onMount(() => {
-    const gameBoxNoScroll = 'game-box-no-scroll';
-    const html = document.documentElement;
-    html.classList.add(gameBoxNoScroll);
-
-    return () => {
-      html.classList.remove(gameBoxNoScroll);
-    };
-  });
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
-
-{#if gameHeight}
-  <div
-    data-component="game-box"
-    data-orientation={isLandscape ? 'landscape' : 'portrait'}
-    bind:this={gameContainer}
-    class="{base} {bg} {classes}"
-    style:width="{gameWidth}px"
-    style:height="{gameHeight}px"
-    style:--game-width={gameWidth}
-    style:--game-height={gameHeight}
-    style:margin-left="{marginLeft}px"
-    style:margin-right="{marginRight}px"
-    style:margin-top="{marginTop}px"
-    style:margin-bottom="{marginBottom}px"
-    {style}
-  >
-    {#if isLandscape}
-      {@render snippetLandscape()}
-    {:else}
-      {@render snippetPortrait()}
-    {/if}
-  </div>
-{/if}
-
-<style>
-  :global(html.game-box-no-scroll) {
-    overflow: clip;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
-  }
-  :global(html.game-box-no-scroll::-webkit-scrollbar) {
-    display: none;
-  }
-</style>
+<script>
+  import { onMount } from 'svelte';
+  import {
+    getGameWidthOnLandscape,
+    getGameWidthOnPortrait
+  } from './gamebox.util.js';
+  import { enableContainerScaling } from '../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   aspectOnLandscape?: number,
+   *   aspectOnPortrait?: number,
+   *   enableScaling?: boolean,
+   *   designLandscape?: {width: number, height: number},
+   *   designPortrait?: {width: number, height: number},
+   *   clamping?: {
+   *     ui: {min: number, max: number},
+   *     textBase: {min: number, max: number},
+   *     textHeading: {min: number, max: number},
+   *     textUi: {min: number, max: number}
+   *   },
+   *   snippetLandscape?: import('svelte').Snippet,
+   *   snippetPortrait?: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // > Style
+    base = '',
+    bg = '',
+    classes = '',
+    style = '',
+
+    // > Functional properties
+    aspectOnLandscape,
+    aspectOnPortrait,
+
+    marginLeft = 0,
+    marginRight = 0,
+
+    marginTop = 0,
+    marginBottom = 0,
+
+    // > Scaling options
+    enableScaling = false,
+    designLandscape = { width: 1920, height: 1080 },
+    designPortrait = { width: 1080, height: 1920 },
+    clamping = {
+      ui: { min: 0.3, max: 2 },
+      textBase: { min: 0.75, max: 1.5 },
+      textHeading: { min: 0.75, max: 2.25 },
+      textUi: { min: 0.5, max: 1.25 }
+    },
+
+    // > Snippets
+    snippetLandscape,
+    snippetPortrait
+  } = $props();
+
+  // > Game dimensions and state
+  let windowWidth = $state();
+  let windowHeight = $state();
+  let gameWidth = $state();
+  let gameHeight = $state();
+  let isLandscape = $derived(windowWidth > windowHeight);
+
+  // Game container reference
+  let gameContainer = $state();
+
+  // Update game dimensions based on window size and orientation
+  $effect(() => {
+    if (!windowWidth || !windowHeight) return;
+
+    const availWidth = windowWidth - marginLeft - marginRight;
+    const availHeight = windowHeight - marginTop - marginBottom;
+
+    // console.debug('GameBox margins:', {
+    //   marginLeft,
+    //   marginRight,
+    //   marginTop,
+    //   marginBottom
+    // });
+
+    let gameAspect;
+
+    if (availWidth > availHeight) {
+      gameWidth = getGameWidthOnLandscape({
+        windowWidth: availWidth,
+        windowHeight: availHeight,
+        aspectOnLandscape
+      });
+      gameAspect = aspectOnLandscape;
+    } else {
+      gameWidth = getGameWidthOnPortrait({
+        windowWidth: availWidth,
+        windowHeight: availHeight,
+        aspectOnPortrait
+      });
+      gameAspect = aspectOnPortrait;
+    }
+
+    if (gameAspect) {
+      gameHeight = gameWidth / gameAspect;
+    } else {
+      gameHeight = availHeight;
+    }
+  });
+
+  // Set up scaling if enabled, with orientation awareness
+  $effect(() => {
+    if (!enableScaling || !gameContainer || !gameWidth || !gameHeight) {
+      return () => {}; // No-op cleanup if scaling not enabled or required elements missing
+    }
+
+    // Select the appropriate design based on orientation
+    const activeDesign = isLandscape ? designLandscape : designPortrait;
+
+    // console.debug(
+    //   `GameBox scaling [${isLandscape ? 'landscape' : 'portrait'}]:`,
+    //   `game: ${gameWidth}x${gameHeight}`,
+    //   `design: ${activeDesign.width}x${activeDesign.height}`
+    // );
+
+    // Apply scaling with the current design based on orientation
+    return enableContainerScaling({
+      container: gameContainer,
+      design: activeDesign,
+      clamping,
+      getDimensions: () => ({
+        width: gameWidth,
+        height: gameHeight
+      })
+    });
+  });
+
+  onMount(() => {
+    const gameBoxNoScroll = 'game-box-no-scroll';
+    const html = document.documentElement;
+    html.classList.add(gameBoxNoScroll);
+
+    return () => {
+      html.classList.remove(gameBoxNoScroll);
+    };
+  });
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
+
+{#if gameHeight}
+  <div
+    data-component="game-box"
+    data-orientation={isLandscape ? 'landscape' : 'portrait'}
+    bind:this={gameContainer}
+    class="{base} {bg} {classes}"
+    style:width="{gameWidth}px"
+    style:height="{gameHeight}px"
+    style:--game-width={gameWidth}
+    style:--game-height={gameHeight}
+    style:margin-left="{marginLeft}px"
+    style:margin-right="{marginRight}px"
+    style:margin-top="{marginTop}px"
+    style:margin-bottom="{marginBottom}px"
+    {style}
+  >
+    {#if isLandscape}
+      {@render snippetLandscape()}
+    {:else}
+      {@render snippetPortrait()}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  :global(html.game-box-no-scroll) {
+    overflow: clip;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+  :global(html.game-box-no-scroll::-webkit-scrollbar) {
+    display: none;
+  }
+</style>

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

@@ -1,83 +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;
-  }
-}
+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/widgets/hk-app-layout/HkAppLayout.state.svelte.js

@@ -1,25 +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);
+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);