lido-player 0.0.2-alpha-55-dev → 0.0.2-alpha-56-dev

package/dist/components/{p-b0dbee97.js → p-e1ba0c44.js}

@@ -1,25 +1,25 @@
-import { p as proxyCustomElement, H, x as dispatchActivityChangeEvent, A as ActivityScoreKey, y as dispatchGameCompletedEvent, z as dispatchGameExitEvent, B as AudioPlayer, C as generateUUIDFallback, D as exitUrl, E as prevUrl, F as nextUrl, G as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer, h, I as getCancelBtnPopup, S as SelectedValuesKey, J as matchStringPattern, K as triggerNextContainer, u as calculateScale, M as triggerPrevcontainer, o as executeActions, j as Host, e as convertUrlToRelative, O as setCancelBtnPopup } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, y as dispatchActivityChangeEvent, A as ActivityScoreKey, z as dispatchGameCompletedEvent, B as dispatchGameExitEvent, C as AudioPlayer, D as generateUUIDFallback, E as exitUrl, F as prevUrl, G as nextUrl, I as speakUrl, N as NextContainerKey, P as PrevContainerKey, u as LIDO_COMMON_AUDIO_PATH, J as LidoContainer, h, K as getCancelBtnPopup, S as SelectedValuesKey, M as matchStringPattern, O as triggerNextContainer, v as calculateScale, Q as triggerPrevcontainer, o as executeActions, j as Host, e as convertUrlToRelative, T as setCancelBtnPopup } from './p-0712a27e.js';
 import { i as instance } from './p-73e3f0f4.js';
-import { d as defineCustomElement$k } from './p-2c518dbe.js';
-import { d as defineCustomElement$j } from './p-590ce2c9.js';
-import { d as defineCustomElement$i } from './p-73b2bd74.js';
-import { d as defineCustomElement$h } from './p-67a24ad4.js';
-import { d as defineCustomElement$g } from './p-c296051d.js';
-import { d as defineCustomElement$f } from './p-72d6a594.js';
-import { d as defineCustomElement$e } from './p-5078599e.js';
-import { d as defineCustomElement$d } from './p-9acf0fcc.js';
-import { d as defineCustomElement$c } from './p-ca8aea4b.js';
-import { d as defineCustomElement$b } from './p-c69ef266.js';
-import { d as defineCustomElement$a } from './p-bc5202db.js';
-import { d as defineCustomElement$9 } from './p-e534ea52.js';
-import { d as defineCustomElement$8 } from './p-3fc01453.js';
-import { d as defineCustomElement$7 } from './p-43d79c61.js';
-import { d as defineCustomElement$6 } from './p-de2193c5.js';
-import { d as defineCustomElement$5 } from './p-f8c00485.js';
-import { d as defineCustomElement$4 } from './p-b095de27.js';
-import { d as defineCustomElement$3 } from './p-0be6b5d5.js';
-import { d as defineCustomElement$2 } from './p-b847f269.js';
-import { d as defineCustomElement$1 } from './p-2e023f67.js';
+import { d as defineCustomElement$k } from './p-0a41b2f8.js';
+import { d as defineCustomElement$j } from './p-21852d55.js';
+import { d as defineCustomElement$i } from './p-c4739621.js';
+import { d as defineCustomElement$h } from './p-882b291d.js';
+import { d as defineCustomElement$g } from './p-f3bc4577.js';
+import { d as defineCustomElement$f } from './p-eab0ebb7.js';
+import { d as defineCustomElement$e } from './p-d1b5079b.js';
+import { d as defineCustomElement$d } from './p-480f708a.js';
+import { d as defineCustomElement$c } from './p-17f84b2f.js';
+import { d as defineCustomElement$b } from './p-ff801ba1.js';
+import { d as defineCustomElement$a } from './p-330caab8.js';
+import { d as defineCustomElement$9 } from './p-ffc40642.js';
+import { d as defineCustomElement$8 } from './p-4d332eab.js';
+import { d as defineCustomElement$7 } from './p-9104d427.js';
+import { d as defineCustomElement$6 } from './p-2829c82c.js';
+import { d as defineCustomElement$5 } from './p-cca36777.js';
+import { d as defineCustomElement$4 } from './p-f2b53e8e.js';
+import { d as defineCustomElement$3 } from './p-7ab0a273.js';
+import { d as defineCustomElement$2 } from './p-b9875116.js';
+import { d as defineCustomElement$1 } from './p-4e041807.js';
 
 const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}";
 const LidoHomeStyle0 = indexCss;
