@hkdigital/lib-core 0.5.30 → 0.5.32

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

@@ -53,6 +53,7 @@
    *   snippetPortrait?: GameBoxSnippet,
    *   snippetRequireFullscreen?: GameBoxSnippet,
    *   snippetInstallOnHomeScreen?: GameBoxSnippet,
+   *   debug?: boolean,
    *   [attr: string]: any
    * }}
    */
@@ -84,7 +85,9 @@
     snippetLandscape,
     snippetPortrait,
     snippetRequireFullscreen,
-    snippetInstallOnHomeScreen
+    snippetInstallOnHomeScreen,
+
+    debug = false
   } = $props();
 
   // > Game dimensions and state
@@ -140,18 +143,31 @@
   });
 
   $effect(() => {
-    // Use matchMedia for orientation detection (works on all iOS versions)
-    // This is more reliable than screen.orientation.angle
-    const isPortraitMedia =
-      typeof window !== 'undefined' &&
-      window.matchMedia('(orientation: portrait)').matches;
+    // Use matchMedia as a trigger for orientation changes
+    // The actual orientation is determined in updateIosWidthHeight()
+    if (typeof window !== 'undefined') {
+      const isPortraitMedia =
+        window.matchMedia('(orientation: portrait)').matches;
 
-    isLandscape = !isPortraitMedia;
+      // Trigger iOS dimension update when orientation might have changed
+      if (isPwa && isAppleMobile) {
+        updateIosWidthHeight();
+      } else {
+        // For non-iOS, matchMedia is reliable
+        isLandscape = !isPortraitMedia;
+      }
+    }
   });
 
