@hkdigital/lib-core 0.5.16 → 0.5.18

package/dist/browser/info/system.js

@@ -0,0 +1,102 @@
+/**
+ * Get simplified platform identifier
+ *
+ * @example
+ * // 'macos', 'windows', 'linux', 'ios', 'android', 'unknown'
+ *
+ * @returns {string} platform identifier
+ */
+export function getPlatform() {
+  const platform = navigator.platform.toLowerCase();
+  const ua = navigator.userAgent.toLowerCase();
+
+  // iOS devices
+  if (/iphone|ipod|ipad/.test(platform)) {
+    return 'ios';
+  }
+
+  // iPadOS (reports as MacIntel but has touch)
+  if (platform === 'macintel' && navigator.maxTouchPoints > 2) {
+    return 'ios';
+  }
+
+  // Android
+  if (/android/.test(ua)) {
+    return 'android';
+  }
+
+  // macOS
+  if (/mac/.test(platform)) {
+    return 'macos';
+  }
+
+  // Windows
+  if (/win/.test(platform)) {
+    return 'windows';
+  }
+
+  // Linux
+  if (/linux/.test(platform)) {
+    return 'linux';
+  }
+
+  return 'unknown';
+}
+
+/**
+ * Get raw platform string from navigator
+ *
+ * @example
+ * // 'MacIntel', 'Win32', 'Linux x86_64', 'iPhone', 'iPad'
+ *
+ * @returns {string} raw platform identifier
+ */
+export function getPlatformRaw() {
+  return navigator.platform;
+}
+
+/**
+ * Get number of CPU cores (logical processors)
+ *
+ * @example
+ * // Desktop: 8, 16, 24
+ * // Mobile: 4, 6, 8
+ * // Older devices: 2
+ *
+ * @returns {number} number of logical processors
+ */
+export function getCpuCores() {
+  return navigator.hardwareConcurrency || 1;
+}
+
+/**
+ * Check if device is online
+ *
+ * @example
+ * // true (connected), false (offline)
+ *
+ * @returns {boolean} true if online
+ */
+export function isOnline() {
+  return navigator.onLine;
+}
+
+/**
+ * Get connection type if available (experimental API)
+ *
+ * @example
+ * // '4g', '3g', 'slow-2g', 'wifi', null
+ *
+ * @returns {string|null} connection type or null
+ */
+export function getConnectionType() {
+  // @ts-ignore
+  const connection =
+    navigator.connection ||
+    // @ts-ignore
+    navigator.mozConnection ||
+    // @ts-ignore
+    navigator.webkitConnection;
+
+  return connection?.effectiveType || null;
+}

package/dist/browser/info/timezone.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Get timezone offset in minutes
+ *
+ * @example
+ * // UTC: 0
+ * // PST (UTC-8): 480
+ * // CET (UTC+1): -60
+ *
+ * @returns {number} timezone offset
+ */
+export function getTimezoneOffset(): number;
+/**
+ * Get timezone name
+ *
+ * @example
+ * // 'America/New_York', 'Europe/Amsterdam', 'Asia/Tokyo'
+ *
+ * @returns {string} timezone identifier
+ */
+export function getTimezone(): string;

package/dist/browser/info/timezone.js

@@ -0,0 +1,25 @@
+/**
+ * Get timezone offset in minutes
+ *
+ * @example
+ * // UTC: 0
+ * // PST (UTC-8): 480
+ * // CET (UTC+1): -60
+ *
+ * @returns {number} timezone offset
+ */
+export function getTimezoneOffset() {
+  return new Date().getTimezoneOffset();
+}
+
+/**
+ * Get timezone name
+ *
+ * @example
+ * // 'America/New_York', 'Europe/Amsterdam', 'Asia/Tokyo'
+ *
+ * @returns {string} timezone identifier
+ */
+export function getTimezone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}

