lido-player 0.0.2-alpha-75 → 0.0.2-alpha-77

package/dist/cjs/{index-DeCNGGv1.js → index-BzToe3fj.js}

@@ -108,70 +108,16 @@ const LANGUAGE_PROFILES = {
     }
 };
 
-class Timer {
-    constructor() {
-        this.startTime = 0;
-        this.elapsedTime = 0;
-        this.intervalId = null;
-    }
-    static getI(onTick) {
-        if (!Timer.instance) {
-            Timer.instance = new Timer();
-        }
-        if (onTick) {
-            Timer.instance.onTick = onTick;
-        }
-        return Timer.instance;
-    }
-    start() {
-        if (this.intervalId)
-            return;
-        this.startTime = Date.now() - this.elapsedTime;
-        this.intervalId = window.setInterval(() => {
-            var _a;
-            this.elapsedTime = Date.now() - this.startTime;
-            (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsedTime);
-        }, 1000);
-    }
-    pause() {
-        if (!this.intervalId)
-            return;
-        clearInterval(this.intervalId);
-        this.intervalId = null;
-        this.elapsedTime = Date.now() - this.startTime;
-    }
-    resume() {
-        if (this.intervalId)
-            return;
-        this.start();
-    }
-    stop() {
-        var _a;
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
-        this.startTime = 0;
-        this.elapsedTime = 0;
-        (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, 0);
-    }
-    getElapsed() {
-        return this.intervalId
-            ? Date.now() - this.startTime
-            : this.elapsedTime;
-    }
-}
-
 function dispatchCustomEvent(eventName, detail) {
     console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
     window.dispatchEvent(event);
 }
-function dispatchActivityEndEvent(totalIndex, currentIndex, score, rightMoves, wrongMoves) {
-    dispatchCustomEvent(ActivityEndKey, { currentIndex, totalIndex, score, rightMoves, wrongMoves });
+function dispatchActivityEndEvent(totalIndex, currentIndex, score, rightMoves, wrongMoves, timeSpentForActivity) {
+    dispatchCustomEvent(ActivityEndKey, { currentIndex, totalIndex, score, rightMoves, wrongMoves, timeSpentForActivity });
 }
-function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, finalScore) {
-    dispatchCustomEvent(LessonEndKey, { totalIndex, rightMoves, wrongMoves, finalScore, timeSpent: Math.floor(Timer.getI().getElapsed() / 1000) });
+function dispatchLessonEndEvent(totalIndex, rightMoves, wrongMoves, finalScore, timeSpendForLesson) {
+    dispatchCustomEvent(LessonEndKey, { totalIndex, rightMoves, wrongMoves, finalScore, timeSpendForLesson });
 }
 function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});
@@ -392,7 +338,8 @@ function enableDraggingWithScaling(element) {
         console.error(`Container with ID "container" not found.`);
         return;
     }