-  // $inspect('isLandscape', isLandscape);
-  // $inspect('windowWidth/Height', windowWidth, windowHeight);
-  // $inspect('iosWindowWidth/Height', iosWindowWidth, iosWindowHeight);
+  // Use $effect for conditional debugging instead of $inspect
+  $effect(() => {
+    if (debug) {
+      console.log('[GameBox] isLandscape:', isLandscape);
+      console.log('[GameBox] windowWidth/Height:', windowWidth, windowHeight);
+      console.log('[GameBox] iosWindowWidth/Height:',
+        iosWindowWidth, iosWindowHeight);
+    }
+  });
 
   // Update game dimensions based on window size and orientation
   $effect(() => {
@@ -163,45 +179,45 @@
     const availWidth = width - marginLeft - marginRight;
     const availHeight = height - marginTop - marginBottom;
 
-    // console.debug('GameBox margins:', {
-    //   marginLeft,
-    //   marginRight,
-    //   marginTop,
-    //   marginBottom
-    // });
-
-    if (availWidth > availHeight) {
-      gameWidthOnLandscape = getGameWidthOnLandscape({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnLandscape
+    if( debug )
+    {
+      console.debug('GameBox margins:', {
+        marginLeft,
+        marginRight,
+        marginTop,
+        marginBottom
       });
+    }
 
-      if( aspectOnLandscape )
-      {
-        gameHeightOnLandscape = gameWidthOnLandscape / aspectOnLandscape;
-      }
-      else {
-        gameHeightOnLandscape = availHeight;
-      }
-
-      isLandscape = true;
-    } else {
-      gameWidthOnPortrait = getGameWidthOnPortrait({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnPortrait
-      });
+    // Calculate game dimensions for both orientations
+    // Orientation is determined by matchMedia/screen.orientation.angle,
+    // not by dimension comparison
+    gameWidthOnLandscape = getGameWidthOnLandscape({
+      windowWidth: availWidth,
+      windowHeight: availHeight,
+      aspectOnLandscape
+    });
+
+    if( aspectOnLandscape )
+    {
+      gameHeightOnLandscape = gameWidthOnLandscape / aspectOnLandscape;
+    }
+    else {
+      gameHeightOnLandscape = availHeight;
+    }
 
-      if( aspectOnPortrait )
-      {
-        gameHeightOnPortrait = gameWidthOnPortrait / aspectOnPortrait;
-      }
-      else {
-        gameHeightOnPortrait = availHeight;
-      }
+    gameWidthOnPortrait = getGameWidthOnPortrait({
+      windowWidth: availWidth,
+      windowHeight: availHeight,
+      aspectOnPortrait
+    });
 
-      isLandscape = false;
+    if( aspectOnPortrait )
+    {
+      gameHeightOnPortrait = gameWidthOnPortrait / aspectOnPortrait;
+    }
+    else {
+      gameHeightOnPortrait = availHeight;
     }
   });
 
@@ -222,6 +238,10 @@
     if (isPwa && isAppleMobile) {
       const angle = screen.orientation.angle;
 
+      // Use screen.orientation.angle as the source of truth
+      // angle 90/270 = landscape, angle 0/180 = portrait
+      isLandscape = (angle === 90 || angle === 270);
+
       // Use window.inner dimensions instead of screen dimensions
       // because screen.width/height don't rotate on iOS PWA
       if (angle === 90 || angle === 270) {
@@ -231,13 +251,18 @@
         iosWindowWidth = window.innerWidth;
         iosWindowHeight = window.innerHeight;
       }
-      // console.debug('updateIosWidthHeight', {
-      //   angle,
-      //   'window.innerWidth': window.innerWidth,
-      //   'window.innerHeight': window.innerHeight,
-      //   iosWindowWidth,
-      //   iosWindowHeight
-      // });
+
+      if( debug )
+      {
+        console.debug('updateIosWidthHeight', {
+          angle,
+          isLandscape,
+          'window.innerWidth': window.innerWidth,
+          'window.innerHeight': window.innerHeight,
+          iosWindowWidth,
+          iosWindowHeight
+        });
+      }
     }
   }
 
@@ -259,11 +284,12 @@
     // Listen for orientation changes using matchMedia (works on all iOS)
     const portraitMediaQuery = window.matchMedia('(orientation: portrait)');
     const handleOrientationChange = (e) => {
-      isLandscape = !e.matches;
-
       // Update iOS dimensions if needed
       if (isPwa && isAppleMobile) {
         updateIosWidthHeight();
+      } else {
+        // For non-iOS, matchMedia is reliable
+        isLandscape = !e.matches;
       }
     };
     portraitMediaQuery.addEventListener('change', handleOrientationChange);
@@ -271,21 +297,24 @@
     // App visibility detection for iOS debugging
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
-        // console.log('App became visible:', {
-        //   'window.innerWidth': window.innerWidth,
-        //   'window.innerHeight': window.innerHeight,
-        //   'screen.width': screen.width,
-        //   'screen.height': screen.height,
-        //   'screen.orientation.angle': screen.orientation.angle,
-        //   'screen.orientation.type': screen.orientation.type,
-        //   'matchMedia portrait':
-        //     window.matchMedia('(orientation: portrait)').matches,
-        //   'isLandscape': isLandscape,
-        //   'gameWidth': gameWidth,
-        //   'gameHeight': gameHeight,
-        //   'iosWindowWidth': iosWindowWidth,
-        //   'iosWindowHeight': iosWindowHeight
-        // });
+
+        if( debug ) {
+          console.log('App became visible:', {
+            'window.innerWidth': window.innerWidth,
+            'window.innerHeight': window.innerHeight,
+            'screen.width': screen.width,
+            'screen.height': screen.height,
+            'screen.orientation.angle': screen.orientation.angle,
+            'screen.orientation.type': screen.orientation.type,
+            'matchMedia portrait':
+              window.matchMedia('(orientation: portrait)').matches,
+            'isLandscape': isLandscape,
+            'gameWidth': gameWidth,
+            'gameHeight': gameHeight,
+            'iosWindowWidth': iosWindowWidth,
+            'iosWindowHeight': iosWindowHeight
+          });
+        }
 
         // Force iOS dimension update when app becomes visible
         if (isPwa && isAppleMobile) {

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

@@ -45,6 +45,7 @@ type GameBox = {
         snippetPortrait?: Snippet<[SnippetParams]> | undefined;
         snippetRequireFullscreen?: Snippet<[SnippetParams]> | undefined;
         snippetInstallOnHomeScreen?: Snippet<[SnippetParams]> | undefined;
+        debug?: boolean | undefined;
     }>): void;
 };
 declare const GameBox: import("svelte").Component<{
@@ -91,4 +92,5 @@ declare const GameBox: import("svelte").Component<{
     snippetPortrait?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
     snippetRequireFullscreen?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
     snippetInstallOnHomeScreen?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
+    debug?: boolean;
 }, {}, "">;

package/package.json

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