package/dist/browser/info.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @typedef {{
+ *   deviceType?: boolean,
+ *   isMobile?: boolean,
+ *   platform?: boolean,
+ *   browser?: boolean,
+ *   browserEngine?: boolean,
+ *   screenWidth?: boolean,
+ *   screenHeight?: boolean,
+ *   devicePixelRatio?: boolean,
+ *   hasTouch?: boolean,
+ *   language?: boolean,
+ *   timezone?: boolean,
+ *   isPwa?: boolean,
+ *   viewportWidth?: boolean,
+ *   viewportHeight?: boolean,
+ *   orientation?: boolean,
+ *   cpuCores?: boolean,
+ *   connectionType?: boolean
+ * }} BrowserInfoOptions
+ */
+/**
+ * @typedef {import('./typedef.js').BrowserInfo} BrowserInfo
+ */
+/**
+ * Collect browser and device information for analytics/stats
+ *
+ * @param {BrowserInfoOptions} [options] - Enable/disable individual properties
+ *
+ * @returns {BrowserInfo} collected browser information
+ *
+ * @example
+ * // Get all essential info (default)
+ * const info = getBrowserInfo();
+ *
+ * @example
+ * // Get only specific properties
+ * const info = getBrowserInfo({
+ *   deviceType: true,
+ *   platform: true,
+ *   browser: true
+ * });
+ *
+ * @example
+ * // Get essential + extended properties
+ * const info = getBrowserInfo({
+ *   deviceType: true,
+ *   platform: true,
+ *   viewportWidth: true,
+ *   viewportHeight: true,
+ *   orientation: true,
+ *   cpuCores: true
+ * });
+ */
+export function getBrowserInfo(options?: BrowserInfoOptions): BrowserInfo;
+export * from "./info/device.js";
+export * from "./info/display.js";
+export * from "./info/engine.js";
+export * from "./info/language.js";
+export * from "./info/system.js";
+export * from "./info/timezone.js";
+export type BrowserInfoOptions = {
+    deviceType?: boolean;
+    isMobile?: boolean;
+    platform?: boolean;
+    browser?: boolean;
+    browserEngine?: boolean;
+    screenWidth?: boolean;
+    screenHeight?: boolean;
+    devicePixelRatio?: boolean;
+    hasTouch?: boolean;
+    language?: boolean;
+    timezone?: boolean;
+    isPwa?: boolean;
+    viewportWidth?: boolean;
+    viewportHeight?: boolean;
+    orientation?: boolean;
+    cpuCores?: boolean;
+    connectionType?: boolean;
+};
+export type BrowserInfo = import("./typedef.js").BrowserInfo;

package/dist/browser/info.js

@@ -0,0 +1,185 @@
+export * from './info/device.js';
+export * from './info/display.js';
+export * from './info/engine.js';
+export * from './info/language.js';
+export * from './info/system.js';
+export * from './info/timezone.js';
+
+import { getDeviceType, getIsMobile } from './info/device.js';
+import { getBrowserName, getBrowserEngine } from './info/engine.js';
+
+import {
+  getScreenSize,
+  getViewportSize,
+  getDevicePixelRatio,
+  getOrientation,
+  hasTouchSupport,
+  getIsPwa
+} from './info/display.js';
+
+import { getLanguage } from './info/language.js';
+import { getPlatform, getCpuCores, getConnectionType } from './info/system.js';
+import { getTimezone } from './info/timezone.js';
+
+/**
+ * @typedef {{
+ *   deviceType?: boolean,
+ *   isMobile?: boolean,
+ *   platform?: boolean,
+ *   browser?: boolean,
+ *   browserEngine?: boolean,
+ *   screenWidth?: boolean,
+ *   screenHeight?: boolean,
+ *   devicePixelRatio?: boolean,
+ *   hasTouch?: boolean,
+ *   language?: boolean,
+ *   timezone?: boolean,
+ *   isPwa?: boolean,
+ *   viewportWidth?: boolean,
+ *   viewportHeight?: boolean,
+ *   orientation?: boolean,
+ *   cpuCores?: boolean,
+ *   connectionType?: boolean
+ * }} BrowserInfoOptions
+ */
+
+/**
+ * @typedef {import('./typedef.js').BrowserInfo} BrowserInfo
+ */
+
+/**
+ * Collect browser and device information for analytics/stats
+ *
+ * @param {BrowserInfoOptions} [options] - Enable/disable individual properties
+ *
+ * @returns {BrowserInfo} collected browser information
+ *
+ * @example
+ * // Get all essential info (default)
+ * const info = getBrowserInfo();
+ *
+ * @example
+ * // Get only specific properties
+ * const info = getBrowserInfo({
+ *   deviceType: true,
+ *   platform: true,
+ *   browser: true
+ * });
+ *
+ * @example
+ * // Get essential + extended properties
+ * const info = getBrowserInfo({
+ *   deviceType: true,
+ *   platform: true,
+ *   viewportWidth: true,
+ *   viewportHeight: true,
+ *   orientation: true,
+ *   cpuCores: true
+ * });
+ */
+export function getBrowserInfo(options = {}) {
+  // Default to BrowserInfoEssential properties
+  const {
+    deviceType = true,
+    isMobile = true,
+    platform = true,
+    browser = true,
+    browserEngine = true,
+    screenWidth = true,
+    screenHeight = true,
+    devicePixelRatio = true,
+    hasTouch = true,
+    language = true,
+    timezone = true,
+    isPwa = true,
+    // Extended properties (default false)
+    viewportWidth = false,
+    viewportHeight = false,
+    orientation = false,
+    cpuCores = false,
+    connectionType = false
+  } = options;
+
+  const info = {};
+
+  // Device type
+  if (deviceType) {
+    info.deviceType = getDeviceType();
+  }
+
+  // Mobile check
+  if (isMobile) {
+    info.isMobile = getIsMobile();
+  }
+
+  // Platform
+  if (platform) {
+    info.platform = getPlatform();
+  }
+
+  // Browser name
+  if (browser) {
+    info.browser = getBrowserName();
+  }
+
+  // Browser engine
+  if (browserEngine) {
+    info.browserEngine = getBrowserEngine();
+  }
+
+  // Screen dimensions
+  if (screenWidth || screenHeight) {
+    const screenSize = getScreenSize();
+    if (screenWidth) info.screenWidth = screenSize.width;
+    if (screenHeight) info.screenHeight = screenSize.height;
+  }
+
+  // Device pixel ratio
+  if (devicePixelRatio) {
+    info.devicePixelRatio = getDevicePixelRatio();
+  }
+
+  // Touch support
+  if (hasTouch) {
+    info.hasTouch = hasTouchSupport();
+  }
+
+  // Language
+  if (language) {
+    info.language = getLanguage();
+  }
+
+  // Timezone
+  if (timezone) {
+    info.timezone = getTimezone();
+  }
+
+  // PWA
+  if (isPwa) {
+    info.isPwa = getIsPwa();
+  }
+
+  // Viewport dimensions (extended)
+  if (viewportWidth || viewportHeight) {
+    const viewportSize = getViewportSize();
+    if (viewportWidth) info.viewportWidth = viewportSize.width;
+    if (viewportHeight) info.viewportHeight = viewportSize.height;
+  }
+
+  // Orientation (extended)
+  if (orientation) {
+    info.orientation = getOrientation();
+  }
+
+  // CPU cores (extended)
+  if (cpuCores) {
+    info.cpuCores = getCpuCores();
+  }
+
+  // Connection type (extended)
+  if (connectionType) {
+    info.connectionType = getConnectionType();
+  }
+
+  return info;
+}

