@hkdigital/lib-core 0.5.17 → 0.5.19

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

@@ -3,34 +3,28 @@
 
   import {
     getGameWidthOnLandscape,
-    getGameWidthOnPortrait,
-    isIOS,
-    isIpadOS,
-    getOS,
-    getIsMobile
+    getGameWidthOnPortrait
   } from './gamebox.util.js';
 
+  import {
+    getIsAppleMobile,
+    getIsIpadOS,
+    getIsMobile
+  } from '../../../browser/info/device.js';
+
+  import {
+    getIsPwa,
+    getIsFullscreen
+  } from '../../../browser/info/display.js';
+
   import ScaledContainer from './ScaledContainer.svelte';
 
   /**
-   * @typedef {{
-   *   isLandscape: boolean,
-   *   isPortrait: boolean,
-   *   isMobile:boolean,
-   *   isIos:boolean,
-   *   isAndroid:boolean,
-   *   os:'Android'|'iOS',
-   *   isFullscreen:boolean,
-   *   isDevMode:boolean,
-   *   requestDevmode:function,
-   *   requestFullscreen:function,
-   *   gameWidth: number,
-   *   gameHeight: number
-   * }} SnippetParams
+   * @typedef {import('./typedef.js').SnippetParams} SnippetParams
    */
 
   /**
-   * @typedef {import('svelte').Snippet<[SnippetParams]>} GameBoxSnippet
+   * @typedef {import('./typedef.js').GameBoxSnippet} GameBoxSnippet
    */
 
   /**
@@ -97,11 +91,6 @@
   let windowWidth = $state();
   let windowHeight = $state();
 
-  let debouncedWindowWidth = $state();
-  let debouncedWindowHeight = $state();
-
-  let debounceTimer;
-
   let gameWidthOnPortrait = $state();
   let gameHeightOnPortrait = $state();
 
@@ -132,47 +121,19 @@
   } );
 
   // iPad is also considered Apple mobile
-  const isAppleMobile = isIOS();
-
-  let os = $state();
-  let isIos = $derived(os === 'iOS');
-  let isAndroid = $derived(os === 'Android');
-
-  // 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
-      }
+  const isAppleMobile = getIsAppleMobile();
 
-      // skipNextResize = true; // disabled to test <<
+  let isIos = $state(false);
+  let isAndroid = $state(false);
+  let isIpadOS = $state(false);
 
-      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
+  // Update iOS dimensions when window size changes
   $effect(() => {
     if (
       isPwa &&
       isAppleMobile &&
-      debouncedWindowWidth &&
-      debouncedWindowHeight
+      windowWidth &&
+      windowHeight
     ) {
       updateIosWidthHeight();
     }
@@ -285,13 +246,13 @@
 
     isMobile = getIsMobile();
 
-    os = getOS();
+    isIos = isAppleMobile;
+    isAndroid = !isAppleMobile && /Android/.test(navigator.userAgent);
+    isIpadOS = getIsIpadOS();
 
     isFullscreen = getIsFullscreen();
 
-    isPwa = window.matchMedia(
-      '(display-mode: fullscreen) or (display-mode: standalone)'
-    ).matches;
+    isPwa = getIsPwa();
 
     updateIosWidthHeight();
 
@@ -364,26 +325,6 @@
     }
   });
 
-  /**
-   * Returns true if the window is in full screen
-   * - Checks if CSS thinks we're in fullscreen mode
-   * - Checks if there is a fullscreen element (for safari)
-   */
-  function getIsFullscreen() {
-    if (
-      window.matchMedia(
-        '(display-mode: fullscreen) or (display-mode: standalone)'
-      ).matches
-    ) {
-      return true;
-    } else if (document.fullscreenElement) {
-      // Safari
-      return true;
-    }
-
-    return false;
-  }
-
   async function requestFullscreen() {
     // console.debug('Request full screen');
     show = false;
@@ -484,7 +425,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -508,7 +450,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -532,7 +475,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -556,7 +500,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -581,7 +526,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -605,7 +551,8 @@
                 isMobile,
                 isIos,
                 isAndroid,
-                os,
+                isIpadOS,
+                isPwa,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,

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

@@ -87,74 +87,8 @@ declare const GameBox: import("svelte").Component<{
             max: number;
         };
     };
