@hkdigital/lib-core 0.4.96 → 0.4.98

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

@@ -11,6 +11,8 @@
    *   isLandscape: boolean,
    *   isPortrait: boolean,
    *   isMobile:boolean,
+   *   isIos:boolean,
+   *   isAndroid:boolean,
    *   os:'Android'|'iOS',
    *   isFullscreen:boolean,
    *   isDevMode:boolean,
@@ -78,6 +80,10 @@
   let windowWidth = $state();
   let windowHeight = $state();
 
+  let debouncedWindowWidth = $state();
+  let debouncedWindowHeight = $state();
+  let debounceTimer;
+
   let gameWidth = $state();
   let gameHeight = $state();
 
@@ -86,22 +92,60 @@
 
   let isLandscape = $state();
 
+  const isAppleMobile = /iPhone|iPod/.test(navigator.userAgent);
+
+  // Debounce window dimensions on iOS to skip intermediate resize events
+  let skipNextResize = false;
+  let resetTimer;
+
+  $effect(() => {
+    if (isAppleMobile && windowWidth && windowHeight) {
+      if (skipNextResize) {
+        skipNextResize = false;
+        return; // Skip first of the two resize events
+      }
+
+      skipNextResize = true;
+      debouncedWindowWidth = windowWidth;
+      debouncedWindowHeight = windowHeight;
+
+      // Reset flag after resize events settle
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => {
+        skipNextResize = false;
+      }, 500);
+    } else {
+      // Non-iOS: use dimensions immediately
+      debouncedWindowWidth = windowWidth;
+      debouncedWindowHeight = windowHeight;
+    }
+  });
+
+  // Update iOS dimensions when debounced window size changes
+  $effect(() => {
+    if (isPwa && isAppleMobile && debouncedWindowWidth && debouncedWindowHeight) {
+      updateIosWidthHeight();
+    }
+  });
+
   $effect(() => {
     console.debug('getIsLandscape effect running', {
       isPwa,
       isAppleMobile,
       windowWidth,
       windowHeight,
+      debouncedWindowWidth,
+      debouncedWindowHeight,
       iosWindowWidth,
       iosWindowHeight
     });
 
     if (isPwa && isAppleMobile) {
-      // For iOS PWA, update dimensions on window size change
-      updateIosWidthHeight();
+      // For iOS PWA, use iOS-specific dimensions
       isLandscape = iosWindowWidth > iosWindowHeight;
     } else {
-      isLandscape = windowWidth > windowHeight;
+      // For non-PWA, use debounced window dimensions
+      isLandscape = debouncedWindowWidth > debouncedWindowHeight;
     }
   });
 
@@ -156,12 +200,13 @@
 
   let show = $state(false);
 
-  const isAppleMobile = /iPhone|iPod/.test(navigator.userAgent);
-
   let isPwa = $state(false);
 
   let os = $state();
 
+  let isIos = $derived( os === 'iOS' );
+  let isAndroid = $derived( os === 'Android' );
+
   let isMobile = $state(false);
 
   let isDevMode = $state(false);
@@ -194,14 +239,6 @@
     }
   }
 
-  function updateOrientation(event) {
-    console.debug('*** updateOrientation EVENT FIRED ***', {
-      angle: event.target.angle,
-      type: event.target.type
-    });
-    updateIosWidthHeight();
-  }
-
   onMount(() => {
     supportsFullscreen = document.fullscreenEnabled;
 
@@ -217,13 +254,7 @@
 
     updateIosWidthHeight();
 
-    screen.orientation.addEventListener('change', updateOrientation);
-
     show = true;
-
-    return () => {
-      screen.orientation.removeEventListener('change', updateOrientation);
-    };
   });
 
   onMount(() => {
@@ -242,6 +273,9 @@
     } else if (/Android/.test(navigator.userAgent)) {
       return 'Android';
     }
+    else {
+      return 'unknown';
+    }
   }
 
   /**
@@ -372,6 +406,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -387,6 +423,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -402,6 +440,8 @@
                 isLandscape,
                 isPortrait: !isLandscape,
                 isMobile,
+                isIos,
+                isAndroid,
                 os,
                 isFullscreen,
                 isDevMode,
@@ -416,6 +456,8 @@
                 isLandscape,
                 isPortrait: !isLandscape,
                 isMobile,
+                isIos,
+                isAndroid,
                 os,
                 isFullscreen,
                 isDevMode,
@@ -431,6 +473,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -446,6 +490,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -500,6 +546,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -541,6 +589,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -575,6 +625,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,
@@ -616,6 +668,8 @@
                   isLandscape,
                   isPortrait: !isLandscape,
                   isMobile,
+                  isIos,
+                  isAndroid,
                   os,
                   isFullscreen,
                   isDevMode,

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

@@ -39,6 +39,8 @@ declare const GameBox: import("svelte").Component<{
         isLandscape: boolean;
         isPortrait: boolean;
         isMobile: boolean;
+        isIos: boolean;
+        isAndroid: boolean;
         os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
@@ -51,6 +53,8 @@ declare const GameBox: import("svelte").Component<{
         isLandscape: boolean;
         isPortrait: boolean;
         isMobile: boolean;
+        isIos: boolean;
+        isAndroid: boolean;
         os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
@@ -63,6 +67,8 @@ declare const GameBox: import("svelte").Component<{
         isLandscape: boolean;
         isPortrait: boolean;
         isMobile: boolean;
+        isIos: boolean;
+        isAndroid: boolean;
         os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
@@ -75,6 +81,8 @@ declare const GameBox: import("svelte").Component<{
         isLandscape: boolean;
         isPortrait: boolean;
         isMobile: boolean;
+        isIos: boolean;
+        isAndroid: boolean;
         os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
@@ -88,6 +96,8 @@ type SnippetParams = {
     isLandscape: boolean;
     isPortrait: boolean;
     isMobile: boolean;
+    isIos: boolean;
+    isAndroid: boolean;
     os: "Android" | "iOS";
     isFullscreen: boolean;
     isDevMode: boolean;

package/package.json

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