package/dist/browser/typedef.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Essential browser info
+ */
+export type BrowserInfoEssential = {
+    deviceType?: "phone" | "tablet" | "tv" | "desktop";
+    isMobile?: boolean;
+    platform?: string;
+    browser?: string;
+    browserEngine?: "blink" | "gecko" | "webkit" | "unknown";
+    screenWidth?: number;
+    screenHeight?: number;
+    devicePixelRatio?: number;
+    hasTouch?: boolean;
+    language?: string;
+    timezone?: string;
+    isPwa?: boolean;
+};
+/**
+ * Extended browser info (opt-in)
+ */
+export type BrowserInfoExtended = {
+    viewportWidth?: number;
+    viewportHeight?: number;
+    orientation?: "portrait" | "landscape";
+    cpuCores?: number;
+    connectionType?: string | null;
+};
+/**
+ * Complete browser info (essential + extended)
+ */
+export type BrowserInfo = BrowserInfoEssential & BrowserInfoExtended;

package/dist/browser/typedef.js

@@ -0,0 +1,38 @@
+/**
+ * Essential browser info
+ *
+ * @typedef {{
+ *   deviceType?: 'phone'|'tablet'|'tv'|'desktop',
+ *   isMobile?: boolean,
+ *   platform?: string,
+ *   browser?: string,
+ *   browserEngine?: 'blink'|'gecko'|'webkit'|'unknown',
+ *   screenWidth?: number,
+ *   screenHeight?: number,
+ *   devicePixelRatio?: number,
+ *   hasTouch?: boolean,
+ *   language?: string,
+ *   timezone?: string,
+ *   isPwa?: boolean
+ * }} BrowserInfoEssential
+ */
+
+/**
+ * Extended browser info (opt-in)
+ *
+ * @typedef {{
+ *   viewportWidth?: number,
+ *   viewportHeight?: number,
+ *   orientation?: 'portrait'|'landscape',
+ *   cpuCores?: number,
+ *   connectionType?: string|null
+ * }} BrowserInfoExtended
+ */
+
+/**
+ * Complete browser info (essential + extended)
+ *
+ * @typedef {BrowserInfoEssential & BrowserInfoExtended} BrowserInfo
+ */
+
+export {};

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,