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

package/dist/components/{p-36c2e21a.js → p-0712a27e.js}

@@ -1383,6 +1383,8 @@ const DropLength = 'dropLength';
 const DropToAttr = 'drop-to';
 const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
+const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
+const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
 var TraceMode;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";
@@ -1614,7 +1616,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -1646,18 +1648,15 @@ function calculateValue(elements, operation) {
     }
 }
 function balanceResult(container, objectiveString) {
-    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
-    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal);
-    const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    const leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
@@ -1992,9 +1991,12 @@ function enableDraggingWithScaling(element) {
                             otherElement.style.border = ''; // Reset border
                             otherElement.style.backgroundColor = 'transparent'; // Reset background color
                         }
-                        if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
                         }
+                        else {
+                            otherElement.style.opacity = '1';
+                        }
                     }
                 }
                 else {
@@ -4590,7 +4592,7 @@ function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disableSpeak') === 'true') {
+    if (container && container.getAttribute('disable-speak') === 'true') {
         return;
     }
     // if (element.closest('[disableSpeak="true"]')) {
@@ -70661,6 +70663,7 @@ const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
+            storingEachActivityScore(true);
             await executeActions(onCorrect, container);
         }
         if (container.getAttribute('dropAttr') === 'EnableAnimation') {
@@ -70676,12 +70679,12 @@ const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
-            triggerNextContainer();
             await calculateScore();
             triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
+            storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
         }
     }
