@hkdigital/lib-sveltekit 0.1.65 → 0.1.67

package/dist/classes/svelte/audio/AudioScene.svelte.d.ts

@@ -11,6 +11,8 @@
 export default class AudioScene {
     state: string;
     loaded: boolean;
+    muted: boolean;
+    targetGain: number;
     destroy(): void;
     /**
      * Add in-memory audio source
@@ -44,6 +46,20 @@ export default class AudioScene {
      * @returns {Promise<AudioBufferSourceNode>}
      */
     getSourceNode(label: string): Promise<AudioBufferSourceNode>;
+    /**
+     * Set target gain
+     *
+     * @param {number} value
+     */
+    setTargetGain(value: number): void;
+    /**
+     * Get the scene gain
+     *
+     * @returns {number} value
+     */
+    getTargetGain(): number;
+    mute(): void;
+    unmute(): void;
     #private;
 }
 /**

package/dist/classes/svelte/audio/AudioScene.svelte.js

@@ -41,9 +41,20 @@ export default class AudioScene {
 		return this.state === STATE_LOADED;
 	});
 
+	#targetGain = $state(1);
+
+	#unmutedTargetGain = 1;
+
+	muted = $derived( this.#targetGain === 0 );
+
+	targetGain = $derived( this.#targetGain );
+
 	/** @type {AudioContext|null} */
 	#audioContext = null;
 
+	/** {GainNode} */
+	#targetGainNode = null;
+
 	/** @type {MemorySource[]} */
 	#memorySources = $state([]);
 
@@ -220,7 +231,8 @@ export default class AudioScene {
 		);
 
 		// @ts-ignore
