@hkdigital/lib-sveltekit 0.1.6 → 0.1.8

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

@@ -1,2 +1,2 @@
-export { default as GameBox } from './game-box/GameBox.svelte';
-export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
+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

@@ -1,199 +1,196 @@
-<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>
+<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,
+   *   scaleTextBase?: 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),
+    scaleTextBase = $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 baseParams = getClampParams('scale-text-base');
+      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);
+
+      scaleTextBase = clamp(baseParams.min, scaleViewport, baseParams.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;
+      scaleTextBase = scaleViewport;
+      scaleTextHeading = scaleViewport;
+      scaleTextUI = scaleViewport;
+    }
+
+    // Update the style variables
+    scaleVars = `
+      --scale-w: ${scaleW};
+      --scale-h: ${scaleH};
+      --scale-viewport: ${scaleViewport};
+      --scale-ui: ${scaleUI};
+      --scale-text-base: ${scaleTextBase};
+      --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

@@ -1,4 +1,26 @@
 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;
+        scaleTextBase?: number;
+        scaleTextHeading?: number;
+        scaleTextUI?: number;
+        children?: Snippet<[]>;
+    }>): void;
+};
 declare const VirtualViewport: import("svelte").Component<{
     [attr: string]: any;
     base?: string;
@@ -13,8 +35,8 @@ declare const VirtualViewport: import("svelte").Component<{
     scaleW?: number;
     scaleH?: number;
     scaleUI?: number;
-    scaleTextContent?: number;
+    scaleTextBase?: number;
     scaleTextHeading?: number;
     scaleTextUI?: number;
     children?: import("svelte").Snippet;
-}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextContent" | "scaleTextHeading" | "scaleTextUI">;
+}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextBase" | "scaleTextHeading" | "scaleTextUI">;