@hkdigital/lib-core 0.5.4 → 0.5.5

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

@@ -6,7 +6,7 @@
     getGameWidthOnPortrait
   } from './gamebox.util.js';
 
-  import { enableContainerScaling } from '../../../design/index.js';
+  import ScaledContainer from './ScaledContainer.svelte';
 
   /**
    * @typedef {{
@@ -193,9 +193,6 @@
   $inspect('windowWidth/Height', windowWidth, windowHeight);
   $inspect('iosWindowWidth/Height', iosWindowWidth, iosWindowHeight);
 
-  // Game container reference
-  let gameContainer = $state();
-
   // Update game dimensions based on window size and orientation
   $effect(() => {
     const width = iosWindowWidth ?? windowWidth;
@@ -248,33 +245,6 @@
     }
   });
 
-  // 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
-      })
-    });
-  });
-
   let show = $state(false);
 
   let isPwa = $state(false);
@@ -460,7 +430,6 @@
     <div
       data-component="game-box"
       data-orientation={isLandscape ? 'landscape' : 'portrait'}
-      bind:this={gameContainer}
       class="{base} {bg} {classes}"
       class:isMobile
       style:width="{gameWidth}px"
@@ -476,10 +445,13 @@
           <!-- Require fullscreen -->
           {#if isFullscreen && !isDevMode}
             <!-- Landscape content -->
-            <div
-              class:hidden={!isLandscape}
-              style:width="{gameWidthOnLandscape}px"
-              style:height="{gameHeightOnLandscape}px"
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={designLandscape}
+              {clamping}
+              width={gameWidthOnLandscape}
+              height={gameHeightOnLandscape}
+              hidden={!isLandscape}
             >
               {@render snippetLandscape({
                 isLandscape,
@@ -495,12 +467,15 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
             <!-- Portrait content -->
-            <div
-              class:hidden={isLandscape}
-              style:width="{gameWidthOnPortrait}px"
-              style:height="{gameHeightOnPortrait}px"
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={designPortrait}
+              {clamping}
+              width={gameWidthOnPortrait}
+              height={gameHeightOnPortrait}
+              hidden={isLandscape}
             >
               {@render snippetPortrait({
                 isLandscape,
@@ -516,10 +491,16 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
           {:else if supportsFullscreen && !isDevMode}
             <!-- Require fullscreen -->
-            <div style:width="{gameWidth}px" style:height="{gameHeight}px">
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={isLandscape ? designLandscape : designPortrait}
+              {clamping}
+              width={gameWidth}
+              height={gameHeight}
+            >
               {@render snippetRequireFullscreen({
                 isLandscape,
                 isPortrait: !isLandscape,
@@ -534,10 +515,16 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
           {:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
             <!-- Require install on home screen on mobile -->
-            <div style:width="{gameWidth}px" style:height="{gameHeight}px">
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={isLandscape ? designLandscape : designPortrait}
+              {clamping}
+              width={gameWidth}
+              height={gameHeight}
+            >
               {@render snippetInstallOnHomeScreen({
                 isLandscape,
                 isPortrait: !isLandscape,
@@ -552,13 +539,16 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
           {:else}
             <!-- Landscape content -->
-            <div
-              class:hidden={!isLandscape}
-              style:width="{gameWidthOnLandscape}px"
-              style:height="{gameHeightOnLandscape}px"
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={designLandscape}
+              {clamping}
+              width={gameWidthOnLandscape}
+              height={gameHeightOnLandscape}
+              hidden={!isLandscape}
             >
               {@render snippetLandscape({
                 isLandscape,
@@ -574,12 +564,15 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
             <!-- Portrait content -->
-            <div
-              class:hidden={isLandscape}
-              style:width="{gameWidthOnPortrait}px"
-              style:height="{gameHeightOnPortrait}px"
+            <ScaledContainer
+              enableScaling={enableScaling}
+              design={designPortrait}
+              {clamping}
+              width={gameWidthOnPortrait}
+              height={gameHeightOnPortrait}
+              hidden={isLandscape}
             >
               {@render snippetPortrait({
                 isLandscape,
@@ -595,15 +588,18 @@
                 gameWidth,
                 gameHeight
               })}
-            </div>
+            </ScaledContainer>
           {/if}
         {:else}
           <!-- Do not require fullscreen -->
           <!-- Landscape content -->
-          <div
-            class:hidden={!isLandscape}
-            style:width="{gameWidthOnLandscape}px"
-            style:height="{gameHeightOnLandscape}px"
+          <ScaledContainer
+            enableScaling={enableScaling}
+            design={designLandscape}
+            {clamping}
+            width={gameWidthOnLandscape}
+            height={gameHeightOnLandscape}
+            hidden={!isLandscape}
           >
             {@render snippetLandscape({
               isLandscape,
@@ -617,12 +613,15 @@
               gameWidth,
               gameHeight
             })}
-          </div>
+          </ScaledContainer>
           <!-- Portrait content -->
-          <div
-            class:hidden={isLandscape}
-            style:width="{gameWidthOnPortrait}px"
-            style:height="{gameHeightOnPortrait}px"
+          <ScaledContainer
+            enableScaling={enableScaling}
+            design={designPortrait}
+            {clamping}
+            width={gameWidthOnPortrait}
+            height={gameHeightOnPortrait}
+            hidden={isLandscape}
           >
             {@render snippetPortrait({
               isLandscape,
@@ -636,7 +635,7 @@
               gameWidth,
               gameHeight
             })}
-          </div>
+          </ScaledContainer>
         {/if}
       {/if}
     </div>
@@ -653,10 +652,6 @@
     /* border: solid 1px red;*/
   }
 
