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

package/dist/collection/components/mathMatrix/lido-math-matrix.css

@@ -8,6 +8,12 @@
 .slot {
   width: 100%;
   height: 100%;
+  text-align: center;
+  align-content: center;
+  font-size: 42px;
+  font-weight: 800;
+  font-family: 'Baloo Bhai 2';
+  box-sizing: content-box;
 }
 
 .slot:hover {
@@ -27,13 +33,13 @@
 .slot-active {
   background-color: var(--active-bg-color);
   background-image: var(--bg-image);
-  background-size: cover;
+  background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 }
 
 .slot-inactive {
-  background-color: var(--inactive-bg-color);
+  background-color: var(--deactive-bg-color);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -45,4 +51,6 @@
   text-align: center;
   align-content: center;
   font-size: 30px;
+  font-weight: 600;
+  font-family: 'Baloo Bhai 2';
 }

package/dist/collection/components/mathMatrix/lido-math-matrix.js

@@ -1,9 +1,9 @@
 import { Host, h } from "@stencil/core";
-import { convertUrlToRelative, parseProp } from "../../utils/utils";
+import { convertUrlToRelative, initEventsForElement, parseProp, validateObjectiveStatus } from "../../utils/utils";
 export class LidoMathMatrix {
     constructor() {
-        this.rows = 7;
-        this.cols = 5;
+        this.rows = "7";
+        this.cols = "5";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -11,8 +11,8 @@ export class LidoMathMatrix {
         this.clickable = true;
         this.activeOnlyVisible = false;
         this.matrixImage = undefined;
-        this.activeBgColor = 'red';
-        this.inactiveBgColor = 'transparent';
+        this.activeBgColor = 'transparent';
+        this.deactiveBgColor = 'transparent';
         this.border = '2px solid green';
         this.height = '100%';
         this.width = '100%';
@@ -21,16 +21,30 @@ export class LidoMathMatrix {
         this.margin = undefined;
         this.padding = undefined;
         this.visible = 'false';
+        this.text = undefined;
+        this.type = undefined;
+        this.value = undefined;
+        this.tabIndex = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.fontColor = undefined;
+        this.previousFilledSlot = -1;
+        this.previousFilledSlotElement = null;
         this.style = {};
     }
+    updateValue(index) {
+        this.el.setAttribute('value', index);
+    }
     componentDidLoad() {
         const slotElements = this.el.querySelectorAll('.slot');
+        initEventsForElement(this.el, this.type);
         slotElements.forEach((el, i) => {
             const slot = el;
             slot.style.setProperty('--active-bg-color', this.activeBgColor);
-            slot.style.setProperty('--inactive-bg-color', this.inactiveBgColor);
+            slot.style.setProperty('--deactive-bg-color', this.deactiveBgColor);
             this.clickable ? (slot.style.pointerEvents = '') : (slot.style.pointerEvents = 'none');
             slot.style.border = this.border;
+            slot.style.color = this.fontColor;
             if (slot.className.includes('slot-active')) {
                 slot.style.visibility = 'visible';
                 if (this.matrixImage) {
@@ -71,6 +85,10 @@ export class LidoMathMatrix {
                 const item = el;
                 item.style.width = `${slotMaxValues}px`;
                 item.style.height = `${slotMaxValues}px`;
+                if (this.type === 'drop' || this.type === 'drag' || this.type === 'checkerBlock') {
+                    this.el.style.width = 'auto';
+                    this.el.style.height = 'auto';
+                }
                 if ((!this.topIndex && item.classList.contains('topIndex')) ||
                     (!this.leftIndex && item.classList.contains('leftIndex')) ||
                     (!this.bottomIndex && item.classList.contains('bottomIndex'))) {
@@ -89,11 +107,16 @@ export class LidoMathMatrix {
             zIndex: this.z,
             display: parseProp(`${this.visible}`, orientation) === 'true' ? 'flex' : 'none',
             borderRadius: parseProp(this.borderRadius, orientation),
+            left: parseProp(this.x, orientation),
+            top: parseProp(this.y, orientation),
+            cols: parseProp(`${this.cols}`, orientation),
+            rows: parseProp(`${this.rows}`, orientation),
         };
+        // console.log("cols and rows : ", );
     }
     handleClickSlot(element) {
         const index = parseInt(element.className.split(' ')[1].split('-')[1]);
-        const slotElements = document.querySelectorAll('.slot');
+        const slotElements = this.el.querySelectorAll('.slot');
         slotElements.forEach((el, i) => {
             const slotEl = el;
             if (i < index) {
@@ -108,10 +131,72 @@ export class LidoMathMatrix {
                 slotEl.classList.add('slot-inactive');
             }
         });
+        if (this.previousFilledSlot !== -1) {
+            // Clear the text from the previously filled slot
+            if (this.previousFilledSlotElement !== null) {
+                this.previousFilledSlotElement.textContent = '';
+            }
+        }
+        // Display the slot value/text on the clicked slot itself
+        element.textContent = index.toString();
+        // Track this slot as the previously filled slot for next click
+        this.previousFilledSlot = index;
+        this.previousFilledSlotElement = element;
+        // If the slot is the bottom-most slot for this matrix, dispatch a generic event
+        // so templates or global handlers can handle bottom-slot behaviour (e.g., MultiplyBeadsAnimation).
+        if (index === slotElements.length) {
+            try {
+                const event = new CustomEvent('math-matrix-bottom-click', {
+                    detail: {
+                        matrix: this.el,
+                        cols: this.style.cols,
+                        rows: this.style.rows,
+                    },
+                    bubbles: true,
+                    composed: true,
+                });
+                // dispatch from the host so listeners on container or document receive it
+                this.el.dispatchEvent(event);
+            }
+            catch (err) {
+                console.warn('Error dispatching math-matrix-bottom-click from handleClickSlot', err);
+            }
+        }
+        this.updateValue(index.toString());
+        // trigger the next container if right slot was clicked
+        validateObjectiveStatus();
+    }
+    getSlotData() {
+        const data = {};
+        if (!this.text)
+            return data;
+        this.text.split(',').forEach((item, index) => {
+            const [rawText, rawColor] = item.split('-');
+            const num = parseInt(rawText.trim());
+            if (!isNaN(num)) {
+                data[index] = { text: rawText.trim(), color: rawColor === null || rawColor === void 0 ? void 0 : rawColor.trim() };
+            }
+        });
+        return data;
     }
     render() {
         let slotNumber = 1;
-        return (h(Host, { key: 'bfde8ad01e4b47a0b13dc0fd325d78e5014cfef9', class: "math-matrix", style: { height: this.style.height, width: this.style.width, z: this.style.z, display: this.style.display } }, Array.from({ length: this.rows + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: this.cols }, (_, colIndex) => rowIndex === 0 ? (h("div", { class: "leftIndex" }, ++colIndex)) : (h("div", { class: `slot slot-${slotNumber++} ${this.defualtFill + 1 >= slotNumber ? 'slot-active' : 'slot-inactive'}`, onClick: () => this.handleClickSlot(event.target), key: `slot-${rowIndex}-${colIndex}`, style: { borderRadius: this.style.borderRadius } }))), h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "bottomIndex" }, this.cols * rowIndex))))));
+        const slotData = this.getSlotData();
+        return (h(Host, { key: '66d627c33553f3f6473c6d1b465c9af7cc6741d3', class: "math-matrix", style: {
+                height: this.style.height,
+                width: this.style.width,
+                z: this.style.z,
+                display: this.style.display,
+                top: this.style.top,
+                left: this.style.left,
+            }, type: this.type, value: this.value, "tab-index": this.tabIndex, rows: this.style.rows, cols: this.style.cols, text: this.text }, Array.from({ length: parseInt(this.style.rows) + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: parseInt(this.style.cols) }, (_, colIndex) => {
+            var _a, _b;
+            return rowIndex === 0 ? (h("div", { class: "leftIndex" }, ++colIndex)) : (h("div", { class: `slot slot-${slotNumber} ${this.defualtFill >= slotNumber ? 'slot-active' : 'slot-inactive'}`, onClick: (ev) => this.handleClickSlot(ev.currentTarget), key: `slot-${rowIndex}-${colIndex}`, style: {
+                    borderRadius: this.style.borderRadius,
+                    backgroundColor: ((_a = slotData[slotNumber - 1]) === null || _a === void 0 ? void 0 : _a.color) || '',
+                } }, (_b = slotData[slotNumber - 1]) === null || _b === void 0 ? void 0 :
+                _b.text, slotNumber++ && null));
+        }), h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "bottomIndex" }, parseInt(this.style.cols) * rowIndex))))));
     }
     static get is() { return "lido-math-matrix"; }
     static get originalStyleUrls() {
@@ -127,11 +212,11 @@ export class LidoMathMatrix {
     static get properties() {
         return {
             "rows": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -142,14 +227,14 @@ export class LidoMathMatrix {
                 },
                 "attribute": "rows",
                 "reflect": false,
-                "defaultValue": "7"
+                "defaultValue": "\"7\""
             },
             "cols": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -160,7 +245,7 @@ export class LidoMathMatrix {
                 },
                 "attribute": "cols",
                 "reflect": false,
-                "defaultValue": "5"
+                "defaultValue": "\"5\""
             },
             "defualtFill": {
                 "type": "number",
@@ -303,9 +388,9 @@ export class LidoMathMatrix {
                 },
                 "attribute": "active-bg-color",
                 "reflect": false,
-                "defaultValue": "'red'"
+                "defaultValue": "'transparent'"
             },
-            "inactiveBgColor": {
+            "deactiveBgColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -319,7 +404,7 @@ export class LidoMathMatrix {
                     "tags": [],
                     "text": "Background color for inactive slots"
                 },
-                "attribute": "inactive-bg-color",
+                "attribute": "deactive-bg-color",
                 "reflect": false,
                 "defaultValue": "'transparent'"
             },
@@ -458,16 +543,137 @@ export class LidoMathMatrix {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls visibility of the matrix (string \"true\" or \"false\")"
+                    "text": "Controls the visibility of the matrix (accepts \"true\" or \"false\" as string)"
                 },
                 "attribute": "visible",
                 "reflect": false,
                 "defaultValue": "'false'"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The display text or label associated with this matrix element"
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the matrix type (e.g., \"drop\", \"slot\", \"answer\")"
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value or data associated with this matrix element"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "tabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the tab index for keyboard navigation"
+                },
+                "attribute": "tab-index",
+                "reflect": false
+            },
+            "x": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The left coordinate (in pixels or percentage) for matrix positioning"
+                },
+                "attribute": "x",
+                "reflect": false
+            },
+            "y": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top coordinate (in pixels or percentage) for matrix positioning"
+                },
+                "attribute": "y",
+                "reflect": false
+            },
+            "fontColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font color for the slot text"
+                },
+                "attribute": "font-color",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
+            "previousFilledSlot": {},
+            "previousFilledSlotElement": {},
             "style": {}
         };
     }

