lido-player 0.0.2-alpha-99 → 0.0.2-beta-00

package/dist/cjs/{decode-Bw2Aqe6S.js → decode-DweIsOMk.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cmk1eaCV.js');
+var index = require('./index-BLk7DH9M.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-Cmk1eaCV.js → index-BLk7DH9M.js}

@@ -401,6 +401,7 @@ function enableDraggingWithScaling(element) {
                 duplicateElement.style.transform = computedStyle.transform;
                 duplicateElement.style.position = 'absolute';
                 duplicateElement.style.zIndex = '0';
+                duplicateElement.style.pointerEvents = "";
                 element.style.zIndex = '100';
                 document.body.appendChild(duplicateElement);
             }
@@ -1083,10 +1084,11 @@ async function onClickDropOrDragElement(element, type) {
     element.ariaPressed = 'true';
     const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
     const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
+    setTimeout(() => {
+        element.style.pointerEvents = "";
+    }, 1000);
     if (!selectedDropElement || element.classList.contains("dropped")) {
-        console.log("hello");
         onClickDragElement(element);
-        element.style.pointerEvents = ""; // Re-enable pointer events if it was a drag element
         return;
     }
     if (element.classList.contains("drop-element"))
@@ -1094,7 +1096,6 @@ async function onClickDropOrDragElement(element, type) {
     if (selectedDropElement && selectedDragElement) {
         selectedDropElement.style.pointerEvents = 'none'; // Disable pointer events on drop element during animation
         selectedDragElement.style.pointerEvents = 'none'; // Disable pointer events on drag element during animation
-        console.log("drop called!!!");
         if (selectedDragElement.getAttribute('drop-to'))
             return;
         // Add a transition for a smooth, slower movement
@@ -1121,13 +1122,12 @@ async function onClickDropOrDragElement(element, type) {
         }
         // await new Promise(resolve => setTimeout(resolve, 500));
         await onElementDropComplete(selectedDragElement, selectedDropElement);
-        selectedDragElement.style.pointerEvents = ''; // Re-enable pointer events on drag element after animation
+        if (container.getAttribute("drop-action") !== exports.DropAction.InfiniteDrop && container.getAttribute("drop-action") !== exports.DropAction.Move) {
+            selectedDragElement.style.pointerEvents = '';
+        }
         selectedDropElement.style.pointerEvents = ''; // Re-enable pointer events on drop element after animation
         // ensure count update for click-to-drop flow
         await executeActions("this.updateCountBlender='true'", container);
-        // await new Promise(resolve => setTimeout(resolve, 500));
-        // selectedDragElement.style.transform = 'translate(0px, 0px)';
-        // selectedDropElement.style.pointerEvents = '';  
     }
 }
 const dragToDropMap = new Map();
@@ -72564,6 +72564,9 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
                 dragElement.setAttribute('hasDummy', 'true');
+                setTimeout(() => {
+                    dummyElement.style.pointerEvents = "";
+                }, 1000);
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -73646,7 +73649,7 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
     const scale = typeof calculateScale === "function" ? calculateScale() : 1;
     if (!dropElement.dataset.dropCount)
         dropElement.dataset.dropCount = "0";
-    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    let dropCount = parseInt(dropElement.childElementCount) - 1;
     // === READ DROP ZONE SIZE ===
     const dropWidth = dropRect.width;
     const dropHeight = dropRect.height;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cmk1eaCV.js');
+var index = require('./index-BLk7DH9M.js');
 require('./index-Bsk4M2Qz.js');
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Bsk4M2Qz.js');
-var index$1 = require('./index-Cmk1eaCV.js');
+var index$1 = require('./index-BLk7DH9M.js');
 
 var rive$1 = {exports: {}};
 
@@ -12177,7 +12177,9 @@ const LidoContainer = class {
                 "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
                 "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
                 "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
-                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */,
+                "drawShape": "drawshape" /* templateAudio.drawShape */,
+                "drawshape": "drawshape" /* templateAudio.drawshape */,
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -12334,7 +12336,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
+        return (index.h(index.Host, { key: '00435f1640abcc2d786ab2987e5bcda22816b987', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '9a680e74b6595888174b8ad7a13cc54943292020', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '5832050a7c60b9fca20544619b3ebc9f56c3ef67' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -12874,7 +12876,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-Bw2Aqe6S.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-DweIsOMk.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -18015,6 +18017,7 @@ const LidoTrace = class {
             freeTraceLines: [],
             currentFreePath: [],
             lastPointerPos: null,
+            isCompletingPath: false,
         };
         const url = this.svgUrls[this.currentSvgIndex];
         console.log('Loading SVG from URL:', url);
@@ -18349,6 +18352,8 @@ const LidoTrace = class {
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
             return;
+        if (state.isCompletingPath)
+            return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
         const pointerPos = this.getPointerPosition(evt, state.svg);
@@ -18520,6 +18525,9 @@ const LidoTrace = class {
             let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     // Animate the draggable circle & green trace to the very end, then proceed
                     await this.animatePathToEnd(state, currentPath);
                     if (state.currentPathIndex < state.paths.length - 1) {
@@ -18533,9 +18541,15 @@ const LidoTrace = class {
             else {
                 // For open paths, allow completion if near the end
                 if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextPath(state);
                 }
                 else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextContainer();
                 }
             }
@@ -18729,6 +18743,7 @@ const LidoTrace = class {
         state.isDragging = false;
         state.currentPathIndex++;
         state.lastLength = 0;
+        state.isCompletingPath = false;
         this.hideFingerHint(); // remove hint when changing path
         if (state.currentPathIndex >= state.paths.length) {
             this.moveToNextContainer();
@@ -18839,7 +18854,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '11c018f8ea98db4d389b54a5965cbcc8760d9a8b', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '75a794c24a2fa4817b85c831bc57051003ce2fa2', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '47a5947638a6a6c84cd294d6b3d8062a36553fc1', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '13e10f42f4747405ebe8c9ef5826f386a1e894e9', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/collection/components/container/lido-container.js

@@ -288,7 +288,9 @@ export class LidoContainer {
                 "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
                 "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
                 "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
-                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */,
+                "drawShape": "drawshape" /* templateAudio.drawShape */,
+                "drawshape": "drawshape" /* templateAudio.drawshape */,
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -445,7 +447,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
+        return (h(Host, { key: '00435f1640abcc2d786ab2987e5bcda22816b987', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '9a680e74b6595888174b8ad7a13cc54943292020', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '5832050a7c60b9fca20544619b3ebc9f56c3ef67' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/trace/lido-trace.js

@@ -140,6 +140,7 @@ export class LidoTrace {
             freeTraceLines: [],
             currentFreePath: [],
             lastPointerPos: null,
+            isCompletingPath: false,
         };
         const url = this.svgUrls[this.currentSvgIndex];
         console.log('Loading SVG from URL:', url);
@@ -474,6 +475,8 @@ export class LidoTrace {
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
             return;
+        if (state.isCompletingPath)
+            return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
         const pointerPos = this.getPointerPosition(evt, state.svg);
@@ -645,6 +648,9 @@ export class LidoTrace {
             let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
             if (pathIsClosed && state.totalPathLength > 50) {
                 if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     // Animate the draggable circle & green trace to the very end, then proceed
                     await this.animatePathToEnd(state, currentPath);
                     if (state.currentPathIndex < state.paths.length - 1) {
@@ -658,9 +664,15 @@ export class LidoTrace {
             else {
                 // For open paths, allow completion if near the end
                 if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextPath(state);
                 }
                 else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    if (state.isCompletingPath)
+                        return;
+                    state.isCompletingPath = true;
                     this.moveToNextContainer();
                 }
             }
@@ -854,6 +866,7 @@ export class LidoTrace {
         state.isDragging = false;
         state.currentPathIndex++;
         state.lastLength = 0;
+        state.isCompletingPath = false;
         this.hideFingerHint(); // remove hint when changing path
         if (state.currentPathIndex >= state.paths.length) {
             this.moveToNextContainer();
@@ -964,7 +977,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '11c018f8ea98db4d389b54a5965cbcc8760d9a8b', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '75a794c24a2fa4817b85c831bc57051003ce2fa2', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '47a5947638a6a6c84cd294d6b3d8062a36553fc1', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '13e10f42f4747405ebe8c9ef5826f386a1e894e9', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/utils/utils.js

@@ -395,6 +395,9 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
                 dragElement.setAttribute('hasDummy', 'true');
+                setTimeout(() => {
+                    dummyElement.style.pointerEvents = "";
+                }, 1000);
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -1479,7 +1482,7 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
     const scale = typeof calculateScale === "function" ? calculateScale() : 1;
     if (!dropElement.dataset.dropCount)
         dropElement.dataset.dropCount = "0";
-    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    let dropCount = parseInt(dropElement.childElementCount) - 1;
     // === READ DROP ZONE SIZE ===
     const dropWidth = dropRect.width;
     const dropHeight = dropRect.height;

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -129,6 +129,7 @@ export function enableDraggingWithScaling(element) {
                 duplicateElement.style.transform = computedStyle.transform;
                 duplicateElement.style.position = 'absolute';
                 duplicateElement.style.zIndex = '0';
+                duplicateElement.style.pointerEvents = "";
                 element.style.zIndex = '100';
                 document.body.appendChild(duplicateElement);
             }
@@ -819,10 +820,11 @@ export async function onClickDropOrDragElement(element, type) {
     element.ariaPressed = 'true';
     const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
     const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
+    setTimeout(() => {
+        element.style.pointerEvents = "";
+    }, 1000);
     if (!selectedDropElement || element.classList.contains("dropped")) {
-        console.log("hello");
         onClickDragElement(element);
-        element.style.pointerEvents = ""; // Re-enable pointer events if it was a drag element
         return;
     }
     if (element.classList.contains("drop-element"))
@@ -830,7 +832,6 @@ export async function onClickDropOrDragElement(element, type) {
     if (selectedDropElement && selectedDragElement) {
         selectedDropElement.style.pointerEvents = 'none'; // Disable pointer events on drop element during animation
         selectedDragElement.style.pointerEvents = 'none'; // Disable pointer events on drag element during animation
-        console.log("drop called!!!");
         if (selectedDragElement.getAttribute('drop-to'))
             return;
         // Add a transition for a smooth, slower movement
@@ -857,13 +858,12 @@ export async function onClickDropOrDragElement(element, type) {
         }
         // await new Promise(resolve => setTimeout(resolve, 500));
         await onElementDropComplete(selectedDragElement, selectedDropElement);
-        selectedDragElement.style.pointerEvents = ''; // Re-enable pointer events on drag element after animation
+        if (container.getAttribute("drop-action") !== DropAction.InfiniteDrop && container.getAttribute("drop-action") !== DropAction.Move) {
+            selectedDragElement.style.pointerEvents = '';
+        }
         selectedDropElement.style.pointerEvents = ''; // Re-enable pointer events on drop element after animation
         // ensure count update for click-to-drop flow
         await executeActions("this.updateCountBlender='true'", container);
-        // await new Promise(resolve => setTimeout(resolve, 500));
-        // selectedDragElement.style.transform = 'translate(0px, 0px)';
-        // selectedDropElement.style.pointerEvents = '';  
     }
 }
 export const dragToDropMap = new Map();