@@ -51,7 +51,6 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
-                console.log('container index ; ', this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -129,6 +128,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
                 }
             }
         };
+        this.commonAudioPath = undefined;
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -160,6 +160,9 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         // Trigger re-render of containers to update <lido-text> dynamically
         this.containers = [...this.containers];
     }
+    onCommonAudioPathChange(path) {
+        this.publishCommonAudioPath(path);
+    }
     /**
      * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
      * between containers and parses the XML data into containers.
@@ -195,6 +198,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         });
     }
     componentDidLoad() {
+        this.publishCommonAudioPath(this.commonAudioPath);
         setTimeout(() => {
             this.showDotsandbtn = true;
         }, 10);
@@ -210,6 +214,15 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
             this.scaleNavbarContainer(); // re-scale navbar on resize
         });
     }
+    publishCommonAudioPath(path) {
+        if (!path)
+            return;
+        const cleanPath = path.replace(/\/+$/, "");
+        window[LIDO_COMMON_AUDIO_PATH] = cleanPath;
+        console.log("[LidoHome] Published common audio path:", cleanPath);
+        // Dispatch a global event so LidoText knows the path is ready
+        window.dispatchEvent(new Event('lidoCommonAudioPathReady'));
+    }
     async handleIcons() {
         var _a;
         const checkUrl = async (url, containerUrl, fallback) => {
@@ -361,20 +374,16 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
         const containers = Array.from(containerElements).map((container, index) => {
-            console.log("nammadhaaaaaaa", this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index));
             if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
                 return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
         }).filter(Boolean); // Remove any undefined entries
         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);
@@ -483,10 +492,12 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
     get el() { return this; }
     static get watchers() { return {
         "locale": ["onLangChange"],
+        "commonAudioPath": ["onCommonAudioPathChange"],
         "xmlData": ["onXmlDataChange"]
     }; }
     static get style() { return LidoHomeStyle0 + (LidoHomeStyle1 + LidoHomeStyle2); }
 }, [0, "lido-home", {
+        "commonAudioPath": [1, "common-audio-path"],
         "showNav": [4, "show-nav"],
         "activeContainerIndexes": [16],
         "locale": [1],
@@ -508,6 +519,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         "showDotsandbtn": [32]
     }, undefined, {
         "locale": ["onLangChange"],
+        "commonAudioPath": ["onCommonAudioPathChange"],
         "xmlData": ["onXmlDataChange"]
     }]);
 function defineCustomElement() {

package/dist/components/{p-72d6a594.js → p-eab0ebb7.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoColCss = ".lido-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}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;

package/dist/components/{p-b095de27.js → p-f2b53e8e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, W as fraction, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, Y as fraction, h, j as Host } from './p-0712a27e.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: '3918ed476b3de4977c53ff0bf576253f68e8c84f', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '8f54b0e5de490a162aaa1d7ac9ed485d1628c484', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-c296051d.js → p-f3bc4577.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoCellCss = ".lido-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}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;

package/dist/components/{p-c69ef266.js → p-ff801ba1.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, Q as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, T as tinyColor, t as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-36c2e21a.js';
+import { c as commonjsGlobal, U as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, V as tinyColor, t as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-0712a27e.js';
 
 var lib = {exports: {}};
 

package/dist/components/{p-e534ea52.js → p-ffc40642.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, V as validateObjectiveStatus, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, X as validateObjectiveStatus, h, j as Host } from './p-0712a27e.js';
 
 const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%;text-align:center;align-content:center;font-size:42px;font-weight:800;font-family:'Baloo Bhai 2';box-sizing:content-box}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:contain;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--deactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px;font-weight:600;font-family:'Baloo Bhai 2'}";
 const LidoMathMatrixStyle0 = lidoMathMatrixCss;
@@ -7,8 +7,8 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
     constructor() {
         super();
         this.__registerHost();
-        this.rows = "7";
-        this.cols = "5";
+        this.rows = "10";
+        this.cols = "10";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -85,8 +85,10 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
         const fristElement = this.el.querySelector('.slot');
         if (!slotElement.length || !fristElement)
             return;
-        const slotMaxValues = fristElement.offsetWidth < fristElement.offsetHeight ? fristElement.offsetWidth : fristElement.offsetHeight;
+        const elementSize = Number(this.rows) < Number(this.cols) ? this.el.offsetHeight : this.el.offsetWidth;
+        const numberOfSlots = Number(this.rows) > Number(this.cols) ? Number(this.rows) : Number(this.cols);
         const slotParent = this.el.querySelectorAll('.slot-parent');
+        const slotMaxValues = elementSize / numberOfSlots;
         slotParent.forEach(parent => {
             parent.style.width = `${slotMaxValues}px`;
             Array.from(parent.children).forEach(el => {
@@ -190,7 +192,7 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
+        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { f as format } from './utils-ae1eb036.js';
+export { f as format } from './utils-7ed76799.js';
 import './index-37c2ad2d.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, g as getAssetPath, h, H as Host, a as getElement, c as createEvent } from './index-37c2ad2d.js';
-import { c as commonjsGlobal, s as setVisibilityWithDelay, i as initEventsForElement, a as convertUrlToRelative, R as RiveService, p as parseProp, e as equationCheck, b as storingEachActivityScore, d as executeActions, g as calculateScore, N as NextContainerKey, h as handlingChildElements, j as attachSpeakIcon, k as calculateScale, l as handleFloatElementPosition, m as handleElementClick, n as dispatchActivityChangeEvent, A as ActivityScoreKey, o as dispatchGameCompletedEvent, q as dispatchGameExitEvent, r as AudioPlayer, t as generateUUIDFallback, u as exitUrl, v as prevUrl, w as nextUrl, x as speakUrl, P as PrevContainerKey, L as LidoContainer$1, y as getCancelBtnPopup, S as SelectedValuesKey, z as matchStringPattern, B as triggerNextContainer, C as triggerPrevcontainer, D as setCancelBtnPopup, E as getDefaultExportFromCjs, F as tinyColor, G as DropAction, H as validateObjectiveStatus, I as fraction, T as TraceMode, J as speakIcon, K as fingerUrl } from './utils-ae1eb036.js';
+import { c as commonjsGlobal, s as setVisibilityWithDelay, i as initEventsForElement, a as convertUrlToRelative, R as RiveService, p as parseProp, e as equationCheck, b as storingEachActivityScore, d as executeActions, g as calculateScore, N as NextContainerKey, h as handlingChildElements, j as attachSpeakIcon, k as calculateScale, l as handleFloatElementPosition, m as handleElementClick, n as dispatchActivityChangeEvent, A as ActivityScoreKey, o as dispatchGameCompletedEvent, q as dispatchGameExitEvent, r as AudioPlayer, t as generateUUIDFallback, u as exitUrl, v as prevUrl, w as nextUrl, x as speakUrl, P as PrevContainerKey, L as LIDO_COMMON_AUDIO_PATH, y as LidoContainer$1, z as getCancelBtnPopup, S as SelectedValuesKey, B as matchStringPattern, C as triggerNextContainer, D as triggerPrevcontainer, E as setCancelBtnPopup, F as getDefaultExportFromCjs, G as tinyColor, H as DropAction, I as validateObjectiveStatus, J as fraction, K as LIDO_COMMON_AUDIO_READY_EVENT, T as TraceMode, M as speakIcon, O as fingerUrl } from './utils-7ed76799.js';
 
 var rive = {exports: {}};
 
@@ -10249,7 +10249,6 @@ const LidoHome = class {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
-                console.log('container index ; ', this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -10327,6 +10326,7 @@ const LidoHome = class {
                 }
             }
         };
+        this.commonAudioPath = undefined;
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -10358,6 +10358,9 @@ const LidoHome = class {
         // Trigger re-render of containers to update <lido-text> dynamically
         this.containers = [...this.containers];
     }
+    onCommonAudioPathChange(path) {
+        this.publishCommonAudioPath(path);
+    }
     /**
      * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
      * between containers and parses the XML data into containers.
@@ -10393,6 +10396,7 @@ const LidoHome = class {
         });
     }
     componentDidLoad() {
+        this.publishCommonAudioPath(this.commonAudioPath);
         setTimeout(() => {
             this.showDotsandbtn = true;
         }, 10);
@@ -10408,6 +10412,15 @@ const LidoHome = class {
             this.scaleNavbarContainer(); // re-scale navbar on resize
         });
     }
+    publishCommonAudioPath(path) {
+        if (!path)
+            return;
+        const cleanPath = path.replace(/\/+$/, "");
+        window[LIDO_COMMON_AUDIO_PATH] = cleanPath;
+        console.log("[LidoHome] Published common audio path:", cleanPath);
+        // Dispatch a global event so LidoText knows the path is ready
+        window.dispatchEvent(new Event('lidoCommonAudioPathReady'));
+    }
     async handleIcons() {
         var _a;
         const checkUrl = async (url, containerUrl, fallback) => {
@@ -10559,20 +10572,16 @@ const LidoHome = class {
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
         const containers = Array.from(containerElements).map((container, index) => {
-            console.log("nammadhaaaaaaa", this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index));
             if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
                 return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
         }).filter(Boolean); // Remove any undefined entries
         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);
@@ -10681,6 +10690,7 @@ const LidoHome = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "locale": ["onLangChange"],
+        "commonAudioPath": ["onCommonAudioPathChange"],
         "xmlData": ["onXmlDataChange"]
     }; }
 };
@@ -13642,8 +13652,8 @@ const LidoMathMatrixStyle0 = lidoMathMatrixCss;
 const LidoMathMatrix = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.rows = "7";
-        this.cols = "5";
+        this.rows = "10";
+        this.cols = "10";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -13720,8 +13730,10 @@ const LidoMathMatrix = class {
         const fristElement = this.el.querySelector('.slot');
         if (!slotElement.length || !fristElement)
             return;
-        const slotMaxValues = fristElement.offsetWidth < fristElement.offsetHeight ? fristElement.offsetWidth : fristElement.offsetHeight;
+        const elementSize = Number(this.rows) < Number(this.cols) ? this.el.offsetHeight : this.el.offsetWidth;
+        const numberOfSlots = Number(this.rows) > Number(this.cols) ? Number(this.rows) : Number(this.cols);
         const slotParent = this.el.querySelectorAll('.slot-parent');
+        const slotMaxValues = elementSize / numberOfSlots;
         slotParent.forEach(parent => {
             parent.style.width = `${slotMaxValues}px`;
             Array.from(parent.children).forEach(el => {
@@ -13825,7 +13837,7 @@ const LidoMathMatrix = class {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
+        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -14153,7 +14165,7 @@ const LidoRow = class {
 };
 LidoRow.style = LidoRowStyle0;
 
-const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
+const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezoid{width:var(--trapezoidWidth);height:var(--trapezoidHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    20% 0%,   \r\n    80% 0%,   \r\n    100% 100%,\r\n    0% 100%  \r\n  )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    25% 0%,   \r\n    75% 0%,   \r\n    100% 50%, \r\n    75% 100%, \r\n    25% 100%, \r\n    0% 50%   \r\n  )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(\r\n    \r\n    15% 10%,\r\n    25% 4%,\r\n    35% 1%,\r\n    50% 0%,\r\n    65% 1%,\r\n    75% 4%,\r\n    85% 10%,\r\n\r\n    \r\n    50% 100%\r\n  )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),\r\n    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),\r\n    red}";
 const LidoShapeStyle0 = lidoShapeCss;
 
 const LidoShape = class {
@@ -14183,6 +14195,7 @@ const LidoShape = class {
         this.margin = '';
         this.delayVisible = '';
         this.disableSpeak = false;
+        this.style = {};
     }
     /**
      * Lifecycle hook that runs after the component is loaded into the DOM.
@@ -14191,20 +14204,46 @@ const LidoShape = class {
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
+        this.updateStyles();
+        this.lido3DShapes();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            x: parseProp(`${this.x}`, orientation),
+            y: parseProp(`${this.y}`, orientation),
+            height: parseProp(`${this.height}`, orientation),
+            width: parseProp(`${this.width}`, orientation),
+        };
+    }
+    lido3DShapes() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        if (this.shapeType === "lido-cube") {
+            const faces = this.el.querySelectorAll(".face");
+            faces.forEach(item => {
+                const face = item;
+                face.style.setProperty("--face-width", parseProp(`${this.width}`, orientation));
+                const translateValue = parseInt(parseProp(`${this.width}`, orientation)) / 2;
+                console.log("translate : ", translateValue);
+                face.style.setProperty("--face-translate", `${translateValue}px`);
+                face.style.setProperty("--face-bg-color", this.bgColor);
+            });
+        }
     }
     render() {
         // Inline styles to position and size the shape component
         const style = {
-            height: this.shapeType !== 'polygon' ? this.height : undefined, // Set height unless it's a polygon
-            width: this.shapeType !== 'polygon' ? this.width : undefined, // Set width unless it's a polygon
-            top: this.y,
-            left: this.x,
+            height: this.shapeType !== 'polygon' ? this.style.height : undefined, // Set height unless it's a polygon
+            width: this.shapeType !== 'polygon' ? this.style.width : undefined, // Set width unless it's a polygon
+            top: this.style.y,
+            left: this.style.x,
             display: this.visible ? 'block' : 'none', // Toggle visibility
             zIndex: this.z,
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        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 }));
+        return (h(Host, { key: 'fde795dbc7c3a295a84bb1e5e74ff57cf3fe103a', 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 }, this.shapeType === "lido-cube" &&
+            h("div", { key: '620b82948d6eea342a2e00fab780696fcd2d6794', class: "cube" }, h("div", { key: 'b505a156896edd12c8d686966945168c5eb056d7', class: "face top" }), h("div", { key: '806b4d6aec720340d7a207854b20f910bb845829', class: "face bottom" }), h("div", { key: 'd2619804cabb2761e624139e33d759992d632468', class: "face left" }), h("div", { key: '3874ba7bcbe3eebc133b107a4bfefb38638eeb0f', class: "face right" }), h("div", { key: '0e19cfb0feba399b9a98336b0f6c349ff22e29ed', class: "face front" }), h("div", { key: '9b1d9d75d8897756f32bc023533eb1dc025d8e2f', class: "face back" }))));
     }
     get el() { return getElement(this); }
 };
@@ -14403,7 +14442,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (h(Host, { key: '3918ed476b3de4977c53ff0bf576253f68e8c84f', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '8f54b0e5de490a162aaa1d7ac9ed485d1628c484', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14473,6 +14512,30 @@ const LidoText = class {
         if (this.showSpeakIcon) {
             attachSpeakIcon(this.el);
         }
+        if (!this.audio || this.audio.trim() === "") {
+            const applyAutoAudio = () => {
+                const autoAudio = this.resolveAutoAudio();
+                if (autoAudio) {
+                    this.audio = autoAudio;
+                    console.log("[LidoText] Auto audio applied:", autoAudio);
+                }
+            };
+            // If path is already available, apply immediately
+            if (window.__LIDO_COMMON_AUDIO_PATH__) {
+                applyAutoAudio();
+            }
+            else {
+                // Otherwise, wait for it
+                window.addEventListener(LIDO_COMMON_AUDIO_READY_EVENT, applyAutoAudio, { once: true });
+            }
+        }
+    }
+    resolveAutoAudio() {
+        const base = window[LIDO_COMMON_AUDIO_PATH];
+        if (!base || !this.string)
+            return null;
+        const fileName = this.string.toLowerCase().trim().replace(/\s+/g, "_").replace(/[^\w-]/g, "");
+        return `${base}/${fileName}.mp3`;
     }
     /**
      * Lifecycle method that runs before the component is rendered.
@@ -14538,7 +14601,7 @@ const LidoText = class {
         }
     }
     render() {
-        return (h(Host, { key: '89ed432cbbf1f3ca2cdcaf4df80628350badef6d', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", instance.t(this.string)) : instance.t(this.string)));
+        return (h(Host, { key: '87d82cc0bf52e1eaba8f44d1bdd80c98e896ddbf', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", instance.t(this.string)) : instance.t(this.string)));
     }
     get el() { return getElement(this); }
 };
@@ -14932,7 +14995,7 @@ const LidoTrace = class {
         });
     }
     // Modified handlePointerMove function
-    handlePointerMove(state) {
+    async handlePointerMove(state) {
         var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
@@ -15079,13 +15142,15 @@ const LidoTrace = class {
             }
             (_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
+            const COMPLETION_THRESHOLD = 0.95; // 95% 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) {
+                    // Animate the draggable circle & green trace to the very end, then proceed
+                    await this.animatePathToEnd(state, currentPath);
                     if (state.currentPathIndex < state.paths.length - 1) {
                         this.moveToNextPath(state);
                     }
@@ -15106,6 +15171,55 @@ const LidoTrace = class {
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
+    // Smoothly animate the draggable circle + green stroke from current lastLength to totalPathLength
+    animatePathToEnd(state, path, duration = 300) {
+        if (!path || !state.svg)
+            return Promise.resolve();
+        if (state._animatingToEnd)
+            return Promise.resolve();
+        state._animatingToEnd = true;
+        const start = state.lastLength || 0;
+        const end = path.getTotalLength();
+        const startTime = performance.now();
+        // get greenPath safely: prefer the attached property, otherwise query by class near the original path
+        const greenPath = path.greenPath ||
+            (path.parentNode && path.parentNode.querySelector('.lido-trace-path-green'));
+        return new Promise(resolve => {
+            const step = (now) => {
+                const t = Math.min(1, (now - startTime) / duration);
+                const eased = t; // linear easing
+                const currentLen = start + (end - start) * eased;
+                state.lastLength = currentLen;
+                // update circle position and green path dashoffset
+                const pt = path.getPointAtLength(currentLen);
+                if (state.circle) {
+                    state.circle.setAttribute('cx', pt.x.toString());
+                    state.circle.setAttribute('cy', pt.y.toString());
+                }
+                if (greenPath) {
+                    greenPath.setAttribute('stroke-dashoffset', (state.totalPathLength - currentLen).toString());
+                }
+                if (t < 1) {
+                    requestAnimationFrame(step);
+                }
+                else {
+                    // ensure fully complete
+                    state.lastLength = end;
+                    if (state.circle) {
+                        const finalPt = path.getPointAtLength(end);
+                        state.circle.setAttribute('cx', finalPt.x.toString());
+                        state.circle.setAttribute('cy', finalPt.y.toString());
+                    }
+                    if (greenPath) {
+                        greenPath.setAttribute('stroke-dashoffset', '0');
+                    }
+                    state._animatingToEnd = false;
+                    resolve();
+                }
+            };
+            requestAnimationFrame(step);
+        });
+    }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
         this.isDragging = false;
@@ -15118,6 +15232,7 @@ const LidoTrace = class {
         if (this.animationTrace) {
             await this.playTraceAnimation();
         }
+        storingEachActivityScore(true);
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -15132,6 +15247,7 @@ const LidoTrace = class {
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        calculateScore();
         console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
@@ -15332,7 +15448,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        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" })));
+        return (h(Host, { key: 'aef0bf373de0c1d6ac49e7782838d9679c2b093f', 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: 'f5223ad78568213f7965b3ea7eeb56b1b965fe78', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return getElement(this); }
@@ -15420,7 +15536,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        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' })));
+        return (h(Host, { key: 'ba0767c8fb70d3c20dbcc0835794ec58d62078b3', 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: '359ff37390f0d20e650481cd8d531ad4da55b308' })));
     }
     get el() { return getElement(this); }
 };