lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

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

@@ -4,6 +4,7 @@ import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameEx
 import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
 import { generateUUIDFallback } from "../../utils/utils";
+import i18next from "../../utils/i18n";
 /**
  * @component LidoHome
  *
@@ -67,6 +68,8 @@ export class LidoHome {
         };
         // update arrow visibility
         this.updateArrowVisibility = () => {
+            if (!this.showNav)
+                return;
             setTimeout(() => {
                 const containerElement = this.el.querySelector('lido-container');
                 if (!containerElement)
@@ -107,6 +110,9 @@ export class LidoHome {
                 }
             }
         };
+        this.showNav = true;
+        this.activeContainerIndexes = [];
+        this.locale = '';
         this.xmlData = '';
         this.initialIndex = 0;
         this.canplay = true;
@@ -124,6 +130,17 @@ export class LidoHome {
         this.containers = [];
         this.showDotsandbtn = false;
     }
+    onLangChange(newLang) {
+        this.setLanguage(newLang);
+        // re-render all containers with updated locale
+        this.containers = [...this.containers];
+    }
+    setLanguage(lang) {
+        const effectiveLang = lang || i18next.language; // fallback to current
+        i18next.changeLanguage(effectiveLang);
+        // Trigger re-render of containers to update <lido-text> dynamically
+        this.containers = [...this.containers];
+    }
     /**
      * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
      * between containers and parses the XML data into containers.
@@ -279,6 +296,9 @@ export class LidoHome {
             return null;
         })
             .filter(Boolean);
+        if (tagName === 'lido-text' && props.string) {
+            props.string = i18next.t(props.string);
+        }
         // Map XML tags to Stencil components
         const componentMapping = {
             'lido-container': (h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl, height: this.height }), children)),
@@ -300,6 +320,7 @@ export class LidoHome {
             '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),
+            'lido-canvas': h("lido-canvas", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -317,11 +338,15 @@ export class LidoHome {
      */
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
-        const containers = Array.from(containerElements).map(container => {
+        const containers = Array.from(containerElements).map((container, index) => {
+            console.log("nammadhaaaaaaa", this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index));
+            if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
+                return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
-        });
+        }).filter(Boolean); // Remove any undefined entries
         this.containers = containers;
