lido-player 0.0.2-alpha-1 → 0.0.2-alpha-3

package/dist/cjs/app-col_12.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d28e716.js');
-const utils = require('./utils-8ac0e3b7.js');
+const utils = require('./utils-64490acd.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 AppColStyle0 = appColCss;
@@ -26,11 +26,9 @@ const AppCol = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -51,7 +49,7 @@ const AppCol = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.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 }, index.h("slot", { key: 'fecc9cdf6b7204461c07e89de0ebec35559f8daf' })));
+        return (index.h(index.Host, { key: '99f188b18d41efb977b7bc17d93d1474e97fd444', 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, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '6c663c7c7e5aa6167d5af26ecee8b34305c7da6d' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -79,13 +77,13 @@ const AppContainer = class {
         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.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onEntry = undefined;
         this.canplay = true;
+        this.showCheck = undefined;
+        this.isContinueOnCorrect = undefined;
+        this.baseUrl = '';
     }
     /**
      * Scales the container based on the window or screen size, maintaining the aspect ratio.
@@ -133,13 +131,13 @@ const AppContainer = class {
             transform: 'translate(-50%, -50%)', // Centering the container
         };
         console.log('🚀 ~ AppContainer ~ canplay:', this.canplay);
-        return (index.h(index.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 }, index.h("slot", { key: 'bd4abd0fd97b92a6f942554be26a28d3948f7a5d' })));
+        return (index.h(index.Host, { key: 'e4748f56d1520a0418d3378c695f5968e9d7c53e', id: "container", tabindex: 0, class: "container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: this.showCheck, isContinueOnCorrect: this.isContinueOnCorrect }, index.h("slot", { key: '2ea749cec0f51f1ebcd0b810700de21eaf138a7d' })));
     }
     get el() { return index.getElement(this); }
 };
 AppContainer.style = AppContainerStyle0;
 
-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 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}.disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}";
 const AppHomeStyle0 = indexCss;
 
 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)}}";
@@ -171,11 +169,12 @@ const AppHome = class {
                 this.currentContainerIndex++;
                 window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
             }
-            else {
+            else if (this.currentContainerIndex >= this.containers.length - 1) {
                 // Show the completion message if all containers have been viewed
                 this.showCompletionMessage = true;
                 const event = new CustomEvent('gameCompleted');
                 window.dispatchEvent(event);
+                this.currentContainerIndex = 0;
                 // Hide the completion message after 3 seconds
                 setTimeout(() => {
                     this.showCompletionMessage = false;
@@ -187,6 +186,7 @@ const AppHome = class {
         this.xmlData = undefined;
         this.initialIndex = 0;
         this.canplay = true;
+        this.baseUrl = '';
         this.currentContainerIndex = this.initialIndex;
         this.showCompletionMessage = false;
         this.containers = [];
@@ -263,7 +263,7 @@ const AppHome = class {
             .filter(Boolean);
         // Map XML tags to Stencil components
         const componentMapping = {
-            'app-container': (index.h("app-container", Object.assign({}, props, { canplay: this.canplay }), children)),
+            'app-container': (index.h("app-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl }), children)),
             'app-col': index.h("app-col", Object.assign({}, props), children),
             'app-trace': index.h("app-trace", Object.assign({}, props), children),
             'app-image': index.h("app-image", Object.assign({}, props), children),
@@ -322,7 +322,7 @@ const AppHome = class {
             // If no XML data is provided, prompt the user to provide it
             return index.h("div", null, "Please provide XML data.");
         }
-        return (index.h("div", null, index.h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && index.h("div", { class: "snackbar" }, "All containers have been displayed!")));
+        return (index.h(index.Host, { index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && index.h("div", { class: "snackbar" }, "All containers have been displayed!")));
     }
 };
 AppHome.style = AppHomeStyle0 + (AppHomeStyle1 + AppHomeStyle2);
@@ -347,11 +347,9 @@ const AppImage = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
         this.src = undefined;
     }
@@ -375,7 +373,7 @@ const AppImage = class {
             alignItems: 'center', // Vertically center the image
             justifyContent: 'center', // Horizontally center the image
         };
-        return (index.h(index.Host, { key: 'bc0557fa586341933b698df56ecc5929b4185a58', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("img", { key: 'fa5cc8aacf12b26625b4bc68a52f19144bc82f99', class: "image", src: this.src, alt: "", style: style })));
+        return (index.h(index.Host, { key: 'ee933f90204e8d435ead5226d5d6f5ad907a1b4a', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("img", { key: 'f8df33300a01f27a6aaf61763677708b6234faf8', class: "image", src: utils.convertUrlToRelative(this.src), alt: "", style: style })));
     }
     get el() { return index.getElement(this); }
 };
@@ -402,11 +400,9 @@ const AppPos = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -427,7 +423,7 @@ const AppPos = class {
             zIndex: this.z,
             display: this.visible ? 'block' : 'none', // Toggle visibility
         };
-        return (index.h(index.Host, { key: 'c63889200e5b87ccddf17f236898df959b643aee', id: this.id, class: "pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry }, index.h("slot", { key: '09b1a03217ffc2c02836f4ac6f61f0887b8445cb' })));
+        return (index.h(index.Host, { key: '72c646c495d9a645e378fadd35fa1a277a97707a', id: this.id, class: "pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '46f2d0c9369ac51e6224d0826ef279416b9d851f' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -454,11 +450,9 @@ const AppRandom = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -487,7 +481,7 @@ const AppRandom = class {
             zIndex: this.z,
             backgroundColor: this.bgColor,
         };
-        return (index.h(index.Host, { key: '66b661510df51498d8aaeaa3b8c43d7caf3ab6d1', class: "random", 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 }, index.h("slot", { key: '70b2819af97f7d1f85de0ea1161ae95014e427f4' })));
+        return (index.h(index.Host, { key: 'f2dfffd55f24f7f2de14105682be9c0cfe8fa8ad', class: "random", 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, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '433ce405177d74dca078e6f5e01608567ad4af68' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -499,6 +493,7 @@ const AppRoot = class {
         this.xmlPath = undefined;
         this.initialIndex = 0;
         this.canplay = true;
+        this.baseUrl = '';
         this.xmlData = undefined;
     }
     /**
@@ -506,16 +501,21 @@ const AppRoot = class {
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
     async componentWillLoad() {
+        var _a;
         // Validate the xmlPath prop
-        if (!this.xmlPath) {
-            console.error('XML path is not provided.');
-            return;
-        }
+        // if (!this.xmlPath) {
+        //   console.error('XML path is not provided.');
+        //   return;
+        // }
+        const xmlPath = (_a = this.xmlPath) !== null && _a !== void 0 ? _a : this.baseUrl + '/index.xml';
+        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ this.baseUrl:', this.baseUrl);
+        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ this.xmlPath:', this.xmlPath);
+        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ xmlPath:', xmlPath);
         // Fetch the XML data
         try {
-            const resolvedPath = this.xmlPath.startsWith('http')
-                ? this.xmlPath // Use the provided URL if it's an HTTP/HTTPS link
-                : index.getAssetPath(this.xmlPath); // Otherwise, resolve it as an asset path
+            const resolvedPath = xmlPath.startsWith('http')
+                ? xmlPath // Use the provided URL if it's an HTTP/HTTPS link
+                : index.getAssetPath(xmlPath); // Otherwise, resolve it as an asset path
             const response = await fetch(resolvedPath);
             if (!response.ok) {
                 throw new Error(`Failed to fetch XML data: ${response.statusText}`);
@@ -539,7 +539,7 @@ const AppRoot = class {
             return index.h("div", null, "Error loading XML data. Please check the path or URL.");
         }
         // Once the XML data is loaded, pass it to the `app-home` component
-        return index.h("app-home", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData });
+        return index.h("app-home", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl });
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -564,11 +564,9 @@ const AppRow = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -589,7 +587,7 @@ const AppRow = class {
             zIndex: this.z,
             backgroundColor: this.bgColor, // Apply background color if provided
         };
-        return (index.h(index.Host, { key: 'fc3153fcef0ccc98d99afd2e93607e8c71c0a591', class: "row", 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 }, index.h("slot", { key: 'b28ce98adfc7ad7c9ac191eae523b974f9bb97f6' })));
+        return (index.h(index.Host, { key: '41c3b5c1306523da20944f30e3a801b36cbac5d9', class: "row", 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, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '52aaca9eda94648083d734f6eab815f85e5bd32c' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -617,11 +615,9 @@ const AppShape = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -642,7 +638,7 @@ const AppShape = class {
             zIndex: this.z,
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
         };
-        return (index.h(index.Host, { key: '64db966fc0a1f601fd0002d0f71de3ec3aae241a', class: `shape ${this.shapeType}`, value: this.value, type: this.type, tabindex: this.tabIndex, 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 }));
+        return (index.h(index.Host, { key: '895f28cbf17ef12295a38ec7d18373f98761b9f1', class: `shape ${this.shapeType}`, value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }));
     }
     get el() { return index.getElement(this); }
 };
@@ -674,11 +670,9 @@ const AppText = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -702,7 +696,7 @@ const AppText = class {
             color: this.fontColor,
             display: this.visible ? 'flex' : 'none', // Show or hide based on visibility prop
         };
-        return (index.h(index.Host, { key: '06c76433420706301a70a892a9081dfea480167e', class: "text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onWrong: this.onWrong, onCorrectMatch: this.onCorrectMatch, onCorrectTouch: this.onCorrectTouch, onInCorrectTouch: this.onInCorrectTouch, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden }, this.string));
+        return (index.h(index.Host, { key: 'e1f55600afa34e7bf93f8c89b22de9b6868953d6', class: "text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden }, this.string));
     }
     get el() { return index.getElement(this); }
 };
@@ -1211,11 +1205,9 @@ const AppWrap = class {
         this.visible = undefined;
         this.audio = undefined;
         this.onTouch = undefined;
-        this.onCorrectTouch = undefined;
-        this.onInCorrectTouch = undefined;
-        this.onCorrectMatch = undefined;
+        this.onInCorrect = undefined;
+        this.onCorrect = undefined;
         this.onMatch = undefined;
-        this.onWrong = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -1236,7 +1228,7 @@ const AppWrap = class {
             zIndex: this.z,
             backgroundColor: this.bgColor,
         };
-        return (index.h(index.Host, { key: '7e955c4ff7d20f7138088114ccf344d0fda171d8', class: "wrap", value: this.value, type: this.type, tabindex: this.tabIndex, 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 }, index.h("slot", { key: '1ee6b59cfe7cbb8b3bc1c830c51e38e0711e6e62' })));
+        return (index.h(index.Host, { key: 'e3a8cad8af5c14362bd1db98c191ca8738058fd2', class: "wrap", value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '96869c0417ecf29ec6fc9f7bdbbf1b611e302687' })));
     }
     get el() { return index.getElement(this); }
 };