@@ -70704,6 +70707,9 @@ function convertUrlToRelative(url) {
     if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
+    if (url.startsWith('/Lido-CommonAudios/')) {
+        return url;
+    }
     if (baseUrl) {
         const newUrl = url.startsWith('/') ? url.slice(1) : url;
         if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
@@ -71336,4 +71342,4 @@ const updateCalculatorAnswer = (el) => {
     el.setAttribute('string', value);
 };
 
-export { ActivityScoreKey as A, AudioPlayer as B, generateUUIDFallback as C, exitUrl as D, prevUrl as E, nextUrl as F, speakUrl as G, H, getCancelBtnPopup as I, matchStringPattern as J, triggerNextContainer as K, LidoContainer as L, triggerPrevcontainer as M, NextContainerKey as N, setCancelBtnPopup as O, PrevContainerKey as P, getDefaultExportFromCjs as Q, RiveService as R, SelectedValuesKey as S, tinyColor as T, DropAction as U, validateObjectiveStatus as V, fraction as W, TraceMode as X, speakIcon as Y, fingerUrl as Z, setNonce as a, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, calculateScore as q, handlingChildElements as r, setAssetPath as s, attachSpeakIcon as t, calculateScale as u, handleFloatElementPosition as v, handleElementClick as w, dispatchActivityChangeEvent as x, dispatchGameCompletedEvent as y, dispatchGameExitEvent as z };
+export { fingerUrl as $, ActivityScoreKey as A, dispatchGameExitEvent as B, AudioPlayer as C, generateUUIDFallback as D, exitUrl as E, prevUrl as F, nextUrl as G, H, speakUrl as I, LidoContainer as J, getCancelBtnPopup as K, LIDO_COMMON_AUDIO_READY_EVENT as L, matchStringPattern as M, NextContainerKey as N, triggerNextContainer as O, PrevContainerKey as P, triggerPrevcontainer as Q, RiveService as R, SelectedValuesKey as S, setCancelBtnPopup as T, getDefaultExportFromCjs as U, tinyColor as V, DropAction as W, validateObjectiveStatus as X, fraction as Y, TraceMode as Z, speakIcon as _, setNonce as a, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, calculateScore as q, handlingChildElements as r, setAssetPath as s, attachSpeakIcon as t, LIDO_COMMON_AUDIO_PATH as u, calculateScale as v, handleFloatElementPosition as w, handleElementClick as x, dispatchActivityChangeEvent as y, dispatchGameCompletedEvent as z };

package/dist/components/{p-2c518dbe.js → p-0a41b2f8.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, p as proxyCustomElement, H, g as getAssetPath, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-36c2e21a.js';
+import { c as commonjsGlobal, p as proxyCustomElement, H, g as getAssetPath, d as setVisibilityWithDelay, i as initEventsForElement, e as convertUrlToRelative, h, j as Host, R as RiveService } from './p-0712a27e.js';
 
 var rive = {exports: {}};
 

package/dist/components/{p-ca8aea4b.js → p-17f84b2f.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, v as handleFloatElementPosition, w as handleElementClick, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, w as handleFloatElementPosition, x as handleElementClick, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoFloatCss = ".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}";
 const LidoFloatStyle0 = lidoFloatCss;

package/dist/components/{p-590ce2c9.js → p-21852d55.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoBalanceCss = "#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){.lido-balance-shadow{height:100px;position:absolute;top:80%;left:28%}}@media (orientation: landscape){.lido-balance-shadow{height:100px;position:absolute;top:90%;left:33%}}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}#pivotimg::after{content:\"\";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:120%;height:60px;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Shadow.svg\");background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:10}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^=\"M78.9414\"]{fill:white}";
 const LidoBalanceStyle0 = lidoBalanceCss;

package/dist/components/{p-de2193c5.js → p-2829c82c.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, 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, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoRowCss = ".lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}";
 const LidoRowStyle0 = lidoRowCss;

package/dist/components/{p-bc5202db.js → p-330caab8.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, o as executeActions, K as triggerNextContainer, v as handleFloatElementPosition, n as storingEachActivityScore, U as DropAction, k as parseProp, h, j as Host } from './p-36c2e21a.js';
-import { d as defineCustomElement$1 } from './p-0be6b5d5.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, J as LidoContainer, o as executeActions, O as triggerNextContainer, w as handleFloatElementPosition, n as storingEachActivityScore, W as DropAction, k as parseProp, h, j as Host } from './p-0712a27e.js';
+import { d as defineCustomElement$1 } from './p-7ab0a273.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;

package/dist/components/{p-9acf0fcc.js → p-480f708a.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-0712a27e.js';
 
 const lidoFlashCardCss = ".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}";
 const LidoFlashCardStyle0 = lidoFlashCardCss;

package/dist/components/{p-3fc01453.js → p-4d332eab.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoPosCss = ".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}";
 const LidoPosStyle0 = lidoPosCss;

package/dist/components/{p-2e023f67.js → p-4e041807.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, 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, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-0712a27e.js';
 
 const lidoWrapCss = ".lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}";
 const LidoWrapStyle0 = lidoWrapCss;
@@ -78,7 +78,7 @@ const LidoWrap = /*@__PURE__*/ proxyCustomElement(class LidoWrap extends H {
         };
     }
     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 this; }
     static get style() { return LidoWrapStyle0; }

package/dist/components/{p-0be6b5d5.js → p-7ab0a273.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, t as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, t as attachSpeakIcon, L as LIDO_COMMON_AUDIO_READY_EVENT, e as convertUrlToRelative, k as parseProp, h, j as Host, u as LIDO_COMMON_AUDIO_PATH } from './p-0712a27e.js';
 import { i as instance } from './p-73e3f0f4.js';
 
 const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
@@ -57,6 +57,30 @@ const LidoText = /*@__PURE__*/ proxyCustomElement(class LidoText extends H {
         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.
@@ -122,7 +146,7 @@ const LidoText = /*@__PURE__*/ proxyCustomElement(class LidoText extends H {
         }
     }
     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 this; }
     static get style() { return LidoTextStyle0; }

package/dist/components/{p-67a24ad4.js → p-882b291d.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-36c2e21a.js';
-import { d as defineCustomElement$1 } from './p-0be6b5d5.js';
+import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-0712a27e.js';
+import { d as defineCustomElement$1 } from './p-7ab0a273.js';
 
 const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-canvas{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}#lido-exit-button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-43%;left:18%;z-index:10}canvas{touch-action:none;display:block}";
 const LidoCanvasStyle0 = lidoCanvasCss;

package/dist/components/{p-43d79c61.js → p-9104d427.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, t as attachSpeakIcon, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, t as attachSpeakIcon, h, j as Host } from './p-0712a27e.js';
 
 const lidoRandomCss = ".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}";
 const LidoRandomStyle0 = lidoRandomCss;

package/dist/components/{p-b847f269.js → p-b9875116.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, X as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, Y as speakIcon, o as executeActions, K as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, Z as fingerUrl } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, Z as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, _ as speakIcon, n as storingEachActivityScore, o as executeActions, q as calculateScore, O as triggerNextContainer, J as LidoContainer, k as parseProp, h, j as Host, $ as fingerUrl } from './p-0712a27e.js';
 
 const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
@@ -389,7 +389,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         });
     }
     // Modified handlePointerMove function
-    handlePointerMove(state) {
+    async handlePointerMove(state) {
         var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
@@ -536,13 +536,15 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             }
             (_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);
                     }
@@ -563,6 +565,55 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         }
         // 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;
@@ -575,6 +626,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         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) {
@@ -589,6 +641,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        calculateScore();
         console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
@@ -789,7 +842,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     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 this; }

package/dist/components/{p-73b2bd74.js → p-c4739621.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, l as createEvent, m as equationCheck, n as storingEachActivityScore, o as executeActions, q as calculateScore, N as NextContainerKey, h, j as Host } from './p-36c2e21a.js';
-import { d as defineCustomElement$2 } from './p-c296051d.js';
-import { d as defineCustomElement$1 } from './p-0be6b5d5.js';
+import { p as proxyCustomElement, H, l as createEvent, m as equationCheck, n as storingEachActivityScore, o as executeActions, q as calculateScore, N as NextContainerKey, h, j as Host } from './p-0712a27e.js';
+import { d as defineCustomElement$2 } from './p-f3bc4577.js';
+import { d as defineCustomElement$1 } from './p-7ab0a273.js';
 
 const lidoCalculatorCss = "#lidoCalculator{border-radius:19px;border:5px solid #029A9A;position:relative;display:flex;flex-direction:column;padding:2%;box-sizing:border-box}.lido-calculator-btn-special{background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{background-color:#029A9A !important;color:#000;--btn-shadow-color:#0f4242 !important}#lido-calculator-penIcon{--btn-bg-color:#FB7038 !important;--btn-shadow-px:0 8px 0 !important;--btn-shadow-color:#D74B12 !important;border-radius:5px !important}.lido-calculator-displayParent{width:89%;height:107px;background-color:rgb(68, 186, 186);border-radius:5px;margin:14px auto 17px auto;overflow:hidden;display:flex;align-items:end}.lido-calculator-display{width:97%;height:94px;background:#029A9A;color:#fff;text-align:right;display:flex;justify-content:flex-end;align-items:center;font-size:72px;font-weight:700;font-family:'Baloo Bhai 2', serif;border-radius:5px 0px 0px 5px;box-sizing:border-box;margin:0 0px -6px auto}.lido-calculator-buttons{flex:1;display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;gap:0%;width:100%;justify-items:center;align-items:center;position:relative;top:-1%}.lido-calculator-buttons lido-text{display:flex !important;justify-content:center;align-items:center;width:96px !important;height:80px !important;font-size:72px !important;font-weight:700 !important;color:#fff;border-radius:5px !important;cursor:pointer;text-align:center;line-height:1;box-sizing:border-box;transition:transform 0.1s}.lido-calculator-buttons lido-text:active{transform:scale(0.95)}";
 const LidoCalculatorStyle0 = lidoCalculatorCss;

package/dist/components/p-cca36777.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, h, j as Host } from './p-0712a27e.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class LidoShape extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.id = '';
+        this.value = '';
+        this.height = 'auto';
+        this.width = 'auto';
+        this.ariaLabel = '';
+        this.ariaHidden = '';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.bgColor = '';
+        this.type = '';
+        this.tabIndex = 0;
+        this.shapeType = 'circle';
+        this.visible = false;
+        this.audio = '';
+        this.onTouch = '';
+        this.onInCorrect = '';
+        this.onCorrect = '';
+        this.onEntry = '';
+        this.minDrops = 1;
+        this.maxDrops = 1;
+        this.margin = '';
+        this.delayVisible = '';
+        this.disableSpeak = false;
+        this.style = {};
+    }
+    /**
+     * Lifecycle hook that runs after the component is loaded into the DOM.
+     * It initializes custom events based on the `type` of the shape component.
+     */
+    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.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: '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 this; }
+    static get style() { return LidoShapeStyle0; }
+}, [0, "lido-shape", {
+        "id": [1],
+        "value": [1],
+        "height": [1],
+        "width": [1],
+        "ariaLabel": [1, "aria-label"],
+        "ariaHidden": [1, "aria-hidden"],
+        "x": [1],
+        "y": [1],
+        "z": [1],
+        "bgColor": [1, "bg-color"],
+        "type": [1],
+        "tabIndex": [2, "tab-index"],
+        "shapeType": [1, "shape-type"],
+        "visible": [4],
+        "audio": [1],
+        "onTouch": [1, "on-touch"],
+        "onInCorrect": [1, "on-in-correct"],
+        "onCorrect": [1, "on-correct"],
+        "onEntry": [1, "on-entry"],
+        "minDrops": [2, "min-drops"],
+        "maxDrops": [2, "max-drops"],
+        "margin": [1],
+        "delayVisible": [1, "delay-visible"],
+        "disableSpeak": [4, "disable-speak"],
+        "style": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lido-shape"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lido-shape":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LidoShape);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LidoShape as L, defineCustomElement as d };

package/dist/components/{p-5078599e.js → p-d1b5079b.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, u as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-36c2e21a.js';
+import { p as proxyCustomElement, H, v as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-0712a27e.js';
 import { i as instance } from './p-73e3f0f4.js';
 
 const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}";