+        console.log("container :::", containers);
     }
     async btnpopup() {
         setCancelBtnPopup(false);
@@ -377,17 +402,17 @@ export class LidoHome {
      */
     renderDots() {
         const style = { pointerEvents: this.canplay ? 'none' : '' };
-        return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
+        return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\r\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -409,7 +434,7 @@ export class LidoHome {
         const style = {
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Quer sair?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Sair", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continuar a jogar", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
+        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Exit", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continue playing", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
     }
     static get is() { return "lido-home"; }
     static get originalStyleUrls() {
@@ -424,6 +449,58 @@ export class LidoHome {
     }
     static get properties() {
         return {
+            "showNav": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Boolean to show or hide navigation buttons"
+                },
+                "attribute": "show-nav",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "activeContainerIndexes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of active container indexes to be rendered"
+                },
+                "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Language to apply to all texts"
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "xmlData": {
                 "type": "string",
                 "mutable": false,
@@ -526,7 +603,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "attribute": "exit-button-url",
                 "reflect": false
@@ -543,7 +620,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "attribute": "prev-button-url",
                 "reflect": false
@@ -560,7 +637,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "attribute": "next-button-url",
                 "reflect": false
@@ -577,7 +654,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "attribute": "speaker-button-url",
                 "reflect": false
@@ -611,7 +688,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Unique identifier for the component instance.\nIf not provided, a UUID is generated to ensure uniqueness."
+                    "text": "Unique identifier for the component instance.\r\nIf not provided, a UUID is generated to ensure uniqueness."
                 },
                 "attribute": "uuid",
                 "reflect": false,
@@ -631,6 +708,9 @@ export class LidoHome {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "onLangChange"
+            }, {
                 "propName": "xmlData",
                 "methodName": "onXmlDataChange"
             }];

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

@@ -1,17 +1,17 @@
-.lido-image {
-  user-select: none;
-  -webkit-user-drag: none;
-  object-fit: contain;
-  width: 100% !important;
-  height: 100% !important;
-  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
-  /* The image will scale to fit within its container, keeping the aspect ratio */
-  transform: rotate(0) !important;
-  margin: 0 !important;
-}
-
-.slice {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-}
+.lido-image {
+  user-select: none;
+  -webkit-user-drag: none;
+  object-fit: contain;
+  width: 100% !important;
+  height: 100% !important;
+  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
+  /* The image will scale to fit within its container, keeping the aspect ratio */
+  transform: rotate(0) !important;
+  margin: 0 !important;
+}
+
+.slice {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}

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

@@ -490,7 +490,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the width for border-image slice (e.g., \"30px\", \"2em\").\nOnly used when `isSlice` is enabled."
+                    "text": "Specifies the width for border-image slice (e.g., \"30px\", \"2em\").\r\nOnly used when `isSlice` is enabled."
                 },
                 "attribute": "slice-width",
                 "reflect": false,
@@ -544,7 +544,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "attribute": "margin",
                 "reflect": false,
@@ -562,7 +562,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "attribute": "padding",
                 "reflect": false,
@@ -580,7 +580,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply visual effects (e.g., blur, brightness) to the image.\nExample: 'blur(5px)', 'brightness(0.8)', 'grayscale(100%)'"
+                    "text": "CSS filter to apply visual effects (e.g., blur, brightness) to the image.\r\nExample: 'blur(5px)', 'brightness(0.8)', 'grayscale(100%)'"
                 },
                 "attribute": "filter",
                 "reflect": false,
@@ -598,7 +598,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
                 },
                 "attribute": "border-radius",
                 "reflect": false,
@@ -616,7 +616,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS transform property to apply transformations like rotate, scale, translate, etc.\nExample: 'rotate(45deg)' or 'scale(1.2)'."
+                    "text": "CSS transform property to apply transformations like rotate, scale, translate, etc.\r\nExample: 'rotate(45deg)' or 'scale(1.2)'."
                 },
                 "attribute": "transform",
                 "reflect": false,

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

@@ -1,38 +1,38 @@
-.lido-keyboard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-}
-
-.input-area {
-  display: flex;
-  gap: 15px;
-}
-
-input[type="text"] {
-  font-size: 30px;
-  font-weight: 600;
-  padding-left: 20px;
-  width: 300px;
-  height: 70px;
-  border: 2px solid;
-  background: whitesmoke;
-  border-radius: 20px;
-  text-align: center;
-}
-
-.keyboard-wrapper {
-  justify-content: center;
-  width: 700px;
-}
-
-.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.key-button {
-  background: aquamarine;
-  font-weight: 600;
-}
+.lido-keyboard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.input-area {
+  display: flex;
+  gap: 15px;
+}
+
+input[type="text"] {
+  font-size: 30px;
+  font-weight: 600;
+  padding-left: 20px;
+  width: 300px;
+  height: 70px;
+  border: 2px solid;
+  background: whitesmoke;
+  border-radius: 20px;
+  text-align: center;
+}
+
+.keyboard-wrapper {
+  justify-content: center;
+  width: 700px;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.key-button {
+  background: aquamarine;
+  font-weight: 600;
+}

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: '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: () => {
+        return (h(Host, { key: '030937c20c1e5652a528e9f5e3335faafe18fff1', 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: '4c928db14ba00f8aa20dcdb9e220f0486949e861', class: "input-area" }, h("input", { key: 'f8db5e6f76aba08fb5893fd3fff7e6739dd5f854', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '58156eabbdd1fe9d06fa0ff3e192ab0f434fcd9e', 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: '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: {
+            } }), h("lido-text", { key: '79538fe14d2645dc7ae62f4e24da2300a680b1cc', 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: '0d09084f44fe8a69e19006daccd1029e291b43e5', 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: '9b2686af38ffed8e792f93f8302f01d59dbd2748', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -456,7 +456,7 @@ export class LidoKeyboard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether the keyboard input is enabled.\nWhen set to `true`, the component will respond to keyboard events."
+                    "text": "Indicates whether the keyboard input is enabled.\r\nWhen set to `true`, the component will respond to keyboard events."
                 },
                 "attribute": "keyboard-input",
                 "reflect": false,

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

@@ -1,56 +1,56 @@
-.math-matrix {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.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 {
-  /* background-color: rgba(0, 0, 0, 0.116); */
-  opacity: 0.7;
-}
-
-.slot-parent {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.slot-active {
-  background-color: var(--active-bg-color);
-  background-image: var(--bg-image);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.slot-inactive {
-  background-color: var(--deactive-bg-color);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.topIndex, .leftIndex, .bottomIndex {
-  height: 100%;
-  width: 100%;
-  text-align: center;
-  align-content: center;
-  font-size: 30px;
-  font-weight: 600;
-  font-family: 'Baloo Bhai 2';
-}
+.math-matrix {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.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 {
+  /* background-color: rgba(0, 0, 0, 0.116); */
+  opacity: 0.7;
+}
+
+.slot-parent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.slot-active {
+  background-color: var(--active-bg-color);
+  background-image: var(--bg-image);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.slot-inactive {
+  background-color: var(--deactive-bg-color);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.topIndex, .leftIndex, .bottomIndex {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  align-content: center;
+  font-size: 30px;
+  font-weight: 600;
+  font-family: 'Baloo Bhai 2';
+}