@hkdigital/lib-sveltekit 0.1.0 → 0.1.2

package/dist/classes/svelte/audio/AudioScene.svelte.js

@@ -14,7 +14,7 @@ import {
 	LOADED,
 	UNLOAD,
 	INITIAL
-} from '../loading-state-machine/index.js';
+} from '$lib/classes/svelte/loading-state-machine/index.js';
 
 import AudioLoader from './AudioLoader.svelte.js';
 

package/dist/classes/svelte/image/ImageLoader.svelte.js

@@ -6,7 +6,7 @@ import {
   NetworkLoader
   // ERROR_NOT_LOADED,
   // ERROR_TRANSFERRED
-} from '../network-loader/index.js';
+} from '$lib/classes/svelte/network-loader/index.js';
 
 /**
  * ImageLoader instance

package/dist/classes/svelte/image/ImageScene.svelte.js

@@ -16,7 +16,7 @@ import {
   LOADED,
   UNLOAD,
   INITIAL
-} from '../loading-state-machine/index.js';
+} from '$lib/classes/svelte/loading-state-machine/index.js';
 
 import ImageLoader from './ImageLoader.svelte.js';
 

package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js

@@ -14,7 +14,7 @@ import {
   LOADED,
   UNLOAD,
   INITIAL
-} from '../loading-state-machine/index.js';
+} from '$lib/classes/svelte/loading-state-machine/index.js';
 
 import * as expect from '../../../util/expect/index.js';
 

package/dist/components/area/HkArea.svelte

@@ -16,7 +16,7 @@
    *   classes?: string,
    *   style?: string,
    *   children: import('svelte').Snippet
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     // Style

package/dist/components/area/HkArea.svelte.d.ts

@@ -1,4 +1,18 @@
 export default HkArea;
+type HkArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/area/HkGridArea.svelte

@@ -26,7 +26,7 @@
    *   boxClasses?: string,
    *   boxAttrs?: { [attr: string]: * },
    *   children: import('svelte').Snippet
-   * } & { [attr: string]: * }}
+   * } & { [attr: string]: any }}
    */
   let {
     // Style

package/dist/components/area/HkGridArea.svelte.d.ts

@@ -1,4 +1,26 @@
 export default HkGridArea;
+type HkGridArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkGridArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/boxes/game-box/GameBox.svelte

@@ -0,0 +1,112 @@
+<script>
+  import {
+    getGameWidthOnLandscape,
+    getGameWidthOnPortrait
+  } from './gamebox.util.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   aspectOnLandscape? :number,
+   *   aspectOnPortrait? :number,
+   *   onLandscape?: import('svelte').Snippet,
+   *   onPortrait?: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // > Style
+    base,
+    bg,
+    classes,
+    style,
+
+    // > Functional
+    aspectOnLandscape,
+    aspectOnPortrait,
+
+    // >Snippets
+    snippetLandscape,
+    snippetPortrait
+  } = $props();
+
+  // > Game width and height
+
+  let windowWidth = $state();
+  let windowHeight = $state();
+
+  let gameWidth = $state();
+  let gameHeight = $state();
+
+  let isLandscape = $derived(gameWidth > gameHeight);
+
+  $effect(() => {
+    // Determine game width and height from
+    // window dimensions and desired game aspect
+
+    let gameAspect;
+
+    if (windowWidth > windowHeight) {
+      gameWidth = getGameWidthOnLandscape({
+        windowWidth,
+        windowHeight,
+        aspectOnLandscape
+      });
+
+      gameAspect = aspectOnLandscape;
+    } else {
+      gameWidth = getGameWidthOnPortrait({
+        windowWidth,
+        windowHeight,
+        aspectOnPortrait
+      });
+
+      gameAspect = aspectOnPortrait;
+    }
+
+    if (gameAspect) {
+      gameHeight = gameWidth / gameAspect;
+    } else {
+      gameHeight = windowHeight;
+    }
+  });
+
+  // $inspect({ windowWidth, windowHeight, gameWidth, gameHeight, isLandscape });
+
+  // $effect(() => {
+  //   console.log({
+  //     windowWidth,
+  //     windowHeight,
+  //     gameWidth,
+  //     gameHeight,
+  //     isLandscape
+  //   });
+  // });
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
+
+{#if gameHeight}
+  <!-- <div
+    data-boxes="game-box"
+    class="{base} {bg} {classes}"
+    style="width: {gameWidth}px; height: {gameHeight}px;--game-width={gameWidth};--game-height={gameHeight}; {style}" -->
+
+  <div
+    data-boxes="game-box"
+    class="{base} {bg} {classes}"
+    style:width="{gameWidth}px"
+    style:height="{gameHeight}px"
+    style:--game-width={gameWidth}
+    style:--game-height={gameHeight}
+    {style}
+  >
+    {#if isLandscape}
+      {@render snippetLandscape()}
+    {:else}
+      {@render snippetPortrait()}
+    {/if}
+  </div>
+{/if}

package/dist/components/boxes/game-box/GameBox.svelte.d.ts

@@ -0,0 +1,28 @@
+export default GameBox;
+type GameBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        style?: string;
+        aspectOnLandscape?: number;
+        aspectOnPortrait?: number;
+        onLandscape?: Snippet<[]>;
+        onPortrait?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const GameBox: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    classes?: string;
+    style?: string;
+    aspectOnLandscape?: number;
+    aspectOnPortrait?: number;
+    onLandscape?: import("svelte").Snippet;
+    onPortrait?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/boxes/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/components/boxes/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/components/boxes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GameBox } from "./game-box/GameBox.svelte";
+export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";

package/dist/components/boxes/index.js

@@ -0,0 +1,2 @@
+export { default as GameBox } from './game-box/GameBox.svelte';
+export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';

package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte

@@ -0,0 +1,199 @@
+<script>
+  import { onMount } from 'svelte';
+  import {
+    getRootCssDesignWidth,
+    getRootCssDesignHeight,
+    getClampParams,
+    clamp
+  } from '../../../util/design-system/index.js';
+
+  /**
+   * Virtual viewport component that creates a container with its own scaling
+   * system based on its actual dimensions.
+   *
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   width?: string,
+   *   height?: string,
+   *   overflow?: string,
+   *   designWidth?: number,
+   *   designHeight?: number,
+   *   scaleViewport?: number,
+   *   scaleW?: number,
+   *   scaleH?: number,
+   *   scaleUI?: number,
+   *   scaleTextContent?: number,
+   *   scaleTextHeading?: number,
+   *   scaleTextUI?: number,
+   *   children?: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    // Style related props first
+    base,
+    bg,
+    classes,
+    width,
+    height,
+    overflow = 'overflow-clip',
+
+    // Functional bindable props
+    designWidth = $bindable(0),
+    designHeight = $bindable(0),
+    scaleViewport = $bindable(0),
+    scaleW = $bindable(0),
+    scaleH = $bindable(0),
+    scaleUI = $bindable(0),
+    scaleTextContent = $bindable(0),
+    scaleTextHeading = $bindable(0),
+    scaleTextUI = $bindable(0),
+
+    // Snippets
+    children,
+
+    // Rest of attributes
+    ...attrs
+  } = $props();
+
+  /**
+   * References to the container element for measurement
+   * @type {HTMLDivElement}
+   */
+  let container;
+
+  /**
+   * Current scaling variables
+   */
+  let scaleVars = $state('');
+
+  // No separate variables for design dimensions
+
+  /**
+   * Error state for CSS variable parsing
+   */
+  let cssParsingError = $state(null);
+
+  /**
+   * Update scaling based on current dimensions
+   */
+  function updateScaling() {
+    if (!container) return;
+
+    // Get actual container dimensions
+    const rect = container.getBoundingClientRect();
+    const containerWidth = rect.width;
+    const containerHeight = rect.height;
+
+    // Calculate ratios similar to root variables
+    scaleW = containerWidth / designWidth;
+    scaleH = containerHeight / designHeight;
+
+    // Use the smaller ratio to ensure content fits (from vars.postcss)
+    scaleViewport = Math.min(scaleW, scaleH);
+
+    try {
+      // Get clamp parameters from CSS variables
+      const uiParams = getClampParams('scale-ui');
+      const contentParams = getClampParams('scale-text-content');
+      const headingParams = getClampParams('scale-text-heading');
+      const textUIParams = getClampParams('scale-text-ui');
+
+      // Apply scaling according to extracted clamp parameters
+      scaleUI = clamp(uiParams.min, scaleViewport, uiParams.max);
+      scaleTextContent = clamp(
+        contentParams.min,
+        scaleViewport,
+        contentParams.max
+      );
+      scaleTextHeading = clamp(
+        headingParams.min,
+        scaleViewport,
+        headingParams.max
+      );
+      scaleTextUI = clamp(textUIParams.min, scaleViewport, textUIParams.max);
+
+      // Clear any previous error
+      cssParsingError = null;
+    } catch (error) {
+      // Store the error for debugging
+      cssParsingError = error;
+      console.error('VirtualViewport scaling error:', error);
+
+      // Fallback to simple scaling without clamping
+      scaleUI = scaleViewport;
+      scaleTextContent = scaleViewport;
+      scaleTextHeading = scaleViewport;
+      scaleTextUI = scaleViewport;
+    }
+
+    // Update the style variables
+    scaleVars = `
+      --scale-w: ${scaleW};
+      --scale-h: ${scaleH};
+      --scale-viewport: ${scaleViewport};
+      --scale-ui: ${scaleUI};
+      --scale-text-content: ${scaleTextContent};
+      --scale-text-heading: ${scaleTextHeading};
+      --scale-text-ui: ${scaleTextUI};
+    `;
+  }
+
+  // Watch for changes and update scaling
+  $effect(() => {
+    updateScaling();
+  });
+
+  onMount(() => {
+    try {
+      // Get design dimensions from CSS variables if props are zero
+      if (designWidth === 0) {
+        designWidth = getRootCssDesignWidth() ?? 1920;
+      }
+
+      if (designHeight === 0) {
+        designHeight = getRootCssDesignHeight() ?? 1080;
+      }
+
+      // Initial calculation
+      updateScaling();
+
+      // Set up ResizeObserver to update scaling when container size changes
+      const resizeObserver = new ResizeObserver(() => {
+        updateScaling();
+      });
+
+      resizeObserver.observe(container);
+
+      // Clean up
+      return () => {
+        resizeObserver.disconnect();
+      };
+    } catch (error) {
+      cssParsingError = error;
+      console.error('VirtualViewport initialization error:', error);
+    }
+  });
+</script>
+
+<div
+  data-component="virtual-viewport"
+  bind:this={container}
+  class="{base} {bg} {width} {height} {overflow} {classes}"
+  style={scaleVars}
+  style:width={width ? width : '100%'}
+  style:height={height ? height : '100%'}
+  {...attrs}
+>
+  {#if cssParsingError}
+    <!-- Add a discreet error indicator for development -->
+    <div
+      class="absolute top-0 right-0 p-1 text-red-500 text-xs bg-black bg-opacity-50 rounded-bl"
+    >
+      CSS Parsing Error
+    </div>
+  {/if}
+  {@render children()}
+</div>

package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte.d.ts

@@ -0,0 +1,42 @@
+export default VirtualViewport;
+type VirtualViewport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        overflow?: string;
+        designWidth?: number;
+        designHeight?: number;
+        scaleViewport?: number;
+        scaleW?: number;
+        scaleH?: number;
+        scaleUI?: number;
+        scaleTextContent?: number;
+        scaleTextHeading?: number;
+        scaleTextUI?: number;
+        children?: Snippet<[]>;
+    }>): void;
+};
+declare const VirtualViewport: import("svelte").Component<{
+    [attr: string]: any;
+    base?: string;
+    bg?: string;
+    classes?: string;
+    width?: string;
+    height?: string;
+    overflow?: string;
+    designWidth?: number;
+    designHeight?: number;
+    scaleViewport?: number;
+    scaleW?: number;
+    scaleH?: number;
+    scaleUI?: number;
+    scaleTextContent?: number;
+    scaleTextHeading?: number;
+    scaleTextUI?: number;
+    children?: import("svelte").Snippet;
+}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextContent" | "scaleTextHeading" | "scaleTextUI">;

