lido-player 0.0.2-alpha-76 → 0.0.2-alpha-77

package/dist/cjs/{index-BeLWDohk.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, {});
@@ -568,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) {
@@ -605,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');
@@ -635,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';
             }
@@ -758,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);
@@ -771,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']");
@@ -792,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();
 }
@@ -843,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);
@@ -1145,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';
@@ -1158,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);
@@ -2334,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) {
@@ -71540,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`;
@@ -71994,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 = {};
@@ -72623,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);
@@ -72631,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);
     }
 };
@@ -73359,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-BeLWDohk.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-BeLWDohk.js');
+var index$1 = require('./index-BzToe3fj.js');
 
 var rive$1 = {exports: {}};
 
@@ -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',

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

@@ -25,11 +25,12 @@
   position: relative;
    top: -43%;   
   left: 18%;   
-  z-index: 10;
+  z-index: 15;
 }
 
 canvas {
   /* flex: 1; */
   touch-action: none;
   display: block;
+  z-index: 10;
 }

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

@@ -32,7 +32,7 @@ export class LidoCanvas {
             this.ctx.lineWidth = 10;
             this.ctx.lineCap = 'round';
             this.ctx.lineJoin = 'round';
-            this.loadBackground();
+            // this.loadBackground();
         }
     }
     componentDidLoad() {
@@ -43,7 +43,7 @@ export class LidoCanvas {
         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());
@@ -87,10 +87,10 @@ export class LidoCanvas {
         this.ctx.closePath();
     }
     clearCanvas() {
-        this.loadBackground();
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, 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' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (h(Host, { key: '6bf53fed345682fdfd21cc466703cce3964526a0', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: '75b307dab33a24f27bf10605e1b0138b5eecfa40', id: "lido-exit-button", onClick: () => this.clearCanvas() }, 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' })), h("canvas", { key: '74bc43e76913256f1c7bc5334e5148c512741a9f', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     static get is() { return "lido-canvas"; }
     static get encapsulation() { return "shadow"; }