-    snippetLandscape?: import("svelte").Snippet<[{
-        isLandscape: boolean;
-        isPortrait: boolean;
-        isMobile: boolean;
-        isIos: boolean;
-        isAndroid: boolean;
-        os: "Android" | "iOS";
-        isFullscreen: boolean;
-        isDevMode: boolean;
-        requestDevmode: Function;
-        requestFullscreen: Function;
-        gameWidth: number;
-        gameHeight: number;
-    }]>;
-    snippetPortrait?: import("svelte").Snippet<[{
-        isLandscape: boolean;
-        isPortrait: boolean;
-        isMobile: boolean;
-        isIos: boolean;
-        isAndroid: boolean;
-        os: "Android" | "iOS";
-        isFullscreen: boolean;
-        isDevMode: boolean;
-        requestDevmode: Function;
-        requestFullscreen: Function;
-        gameWidth: number;
-        gameHeight: number;
-    }]>;
-    snippetRequireFullscreen?: import("svelte").Snippet<[{
-        isLandscape: boolean;
-        isPortrait: boolean;
-        isMobile: boolean;
-        isIos: boolean;
-        isAndroid: boolean;
-        os: "Android" | "iOS";
-        isFullscreen: boolean;
-        isDevMode: boolean;
-        requestDevmode: Function;
-        requestFullscreen: Function;
-        gameWidth: number;
-        gameHeight: number;
-    }]>;
-    snippetInstallOnHomeScreen?: import("svelte").Snippet<[{
-        isLandscape: boolean;
-        isPortrait: boolean;
-        isMobile: boolean;
-        isIos: boolean;
-        isAndroid: boolean;
-        os: "Android" | "iOS";
-        isFullscreen: boolean;
-        isDevMode: boolean;
-        requestDevmode: Function;
-        requestFullscreen: Function;
-        gameWidth: number;
-        gameHeight: number;
-    }]>;
+    snippetLandscape?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
+    snippetPortrait?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
+    snippetRequireFullscreen?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
+    snippetInstallOnHomeScreen?: import("svelte").Snippet<[import("./typedef.js").SnippetParams]>;
 }, {}, "">;
-type SnippetParams = {
-    isLandscape: boolean;
-    isPortrait: boolean;
-    isMobile: boolean;
-    isIos: boolean;
-    isAndroid: boolean;
-    os: "Android" | "iOS";
-    isFullscreen: boolean;
-    isDevMode: boolean;
-    requestDevmode: Function;
-    requestFullscreen: Function;
-    gameWidth: number;
-    gameHeight: number;
-};

package/dist/ui/components/game-box/gamebox.util.d.ts