package/dist/components/buttons/button/Button.svelte

@@ -0,0 +1,75 @@
+<script>
+  import { toStateClasses } from '../../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   type?: string,
+   *   role?: 'primary' | 'secondary',
+   *   size?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
+   *   active?: boolean,
+   *   selected?: boolean,
+   *   loading?: boolean,
+   *   error?: boolean,
+   *   disabled?: boolean,
+   *   snippetLoading?: import('svelte').Snippet,
+   *   snippetError?: import('svelte').Snippet,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+    type = '',
+    role = 'primary',
+    size = 'md',
+    variant = '',
+
+    // States
+    active = $bindable(false),
+    selected = $bindable(false),
+    loading = $bindable(false),
+    error = $bindable(false),
+    disabled = $bindable(false),
+
+    // Snippets
+    snippetLoading,
+    snippetError,
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let stateClasses = $derived.by(() => {
+    return toStateClasses({ active, selected, loading, error, disabled });
+  });
+</script>
+
+<button
+  data-component="button"
+  data-type={type}
+  data-role={role}
+  data-size={size}
+  data-variant={variant}
+  type="button"
+  class="{base} {bg} {classes} {stateClasses}"
+  disabled={disabled || loading}
+  aria-busy={loading}
+  aria-pressed={selected}
+  {...attrs}
+>
+  {#if loading && snippetLoading}
+    {@render snippetLoading()}
+  {:else if error && snippetError}
+    {@render snippetError()}
+  {:else}
+    {@render children()}
+  {/if}
+</button>