-    // if(container.getAttribute("canplay") === "false")return;
+    if (container.getAttribute("canplay") === "false")
+        return;
     handlingElementFlexibleWidth(element, 'drag');
     const onStart = (event) => {
         var _a, _b;
@@ -567,7 +514,7 @@ function enableDraggingWithScaling(element) {
     };
     let lastOverlappedElement = null;
     const onEnd = (endEv) => {
-        var _a, _b;
+        var _a, _b, _c;
         isDragging = false;
         if (isClicked) {
             if (clone) {
@@ -604,12 +551,18 @@ function enableDraggingWithScaling(element) {
         // Check for overlaps and log the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         if (!mostOverlappedElement) {
-            handleResetDragElement(element, null, null, null, null);
+            // build current selection/drop maps so reset logic can update counts correctly
+            const selectedValueData = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : "[]";
+            const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
+            const dropSelectedDataObject = buildDragSelectedMapFromDOM();
+            JSON.stringify(dropSelectedDataObject);
+            const dropHasDrag = buildDropHasDragFromDOM();
+            handleResetDragElement(element, null, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
         onElementDropComplete(element, mostOverlappedElement);
         executeActions("this.updateCountBlender='true'", container);
-        if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
+        if (((_b = element.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
                 if (element) {
                     element.classList.add('diagonal-drop');
@@ -634,7 +587,7 @@ function enableDraggingWithScaling(element) {
         //   const computedStyle = window.getComputedStyle(element);
         //   mostOverlappedElement.style.width = computedStyle.width;
         // }
-        if (((_b = element.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.InfiniteDrop) {
+        if (((_c = element.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === DropMode.InfiniteDrop) {
             if (mostOverlappedElement) {
                 mostOverlappedElement.style.opacity = '0';
             }
@@ -757,9 +710,10 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
         dragToDropMap.delete(dragElement);
     }
     if (selectedValueData) {
-        let selectedValue = JSON.parse(selectedValueData);
-        selectedValue = selectedValue.filter(value => value != dragElement['value']);
-        container.setAttribute(SelectedValuesKey, JSON.stringify(selectedValue));
+        // Instead of filtering stale selectedValueData, rebuild selected values from DOM
+        const rebuiltMap = buildDragSelectedMapFromDOM();
+        const sortedValues = getSortedValuesArrayFromMap(rebuiltMap);
+        container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
     }
     if (dragSelectedData) {
         let dragSelected = JSON.parse(dragSelectedData);
@@ -770,6 +724,10 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
         //  container.setAttribute(DragSelectedMapKey, JSON.stringify(dragSelected));
         dragElement.removeAttribute(DropToAttr);
         updateDropBorder(currentDrop);
+        // rebuild counts & balance after removing mapping
+        const rebuiltMap2 = buildDragSelectedMapFromDOM();
+        const sortedValues2 = getSortedValuesArrayFromMap(rebuiltMap2);
+        container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues2));
         updateBalanceOnDrop();
     }
     const allElements = document.querySelectorAll("[type='drop']");
@@ -791,9 +749,7 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
         }
     });
     // Update counts when a drag is reset/removed from a drop
-    if (container) {
-        await executeActions("this.updateCountBlender='true'", container);
-    }
+    await executeActions("this.updateCountBlender='true'", container);
     handleShowCheck();
     highlightElement();
 }
@@ -842,13 +798,19 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
         else {
             //strings
-            isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
+            if (dropValue.includes(',')) {
+                isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
+            }
+            else {
+                isCorrect = dropValue.toLowerCase() === dragValue.toLowerCase();
+            }
         }
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
             animateDragToTarget(dragElement, dropElement, container);
             const onInCorrect = dropElement.getAttribute('onInCorrect');
             await executeActions(onInCorrect, dropElement, dragElement);
+            storingEachActivityScore(false);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
                 // storingEachActivityScore(false);
@@ -1062,9 +1024,9 @@ function handleDropElement(element) {
     updateDropBorder(element);
 }
 async function onClickDropOrDragElement(element, type) {
-    AudioPlayer.getI().stop();
-    document.getElementById(LidoContainer);
-    // if(container.getAttribute('canplay') === 'false') return;
+    const container = document.getElementById(LidoContainer);
+    if (container.getAttribute('canplay') === 'false')
+        return;
     // Remove the highlight class from elements matching the selector
     const highlightedElements = document.querySelectorAll(`[type='${type}']`);
     highlightedElements.forEach(el => {
@@ -1144,6 +1106,7 @@ async function onClickDragElement(element) {
         return;
     }
     let firstFalse = Object.values(dropElements).find(item => !item.isFull);
+    console.log('🚀 ~ onClickDragElement ~ firstFalse:', firstFalse);
     if (firstFalse) {
         const dropEl = document.querySelector(`#${firstFalse.drop}`);
         dragEl.style.transition = 'transform 0.5s ease';
@@ -1157,26 +1120,35 @@ const appendingDragElementsInDrop = () => {
     const dropItems = document.querySelectorAll("[type='drop']");
     if (!dragItems || !dropItems)
         return;
+    const container = document.getElementById(LidoContainer);
+    const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
+    const appendedDragIds = new Set();
     dropItems.forEach(dropElement => {
-        dragItems.forEach(dragElement => {
+        for (let i = 0; i < dragItems.length; i++) {
+            const dragElement = dragItems[i];
+            // Skip if already appended to another drop element
+            if (appendedDragIds.has(dragElement.id))
+                continue;
             const drag = dragElement;
             const drop = dropElement;
-            const container = document.getElementById(LidoContainer);
-            const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
+                    appendedDragIds.add(drag.id);
+                    drag.style.pointerEvents = 'none';
+                    break;
                 }
             }
             else {
                 if (drop['value'].includes(drag['value'])) {
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
+                    appendedDragIds.add(drag.id);
+                    drag.style.pointerEvents = 'none';
                 }
             }
-            drag.style.pointerEvents = 'none';
-        });
+        }
     });
 };
 const container = document.getElementById(LidoContainer);
@@ -1697,9 +1669,8 @@ function enableReorderDrag(element) {
     let startX = 0;
     let startY = 0;
     const container = document.getElementById(LidoContainer);
-    if (!container)
+    if (!container || container.getAttribute("canplay") === "false")
         return;
-    // if(!container || container.getAttribute("canplay") === "false") return;
     Array.from(element.children).forEach(child => {
         child.style.pointerEvents = 'none';
     });
@@ -1885,7 +1856,8 @@ function enableReorderDrag(element) {
     };
     const onClickElement = (element) => {
         const container = document.getElementById(LidoContainer);
-        // if(container.getAttribute('canplay') === 'false')return;
+        if (container.getAttribute('canplay') === 'false')
+            return;
         if (elementType === 'option') {
             const categoryArr = container.querySelectorAll('[type="category"]');
             let category = Array.from(categoryArr).find(el => el.parentElement.className.includes('highlight-element'));
@@ -1958,9 +1930,7 @@ function enableReorderDrag(element) {
     };
     element.style.cursor = 'move';
     element.classList.add('drag-element');
-    // element.addEventListener('pointerdown', onStart);
-    element.addEventListener('mousedown', onStart);
-    element.addEventListener('touchstart', onStart, { passive: false });
+    element.addEventListener('pointerdown', onStart);
 }
 const resetElementStyles = (el) => {
     el.style.opacity = '';
@@ -2160,7 +2130,9 @@ function slidingWithScaling(element) {
         console.error(`Parent element not found.`);
         return;
     }
-    document.getElementById(LidoContainer);
+    const container = document.getElementById(LidoContainer);
+    if (container.getAttribute('canplay') === 'false')
+        return;
     const onStart = (event) => {
         removeHighlight(element);
         isDragging = true;
@@ -2333,24 +2305,12 @@ const slideCompleted = (slideElement) => {
     const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
-        validationForSlideHandler();
+        // validationForSlideHandler();
     }
     else {
         storingEachActivityScore(isCorrect);
     }
 };
-const validationForSlideHandler = async () => {
-    var _a, _b;
-    const container = document.getElementById(LidoContainer);
-    if (!container)
-        return;
-    const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
-    const objectiveString = document.getElementById(LidoContainer)['objective'];
-    const res = matchStringPattern(objectiveString, objectiveArray);
-    if (res) {
-        await executeActions(container.getAttribute('onCorrect'), container);
-    }
-};
 
 // This file is autogenerated. It's used to publish ESM to npm.
 function _typeof$1(obj) {
@@ -3584,7 +3544,8 @@ function onTouchListenerForOnTouch(element) {
 function addClickListenerForClickType(element) {
     handlingElementFlexibleWidth(element, 'click');
     const container = document.getElementById(LidoContainer);
-    // if(container.getAttribute('canplay') === 'false')return;
+    if (container.getAttribute('canplay') === 'false')
+        return;
     element.style.cursor = 'pointer';
     if (!element) {
         console.error('No element provided.');
@@ -71538,6 +71499,8 @@ function handleFloatElementPosition(element) {
     element.style.position = 'absolute';
     if (direction === 'leftToRight') {
         const containerHeight = floatContainer.offsetHeight;
+        // Add class for bubble elements to identify them later for input matching and scoring
+        element.classList.add("bubble-element");
         element.style.left = 'unset';
         element.style.right = `${window.innerWidth + document.body.getBoundingClientRect().width}px`;
         // element.style.top = isFirstEntry ? `${entryValue}%` : `${Math.floor(Math.random() * (containerHeight - element.clientHeight))}px`;
@@ -71992,6 +71955,61 @@ function generateDoubleSquares(count = 16) {
     return pairs;
 }
 
+class Timer {
+    constructor() {
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        this.intervalId = null;
+    }
+    static getI(onTick) {
+        if (!Timer.instance) {
+            Timer.instance = new Timer();
+        }
+        if (onTick) {
+            Timer.instance.onTick = onTick;
+        }
+        return Timer.instance;
+    }
+    start() {
+        if (this.intervalId)
+            return;
+        this.startTime = Date.now() - this.elapsedTime;
+        this.intervalId = window.setInterval(() => {
+            var _a;
+            this.elapsedTime = Date.now() - this.startTime;
+            (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsedTime);
+        }, 1000);
+    }
+    pause() {
+        if (!this.intervalId)
+            return;
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+        this.elapsedTime = Date.now() - this.startTime;
+    }
+    resume() {
+        if (this.intervalId)
+            return;
+        this.start();
+    }
+    stop() {
+        var _a;
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, 0);
+    }
+    getElapsed() {
+        return this.intervalId
+            ? Date.now() - this.startTime
+            : this.elapsedTime;
+    }
+}
+let ACTIVYTY_TIME_SPEND_ARRAY = [];
+
 const gameScore = new GameScore();
 function buildDragSelectedMapFromDOM() {
     const map = {};
@@ -72161,7 +72179,8 @@ const executeActions = async (actionsString, thisElement, element) => {
                 }
                 case 'nextBtn': {
                     const container = document.getElementById(LidoContainer);
-                    // if(container.getAttribute('canplay') === 'false')return;
+                    if (container.getAttribute('canplay') === 'false')
+                        return;
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
                         AudioPlayer.getI().stop();
@@ -72620,7 +72639,9 @@ const storeActivityScore = (score) => {
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
     // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } }));
-    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves);
+    const timeSpendForActivity = Math.floor(Timer.getI().getElapsed() / 1000);
+    ACTIVYTY_TIME_SPEND_ARRAY.push(timeSpendForActivity);
+    dispatchActivityEndEvent(totalIndex, index, score, gameScore.rightMoves, gameScore.wrongMoves, timeSpendForActivity);
     localStorage.setItem(ActivityScoreKey, JSON.stringify(activityScore));
     if (totalIndex - 1 == index) {
         const scoresArray = Object.values(activityScore);
@@ -72628,7 +72649,8 @@ const storeActivityScore = (score) => {
         gameScore.finalScore = Math.floor(finalScore);
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
-        dispatchLessonEndEvent(totalIndex, gameScore.rightMoves, gameScore.wrongMoves, finalScore);
+        const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        dispatchLessonEndEvent(totalIndex, gameScore.rightMoves, gameScore.wrongMoves, finalScore, timeSpendForLesson);
         localStorage.removeItem(ActivityScoreKey);
     }
 };
@@ -73199,14 +73221,14 @@ const animateBoxCells = async (element, value) => {
         await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
         cell.classList.remove('lido-box-highlight');
     }
-    // checkout parent cell first then pick the first text child inside cell
+    // checkout parent cell first then pick the second text child inside cell
     const parentCell = document.getElementById(LidoContainer);
     if (!parentCell)
         return;
-    const firstTextChild = parentCell.querySelector('lido-text');
-    if (firstTextChild) {
+    const instructionText = parentCell.children[2];
+    if (instructionText) {
         // play the text child inside parent cell
-        await AudioPlayer.getI().play(firstTextChild);
+        await AudioPlayer.getI().play(instructionText);
     }
     // Now select each box cell's text child and play them one by one
     for (const box of boxCells) {
@@ -73247,9 +73269,9 @@ const SumTogetherAnimation = async (element, value) => {
     if (!value)
         return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
-    const TopRow = Array.from(element.children)[2];
-    const questionRow = Array.from(element.children)[3];
-    const optionRow = Array.from(element.children)[4];
+    const TopRow = Array.from(element.children)[3];
+    const questionRow = Array.from(element.children)[4];
+    const optionRow = Array.from(element.children)[5];
     if (!TopRow || !questionRow || !optionRow)
         return;
     const topRowChildren = Array.from(TopRow.children);
@@ -73356,8 +73378,19 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
         console.log("🌄 Landscape waterfall");
         const shiftX = dropWidth * 0.02; // proportional (5% of width)
         const shiftY = dropHeight * 0.02; // proportional (5% of height)
-        const startX = dropRect.left + dropWidth * 0.36; // 10% inside
-        const startY = dropRect.top + dropHeight * -0.09; // slightly above
+        let startX, startY;
+        if (dropElement.id === "unitsDrop") {
+            startX = dropRect.left + dropWidth * 0.15; // 15% from left for better centering of multiple items
+            startY = dropRect.top + dropHeight * -0.1; // slightly above
+        }
+        else if (dropElement.id === "tensDrop") {
+            startX = dropRect.left + dropWidth * 0.40; // 40% from left for better centering of multiple items
+            startY = dropRect.top + dropHeight * -0.1; // slightly above
+        }
+        else {
+            startX = dropRect.left + dropWidth * 0.10; // 10% from left for better centering of multiple items
+            startY = dropRect.top + dropHeight * -0.1; // slightly above
+        }
         targetX = startX + (dropCount * shiftX);
         targetY = startY + (dropCount * shiftY);
     }

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DeCNGGv1.js');
+var index = require('./index-BzToe3fj.js');
 require('./index-BrME-8br.js');
 
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BrME-8br.js');
-var index$1 = require('./index-DeCNGGv1.js');
+var index$1 = require('./index-BzToe3fj.js');
 
 var rive$1 = {exports: {}};
 
@@ -8580,7 +8580,7 @@ const LidoCalculator = class {
             return;
         if (this.objective && this.objective != '' && !this.objective.includes(',')) {
             console.log("hi iscorrect verified");
-            isCorrect = userInput === this.objective;
+            isCorrect = Number(userInput) === Number(this.objective);
         }
         // --- Multiple Objectives ---
         else if (this.objective && this.objective.includes(',')) {
@@ -8653,7 +8653,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (index.h(index.Host, { key: '595c92e80baed8e1709c51302aa427d672b3a9e0', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '4a2966a46fd008d66fedeb5f44e0ee2c5e8c083a', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: '35e38f7412be8489b668ba0aab927b7ba3d98f29', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '926def912022a30a27f5419d98348beb84fc1a42', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '41a69c7aa7d1dfbeea19b1a1ef095b97d2c953ba', class: "lido-calculator-displayParent" }, index.h("div", { key: '047dfc84e8b02739a982287f82b1df2b7f552dcd', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '41cd91f2c9aa40f6adcf6b0318e07e394bc3b38e', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (index.h(index.Host, { key: '29f91af1bedaa8be605cdf82fddf74b5622eff6e', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '1ac0f61986e688603db21b2eb1bb52bbcabca1ca', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: '3bdacbcb2ea2f371b11a2ed05eb271e0a75c5e09', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '5f7bb3c09bccdb21c2bda00ae99234409bad7eda', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '0891cd4b5929861d264c29684ef260f61e65004b', class: "lido-calculator-displayParent" }, index.h("div", { key: 'ac5861ca1a9ebaee9eb7d729f8d2b88933b733d5', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'f80c85a89462fd96630a4bf8a304284e4546fe72', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -8662,7 +8662,7 @@ const LidoCalculator = class {
 };
 LidoCalculator.style = lidoCalculatorCss();
 
-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 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:15}canvas{touch-action:none;display:block;z-index:10}`;
 
 const LidoCanvas = class {
     constructor(hostRef) {
@@ -8697,7 +8697,7 @@ const LidoCanvas = class {
             this.ctx.lineWidth = 10;
             this.ctx.lineCap = 'round';
             this.ctx.lineJoin = 'round';
-            this.loadBackground();
+            // this.loadBackground();
         }
     }
     componentDidLoad() {
@@ -8708,7 +8708,7 @@ const LidoCanvas = class {
         this.ctx.lineCap = 'round';
         this.ctx.lineJoin = 'round';
         this.updateStyles();
-        this.loadBackground();
+        // this.loadBackground();
         this.canvas.addEventListener('pointerdown', e => this.start(e));
         this.canvas.addEventListener('pointermove', e => this.move(e));
         window.addEventListener('pointerup', () => this.stop());
@@ -8752,10 +8752,10 @@ const LidoCanvas = class {
         this.ctx.closePath();
     }
     clearCanvas() {
-        this.loadBackground();
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (index.h(index.Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, index.h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, index.h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), index.h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (index.h(index.Host, { key: '6bf53fed345682fdfd21cc466703cce3964526a0', id: "lido-canvas", class: "lido-canvas", style: this.style }, index.h("button", { key: '75b307dab33a24f27bf10605e1b0138b5eecfa40', id: "lido-exit-button", onClick: () => this.clearCanvas() }, index.h("lido-text", { key: '2f636e7e049cb5a9e87106487b54b7b0aacb03c4', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), index.h("canvas", { key: '74bc43e76913256f1c7bc5334e5148c512741a9f', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     get el() { return index.getElement(this); }
 };
@@ -16186,8 +16186,8 @@ const LidoKeyboard = class {
         /** Number of columns in the keyboard layout (default: "10") */
         this.columns = '10';
         /**
-          * When set to true, disables the speak functionality of long press for this component and its children.
-          */
+         * When set to true, disables the speak functionality of long press for this component and its children.
+         */
         this.disableSpeak = false;
         /** Tracks the number of keys clicked by the user */
         this.numberOfClick = 0;
@@ -16199,38 +16199,53 @@ const LidoKeyboard = class {
     async inputValidation(e) {
         if (this.type !== 'click')
             return;
-        let selcetedValue = JSON.parse(localStorage.getItem(index$1.SelectedValuesKey)) || '';
-        selcetedValue = this.inputString;
-        localStorage.setItem(index$1.SelectedValuesKey, JSON.stringify(selcetedValue));
+        let isOverlapping = false;
         const container = document.getElementById(index$1.LidoContainer);
-        const value = e.target.getAttribute('value');
-        const bubbleValues = container.querySelectorAll(`[value= '${value}']`);
-        const filteredElement = Array.from(bubbleValues).find(el => !el.className.includes('key-button'));
-        this.inputString = value;
-        let isOverlapping;
-        if (filteredElement) {
+        const clickedValue = e.target.getAttribute('value');
+        if (!clickedValue)
+            return;
+        let selectedValue = JSON.parse(localStorage.getItem(index$1.SelectedValuesKey)) || '';
+        localStorage.setItem(index$1.SelectedValuesKey, JSON.stringify(selectedValue));
+        // Get all word bubbles (make sure bubbles have class "bubble-element")
+        const bubbles = Array.from(container.querySelectorAll('.bubble-element'));
+        // Find a bubble whose word starts with current progress + clicked letter
+        const matchedBubble = bubbles.find(bubble => {
+            const word = bubble.getAttribute('value'); // full word like "one"
+            const element = word === null || word === void 0 ? void 0 : word.startsWith(this.inputString.toLowerCase());
+            return element;
+        });
+        if (matchedBubble) {
             const bodyRect = document.body.getBoundingClientRect();
-            const elemRect = filteredElement.getBoundingClientRect();
+            const elemRect = matchedBubble.getBoundingClientRect();
+            // Ciheck if the matched bubble is overlapping with the target area (you can define the target area as needed, here we use the entire viewport)
             isOverlapping = elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
-        }
-        if (isOverlapping) {
-            filteredElement.style.animation = 'none';
-            this.numberOfClick++;
-            if (this.numberOfClick === this.letterLength) {
-                const onCorrrect = container.getAttribute('onCorrect');
-                container.style.pointerEvents = 'none';
-                await index$1.executeActions(onCorrrect, this.el);
-                index$1.triggerNextContainer();
-            }
-            else {
-                index$1.handleFloatElementPosition(filteredElement);
+            // If full word completed
+            if (this.inputString.toLowerCase() === matchedBubble.getAttribute('value').toLowerCase() && isOverlapping) {
                 index$1.storingEachActivityScore(true);
+                matchedBubble.style.animation = 'none';
+                matchedBubble.style.pointerEvents = 'none';
+                this.numberOfClick++;
+                setTimeout(() => { this.inputString = ''; }, 1000);
+                localStorage.removeItem(index$1.SelectedValuesKey);
+                if (this.numberOfClick === this.letterLength) {
+                    index$1.calculateScore();
+                    const onCorrrect = container.getAttribute('onCorrect');
+                    container.style.pointerEvents = 'none';
+                    await index$1.executeActions(onCorrrect, this.el);
+                    index$1.triggerNextContainer();
+                }
+                else {
+                    index$1.handleFloatElementPosition(matchedBubble);
+                }
             }
         }
         else {
+            // ❌ Incorrect click
+            index$1.storingEachActivityScore(false);
+            setTimeout(() => { this.inputString = ''; }, 1000);
+            localStorage.removeItem(index$1.SelectedValuesKey);
             const onInCorrrect = container.getAttribute('onInCorrect');
             await index$1.executeActions(onInCorrrect, this.el);
-            index$1.storingEachActivityScore(false);
         }
     }
     componentDidLoad() {
@@ -16281,10 +16296,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(index$1.LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (index.h(index.Host, { key: 'd57a587171b8525147e31228779e8503f5b7e854', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: 'bc4242fca443e2fe0821b6b5e3559bfdf231ab30', class: "input-area" }, index.h("input", { key: '046989156e5f4c61d52d187c74570a95d8ebe6ab', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), index.h("lido-text", { key: '72ab0afbebb9789c5cde9ed7624ef22bae5d2901', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (index.h(index.Host, { key: 'c628b4412414cb77bf6596b302deb91f13626f53', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '3081daf25caa5ca0390b78567e0f46c8fecd0933', class: "input-area" }, index.h("input", { key: 'a21b93f86abb42afc45811d560400deb58da09fe', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: '3486ddf43feb30d595a4e854761de41c0f963690', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), index.h("lido-text", { key: 'b6028375fb0e56b3c32821894f199e2c96726261', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: 'f9b109fe36a6e0fcef459bdaf69ccbad6f827fc9', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '1a3047db0048f49429bd344625a15d3c94b173d4', class: "keyboard-wrapper", style: {
+            } }), index.h("lido-text", { key: '3a619b53a9c0a6e511adfbdff3f2e8b89692431b', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '0a780c4a4669edb5bf7f51190ddb6345a724fd43', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '49f04eacdfbdc93ffcd3749531b90b4acd655d50', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',