package/dist/collection/components/position/lido-pos.js

@@ -66,7 +66,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: '3c032fcd1655362851d75d7ed55b26a9d12b7e6f', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '99bb4083a93a247133cc6df2d439c437e3d5cb1b' })));
+        return (h(Host, { key: '20b34af6af7a1f061789d00ade88dc79eec595ef', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'dae7759306330a01ecfb66be08debe8ec1f97d6e' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a5f930317fec6552ac0c9daf09da0348a49dcbf0', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '1451bbc2df4f459d4af93bf6b0a6dfc52dc2113e' })));
+        return (h(Host, { key: '328c7a0533a52a1be5cee0d71fc7a43338e5290f', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'c1a93405cbbd2a06a92134c4ff5853204215c317' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: '03f15dcfc2abc394d0313d4b40dd6465a19dc34a', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'fbb5e6ce6b8436d718c043561e0d92908baaabdc' })));
+        return (h(Host, { key: '4c1f45afe8866df81a6a798afe348e03fa1f4292', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: '194de56621025a4b1a4fdb6ccae347f34dc19fdb' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/scale/lido-balance.css

@@ -0,0 +1,114 @@
+#lido-balance {
+  position: relative;
+  height: 500px;
+  width: 1205px;
+  top: 20%;
+  left: -91px;
+  z-index: 0;
+}
+
+.lido-balance-symbol {
+  position: absolute;
+  top: 64%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 5vw;     
+  font-weight: bold;
+  color: black;
+  pointer-events: none;
+  z-index: 999;
+}
+
+@media (orientation: portrait) {
+  #pivotimg {
+  position: absolute;
+  height:auto;
+  width: 23%;
+  bottom: 18%;     
+  left: 38%;
+  z-index: 100;
+    
+  }
+}
+
+
+@media (orientation: landscape) {
+  #pivotimg {
+    position: absolute;
+    height:auto;
+    width: 23%;
+    bottom: 8%;     
+  left: 38%;
+  z-index: 100;
+  }
+}
+
+.lido-balance .pivot svg {
+  width: 100%;
+  height: auto;
+}
+
+
+#scaleimg {
+  position: absolute;
+  width: 73%;
+  height: auto;
+  top: 61%;
+  left: 14%;
+  z-index: 90;
+}
+.lido-balance .scale svg {
+  width: 100%;
+  height: auto;
+}
+
+@media (orientation: landscape) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:49%;
+  left: 2%;
+}}
+@media (orientation:portrait ) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:53%;
+  left: 2%;
+}}
+.lido-balance .handler svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+@media (orientation: landscape) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 49%;
+  right: 2%;
+}}
+@media (orientation:portrait) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 53%;
+  right: 2%;
+}}
+.lido-balance .hand svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+.pivot svg path:nth-of-type(1) {
+  fill: brown;
+}
+.pivot svg path[d^="M78.9414"] {
+  fill: white;
+}