lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

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

@@ -131,7 +131,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: 'eaf89c6fa3df6df4438063d4e2c2ca59cbf8aa25', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '9efb1d5e7de65783cab4de3e5479260c85ffc3b1' })));
+        return (h(Host, { key: '0f7d35324da319917dec546cbb1f25065897bb02', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '2a337b5fae7641bbe78c5f1aa1c96e12c1281f4a' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/column/lido-col.js

@@ -84,7 +84,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'fe37cc1654101a3d347e2cef52872467ae078139', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'b27f20f62c30398c343d7aa472a0a211af5eed0e' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {

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

@@ -98,13 +98,34 @@ export class LidoContainer {
      * @param container The container element to be scaled.
      */
     scaleContainer(container) {
+        // Calculate the scale factor based on the closest parent element's width and height (1600x900 reference)
+        const parentElement = this.getClosestParentWithWidth();
+        let scaleFactor = 0;
+        if (parentElement) {
+            const parentWidth = parentElement.clientWidth;
+            const parentHeight = parentElement.clientHeight;
+            const scaleX = parentWidth / 1600;
+            const scaleY = parentHeight / 900;
+            scaleFactor = Math.min(scaleX, scaleY);
+        }
         // Center the container and apply scaling
-        container.style.transform = `translate(-50%, -50%) scale(${calculateScale()})`;
+        container.style.transform = `translate(-50%, -50%) scale(${scaleFactor != 0 ? scaleFactor : calculateScale()})`;
         container.style.left = '50%';
         container.style.top = '50%';
         container.style.position = 'absolute'; // Ensure proper positioning
         this.screenOrientation();
     }
+    // Find and return the nearest parent element that has a measurable (non-zero) width
+    getClosestParentWithWidth() {
+        let parent = this.el.parentElement;
+        while (parent) {
+            if (parent.offsetWidth > 0) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
     screenOrientation() {
         if (window.innerHeight > window.innerWidth) {
             this.el.style.height = '1600px';
@@ -133,6 +154,7 @@ export class LidoContainer {
     componentDidLoad() {
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? convertUrlToRelative(this.bgImage) : '';
+        document.body.style.pointerEvents = 'auto';
         document.body.style.backgroundColor = this.bgColor;
         document.body.style.backgroundImage = backGroundImage ? `url(${backGroundImage})` : 'none';
         document.body.style.backgroundPosition = backGroundImage ? `bottom` : 'none';
@@ -166,7 +188,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '5d7f2f02c5a231a18897942ea0d2f3a200efa502', id: "lido-container", locale: this.locale, "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 }, h("slot", { key: 'b82aff47d621fc4f9d6abe5b7add974853f69219' })));
+        return (h(Host, { key: '338ef0be8cc9d052764785ce9314254be7c8a7f8', id: "lido-container", locale: this.locale, "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 }, h("slot", { key: '59d66b47f4749a99ece4da48dbaebaf720cb0b2b' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -76,7 +76,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '0db825b0f188f46db6699e3d470296d7302a72fc', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: '78432618dca6729d9a5fa75f9ee162178ec6b8e2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'c06cab1f3d256a2fcfd44fbeb9e04c47bbe6ba63', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '804ffc2d68292dc9dcb800bcc49a0698092cea43', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/home/lido-home.css

@@ -276,4 +276,8 @@
   width: 100%;
   height: auto;
   visibility: visible;
+}
+
+.parent_dots{
+  pointer-events: none;
 }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
+import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
-import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative } from "../../utils/utils";
+import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
 import { generateUUIDFallback } from "../../utils/utils";
 import i18next from "../../utils/i18n";
@@ -88,7 +88,6 @@ export class LidoHome {
                     rightbtn.style.visibility = 'hidden';
                 }
                 else {
-                    rightbtn.style.pointerEvents = 'auto';
                     rightbtn.style.visibility = 'visible';
                 }
             }, 100);
@@ -299,6 +298,9 @@ export class LidoHome {
         if (tagName === 'lido-text' && props.string) {
             props.string = i18next.t(props.string);
         }
+        if (tagName === 'lido-text' && props.string) {
+            props.string = i18next.t(props.string);
+        }
         // Map XML tags to Stencil components
         const componentMapping = {
             'lido-container': (h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl, height: this.height }), children)),
@@ -348,6 +350,16 @@ export class LidoHome {
         this.containers = containers;
         console.log("container :::", containers);
     }
+    areAllDropsFilled() {
+        const drops = Array.from(document.querySelectorAll('[type="drop"]'));
+        const drags = Array.from(document.querySelectorAll('[type="drag"]')).filter(drag => drag.getAttribute('drop-to'));
+        console.log('drops', drops);
+        console.log('drags', drags);
+        return drops.every(drop => {
+            const dropId = drop.id;
+            return drags.some(drag => drag.getAttribute('drop-to') === dropId);
+        });
+    }
     async btnpopup() {
         setCancelBtnPopup(false);
         await AudioPlayer.getI().stop();
@@ -367,6 +379,18 @@ export class LidoHome {
                 await new Promise(resolve => setTimeout(resolve, 300));
             }
         }
+        if (this.areAllDropsFilled()) {
+            const objectiveString = container['objective'];
+            const objectiveArray = JSON.parse(localStorage.getItem(SelectedValuesKey) || '[]');
+            const res = matchStringPattern(objectiveString, objectiveArray);
+            console.log('Resultt', res);
+            if (res) {
+                triggerNextContainer();
+            }
+        }
+        else {
+            console.log('Not yet filled ');
+        }
     }
     scaleNavbarContainer() {
         setTimeout(() => {

package/dist/collection/components/mathMatrix/lido-math-matrix.js

@@ -185,7 +185,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '23ae408830e71329f11ee18e3aa3700e7a86e969', class: "math-matrix", style: {
+        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -252,7 +252,7 @@ export class LidoMathMatrix {
             },
             "defualtFill": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -265,7 +265,7 @@ export class LidoMathMatrix {
                     "text": "Number of slots to pre-fill as active by default"
                 },
                 "attribute": "defualt-fill",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "leftIndex": {
@@ -377,7 +377,7 @@ export class LidoMathMatrix {
             },
             "activeBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -390,12 +390,12 @@ export class LidoMathMatrix {
                     "text": "Background color for active slots"
                 },
                 "attribute": "active-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "deactiveBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -405,15 +405,15 @@ export class LidoMathMatrix {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color for inactive slots"
+                    "text": ""
                 },
                 "attribute": "deactive-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "border": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -426,12 +426,12 @@ export class LidoMathMatrix {
                     "text": "Border style applied to each slot"
                 },
                 "attribute": "border",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'2px solid green'"
             },
             "height": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -444,12 +444,12 @@ export class LidoMathMatrix {
                     "text": "Height of the slot container"
                 },
                 "attribute": "height",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "width": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -462,7 +462,7 @@ export class LidoMathMatrix {
                     "text": "Width of the slot container"
                 },
                 "attribute": "width",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "borderRadius": {

package/dist/collection/components/position/lido-pos.js

@@ -66,7 +66,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: 'd456c09ab61fd1674f001f939f2b27a089806f44', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca5a14fcc51d2b6a1756772b358e4654d8aee761' })));
+        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a85f168b0399fe5745439ad9d16d77965d1f7a39', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '69dd6da05d9855b18ba475cee27e523c4c2e6291' })));
+        return (h(Host, { key: 'cc8bb9d31ff6c36201d266f5579288c92c05bf82', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'd91a2403fa78320cbae40456dc0c86b44493bb5a' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: '0c2548741cde2b82c2add3e1a60cbd68905ffede', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'bc2c6f95f984e82bdb905f850d4ad23c11183697' })));
+        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

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

@@ -54,7 +54,7 @@ export class LidoShape {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'de698fc2f34f63c9bbdf1e308772cf47ebc80d9c', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: '7a626d9f00854cf190c08524153086d0e9f139af', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {

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

@@ -33,6 +33,7 @@ export class LidoTrace {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -49,8 +50,8 @@ export class LidoTrace {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 100, // General proximity threshold
-            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
+            proximityThreshold: 375, // Increased general proximity threshold (was 100)
+            freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
             rafId: null,
             pointerMoveEvent: null,
             activePointerId: null,
@@ -386,7 +387,7 @@ export class LidoTrace {
     }
     // Modified handlePointerMove function
     handlePointerMove(state) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -398,6 +399,15 @@ export class LidoTrace {
             x: parseFloat(state.circle.getAttribute('cx')),
             y: parseFloat(state.circle.getAttribute('cy')),
         };
+        // Only update if pointer moved a minimum distance (to reduce unnecessary updates)
+        const MOVE_THRESHOLD = 1; // px
+        if (state.lastPointerPos) {
+            const dx = pointerPos.x - state.lastPointerPos.x;
+            const dy = pointerPos.y - state.lastPointerPos.y;
+            if (dx * dx + dy * dy < MOVE_THRESHOLD * MOVE_THRESHOLD) {
+                return;
+            }
+        }
         const currentPath = state.paths[state.currentPathIndex];
         if (!currentPath) {
             console.error('No valid path found at the current index');
@@ -425,48 +435,76 @@ export class LidoTrace {
         }
         // For free trace mode and blind free trace mode, allow free drawing only if within the reduced proximity threshold
         if (state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace) {
+            // Throttle: Only update every 2nd event (for reducing excessive dom updates)
+            this.freeTraceUpdateCounter = (this.freeTraceUpdateCounter || 0) + 1;
+            if (this.freeTraceUpdateCounter % 2 !== 0) {
+                return;
+            }
             // Initialize the currentFreePath array if it's not created
             if (!state.currentFreePath) {
                 state.currentFreePath = [];
             }
-            // Create a new path element if it's the first trace for the current path index
+            // Create a new polyline element if it's the first trace for the current path index
             if (!state.currentFreePath[state.currentPathIndex]) {
-                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                // newPath.setAttribute('stroke', 'green');
+                const newPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
                 const strokeWidth = state.paths[state.currentPathIndex].style['stroke-width'] || state.paths[state.currentPathIndex].getAttribute('stroke-width');
-                newPath.setAttribute('stroke-width', strokeWidth);
-                newPath.setAttribute('fill', 'none');
-                newPath.setAttribute('stroke-linecap', 'round');
-                newPath.setAttribute('stroke', 'lightgreen');
-                // Start the new path at the current pointer position
-                newPath.setAttribute('d', `M${pointerPos.x},${pointerPos.y}`);
-                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPath);
-                state.currentFreePath[state.currentPathIndex] = newPath;
+                newPolyline.setAttribute('stroke-width', strokeWidth);
+                newPolyline.setAttribute('fill', 'none');
+                newPolyline.setAttribute('stroke-linecap', 'round');
+                newPolyline.setAttribute('stroke', 'lightgreen');
+                newPolyline.setAttribute('points', `${pointerPos.x},${pointerPos.y}`);
+                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPolyline);
+                state.currentFreePath[state.currentPathIndex] = newPolyline;
+                // Store points array for this polyline
+                state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+                state.currentFreePolylinePoints[state.currentPathIndex] = [
+                    { x: pointerPos.x, y: pointerPos.y }
+                ];
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
+                // Add a points counter to limit path growth
+                state.freeTracePointsCount = 1;
             }
-            // Get the previous position to draw a smooth curve
-            const previousPos = state.lastPointerPos || pointerPos;
-            // Create a quadratic curve from the previous point to the current point
-            const newPathData = state.currentFreePath[state.currentPathIndex].getAttribute('d');
-            const midPointX = (previousPos.x + pointerPos.x) / 2;
-            const midPointY = (previousPos.y + pointerPos.y) / 2;
-            const updatedPathData = `${newPathData} Q ${previousPos.x},${previousPos.y} ${midPointX},${midPointY}`;
-            // Update the path's 'd' attribute with the new curve
-            state.currentFreePath[state.currentPathIndex].setAttribute('d', updatedPathData);
+            // Limit the number of points in the free trace path for performance
+            const MAX_FREE_TRACE_POINTS = 10;
+            state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
+            if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
+                // If limit reached, skip adding more points
+                return;
+            }
+            // Add the new point to the polyline's points array
+            state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+            let pointsArr = state.currentFreePolylinePoints[state.currentPathIndex] || [];
+            pointsArr.push({ x: pointerPos.x, y: pointerPos.y });
+            state.currentFreePolylinePoints[state.currentPathIndex] = pointsArr;
+            // Update the polyline's points attribute
+            const pointsStr = pointsArr.map(pt => `${pt.x},${pt.y}`).join(' ');
+            state.currentFreePath[state.currentPathIndex].setAttribute('points', pointsStr);
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            // Only re-append if not already children list
+            const childNodes = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
+            }
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
-            const currentPathLength = currentPath.getTotalLength();
-            const distanceToEnd = currentPathLength - closestPoint.length;
-            // If close to the end of the path, move to the next path
-            if (distanceToEnd < 5) {
+            // For polyline, estimate the end by number of points (not path length)
+            if (pointsArr.length >= MAX_FREE_TRACE_POINTS) {
                 this.moveToNextPath(state);
                 state.currentFreePath[state.currentPathIndex] = null; // Reset free path for next path
+                state.currentFreePolylinePoints[state.currentPathIndex] = [];
+                state.freeTracePointsCount = 0;
             }
             // this.resetIdleTimer(state); // ← keep timer alive
             return; // Exit early since we're in free trace or blind free trace mode
@@ -474,24 +512,57 @@ export class LidoTrace {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         if (state.isDragging && closestPoint.length >= state.lastLength) {
             state.lastLength = closestPoint.length;
-            state.circle.setAttribute('cx', closestPoint.x.toString());
-            state.circle.setAttribute('cy', closestPoint.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
-            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
-        }
-        // Check if the current path is completed
-        if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
-            this.moveToNextPath(state);
-        }
-        else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
-            //   this.loadAnotherSVG(state, true);
-            this.moveToNextContainer();
+            // Only update the circle if it moved enough
+            if (Math.abs(closestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(closestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
+                state.circle.setAttribute('cx', closestPoint.x.toString());
+                state.circle.setAttribute('cy', closestPoint.y.toString());
+            }
+            // Only re-append if not already children list
+            const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_e = state.svg) === null || _e === void 0 ? void 0 : _e.appendChild(state.circle);
+            }
+            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+            // Completion logic for closed paths: only allow completion if almost all points are traced
+            const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
+            let percentComplete = state.lastLength / state.totalPathLength;
+            let startPoint = currentPath.getPointAtLength(0);
+            let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
+            let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
+            if (pathIsClosed && state.totalPathLength > 50) {
+                if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.currentPathIndex < state.paths.length - 1) {
+                        this.moveToNextPath(state);
+                    }
+                    else if (state.currentPathIndex === state.paths.length - 1) {
+                        this.moveToNextContainer();
+                    }
+                }
+            }
+            else {
+                // For open paths, allow completion if near the end
+                if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    this.moveToNextPath(state);
+                }
+                else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    this.moveToNextContainer();
+                }
+            }
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
+        this.isDragging = false;
         if (this.moving)
             return; // Prevent multiple calls
         this.moving = true; // Set moving to true to prevent re-entrance
@@ -510,9 +581,12 @@ export class LidoTrace {
             this.moving = false;
             return;
         }
+        console.log('onCorrect:', this.onCorrect);
+        console.log('el :', this.el);
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -530,13 +604,13 @@ export class LidoTrace {
         const dy = p1.y - p2.y;
         return dx * dx + dy * dy;
     }
-    // Find the closest point on the given path to the specified point using two-pass sampling
+    // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
     getClosestPointOnPath(pathNode, point) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // First pass: coarse sampling
-        const coarseStep = 20; // Increased step for better performance
+        // Optimized: Increase coarse steps for better performance
+        const coarseStep = 40; // was 20
         let coarseClosestPoint = { x: 0, y: 0, length: 0 };
         let coarseMinDistanceSquared = Infinity;
         for (let i = 0; i <= pathLength; i += coarseStep) {
@@ -552,7 +626,7 @@ export class LidoTrace {
             }
         }
         // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 2; // Increased step to reduce computations
+        const fineStep = 6; // was 2
         const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
         const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
         for (let i = searchStart; i <= searchEnd; i += fineStep) {
@@ -712,7 +786,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'b562e07d98a06f422ce5b8ca1d08f9c4307a313c', 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: 'fc2cb8355a26e5b483c24c59641bd20fa37e853b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '3f12119394502b6750874aaa50f43bf42e9f63cc', 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: '4fddd90d12251c4020006690f8c769ab452c8f6a', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1116,6 +1190,7 @@ export class LidoTrace {
             "fileIndex": {},
             "isDragging": {},
             "activePointerId": {},
+            "freeTraceUpdateCounter": {},
             "idleTimer": {},
             "fingerImg": {}
         };

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

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '12959a9a9c3b2df63ab977c39dceca4f1c771bf6', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'f19b29798a33592a1e5e15851f7f18266dbe35aa' })));
+        return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {