lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "components/avatar/lido-avatar.js",
+    "components/calculator/lido-calculator.js",
     "components/cell/lido-cell.js",
     "components/column/lido-col.js",
     "components/container/lido-container.js",
@@ -14,6 +15,7 @@
     "components/random/lido-random.js",
     "components/root/lido-root.js",
     "components/row/lido-row.js",
+    "components/scale/lido-balance.js",
     "components/shape/lido-shape.js",
     "components/slideFill/lido-slide-fill.js",
     "components/text/lido-text.js",

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

@@ -0,0 +1,87 @@
+#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);
+}
+

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

@@ -0,0 +1,321 @@
+import { h, Host } from "@stencil/core";
+import { executeActions, equationCheck, storingEachActivityScore } from "../../utils/utils";
+import { NextContainerKey } from "../../utils/constants";
+export class LidoCalculator {
+    constructor() {
+        this.userAnswers = []; // store all calculator inputs
+        this.width = '479px';
+        this.visible = false;
+        this.height = '711px';
+        this.objective = '';
+        this.onEntry = '';
+        this.x = '0px';
+        this.y = '0px';
+        this.bgColor = '#60DADA';
+        this.penIcon = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/Pen--Streamline-Solar%201.svg";
+        this.displayValue = '';
+        this.style = {};
+    }
+    updateValueAttr() {
+        this.el.setAttribute('value', this.displayValue);
+    }
+    componentWillLoad() {
+        if (!this.objective) {
+            const container = this.el.closest('lido-container');
+            if (container) {
+                this.objective = (container.getAttribute('objective') || '').replace('=', '').trim();
+            }
+        }
+        this.updateValueAttr();
+    }
+    handleClick(value) {
+        const MAX_LENGTH = 10;
+        if (value === 'OK') {
+            this.verifyAnswer();
+        }
+        else if (value === '←') {
+            this.displayValue = this.displayValue.slice(0, -1);
+        }
+        else {
+            if (this.displayValue.length < MAX_LENGTH) {
+                this.displayValue += value;
+            }
+        }
+        this.updateValueAttr();
+    }
+    async verifyAnswer() {
+        const userInput = this.displayValue.trim();
+        if (!userInput)
+            return;
+        let isCorrect = false;
+        const container = this.el.closest('lido-container');
+        if (!container)
+            return;
+        if (this.objective && this.objective.length === 1) {
+            isCorrect = userInput === this.objective;
+        }
+        // --- Multiple Objectives ---
+        else if (this.objective && this.objective.includes(',')) {
+            const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+            const objectives = this.objective.split(',').map(obj => obj.trim());
+            const currentIndex = this.userAnswers.length;
+            // Compare current input with corresponding objective 
+            if (currentIndex < objectives.length && Number(userInput) === Number(objectives[currentIndex])) {
+                isCorrect = true;
+            }
+            else {
+                isCorrect = false;
+            }
+            //  Store behavior based on mode
+            if (isContinueOnCorrect) {
+                // PRACTICE MODE → store only correct answers 
+                if (isCorrect) {
+                    this.userAnswers.push(Number(userInput));
+                }
+            }
+            else {
+                // TEST MODE → store all user inputs 
+                this.userAnswers.push(Number(userInput));
+            }
+        }
+        else if (this.objective === '') {
+            const equationAttr = container.getAttribute('equationCheck') || '';
+            if (!equationAttr)
+                return;
+            try {
+                const calculatedValue = equationCheck(equationAttr);
+                isCorrect = Number(calculatedValue) === Number(userInput.trim());
+                console.log('Equation check:', calculatedValue, userInput, isCorrect);
+            }
+            catch (err) {
+                console.error('Error evaluating equation:', err);
+                isCorrect = false;
+            }
+        }
+        this.onOk.emit(isCorrect);
+        if (isCorrect) {
+            this.displayValue = "";
+            storingEachActivityScore(isCorrect);
+            const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
+            await executeActions(onCorrect, container);
+            if (this.objective.length === 0) {
+                window.dispatchEvent(new CustomEvent(NextContainerKey));
+            }
+        }
+        else {
+            this.displayValue = "";
+            storingEachActivityScore(isCorrect);
+            const onInCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onInCorrect')) || '';
+            await executeActions(onInCorrect, container);
+        }
+    }
+    render() {
+        const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
+        return (h(Host, { key: '61d14ce0ff858db8ff04b502c0d303f18f5552b8', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '86318d0fb2a707af14fca1b1a615536e7bcdb9a3', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'd552cf17bedcbb321af0c7fb5fc0b44c89be4561', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "96px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '46f9003a72906617169fb76b19a208e6f6cbb0bc', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'a7ffc6dbdaabfa944e115eeecf08cc53808c0234', class: "lido-calculator-displayParent" }, h("div", { key: '27926d1370cbdd4423404ad1f78b1ade381288d9', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '58288a987ea3090da498fff03220d4d4b24aa7c5', class: "lido-calculator-buttons" }, numbers.map((num, i) => (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) }))))));
+    }
+    static get is() { return "lido-calculator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lido-calculator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lido-calculator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the calculator component (default: '479px')"
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'479px'"
+            },
+            "visible": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls component visibility.\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
+                },
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the calculator component (default: '711px')"
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "'711px'"
+            },
+            "objective": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Objective or identifier for activity-based logic or validation"
+                },
+                "attribute": "objective",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "onEntry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Code or actions to execute when the component is first rendered"
+                },
+                "attribute": "on-entry",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "x": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "X-position of the calculator (can be px, %, etc.)"
+                },
+                "attribute": "x",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "y": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Y-position of the calculator (can be px, %, etc.)"
+                },
+                "attribute": "y",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "bgColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for the calculator container"
+                },
+                "attribute": "bg-color",
+                "reflect": false,
+                "defaultValue": "'#60DADA'"
+            },
+            "penIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon URL for the pen image shown on the calculator UI"
+                },
+                "attribute": "pen-icon",
+                "reflect": false,
+                "defaultValue": "\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/Pen--Streamline-Solar%201.svg\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayValue": {},
+            "style": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onOk",
+                "name": "onOk",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when user confirms or completes an action (e.g., pressing OK)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

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

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

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

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

@@ -45,6 +45,7 @@ export class LidoContainer {
         this.showPrevButton = 'false';
         this.showNextButton = 'false';
         this.delayVisible = '';
+        this.disableSpeak = false;
     }
     convertToPixels(height, parentElement = document.body) {
         if (!height)
@@ -127,7 +128,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '782cc0c88592899d58f942245db8e0561714d35c', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl }, h("slot", { key: 'e23be1cba95353ad3678c2d1d41b4d23ae76f2d9' })));
+        return (h(Host, { key: '1f61c4443b96466e2802b5550e8d999319b41ce7', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: '2df61e731d3a9de3fd9cdb23f47035ee2e35c30a' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -785,6 +786,24 @@ export class LidoContainer {
                 "attribute": "delay-visible",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "disableSpeak": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true, disables the speak functionality of long press for this component and its children."
+                },
+                "attribute": "disable-speak",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -76,7 +76,7 @@ export class LidoFlash {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'e0140af2e33c8cdc9d5c94743bcd83b98d0ce2f4', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: '11b7e0be1957e15ac5644b73b4ffbd00a27a93ff', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'acd9ae1eb8b1d6ac2658dbdcb26d9d7f6549811c', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'd62cbfdd84fcc6596aefe6d8d55f7e5ffeaaa5f2', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'df221d302a1e91eb995af2f70aa69957cb769ffe', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'd799a3525d9af4ba98d7750a3a76a313dd9cdd76', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fb7734ca5648e2cf8a91d551b383a5c2c3eae255', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '6071da403b17a079f80f0c5dd576dac7b5a2c357', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {

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

@@ -57,7 +57,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '2866d98e4a22a5825c24f23324473016c5e8c33f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: 'dd0a4405b91e1ddb95e90d6dfa1e16f8ac106c58' })));
+        return (h(Host, { key: 'b4c271689b52272251d5623e53b67ef78389c012', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '852149328b2a8e85e84fdf9e2a4a64bb2ec8ad3a' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
+import { NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
-import { clearLocalStorage, calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern } from "../../utils/utils";
+import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
 import { generateUUIDFallback } from "../../utils/utils";
 /**
@@ -26,7 +26,7 @@ export class LidoHome {
             if (index != undefined && index == this.currentContainerIndex)
                 return;
             // Clear selected values from localStorage on container transition
-            clearLocalStorage();
+            // clearmemoryStorage();
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
@@ -56,7 +56,7 @@ export class LidoHome {
             if (this.currentContainerIndex <= 0)
                 return;
             // Clear selected values from localStorage on container transition
-            clearLocalStorage();
+            // clearmemoryStorage();
             // Move to the previous container
             this.currentContainerIndex--;
             // Dispatch event to update the UI or state
@@ -98,7 +98,7 @@ export class LidoHome {
                     dispatchGameExitEvent();
                     AudioPlayer.getI().stop();
                     localStorage.removeItem(ActivityScoreKey);
-                    clearLocalStorage();
+                    // clearmemoryStorage();
                     alertElement.remove();
                     this.currentContainerIndex = 0;
                 }
@@ -137,7 +137,7 @@ export class LidoHome {
         };
         if (this.currentContainerIndex === 0) {
             localStorage.removeItem(ActivityScoreKey);
-            clearLocalStorage();
+            // clearmemoryStorage();
         }
         // Listen for 'NextContainerKey' event to transition between containers
         window.addEventListener(NextContainerKey, () => {
@@ -155,7 +155,7 @@ export class LidoHome {
         window.addEventListener('beforeunload', () => {
             AudioPlayer.getI().stop();
             localStorage.removeItem(ActivityScoreKey);
-            clearLocalStorage();
+            // clearmemoryStorage();
         });
     }
     componentDidLoad() {
@@ -298,6 +298,8 @@ export class LidoHome {
             'lido-float': h("lido-float", Object.assign({}, props), children),
             'lido-keyboard': h("lido-keyboard", Object.assign({}, props), children),
             'lido-math-matrix': h("lido-math-matrix", Object.assign({}, props), children),
+            'lido-balance': h("lido-balance", Object.assign({}, props), children),
+            'lido-calculator': h("lido-calculator", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -321,16 +323,6 @@ export class LidoHome {
         });
         this.containers = containers;
     }
-    areAllDropsFilled() {
-        const drops = Array.from(document.querySelectorAll('[type="drop"]'));
-        const drags = Array.from(document.querySelectorAll('[type="drag"]')).filter(drag => drag.getAttribute('drop-to'));
-        console.log('drops', drops);
-        console.log('drags', drags);
-        return drops.every(drop => {
-            const dropId = drop.id;
-            return drags.some(drag => drag.getAttribute('drop-to') === dropId);
-        });
-    }
     async btnpopup() {
         setCancelBtnPopup(false);
         await AudioPlayer.getI().stop();
@@ -350,18 +342,6 @@ export class LidoHome {
                 await new Promise(resolve => setTimeout(resolve, 300));
             }
         }
-        if (this.areAllDropsFilled()) {
-            const objectiveString = container['objective'];
-            const objectiveArray = JSON.parse(localStorage.getItem(SelectedValuesKey) || '[]');
-            const res = matchStringPattern(objectiveString, objectiveArray);
-            console.log('Resultt', res);
-            if (res) {
-                triggerNextContainer();
-            }
-        }
-        else {
-            console.log('Not yet filled ');
-        }
     }
     scaleNavbarContainer() {
         setTimeout(() => {

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

@@ -115,10 +115,10 @@ export class LidoKeyboard {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: 'b01d3c5bab495def25c14239a3c94e9f6af15b4f', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '1e475df899a9e8cead3d4ee313d6e0b09a1e766f', class: "input-area" }, h("input", { key: '1d27787a42dc81ba97d5045718d726683bf8f32a', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '5695c9662b22bd7c3d7c7dfc49481641e795b290', 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 (h(Host, { key: 'e4cd1fc51d8d3c87ed011120f13454bbef1883b3', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '114224c18345951e749db6f1eba242cc1179431f', class: "input-area" }, h("input", { key: '14741df7dc29f51420c1164ddebf60fd464fade4', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '3bb801fbcab03b58a628c4c365f46113e9829fdc', 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);
-            } }), h("lido-text", { key: 'd1a786e8f4015c7aeaeffe7a677f1f7e106b3691', 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 && (h("lido-text", { key: 'bdd01380b832949bf2abbe4481ac000c1f3a358f', 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" })), h("div", { key: 'd54959bfe639803c7e048d5112514a7dccbf9dc4', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '46212bcfe4e5c22744d13d8235d82bdb73bce802', 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 && (h("lido-text", { key: 'a886ac1d7ceadda37eadd4bed59bd5096d46619f', 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" })), h("div", { key: '5238d1dc1bafda2ffab63932d1f5d29ef449bf4b', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',