-  .hidden {
-    visibility: hidden;
-  }
-
   :global(html.game-box-no-scroll) {
     overflow: clip;
     scrollbar-width: none; /* Firefox */

package/dist/ui/components/game-box/ScaledContainer.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { enableContainerScaling } from '../../../design/index.js';
+
+  /**
+   * @typedef {{
+   *   enableScaling?: boolean,
+   *   design?: {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}
+   *   },
+   *   width: number,
+   *   height: number,
+   *   hidden?: boolean,
+   *   children: import('svelte').Snippet
+   * }}
+   */
+
+  /**
+   * Wrapper component that applies container scaling to its children
+   *
+   * @type {{
+   *   enableScaling?: boolean,
+   *   design?: {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}
+   *   },
+   *   width: number,
+   *   height: number,
+   *   hidden?: boolean,
+   *   children: import('svelte').Snippet
+   * }}
+   */
+  let {
+    enableScaling = false,
+    design = undefined,
+    clamping = undefined,
+    width,
+    height,
+    hidden = false,
+    children
+  } = $props();
+
+  let container = $state();
+
+  // Apply container scaling when enabled and not hidden
+  $effect(() => {
+    if (
+      !enableScaling ||
+      !container ||
+      !width ||
+      !height ||
+      hidden ||
+      !design
+    ) {
+      return;
+    }
+
+    console.debug(`Enable scaling [${width},${height}]`);
+
+    return enableContainerScaling({
+      container,
+      design,
+      clamping,
+      getDimensions: () => ({ width, height })
+    });
+  });
+</script>
+
+<div
+  bind:this={container}
+  class:hidden
+  style:width="{width}px"
+  style:height="{height}px"
+>
+  {@render children()}
+</div>
+
+<style>
+  .hidden {
+    visibility: hidden;
+  }
+</style>

package/dist/ui/components/game-box/ScaledContainer.svelte.d.ts

@@ -0,0 +1,62 @@
+export default ScaledContainer;
+type ScaledContainer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        enableScaling?: boolean | undefined;
+        design?: {
+            width: number;
+            height: number;
+        } | undefined;
+        clamping?: {
+            ui: {
+                min: number;
+                max: number;
+            };
+            textBase: {
+                min: number;
+                max: number;
+            };
+            textHeading: {
+                min: number;
+                max: number;
+            };
+            textUi: {
+                min: number;
+                max: number;
+            };
+        } | undefined;
+        width: number;
+        height: number;
+        hidden?: boolean | undefined;
+        children: Snippet<[]>;
+    }>): void;
+};
+declare const ScaledContainer: import("svelte").Component<{
+    enableScaling?: boolean;
+    design?: {
+        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;
+        };
+    };
+    width: number;
+    height: number;
+    hidden?: boolean;
+    children: import("svelte").Snippet;
+}, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.4",
+	"version": "0.5.5",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"