@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

package/dist/widgets/game-box/GameBox.svelte.d.ts

@@ -9,6 +9,11 @@ type GameBox = {
         style?: string;
         aspectOnLandscape?: number;
         aspectOnPortrait?: number;
+        marginLeft?: number;
+        marginRight?: number;
+        marginTop?: number;
+        marginBottom?: number;
+        center?: boolean;
         enableScaling?: boolean;
         designLandscape?: {
             width: number;
@@ -36,8 +41,10 @@ type GameBox = {
                 max: number;
             };
         };
-        snippetLandscape?: Snippet<[]>;
-        snippetPortrait?: Snippet<[]>;
+        snippetLandscape?: Snippet<[SnippetParams]>;
+        snippetPortrait?: Snippet<[SnippetParams]>;
+        snippetRequireFullscreen?: Snippet<[SnippetParams]>;
+        snippetInstallOnHomeScreen?: Snippet<[SnippetParams]>;
     }>): void;
 };
 declare const GameBox: import("svelte").Component<{
@@ -48,6 +55,11 @@ declare const GameBox: import("svelte").Component<{
     style?: string;
     aspectOnLandscape?: number;
     aspectOnPortrait?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    center?: boolean;
     enableScaling?: boolean;
     designLandscape?: {
         width: number;
@@ -75,6 +87,54 @@ declare const GameBox: import("svelte").Component<{
             max: number;
         };
     };
-    snippetLandscape?: import("svelte").Snippet;
-    snippetPortrait?: import("svelte").Snippet;
+    snippetLandscape?: import("svelte").Snippet<[{
+        isMobile: boolean;
+        device: string;
+        isFullscreen: boolean;
+        isDevMode: boolean;
+        requestDevmode: Function;
+        requestFullscreen: Function;
+        gameWidth: number;
+        gameHeight: number;
+    }]>;
+    snippetPortrait?: import("svelte").Snippet<[{
+        isMobile: boolean;
+        device: string;
+        isFullscreen: boolean;
+        isDevMode: boolean;
+        requestDevmode: Function;
+        requestFullscreen: Function;
+        gameWidth: number;
+        gameHeight: number;
+    }]>;
+    snippetRequireFullscreen?: import("svelte").Snippet<[{
+        isMobile: boolean;
+        device: string;
+        isFullscreen: boolean;
+        isDevMode: boolean;
+        requestDevmode: Function;
+        requestFullscreen: Function;
+        gameWidth: number;
+        gameHeight: number;
+    }]>;
+    snippetInstallOnHomeScreen?: import("svelte").Snippet<[{
+        isMobile: boolean;
+        device: string;
+        isFullscreen: boolean;
+        isDevMode: boolean;
+        requestDevmode: Function;
+        requestFullscreen: Function;
+        gameWidth: number;
+        gameHeight: number;
+    }]>;
 }, {}, "">;
+type SnippetParams = {
+    isMobile: boolean;
+    device: string;
+    isFullscreen: boolean;
+    isDevMode: boolean;
+    requestDevmode: Function;
+    requestFullscreen: Function;
+    gameWidth: number;
+    gameHeight: number;
+};

package/dist/widgets/game-box/gamebox.util.js

@@ -1,83 +1,83 @@
-export const ERROR_WINDOW_SIZE_NOT_LANDSCAPE = 'Window size is not landsccape';
-
-export const ERROR_WINDOW_SIZE_NOT_PORTRAIT = 'Window size is not portrait';
-
-/**
- * Get game width for landscape mode
- *
- * @param {object} _
- * @param {number} _.windowWidth
- * @param {number} _.windowHeight
- * @param {number} [_.aspectOnLandscape]
- *
- * @returns {number} game width
- */
-export function getGameWidthOnLandscape({
-  windowWidth,
-  windowHeight,
-  aspectOnLandscape
-}) {
-  if (!windowHeight) {
-    return 0;
-  }
-
-  if (windowWidth < windowHeight) {
-    throw new Error(ERROR_WINDOW_SIZE_NOT_LANDSCAPE);
-  }
-
-  if (!aspectOnLandscape) {
-    // No game aspect specified for landscape
-    // => return full width
-    return windowWidth;
-  }
-
-  const windowAspect = windowWidth / windowHeight;
-
-  if (windowAspect > aspectOnLandscape) {
-    // aspect of window if wider than game aspect => fill height
-    return aspectOnLandscape * windowHeight;
-  } else {
-    // aspect of game is wider => fill width
-    return windowWidth;
-  }
-}
-
-/**
- * Get game width for portrait mode
- *
- * @param {object} _
- * @param {number} _.windowWidth
- * @param {number} _.windowHeight
- * @param {number} [_.aspectOnPortrait]
- *
- * @returns {number} game width
- */
-export function getGameWidthOnPortrait({
-  windowWidth,
-  windowHeight,
-  aspectOnPortrait
-}) {
-  if (!windowHeight) {
-    return 0;
-  }
-
-  if (windowHeight < windowWidth) {
-    throw new Error(ERROR_WINDOW_SIZE_NOT_PORTRAIT);
-  }
-
-  if (!aspectOnPortrait) {
-    // No game aspect specified for portrait
-    // => return full width
-    return windowWidth;
-  }
-
-  const windowAspect = windowWidth / windowHeight;
-
-  if (windowAspect > aspectOnPortrait) {
-    // aspect of window if wider than game aspect => fill height
-    return aspectOnPortrait * windowHeight;
-  } else {
-    // aspect of game is wider => fill width
-    return windowWidth;
-  }
-}
+export const ERROR_WINDOW_SIZE_NOT_LANDSCAPE = 'Window size is not landsccape';
+
+export const ERROR_WINDOW_SIZE_NOT_PORTRAIT = 'Window size is not portrait';
+
+/**
+ * Get game width for landscape mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnLandscape]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnLandscape({
+  windowWidth,
+  windowHeight,
+  aspectOnLandscape
+}) {
+  if (!windowHeight) {
+    return 0;
+  }
+
+  if (windowWidth < windowHeight) {
+    throw new Error(ERROR_WINDOW_SIZE_NOT_LANDSCAPE);
+  }
+
+  if (!aspectOnLandscape) {
+    // No game aspect specified for landscape
+    // => return full width
+    return windowWidth;
+  }
+
+  const windowAspect = windowWidth / windowHeight;
+
+  if (windowAspect > aspectOnLandscape) {
+    // aspect of window if wider than game aspect => fill height
+    return aspectOnLandscape * windowHeight;
+  } else {
+    // aspect of game is wider => fill width
+    return windowWidth;
+  }
+}
+
+/**
+ * Get game width for portrait mode
+ *
+ * @param {object} _
+ * @param {number} _.windowWidth
+ * @param {number} _.windowHeight
+ * @param {number} [_.aspectOnPortrait]
+ *
+ * @returns {number} game width
+ */
+export function getGameWidthOnPortrait({
+  windowWidth,
+  windowHeight,
+  aspectOnPortrait
+}) {
+  if (!windowHeight) {
+    return 0;
+  }
+
+  if (windowHeight < windowWidth) {
+    throw new Error(ERROR_WINDOW_SIZE_NOT_PORTRAIT);
+  }
+
+  if (!aspectOnPortrait) {
+    // No game aspect specified for portrait
+    // => return full width
+    return windowWidth;
+  }
+
+  const windowAspect = windowWidth / windowHeight;
+
+  if (windowAspect > aspectOnPortrait) {
+    // aspect of window if wider than game aspect => fill height
+    return aspectOnPortrait * windowHeight;
+  } else {
+    // aspect of game is wider => fill width
+    return windowWidth;
+  }
+}

package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.js

@@ -1,25 +1,25 @@
-import { defineStateContext } from '../../util/svelte/state-context';
-
-import { browser } from '$app/environment';
-
-import { MediaQuery } from 'svelte/reactivity';
-
-/* ------------------------------------------------------- Define state class */
-
-export class AppLayoutState {
-	landscapeOnSmallScreen = $state(false);
-
-	constructor() {
-		if (browser) {
-			let mq = new MediaQuery('(max-height: 400px');
-
-			$effect(() => {
-				this.landscapeOnSmallScreen = mq.matches ? true : false;
-			});
-		}
-	}
-}
-
-/* -------------------------------------- Export create & get state functions */
-
-export const [createOrGetState, createState, getState] = defineStateContext(AppLayoutState);
+import { defineStateContext } from '../../util/svelte/state-context';
+
+import { browser } from '$app/environment';
+
+import { MediaQuery } from 'svelte/reactivity';
+
+/* ------------------------------------------------------- Define state class */
+
+export class AppLayoutState {
+	landscapeOnSmallScreen = $state(false);
+
+	constructor() {
+		if (browser) {
+			let mq = new MediaQuery('(max-height: 400px');
+
+			$effect(() => {
+				this.landscapeOnSmallScreen = mq.matches ? true : false;
+			});
+		}
+	}
+}
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] = defineStateContext(AppLayoutState);