-		sourceNode.connect(this.#getAudioContext().destination);
+		sourceNode.connect(this.#getGainNode());
+		// sourceNode.connect(this.#getAudioContext().destination);
 
 		// Clean up
 		sourceNode.onended = () => {
@@ -231,6 +243,62 @@ export default class AudioScene {
 		return sourceNode;
 	}
 
+	/**
+	 * Set target gain
+	 *
+	 * @param {number} value
+	 */
+	setTargetGain( value ) {
+		this.#targetGain = value;
+
+		// Set immediate
+		this.#getGainNode().gain.value = value;
+	}
+
+	/**
+	 * Get the scene gain
+	 *
+	 * @returns {number} value
+	 */
+	getTargetGain()
+	{
+		return this.#targetGain;
+	}
+
+	mute() {
+		if( this.muted )
+		{
+			return;
+		}
+
+		this.#unmutedTargetGain = this.#targetGain;
+		this.setTargetGain(0);
+	}
+
+	unmute() {
+		if( !this.muted )
+		{
+			return;
+		}
+
+		this.setTargetGain(this.#unmutedTargetGain);
+	}
+
+
+	#getGainNode()
+	{
+		if( !this.#targetGainNode )
+		{
+			const audioContext = this.#getAudioContext();
+
+			this.#targetGainNode = audioContext.createGain();
+			this.#targetGainNode.connect(audioContext.destination);
+			this.setTargetGain(this.#targetGain);
+		}
+
+		return this.#targetGainNode;
+	}
+
 	#getAudioContext()
 	{
 		if( !this.#audioContext )
@@ -257,39 +325,4 @@ export default class AudioScene {
 
 		throw new Error(`Source [${label}] has not been defined`);
 	}
-
-	// connect
-	// play
-
-	// source.connect(audioContext.destination);
-	// source.loop = true;
-	// source.start();
-
-	// /**
-	//  * Get the source identified by the specified label
-	//  *
-	//  * @param {string} label
-	//  */
-	// async getBufferSourceNode(label) {
-	//   // expect.notEmptyString( label );
-
-	//   for (const source of this.#memorySources) {
-	//     if (label === source.label) {
-	//       if (!source.bufferSourceNode) {
-	//         source.bufferSourceNode =
-	//           await source.AudioLoader.transferToBufferSource(this.#audioContext);
-	//       }
-
-	//       return source.bufferSourceNode;
-	//     }
-	//   }
-	// }
-
-	// async connectSourceToDestination(label) {
-	//   const source = await this.getBufferSourceNode(label);
-
-	//   if (source) {
-	//     source.connect(this.#audioContext.destination);
-	//   }
-	// }
 }

package/dist/components/inputs/text-input/TextInput.svelte

@@ -27,6 +27,7 @@
    *   legendBase?: string,
    *   legendClasses?: string,
    *   iconClasses?: string,
+   *   initialValue?: string,
    *   value?: string,
    *   type?: 'text' | 'url' | 'email' | 'number',
    *   pattern?: string,
@@ -43,7 +44,7 @@
    * } & { [attr: string]: any }}
    */
   let {
-    initialValue,
+    initialValue = '',
     value = $bindable(''),
 
     isValid = $bindable(true),
@@ -91,7 +92,6 @@
 
   let inputRef = $state();
   let validationMessage = $state('');
-  // let initialValue = $state('');
 
   $effect(() => {
     if (!inputRef) return;

package/dist/components/inputs/text-input/TextInput.svelte.d.ts

@@ -10,6 +10,7 @@ type TextInput = {
         legendBase?: string;
         legendClasses?: string;
         iconClasses?: string;
+        initialValue?: string;
         value?: string;
         type?: "number" | "url" | "text" | "email";
         pattern?: string;
@@ -36,6 +37,7 @@ declare const TextInput: import("svelte").Component<{
     legendBase?: string;
     legendClasses?: string;
     iconClasses?: string;
+    initialValue?: string;
     value?: string;
     type?: "text" | "url" | "email" | "number";
     pattern?: string;

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

@@ -6,12 +6,13 @@
     getGameWidthOnPortrait
   } from './gamebox.util.js';
 
-  import { enableContainerScaling } from '../../util/design-system/index.js';
+  //import { enableContainerScaling } from '../../util/design-system/index.js';
+  import { enableContainerScaling } from '@hkdigital/lib-sveltekit/util/design-system/index.js';
 
   /**
    * @typedef {{
    *   isMobile:boolean,
-   *   device:string,
+   *   os:'Android'|'iOS',
    *   isFullscreen:boolean,
    *   isDevMode:boolean,
    *   requestDevmode:function,
@@ -98,12 +99,6 @@
   let gameWidth = $state();
   let gameHeight = $state();
 
-  let isAppleMobile = getIsAppleMobile();
-
-  let isPwa = $state(false);
-
-  let device = $state();
-
   let iosWindowWidth = $state();
   let iosWindowHeight = $state();
 
@@ -197,6 +192,12 @@
 
   let show = $state(false);
 
+  const isAppleMobile = /iPhone|iPod/.test(navigator.userAgent);
+
+  let isPwa = $state(false);
+
+  let os = $state();
+
   let isMobile = $state(false);
 
   let isDevMode = $state(false);
@@ -211,7 +212,7 @@
 
     isMobile = getIsMobile();
 
-    device = whatDevice();
+    os = getOS();
 
     // Run before show
     isFullscreen = !!document.fullscreenElement;
@@ -291,13 +292,9 @@
     };
   });
 
-  function getIsAppleMobile() {
-    return /iPhone|iPod/.test(navigator.userAgent);
-  }
-
-  function whatDevice() {
+  function getOS() {
     if (isAppleMobile) {
-      return 'IOS';
+      return 'iOS';
     } else if (/Android/.test(navigator.userAgent)) {
       return 'Android';
     }
@@ -430,7 +427,7 @@
             {#if isFullscreen && !isDevMode}
               {@render snippetLandscape({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -442,7 +439,7 @@
               <!-- Require fullscreen (on landscape) -->
               {@render snippetRequireFullscreen({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -454,7 +451,7 @@
               <!-- Require install on home screen on mobile -->
               {@render snippetInstallOnHomeScreen({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -465,7 +462,7 @@
             {:else}
               {@render snippetLandscape({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -479,7 +476,7 @@
             <!-- *we do not try install home app -->
             {@render snippetLandscape({
               isMobile,
-              device,
+              os,
               isFullscreen,
               isDevMode,
               requestDevmode,
@@ -495,7 +492,7 @@
             {#if isFullscreen && !isDevMode}
               {@render snippetPortrait({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -507,7 +504,7 @@
               <!-- Require fullscreen (on landscape) -->
               {@render snippetRequireFullscreen({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -519,7 +516,7 @@
               <!-- Require install on home screen on mobile -->
               {@render snippetInstallOnHomeScreen({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -530,7 +527,7 @@
             {:else}
               {@render snippetPortrait({
                 isMobile,
-                device,
+                os,
                 isFullscreen,
                 isDevMode,
                 requestDevmode,
@@ -544,7 +541,7 @@
             <!-- *we do not try install home app -->
             {@render snippetPortrait({
               isMobile,
-              device,
+              os,
               isFullscreen,
               isDevMode,
               requestDevmode,

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

@@ -89,7 +89,7 @@ declare const GameBox: import("svelte").Component<{
     };
     snippetLandscape?: import("svelte").Snippet<[{
         isMobile: boolean;
-        device: string;
+        os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
         requestDevmode: Function;
@@ -99,7 +99,7 @@ declare const GameBox: import("svelte").Component<{
     }]>;
     snippetPortrait?: import("svelte").Snippet<[{
         isMobile: boolean;
-        device: string;
+        os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
         requestDevmode: Function;
@@ -109,7 +109,7 @@ declare const GameBox: import("svelte").Component<{
     }]>;
     snippetRequireFullscreen?: import("svelte").Snippet<[{
         isMobile: boolean;
-        device: string;
+        os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
         requestDevmode: Function;
@@ -119,7 +119,7 @@ declare const GameBox: import("svelte").Component<{
     }]>;
     snippetInstallOnHomeScreen?: import("svelte").Snippet<[{
         isMobile: boolean;
-        device: string;
+        os: "Android" | "iOS";
         isFullscreen: boolean;
         isDevMode: boolean;
         requestDevmode: Function;
@@ -130,7 +130,7 @@ declare const GameBox: import("svelte").Component<{
 }, {}, "">;
 type SnippetParams = {
     isMobile: boolean;
-    device: string;
+    os: "Android" | "iOS";
     isFullscreen: boolean;
     isDevMode: boolean;
     requestDevmode: Function;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.65",
+	"version": "0.1.67",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -74,6 +74,8 @@
 		"@sveltejs/package": "2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
+		"@testing-library/svelte": "^5.2.7",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.21.0",