lido-player 0.0.2-alpha-2 → 0.0.2-alpha-4

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-5eeb6512.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,12 @@ 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 = '';
     }
     /**
@@ -134,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: 'b9a426ecbea1635883a1cb841f36e7c1d8e55caa', 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, baseUrl: this.baseUrl }, index.h("slot", { key: '2f55d759f184ebb7f5771f6e6e9c0cc9da4621d8' })));
+        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)}}";
@@ -172,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;
@@ -324,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);
@@ -349,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;
     }
@@ -377,7 +373,7 @@ const AppImage = class {
             alignItems: 'center', // Vertically center the image
             justifyContent: 'center', // Horizontally center the image
         };
-        return (index.h(index.Host, { key: '34c70a3d120b96080892e45da7d97c01778358e1', 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: '9c5f71bf1fbdad17f0f57081e981a712837f6ea4', class: "image", src: utils.convertUrlToRelative(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); }
 };
@@ -404,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;
     }
     /**
@@ -429,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); }
 };
@@ -456,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;
     }
     /**
@@ -489,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); }
 };
@@ -572,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;
     }
     /**
@@ -597,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); }
 };
@@ -625,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;
     }
     /**
@@ -650,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); }
 };
@@ -682,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;
     }
     /**
@@ -710,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); }
 };
@@ -1219,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;
     }
     /**
@@ -1244,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); }
 };