@@ -1,27 +1,3 @@
-/**
- * Check if the device is running iOS (iPhone, iPod, or iPad)
- *
- * @returns {boolean} true if iOS device
- */
-export function isIOS(): boolean;
-/**
- * Check if the device is running iPadOS
- *
- * @returns {boolean} true if iPadOS device
- */
-export function isIpadOS(): boolean;
-/**
- * Get the operating system of the device
- *
- * @returns {'iOS'|'Android'|'unknown'} operating system
- */
-export function getOS(): "iOS" | "Android" | "unknown";
-/**
- * Check if the device is a mobile phone or tablet
- *
- * @returns {boolean} true if mobile device
- */
-export function getIsMobile(): boolean;
 /**
  * Get game width for landscape mode
  *

package/dist/ui/components/game-box/gamebox.util.js

@@ -2,67 +2,6 @@ export const ERROR_WINDOW_SIZE_NOT_LANDSCAPE = 'Window size is not landsccape';
 
 export const ERROR_WINDOW_SIZE_NOT_PORTRAIT = 'Window size is not portrait';
 
-/**
- * Check if the device is running iOS (iPhone, iPod, or iPad)
- *
- * @returns {boolean} true if iOS device
- */
-export function isIOS() {
-  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
-    return true;
-  } else {
-    return navigator.maxTouchPoints &&
-      navigator.maxTouchPoints > 2 &&
-      /MacIntel/.test(navigator.platform);
-  }
-}
-
-/**
- * Check if the device is running iPadOS
- *
- * @returns {boolean} true if iPadOS device
- */
-export function isIpadOS() {
-  return navigator.maxTouchPoints &&
-    navigator.maxTouchPoints > 2 &&
-    /MacIntel/.test(navigator.platform);
-}
-
-/**
- * Get the operating system of the device
- *
- * @returns {'iOS'|'Android'|'unknown'} operating system
- */
-export function getOS() {
-  if (isIOS()) {
-    return 'iOS';
-  } else if (/Android/.test(navigator.userAgent)) {
-    return 'Android';
-  } else {
-    return 'unknown';
-  }
-}
-
-/**
- * Check if the device is a mobile phone or tablet
- *
- * @returns {boolean} true if mobile device
- */
-export function getIsMobile() {
-  // @ts-ignore
-  if (navigator?.userAgentData?.mobile !== undefined) {
-    // Supports for mobile flag
-    // @ts-ignore
-    return navigator.userAgentData.mobile;
-  } else if (isIOS()) {
-    return true;
-  } else if (/Android/.test(navigator.userAgent)) {
-    return true;
-  }
-
-  return false;
-}
-
 /**
  * Get game width for landscape mode
  *

package/dist/ui/components/game-box/typedef.d.ts

@@ -0,0 +1,16 @@
+export type SnippetParams = {
+    isLandscape: boolean;
+    isPortrait: boolean;
+    isMobile: boolean;
+    isIos: boolean;
+    isAndroid: boolean;
+    isIpadOS: boolean;
+    isPwa: boolean;
+    isFullscreen: boolean;
+    isDevMode: boolean;
+    requestDevmode: Function;
+    requestFullscreen: Function;
+    gameWidth: number;
+    gameHeight: number;
+};
+export type GameBoxSnippet = import("svelte").Snippet<[SnippetParams]>;

package/dist/ui/components/game-box/typedef.js

@@ -0,0 +1,23 @@
+/**
+ * @typedef {{
+ *   isLandscape: boolean,
+ *   isPortrait: boolean,
+ *   isMobile: boolean,
+ *   isIos: boolean,
+ *   isAndroid: boolean,
+ *   isIpadOS: boolean,
+ *   isPwa: boolean,
+ *   isFullscreen: boolean,
+ *   isDevMode: boolean,
+ *   requestDevmode: function,
+ *   requestFullscreen: function,
+ *   gameWidth: number,
+ *   gameHeight: number
+ * }} SnippetParams
+ */
+
+/**
+ * @typedef {import('svelte').Snippet<[SnippetParams]>} GameBoxSnippet
+ */
+
+export {};

package/dist/ui/components/typedef.d.ts

@@ -1,5 +1,6 @@
 export * from "./button-group/typedef.js";
 export * from "./drag-drop/typedef.js";
+export * from "./game-box/typedef.js";
 export * from "./image-box/typedef.js";
 export * from "./presenter/typedef.js";
 export * from "./tab-bar/typedef.js";

package/dist/ui/components/typedef.js

@@ -1,5 +1,6 @@
 export * from './button-group/typedef.js';
 export * from './drag-drop/typedef.js';
+export * from './game-box/typedef.js';
 export * from './image-box/typedef.js';
 export * from './presenter/typedef.js';
 export * from './tab-bar/typedef.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.17",
+	"version": "0.5.19",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -73,18 +73,20 @@
 		},
 		"./*": "./dist/*"
 	},
+	"dependencies": {
+		"@tailwindcss/postcss": "^4.1.11",
+		"postcss": "^8.5.6"
+	},
 	"peerDependencies": {
 		"@eslint/js": "^9.33.0",
 		"@skeletonlabs/skeleton": "^3.1.7",
 		"@steeze-ui/heroicons": "^2.4.2",
 		"@sveltejs/kit": "^2.37.1",
-		"@tailwindcss/postcss": "^4.1.11",
 		"autoprefixer": "^10.4.21",
 		"eslint-plugin-import": "^2.32.0",
 		"jsonwebtoken": "^9.0.0",
 		"pino": "^9.8.0",
 		"pino-pretty": "^13.1.1",
-		"postcss": "^8.5.6",
 		"runed": "^0.31.1",
 		"svelte": "^5.38.1",
 		"svelte-preprocess": "^6.0.3",
@@ -102,7 +104,6 @@
 		"@sveltejs/kit": "^2.47.0",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@tailwindcss/postcss": "^4.1.14",
 		"@tailwindcss/typography": "^0.5.19",
 		"@testing-library/svelte": "^5.2.8",
 		"@testing-library/user-event": "^14.6.1",
@@ -121,8 +122,6 @@
 		"npm-run-all": "^4.1.5",
 		"pino": "^9.13.1",
 		"pino-pretty": "^13.1.2",
-		"postcss": "^8.5.6",
-		"postcss-mixins": "^12.1.2",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.14",