lido-player 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/app-col.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppCol extends Components.AppCol, HTMLElement {}
+export const AppCol: {
+    prototype: AppCol;
+    new (): AppCol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppContainer extends Components.AppContainer, HTMLElement {}
+export const AppContainer: {
+    prototype: AppContainer;
+    new (): AppContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-home.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppHome extends Components.AppHome, HTMLElement {}
+export const AppHome: {
+    prototype: AppHome;
+    new (): AppHome;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppImage extends Components.AppImage, HTMLElement {}
+export const AppImage: {
+    prototype: AppImage;
+    new (): AppImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-pos.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppPos extends Components.AppPos, HTMLElement {}
+export const AppPos: {
+    prototype: AppPos;
+    new (): AppPos;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-random.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppRandom extends Components.AppRandom, HTMLElement {}
+export const AppRandom: {
+    prototype: AppRandom;
+    new (): AppRandom;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-root.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppRoot extends Components.AppRoot, HTMLElement {}
+export const AppRoot: {
+    prototype: AppRoot;
+    new (): AppRoot;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-row.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppRow extends Components.AppRow, HTMLElement {}
+export const AppRow: {
+    prototype: AppRow;
+    new (): AppRow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-shape.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppShape extends Components.AppShape, HTMLElement {}
+export const AppShape: {
+    prototype: AppShape;
+    new (): AppShape;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppText extends Components.AppText, HTMLElement {}
+export const AppText: {
+    prototype: AppText;
+    new (): AppText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-trace.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppTrace extends Components.AppTrace, HTMLElement {}
+export const AppTrace: {
+    prototype: AppTrace;
+    new (): AppTrace;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-wrap.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppWrap extends Components.AppWrap, HTMLElement {}
+export const AppWrap: {
+    prototype: AppWrap;
+    new (): AppWrap;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/lido-player/app-col.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, h, a as Host, e as getElement } from './index-9624adf5.js';
+import { i as initEventsForElement } from './utils-291495a4.js';
+import './constants-f484fcec.js';
+
+const appColCss = ".col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.col>*{}";
+
+const AppCol = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onInCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onEntry = undefined;
+    }
+    /**
+     * This lifecycle hook is called after the component is rendered in the DOM.
+     * It initializes events for the column based on the provided type.
+     */
+    componentDidLoad() {
+        initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Inline styles applied to the column, mainly for positioning and background.
+        const style = {
+            height: this.height,
+            width: this.width,
+            backgroundColor: this.bgColor,
+            top: this.y,
+            left: this.x,
+            display: this.visible ? 'flex' : 'none',
+            zIndex: this.z,
+        };
+        return (h(Host, { key: '3cd3b141cf167e7c43132fc0f28fe049765e3e68', id: this.id, class: "col", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, h("slot", { key: 'fecc9cdf6b7204461c07e89de0ebec35559f8daf' })));
+    }
+    get el() { return getElement(this); }
+};
+AppCol.style = appColCss;
+
+export { AppCol as app_col };
+
+//# sourceMappingURL=app-col.entry.js.map

package/dist/lido-player/app-col.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-col.entry.esm.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,gQAAgQ;;MCiBrQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6GjB,gBAAgB;QACd,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM;;QAEJ,MAAM,KAAK,GAAG;YACZ,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,GAAG,EAAE,IAAI,CAAC,CAAC;YACX,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM;YACvC,MAAM,EAAE,IAAI,CAAC,CAAC;SACf,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,KAAK,gBACA,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,UAAU,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,8DAAQ,CACH,EACP;KACH;;;;;;;","names":[],"sources":["src/components/column/app-col.css?tag=app-col","src/components/column/AppCol.tsx"],"sourcesContent":[".col {\n  /* position: absolute; */\n  top: var(--y, 0);\n  left: var(--x, 0);\n  height: var(--height, 100%);\n  width: var(--width, 100%);\n  background-color: var(--bgColor, #eeeeee);\n  /* position: relative; */\n  padding: 15px;\n  border-radius: 10px;\n  display: flex;\n  justify-content: space-around;\n  flex-direction: column;\n  align-items: center;\n}\n\n.col > * {\n  /* position: relative; */\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { initEventsForElement } from '../../utils/utils';\n\n/**\n * @component AppCol\n *\n * The `AppCol` component is a dynamic column-like UI element that can be\n * customized via various properties such as dimensions, position, visibility,\n * background color, and event handlers. It is designed to work within\n * containers (`app-container`) and can include child components like\n * `app-text`, `app-row`, etc.\n */\n@Component({\n  tag: 'app-col',\n  styleUrl: 'app-col.css',\n  shadow: false,\n})\nexport class AppCol {\n  /**\n   * The unique identifier for the column component.\n   */\n  @Prop() id: string;\n\n  /**\n   * The value associated with the column component. Typically used for internal logic.\n   */\n  @Prop() value: string;\n\n  /**\n   * The height of the column component (CSS value, e.g., '100px', '50%').\n   */\n  @Prop() height: string;\n\n  /**\n   * The width of the column component (CSS value, e.g., '100px', '50%').\n   */\n  @Prop() width: string;\n\n  /**\n   * The ARIA label of the container. Used for accessibility to indicate the purpose of the element.\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * The ARIA hidden attribute of the container. Used for accessibility to hide the element.\n   */\n  @Prop() ariaHidden: string;\n\n  /**\n   * The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').\n   */\n  @Prop() x: string;\n\n  /**\n   * The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').\n   */\n  @Prop() y: string;\n\n  /**\n   * The z-index of the column to control stacking order.\n   */\n  @Prop() z: string;\n\n  /**\n   * The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').\n   */\n  @Prop() bgColor: string;\n\n  /**\n   * Defines the type of the column, which can be used for styling or specific logic handling.\n   */\n  @Prop() type: string;\n\n  /**\n   * The tab index value, used to set the tab order of the column for keyboard navigation.\n   */\n  @Prop() tabIndex: number;\n\n  /**\n   * A boolean that controls whether the column is visible (`true`) or hidden (`false`).\n   */\n  @Prop() visible: boolean;\n\n  /**\n   * Audio file URL or identifier for sound that will be associated with the column.\n   */\n  @Prop() audio: string;\n\n  /**\n   * Event handler for a touch event, where a custom function can be triggered when the column is touched.\n   */\n    @Prop() onTouch: string;\n\n  /**\n   * Event handler for a Correct touch event, where a custom function can be triggered when the column is touched.\n   */\n  @Prop() onCorrectTouch: string;\n\n  @Prop() onInCorrectTouch: string;\n\n  /**\n   * Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.\n   */\n  @Prop() onCorrectMatch: string;\n\n  /**\n   * Event handler for a matching action, which can be used to hide the column or trigger other custom logic.\n   */\n  @Prop() onMatch: string;\n\n  @Prop() onWrong: string;\n\n  /**\n   * Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.\n   */\n  @Prop() onEntry: string;\n\n  /**\n   * Reference to the HTML element that represents this component.\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * This lifecycle hook is called after the component is rendered in the DOM.\n   * It initializes events for the column based on the provided type.\n   */\n  componentDidLoad() {\n    initEventsForElement(this.el, this.type);\n  }\n\n  render() {\n    // Inline styles applied to the column, mainly for positioning and background.\n    const style = {\n      height: this.height,\n      width: this.width,\n      backgroundColor: this.bgColor,\n      top: this.y,\n      left: this.x,\n      display: this.visible ? 'flex' : 'none',\n      zIndex: this.z,\n    };\n\n    return (\n      <Host\n        id={this.id}\n        class=\"col\"\n        type={this.type}\n        tabindex={this.tabIndex}\n        value={this.value}\n        style={style}\n        aria-label={this.ariaLabel}\n        aria-hidden={this.ariaHidden}\n        audio={this.audio}\n        onTouch={this.onTouch}\n        onMatch={this.onMatch}\n        onWrong={this.onWrong}\n        onCorrectMatch={this.onCorrectMatch}\n        onCorrectTouch={this.onCorrectTouch}\n        onInCorrectTouch={this.onInCorrectTouch}\n        onEntry={this.onEntry}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/lido-player/app-container.entry.js

@@ -0,0 +1,90 @@
+import { r as registerInstance, h, a as Host, e as getElement } from './index-9624adf5.js';
+import { i as initEventsForElement } from './utils-291495a4.js';
+import './constants-f484fcec.js';
+
+const appContainerCss = ".container{position:relative;height:100%;width:100%;background-color:var(--bgColor, #ffffff);display:flex;flex-direction:column;justify-content:center;align-items:center}";
+
+const AppContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = undefined;
+        this.objective = undefined;
+        this.value = undefined;
+        this.height = undefined;
+        this.width = undefined;
+        this.ariaLabel = undefined;
+        this.ariaHidden = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.type = undefined;
+        this.tabIndex = undefined;
+        this.visible = undefined;
+        this.audio = undefined;
+        this.onTouch = undefined;
+        this.onCorrectTouch = undefined;
+        this.onCorrectMatch = undefined;
+        this.onMatch = undefined;
+        this.onWrong = undefined;
+        this.onIncorrectTouch = undefined;
+        this.onEntry = undefined;
+        this.canplay = true;
+    }
+    /**
+     * Scales the container based on the window or screen size, maintaining the aspect ratio.
+     * The container scales according to the minimum dimension of the screen.
+     *
+     * @param container The container element to be scaled.
+     */
+    scaleContainer(container) {
+        var _a;
+        const widths = [window.innerWidth];
+        const heights = [window.innerHeight];
+        if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
+            widths.push(window.screen.width);
+            heights.push(window.screen.height);
+        }
+        const width = Math.min(...widths);
+        const height = document.documentElement.clientHeight;
+        const scaleX = width / 1600; // Scale based on a reference width of 1600px
+        const scaleY = height / 900; // Scale based on a reference height of 900px
+        const scale = Math.min(scaleX, scaleY);
+        // Center the container and apply scaling
+        container.style.transform = `translate(-50%, -50%) scale(${scale})`;
+    }
+    /**
+     * Lifecycle hook that runs after the component is loaded.
+     * - It scales the container.
+     * - It sets the background color of the body.
+     * - Adds event listeners for `resize` and `load` to rescale the container on window size changes.
+     */
+    componentDidLoad() {
+        this.scaleContainer(this.el);
+        document.body.style.backgroundColor = this.bgColor;
+        // Re-scale the container on window resize or load events
+        window.addEventListener('resize', () => this.scaleContainer(this.el));
+        window.addEventListener('load', () => this.scaleContainer(this.el));
+        initEventsForElement(this.el, this.type);
+    }
+    render() {
+        // Define the styles for the container element
+        const style = {
+            backgroundColor: this.bgColor,
+            width: '1600px', // Fixed width of the container
+            height: '900px', // Fixed height of the container
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)', // Centering the container
+        };
+        console.log('🚀 ~ AppContainer ~ canplay:', this.canplay);
+        return (h(Host, { key: '3de4da721c5eb3dcdd9b29e01cfcc7968d40a761', id: "container", tabindex: 0, class: "container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onIncorrectTouch: this.onIncorrectTouch, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onEntry: this.onEntry }, h("slot", { key: 'bd4abd0fd97b92a6f942554be26a28d3948f7a5d' })));
+    }
+    get el() { return getElement(this); }
+};
+AppContainer.style = appContainerCss;
+
+export { AppContainer as app_container };
+
+//# sourceMappingURL=app-container.entry.js.map

package/dist/lido-player/app-container.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-container.entry.esm.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,4KAA4K;;MCevL,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;uBA0GI,IAAI;;;;;;;;IAa/B,cAAc,CAAC,SAAsB;;QACnC,MAAM,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAErC,IAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,KAAK,EAAE;YACxB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SACpC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QAErD,MAAM,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;QAC5B,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;QAGvC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,+BAA+B,KAAK,GAAG,CAAC;KACrE;;;;;;;IAQD,gBAAgB;QACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;;QAGnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACpE,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,MAAM;;QAEJ,MAAM,KAAK,GAAG;YACZ,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,uBAAuB;SACnC,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1D,QACE,EAAC,IAAI,qDACH,EAAE,EAAC,WAAW,EACd,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,KAAK,gBACA,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,UAAU,EAC5B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,8DAAQ,CACH,EACP;KACH;;;;;;;","names":[],"sources":["src/components/container/app-container.css?tag=app-container","src/components/container/AppContainer.tsx"],"sourcesContent":[".container {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--bgColor, #ffffff);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { initEventsForElement } from '../../utils/utils';\n\n/**\n * @component AppContainer\n *\n * The `AppContainer` component acts as a container for other elements. It scales responsively\n * based on the window size, adjusts background color, and provides various configurable properties\n * such as dimensions, positioning, visibility, and custom event handlers.\n */\n@Component({\n  tag: 'app-container',\n  styleUrl: 'app-container.css',\n  shadow: false,\n})\nexport class AppContainer {\n  /**\n   * Unique identifier for the container.\n   */\n  @Prop() id: string;\n\n  /**\n   * Objective or purpose of the container. Can be used for internal logic or tracking.\n   */\n  @Prop() objective: string;\n\n  /**\n   * Value assigned to the container. This can be used for logic related to this component.\n   */\n  @Prop() value: string;\n\n  /**\n   * The height of the container (CSS value).\n   */\n  @Prop() height: string;\n\n  /**\n   * The width of the container (CSS value).\n   */\n  @Prop() width: string;\n\n  /**\n   * The ARIA label of the container. Used for accessibility to indicate the purpose of the element.\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * The ARIA hidden attribute of the container. Used for accessibility to hide the element.\n   */\n  @Prop() ariaHidden: string;\n\n  /**\n   * X-axis (horizontal) position of the container.\n   */\n  @Prop() x: string;\n\n  /**\n   * Y-axis (vertical) position of the container.\n   */\n  @Prop() y: string;\n\n  /**\n   * Z-index to control the stacking order of the container.\n   */\n  @Prop() z: string;\n\n  /**\n   * Background color of the container (CSS color value).\n   */\n  @Prop() bgColor: string;\n\n  /**\n   * Type of the container, which can be used for conditional logic or styling purposes.\n   */\n  @Prop() type: string;\n\n  /**\n   * TabIndex for keyboard navigation.\n   */\n  @Prop() tabIndex: number;\n\n  /**\n   * Visibility flag for the container. If `true`, the container is visible; otherwise, it is hidden.\n   */\n  @Prop() visible: boolean;\n\n  /**\n   * URL or identifier of an audio file associated with the container.\n   */\n  @Prop() audio: string;\n\n  /**\n   * Event handler triggered when the container is touched or clicked.\n   */\n  @Prop() onTouch: string;\n\n  /**\n   * Event handler for a Correct touch event, where a custom function can be triggered when the column is touched.\n   */\n  @Prop() onCorrectTouch: string;\n\n  /**\n   * Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.\n   */\n  @Prop() onCorrectMatch: string;\n\n  /**\n   * Event handler triggered when a specific match condition is met within the container.\n   */\n  @Prop() onMatch: string;\n  @Prop() onWrong: string;\n  @Prop() onIncorrectTouch: string;\n\n  /**\n   * Event handler triggered when the container is entered, useful for triggering animations or logic.\n   */\n  @Prop() onEntry: string;\n\n  /**\n   * Boolean that controls the playability of the game.\n   */\n  @Prop() canplay: boolean = true;\n\n  /**\n   * Reference to the HTML element that represents this container component.\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * Scales the container based on the window or screen size, maintaining the aspect ratio.\n   * The container scales according to the minimum dimension of the screen.\n   *\n   * @param container The container element to be scaled.\n   */\n  scaleContainer(container: HTMLElement) {\n    const widths = [window.innerWidth];\n    const heights = [window.innerHeight];\n\n    if (window.screen?.width) {\n      widths.push(window.screen.width);\n      heights.push(window.screen.height);\n    }\n\n    const width = Math.min(...widths);\n    const height = document.documentElement.clientHeight;\n\n    const scaleX = width / 1600; // Scale based on a reference width of 1600px\n    const scaleY = height / 900; // Scale based on a reference height of 900px\n    const scale = Math.min(scaleX, scaleY);\n\n    // Center the container and apply scaling\n    container.style.transform = `translate(-50%, -50%) scale(${scale})`;\n  }\n\n  /**\n   * Lifecycle hook that runs after the component is loaded.\n   * - It scales the container.\n   * - It sets the background color of the body.\n   * - Adds event listeners for `resize` and `load` to rescale the container on window size changes.\n   */\n  componentDidLoad() {\n    this.scaleContainer(this.el);\n    document.body.style.backgroundColor = this.bgColor;\n\n    // Re-scale the container on window resize or load events\n    window.addEventListener('resize', () => this.scaleContainer(this.el));\n    window.addEventListener('load', () => this.scaleContainer(this.el));\n    initEventsForElement(this.el, this.type);\n  }\n\n  render() {\n    // Define the styles for the container element\n    const style = {\n      backgroundColor: this.bgColor,\n      width: '1600px', // Fixed width of the container\n      height: '900px', // Fixed height of the container\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)', // Centering the container\n    };\n    console.log('🚀 ~ AppContainer ~ canplay:', this.canplay);\n\n    return (\n      <Host\n        id=\"container\"\n        tabindex={0}\n        class=\"container\"\n        objective={this.objective}\n        style={style}\n        aria-label={this.ariaLabel}\n        aria-hidden={this.ariaHidden}\n        onTouch={this.onTouch}\n        onMatch={this.onMatch}\n        onWrong={this.onWrong}\n        onIncorrectTouch={this.onIncorrectTouch}\n        onCorrectMatch={this.onCorrectMatch}\n        onCorrectTouch={this.onCorrectTouch}\n        onEntry={this.onEntry}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/lido-player/app-globals-0f993ce5.js

@@ -0,0 +1,5 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };
+
+//# sourceMappingURL=app-globals-0f993ce5.js.map

package/dist/lido-player/app-globals-0f993ce5.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/lido-player/app-home.entry.js

@@ -0,0 +1,191 @@
+import { r as registerInstance, h } from './index-9624adf5.js';
+import { S as SelectedValuesKey, D as DragSelectedMapKey } from './constants-f484fcec.js';
+
+const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body{overflow:hidden}";
+
+const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes shake{0%{transform:translateX(0);color:red;outline:4px solid red}10%{transform:translateX(-5px);color:red;outline:4px solid red}20%{transform:translateX(5px);color:red;outline:4px solid red}30%{transform:translateX(-5px);color:red;outline:4px solid red}40%{transform:translateX(5px);color:red;outline:4px solid red}50%{transform:translateX(-5px);color:red;outline:4px solid red}60%{transform:translateX(5px);color:red;outline:4px solid red}70%{transform:translateX(-5px);color:red;outline:4px solid red}80%{transform:translateX(5px);color:red;outline:4px solid red}90%{transform:translateX(-5px);color:red;outline:4px solid red}100%{transform:translateX(0);color:red;outline:4px solid red}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}";
+
+const appHomeCss = ".snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.dot-container{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.dot.completed{background-color:grey}.dot.current{background-color:green}.dot:not(.completed):not(.current){background-color:#bbb}";
+
+const AppHome = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Event handler for transitioning to the next container in the sequence.
+         * If the last container is reached, it shows a completion message.
+         */
+        this.nextContainer = (index) => {
+            if (index != undefined && index == this.currentContainerIndex)
+                return;
+            // Clear selected values from localStorage on container transition
+            localStorage.removeItem(SelectedValuesKey);
+            localStorage.removeItem(DragSelectedMapKey);
+            if (index != undefined && index < this.containers.length) {
+                // Move to the next container
+                this.currentContainerIndex = index;
+                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+            }
+            else if (this.currentContainerIndex < this.containers.length - 1) {
+                // Move to the next container
+                this.currentContainerIndex++;
+                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+            }
+            else {
+                // Show the completion message if all containers have been viewed
+                this.showCompletionMessage = true;
+                const event = new CustomEvent('gameCompleted');
+                window.dispatchEvent(event);
+                // Hide the completion message after 3 seconds
+                setTimeout(() => {
+                    this.showCompletionMessage = false;
+                }, 3000);
+            }
+            // Reset the containers array to trigger a re-render
+            this.containers = [...this.containers];
+        };
+        this.xmlData = undefined;
+        this.initialIndex = 0;
+        this.canplay = true;
+        this.currentContainerIndex = this.initialIndex;
+        this.showCompletionMessage = false;
+        this.containers = [];
+    }
+    /**
+     * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
+     * between containers and parses the XML data into containers.
+     */
+    componentWillLoad() {
+        // Listen for 'nextContainer' event to transition between containers
+        window.addEventListener('nextContainer', () => {
+            this.nextContainer();
+        });
+        window.addEventListener('changeContainer', (e) => {
+            this.nextContainer(e.detail.index);
+        });
+        // Parse the provided XML data
+        this.parseXMLData(this.xmlData);
+        // Remove stored values in localStorage when the page is about to be unloaded
+        window.addEventListener('beforeunload', () => {
+            localStorage.removeItem(SelectedValuesKey);
+            localStorage.removeItem(DragSelectedMapKey);
+        });
+    }
+    /**
+     * Lifecycle method that cleans up event listeners when the component is removed from the DOM.
+     */
+    disconnectedCallback() {
+        window.removeEventListener('nextContainer', () => {
+            this.nextContainer();
+        });
+        window.removeEventListener('changeContainer', (e) => {
+            this.nextContainer(e.detail.index);
+        });
+    }
+    /**
+     * Parses the provided XML string into an XML DOM object and extracts the containers from it.
+     *
+     * @param xmlData - The XML data as a string.
+     */
+    parseXMLData(xmlData) {
+        if (xmlData) {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlData, 'text/xml');
+            const rootElement = xmlDoc.documentElement;
+            // Parse containers from the root XML element
+            this.parseContainers(rootElement);
+        }
+    }
+    /**
+     * Recursively parses an XML element and its children, converting them into corresponding Stencil components.
+     *
+     * @param element - The XML element to parse.
+     * @returns The corresponding Stencil component with parsed props and children.
+     */
+    parseElement(element) {
+        const tagName = element.nodeName.toLowerCase();
+        const props = {};
+        // Extract attributes from the element and map them to props
+        Array.from(element.attributes).forEach(attr => {
+            props[attr.name] = attr.value;
+        });
+        // Recursively parse child elements
+        const children = Array.from(element.childNodes)
+            .map(child => {
+            if (child.nodeType === 1) {
+                return this.parseElement(child);
+            }
+            else if (child.nodeType === 3 && child.textContent.trim() !== '') {
+                return child.textContent;
+            }
+            return null;
+        })
+            .filter(Boolean);
+        // Map XML tags to Stencil components
+        const componentMapping = {
+            'app-container': (h("app-container", Object.assign({}, props, { canplay: this.canplay }), children)),
+            'app-col': h("app-col", Object.assign({}, props), children),
+            'app-trace': h("app-trace", Object.assign({}, props), children),
+            'app-image': h("app-image", Object.assign({}, props), children),
+            'app-row': h("app-row", Object.assign({}, props), children),
+            'app-text': h("app-text", Object.assign({}, props), children),
+            'app-pos': h("app-pos", Object.assign({}, props), children),
+            'app-shape': h("app-shape", Object.assign({}, props), children),
+            'app-wrap': h("app-wrap", Object.assign({}, props), children),
+            'app-random': h("app-random", Object.assign({}, props), children),
+        };
+        // If the tag is known, return the corresponding Stencil component, otherwise log a warning
+        if (componentMapping[tagName]) {
+            return componentMapping[tagName];
+        }
+        else {
+            console.warn(`Unknown tag: ${tagName}`);
+            return null;
+        }
+    }
+    /**
+     * Parses the `app-container` elements from the XML root element and stores them in the `containers` state.
+     *
+     * @param rootElement - The root element of the parsed XML document.
+     */
+    parseContainers(rootElement) {
+        const containers = [];
+        const containerElements = rootElement.querySelectorAll('app-container');
+        // Parse each container and add it to the array
+        containerElements.forEach(container => {
+            const parsedElement = this.parseElement(container);
+            if (parsedElement) {
+                containers.push(parsedElement);
+            }
+        });
+        this.containers = containers;
+    }
+    /**
+     * Renders navigation dots for each container, indicating the progress of the user.
+     * Clicking on a dot allows the user to jump to a specific container.
+     */
+    renderDots() {
+        return (h("div", { id: "dot-indicator", class: "dot-container" }, this.containers.map((_, index) => (h("span", { class: `dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index) })))));
+    }
+    /**
+     * Jumps to a specific container based on the index of the dot clicked.
+     *
+     * @param index - The index of the container to jump to.
+     */
+    jumpToContainer(index) {
+        this.nextContainer(index);
+        // this.currentContainerIndex = index;
+        // this.containers = [...this.containers]; // Trigger re-render
+    }
+    render() {
+        if (!this.xmlData) {
+            // If no XML data is provided, prompt the user to provide it
+            return h("div", null, "Please provide XML data.");
+        }
+        return (h("div", null, h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && h("div", { class: "snackbar" }, "All containers have been displayed!")));
+    }
+};
+AppHome.style = indexCss + (animationCss + appHomeCss);
+
+export { AppHome as app_home };
+
+//# sourceMappingURL=app-home.entry.js.map

package/dist/lido-player/app-home.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-home.entry.esm.js","mappings":"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","names":[],"sources":["src/index.css?tag=app-home","src/utils/css/animation.css?tag=app-home","src/components/home/app-home.css?tag=app-home","src/components/home/AppHome.tsx"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\n\nbody {\n  overflow: hidden;\n}\n\n","/* animations */\n\n@keyframes rightToPlace {\n  from {\n    transform: translateX(2000px);\n  }\n  to {\n    left: 0;\n  }\n}\n\n@keyframes placeToLeft {\n  from {\n  }\n  to {\n    transform: translateX(-2000px);\n  }\n}\n\n@keyframes shake {\n  0% {\n    transform: translateX(0);\n    color: red;\n    outline: 4px solid red;\n  }\n  10% {\n    transform: translateX(-5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  20% {\n    transform: translateX(5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  30% {\n    transform: translateX(-5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  40% {\n    transform: translateX(5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  50% {\n    transform: translateX(-5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  60% {\n    transform: translateX(5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  70% {\n    transform: translateX(-5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  80% {\n    transform: translateX(5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  90% {\n    transform: translateX(-5px);\n    color: red;\n    outline: 4px solid red;\n  }\n  100% {\n    transform: translateX(0);\n    color: red;\n    outline: 4px solid red;\n  }\n}\n\n@keyframes fallAndBounce {\n  0% {\n    transform: translateY(-1000px);\n  }\n  25%{\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-200px);\n  }\n  75% {\n    transform: translateY(0);\n  }\n  90% {\n    transform: translateY(-100px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n",".snackbar {\n  visibility: visible;\n  min-width: 250px;\n  background-color: #333;\n  color: #fff;\n  text-align: center;\n  border-radius: 2px;\n  padding: 16px;\n  position: fixed;\n  z-index: 1;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n  font-size: 17px;\n}\n\n.dot-container {\n  text-align: center;\n  position: fixed;\n  z-index: 1;\n  width: fit-content;\n  top: 1%;\n  left: 50%;\n  transform: translate(-50%);\n}\n\n.dot {\n  height: 15px;\n  width: 15px;\n  margin: 0 4px;\n  background-color: #bbb;\n  border-radius: 50%;\n  display: inline-block;\n  transition: background-color 0.3s;\n  cursor: pointer;\n}\n\n.dot.completed {\n  background-color: grey;\n}\n\n.dot.current {\n  background-color: green;\n}\n\n.dot:not(.completed):not(.current) {\n  background-color: #bbb;\n}\n","import { Component, Prop, h, State } from '@stencil/core';\nimport { DragSelectedMapKey, SelectedValuesKey } from '../../utils/constants';\n\n/**\n * @component AppHome\n *\n * The `AppHome` component renders a series of containers parsed from the provided XML data.\n * It handles navigation between containers, resets the state on page reloads or container transitions,\n * and displays progress indicators (dots) for each container.\n */\n@Component({\n  tag: 'app-home',\n  shadow: false,\n  styleUrls: ['./../../index.css', '../../utils/css/animation.css', './app-home.css'],\n})\nexport class AppHome {\n  /**\n   * XML data passed to the component, which is parsed and used to render various containers.\n   */\n  @Prop() xmlData: string;\n\n  /**\n   * Initial index of the container being displayed.\n   */\n  @Prop() initialIndex: number = 0;\n\n  /**\n   * Boolean that controls the playability of the game.\n   */\n  @Prop() canplay: boolean = true;\n\n  /**\n   * Current index of the container being displayed.\n   */\n  @State() currentContainerIndex: number = this.initialIndex;\n\n  /**\n   * Boolean that controls the display of the completion message after all containers have been viewed.\n   */\n  @State() showCompletionMessage: boolean = false;\n\n  /**\n   * Array that stores the parsed containers from the XML data.\n   */\n  @State() containers: any[] = [];\n\n  /**\n   * Event handler for transitioning to the next container in the sequence.\n   * If the last container is reached, it shows a completion message.\n   */\n  nextContainer = (index?: number | undefined) => {\n    if (index != undefined && index == this.currentContainerIndex) return;\n    // Clear selected values from localStorage on container transition\n    localStorage.removeItem(SelectedValuesKey);\n    localStorage.removeItem(DragSelectedMapKey);\n\n    if (index != undefined && index < this.containers.length) {\n      // Move to the next container\n      this.currentContainerIndex = index;\n      window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));\n    } else if (this.currentContainerIndex < this.containers.length - 1) {\n      // Move to the next container\n      this.currentContainerIndex++;\n      window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));\n    } else {\n      // Show the completion message if all containers have been viewed\n      this.showCompletionMessage = true;\n      const event = new CustomEvent('gameCompleted');\n      window.dispatchEvent(event);\n\n      // Hide the completion message after 3 seconds\n      setTimeout(() => {\n        this.showCompletionMessage = false;\n      }, 3000);\n    }\n\n    // Reset the containers array to trigger a re-render\n    this.containers = [...this.containers];\n  };\n\n  /**\n   * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning\n   * between containers and parses the XML data into containers.\n   */\n  componentWillLoad() {\n    // Listen for 'nextContainer' event to transition between containers\n    window.addEventListener('nextContainer', () => {\n      this.nextContainer();\n    });\n\n    window.addEventListener('changeContainer', (e: any) => {\n      this.nextContainer(e.detail.index);\n    });\n\n    // Parse the provided XML data\n    this.parseXMLData(this.xmlData);\n\n    // Remove stored values in localStorage when the page is about to be unloaded\n    window.addEventListener('beforeunload', () => {\n      localStorage.removeItem(SelectedValuesKey);\n      localStorage.removeItem(DragSelectedMapKey);\n    });\n  }\n\n  /**\n   * Lifecycle method that cleans up event listeners when the component is removed from the DOM.\n   */\n  disconnectedCallback() {\n    window.removeEventListener('nextContainer', () => {\n      this.nextContainer();\n    });\n    window.removeEventListener('changeContainer', (e: any) => {\n      this.nextContainer(e.detail.index);\n    });\n  }\n\n  /**\n   * Parses the provided XML string into an XML DOM object and extracts the containers from it.\n   *\n   * @param xmlData - The XML data as a string.\n   */\n  private parseXMLData(xmlData: string) {\n    if (xmlData) {\n      const parser = new DOMParser();\n      const xmlDoc = parser.parseFromString(xmlData, 'text/xml');\n      const rootElement = xmlDoc.documentElement;\n\n      // Parse containers from the root XML element\n      this.parseContainers(rootElement);\n    }\n  }\n\n  /**\n   * Recursively parses an XML element and its children, converting them into corresponding Stencil components.\n   *\n   * @param element - The XML element to parse.\n   * @returns The corresponding Stencil component with parsed props and children.\n   */\n  private parseElement(element: Element): any {\n    const tagName = element.nodeName.toLowerCase();\n    const props: { [key: string]: any } = {};\n\n    // Extract attributes from the element and map them to props\n    Array.from(element.attributes).forEach(attr => {\n      props[attr.name] = attr.value;\n    });\n\n    // Recursively parse child elements\n    const children = Array.from(element.childNodes)\n      .map(child => {\n        if (child.nodeType === 1) {\n          return this.parseElement(child as Element);\n        } else if (child.nodeType === 3 && child.textContent.trim() !== '') {\n          return child.textContent;\n        }\n        return null;\n      })\n      .filter(Boolean);\n\n    // Map XML tags to Stencil components\n    const componentMapping = {\n      'app-container': (\n        <app-container {...props} canplay={this.canplay}>\n          {children}\n        </app-container>\n      ),\n      'app-col': <app-col {...props}>{children}</app-col>,\n      'app-trace': <app-trace {...props}>{children}</app-trace>,\n      'app-image': <app-image {...props}>{children}</app-image>,\n      'app-row': <app-row {...props}>{children}</app-row>,\n      'app-text': <app-text {...props}>{children}</app-text>,\n      'app-pos': <app-pos {...props}>{children}</app-pos>,\n      'app-shape': <app-shape {...props}>{children}</app-shape>,\n      'app-wrap': <app-wrap {...props}>{children}</app-wrap>,\n      'app-random': <app-random {...props}>{children}</app-random>,\n    };\n\n    // If the tag is known, return the corresponding Stencil component, otherwise log a warning\n    if (componentMapping[tagName]) {\n      return componentMapping[tagName];\n    } else {\n      console.warn(`Unknown tag: ${tagName}`);\n      return null;\n    }\n  }\n\n  /**\n   * Parses the `app-container` elements from the XML root element and stores them in the `containers` state.\n   *\n   * @param rootElement - The root element of the parsed XML document.\n   */\n  private parseContainers(rootElement: Element) {\n    const containers = [];\n    const containerElements = rootElement.querySelectorAll('app-container');\n\n    // Parse each container and add it to the array\n    containerElements.forEach(container => {\n      const parsedElement = this.parseElement(container);\n      if (parsedElement) {\n        containers.push(parsedElement);\n      }\n    });\n\n    this.containers = containers;\n  }\n\n  /**\n   * Renders navigation dots for each container, indicating the progress of the user.\n   * Clicking on a dot allows the user to jump to a specific container.\n   */\n  private renderDots() {\n    return (\n      <div id=\"dot-indicator\" class=\"dot-container\">\n        {this.containers.map((_, index) => (\n          <span\n            class={`dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`}\n            onClick={() => this.jumpToContainer(index)}\n          ></span>\n        ))}\n      </div>\n    );\n  }\n\n  /**\n   * Jumps to a specific container based on the index of the dot clicked.\n   *\n   * @param index - The index of the container to jump to.\n   */\n  private jumpToContainer(index: number) {\n    this.nextContainer(index);\n    // this.currentContainerIndex = index;\n    // this.containers = [...this.containers]; // Trigger re-render\n  }\n\n  render() {\n    if (!this.xmlData) {\n      // If no XML data is provided, prompt the user to provide it\n      return <div>Please provide XML data.</div>;\n    }\n\n    return (\n      <div>\n        {/* Render the current container */}\n        <div key={this.currentContainerIndex}>{this.containers[this.currentContainerIndex]}</div>\n\n        {/* Render navigation dots below the container */}\n        {this.renderDots()}\n\n        {/* Show completion message if all containers have been displayed */}\n        {this.showCompletionMessage && <div class=\"snackbar\">All containers have been displayed!</div>}\n      </div>\n    );\n  }\n}\n"],"version":3}