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

package/dist/cjs/{utils-079a5e7d.js → utils-ce99b0d0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index$1 = require('./index-6a69c33a.js');
+const index$1 = require('./index-baff5c15.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -116,34 +116,34 @@ function highlightSpeakingElement(element) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -215,8 +215,8 @@ function balanceResult(container, objectiveString) {
         return false;
     const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
     const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal) && leftVal !== 0;
-    const hasRight = !isNaN(rightVal) && rightVal !== 0;
+    const hasLeft = !isNaN(leftVal);
+    const hasRight = !isNaN(rightVal);
     if (!hasLeft || !hasRight) {
         return false;
     }
@@ -266,6 +266,7 @@ function enableOptionArea(element) {
 }
 let isDraggingDisabled = false;
 const setDraggingDisabled = (disabled) => {
+    console.log("Setting dragging disabled to:", disabled);
     isDraggingDisabled = disabled;
 };
 function enableDraggingWithScaling(element) {
@@ -455,7 +456,9 @@ function enableDraggingWithScaling(element) {
                 mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
             }
             else {
-                mostOverlappedElement.style.opacity = '0.3';
+                if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
+                    mostOverlappedElement.style.opacity = '0.3';
+                }
             }
         }
     };
@@ -510,6 +513,7 @@ function enableDraggingWithScaling(element) {
         // Check for overlaps and log the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         onElementDropComplete(element, mostOverlappedElement);
+        executeActions("this.updateCountBlender='true'", container);
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
                 if (element) {
@@ -711,10 +715,10 @@ async function onElementDropComplete(dragElement, dropElement) {
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
-        return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
-    if ((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) {
+    const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
+    if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
@@ -748,6 +752,9 @@ async function onElementDropComplete(dragElement, dropElement) {
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
             animateDragToTarget(dragElement, dropElement, container);
+            const onInCorrect = dropElement.getAttribute('onInCorrect');
+            console.log("onincorrectttt", onInCorrect);
+            await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
                 // const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
@@ -847,7 +854,8 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
         if (!(((_f = dropElement.getAttribute('dropAttr')) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
-            if (isisFull) {
+            const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+            if (isAllowOnlyOneDrop && isisFull) {
                 isisFull.isFull = true;
                 dropElement.setAttribute('is-full', 'true');
             }
@@ -882,8 +890,8 @@ async function onElementDropComplete(dragElement, dropElement) {
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_g = dropHasDrag[dropTabIndex]) === null || _g === void 0 ? void 0 : _g.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement$1(dragElement, 'drag');
-                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true' || '';
-                if (mostOverlappedElement && isAllowOnlyOneDrop) {
+                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+                if (isAllowOnlyOneDrop && mostOverlappedElement) {
                     dragElement.style.transform = 'translate(0,0)';
                     dragElement.style.transition = 'transform 0.5s ease';
                     const allElements = document.querySelectorAll("[type='drop']");
@@ -1016,14 +1024,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1065,7 +1073,11 @@ async function onClickDropOrDragElement(element, type) {
 }
 const dragToDropMap = new Map();
 async function onClickDragElement(element) {
-    AudioPlayer.getI().stop();
+    const audioAttr = element.getAttribute('audio');
+    const hasValidAudio = audioAttr && audioAttr.trim().length > 0;
+    if (hasValidAudio) {
+        AudioPlayer.getI().stop();
+    }
     const dropElements = buildDropHasDragFromDOM();
     const dragEl = element;
     if (!dragEl) {
@@ -1140,6 +1152,7 @@ class AudioPlayer {
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
+        this.registerGlobalStopEvents();
     }
     static getI() {
         if (!AudioPlayer.instance) {
@@ -1165,13 +1178,23 @@ class AudioPlayer {
         }
     }
     async play(targetElement) {
+        // Stop any currently playing audio first if target element has audio given
+        try {
+            await AudioPlayer.getI().stop();
+        }
+        catch (e) {
+            console.error('Error stopping audio before speak action:', e);
+        }
+        // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
+        // If no direct audio attribute, check childrens for audio
         if (!audioUrl) {
             const childElements = targetElement.children;
             for (let i = 0; i < childElements.length; i++) {
                 const childAudioUrl = childElements[i].getAttribute('audio');
                 if (childAudioUrl) {
                     audioUrl = childAudioUrl;
+                    break;
                 }
             }
         }
@@ -1181,18 +1204,21 @@ class AudioPlayer {
             console.log('🚀 Playing audio:', this.audioElement.src);
             try {
                 setDraggingDisabled(true);
-                await this.audioElement.play();
                 highlightSpeakingElement(targetElement);
+                await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
-                        stopHighlightForSpeakingElement(targetElement);
                         resolve();
-                        setDraggingDisabled(false);
                     };
                 });
             }
             catch (error) {
-                console.log('🚀 Audio play error:', error);
+                console.log('🎧 Audio play error:', error);
+            }
+            finally {
+                this.audioElement.onended = null; // cleanup
+                setDraggingDisabled(false);
+                stopHighlightForSpeakingElement(targetElement);
             }
         }
         // If no audio, use text-to-speech
@@ -1202,13 +1228,35 @@ class AudioPlayer {
                 await speakText(targetElement.textContent, targetElement);
                 const highlightedElements = document.querySelectorAll('.speaking-highlight');
                 highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
-                setDraggingDisabled(false);
             }
             catch (error) {
-                console.log('🚀 TTS Error:', error);
+                console.log('🎧 TTS Error:', error);
+            }
+            finally {
+                setDraggingDisabled(false);
             }
         }
     }
+    // GLOBAL STOP EVENTS (container change, activity change…)
+    registerGlobalStopEvents() {
+        const stopEvents = [
+            NextContainerKey, PrevContainerKey, LessonEndKey, ActivityChangeKey,
+            ActivityEndKey, GameCompletedKey, GameExitKey
+        ];
+        stopEvents.forEach(key => {
+            window.addEventListener(key, () => this.stop());
+        });
+    }
+    // DESTROY (for hot-reload)
+    destroy() {
+        console.log("AudioPlayer destroyed (hot-reload safe)");
+        this.stop();
+        // Remove DOM element
+        if (this.audioElement.parentNode) {
+            this.audioElement.parentNode.removeChild(this.audioElement);
+        }
+        AudioPlayer.instance = undefined;
+    }
 }
 
 let preOverlap;
@@ -1367,11 +1415,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -1581,11 +1629,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -3142,7 +3190,11 @@ function addClickListenerForClickType(element) {
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
         }
-        AudioPlayer.getI().stop();
+        const audioAttr = element.getAttribute('audio');
+        const hasValidAudio = audioAttr && audioAttr.trim().length > 0;
+        if (hasValidAudio) {
+            AudioPlayer.getI().stop();
+        }
         const container = document.getElementById(LidoContainer);
         const objective = container['objective'].split(',');
         const checkButton = document.querySelector('#lido-checkButton');
@@ -68055,15 +68107,15 @@ function calculateFill(input, currentFill = 0) {
 // Helper to animate and remove the active equation cell
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, allCalculateTypes) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-          ${activeCell.innerHTML = ""}
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
+        const keyframes = `
+      @keyframes widthDecrease {
+        0% { 
+          background-color: ${activeCell.style.backgroundColor};
+          height: ${activeCell.style.height};
+          margin: ${activeCell.style.margin};
+          ${activeCell.innerHTML = ""}
+        }
+        100% { background-color: transparent; height: 0px; margin: 0px; }
       }`;
         const styleSheet = document.styleSheets[0];
         styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -68596,7 +68648,15 @@ const executeActions = async (actionsString, thisElement, element) => {
                     break;
                 }
                 case 'speak': {
-                    await AudioPlayer.getI().play(targetElement);
+                    const val = (action.value || '').toString().trim().toLowerCase();
+                    if (val === 'true' || val === '1' || val === 'yes') {
+                        try {
+                            await AudioPlayer.getI().play(targetElement);
+                        }
+                        catch (err) {
+                            console.error('Error playing audio for speak action:', err);
+                        }
+                    }
                     break;
                 }
                 case 'fill-slide': {
@@ -68718,6 +68778,53 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
+                case 'disableType': {
+                    const dragEle = document.querySelector('[type="drag"]');
+                    dragEle.removeAttribute('type');
+                    dragEle.style.pointerEvents = 'none';
+                    break;
+                }
+                case 'updateCountBlender': {
+                    const allDrags = document.querySelectorAll('[type="drag"]');
+                    let units = 0;
+                    let tens = 0;
+                    let hundreds = 0;
+                    allDrags.forEach(el => {
+                        const dropTo = el.getAttribute("drop-to");
+                        if (dropTo === "unitsDrop")
+                            units++;
+                        if (dropTo === "tensDrop")
+                            tens++;
+                        if (dropTo === "hundredsDrop")
+                            hundreds++;
+                    });
+                    const unitsValue = units * 1;
+                    const tensValue = tens * 10;
+                    const hundredsValue = hundreds * 100;
+                    const totalValue = unitsValue + tensValue + hundredsValue;
+                    // ✅ Update Lido Text Boxes
+                    const unitsBox = document.getElementById("units");
+                    const tensBox = document.getElementById("tens");
+                    const hundredsBox = document.getElementById("hundreds");
+                    if (unitsBox) {
+                        unitsBox.setAttribute("string", unitsValue.toString());
+                    }
+                    if (tensBox) {
+                        tensBox.setAttribute("string", tensValue.toString());
+                    }
+                    if (hundredsBox) {
+                        hundredsBox.setAttribute("string", hundredsValue.toString());
+                    }
+                    console.log(`Units = ${units} → ${unitsValue}`);
+                    console.log(`Tens = ${tens} → ${tensValue}`);
+                    console.log(`Hundreds = ${hundreds} → ${hundredsValue}`);
+                    console.log(`✅ Total Value = ${totalValue}`);
+                    break;
+                }
+                case 'updateCalculatorAnswer': {
+                    updateCalculatorAnswer();
+                    break;
+                }
                 default: {
                     targetElement.style[action.action] = action.value;
                     break;
@@ -68734,6 +68841,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const isInfinite = container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop;
     if (isAppend || isInfinite) {
         setTimeout(() => {
+            var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
@@ -68748,11 +68856,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -68767,6 +68875,14 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                     dummyElement.style.margin = '0px';
                 });
             }
+            const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+            const rowAttr = dropElement.getAttribute('dropAttr');
+            const dropAttr = parseProp(rowAttr, orientation); // will return stackcascade or verticalstack
+            if (((_a = (dropAttr)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "stackcascade" || ((_b = (dropAttr)) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "verticalstack") {
+                dropElement.append(dragElement);
+                placeElementInDropZone(dropElement, dragElement, orientation, dropAttr);
+                return;
+            }
             dropElement.parentElement.append(element);
             dragElement.style.position = 'absolute';
             dragElement.style.zIndex = '1';
@@ -68779,16 +68895,41 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 500);
+        }, 100);
     }
 };
+// function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
+//   let clone = document.createElement('div') as HTMLElement;
+//   clone.innerHTML = originalEl.outerHTML;
+//   clone = clone.firstChild as HTMLElement;
+//   clone.setAttribute('height', originalEl.style.height);
+//   clone.setAttribute('width', originalEl.style.width);
+//   clone.setAttribute('visible', 'true');
+//   return clone;
+// }
 function cloneElementWithComputedStyles(originalEl) {
-    let clone = document.createElement('div');
-    clone.innerHTML = originalEl.outerHTML;
-    clone = clone.firstChild;
-    clone.setAttribute('height', originalEl.style.height);
-    clone.setAttribute('width', originalEl.style.width);
-    clone.setAttribute('visible', 'true');
+    const tag = originalEl.tagName.toLowerCase();
+    if (tag === "lido-text") {
+        let clone = document.createElement('div');
+        clone.innerHTML = originalEl.outerHTML;
+        clone = clone.firstChild;
+        clone.setAttribute('height', originalEl.style.height);
+        clone.setAttribute('width', originalEl.style.width);
+        clone.setAttribute('visible', 'true');
+        return clone;
+    }
+    // ✅ For ALL other types (INCLUDING lido-image & matrix) use your simple logic
+    const clone = originalEl.cloneNode(false);
+    clone.style.width = originalEl.style.width;
+    clone.style.height = originalEl.style.height;
+    clone.style.margin = originalEl.style.margin;
+    clone.style.opacity = originalEl.style.opacity;
+    clone.style.transform = originalEl.style.transform;
+    clone.setAttribute("visible", "true");
+    clone.setAttribute("data-dummy", "true");
+    if (tag === "lido-math-matrix") {
+        clone.setAttribute('clickable', "false");
+    }
     return clone;
 }
 // Function to parse actions string
@@ -68915,10 +69056,6 @@ async function onActivityComplete(dragElement, dropElement) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
         }
-        else {
-            const onInCorrect = dropElement.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, dropElement, dragElement);
-        }
     }
     let dragScore = buildDragSelectedMapFromDOM();
     const sortedValues = getSortedValuesArrayFromMap(dragScore);
@@ -68930,21 +69067,6 @@ async function onActivityComplete(dragElement, dropElement) {
         drag[index] = [];
     }
     drag[index].push(dragElement.id);
-    // localStorage.setItem(DragMapKey, JSON.stringify(drag));
-    Object.keys(dragScore).sort((a, b) => parseInt(a) - parseInt(b));
-    if (dragElement && dropElement) {
-        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
-        if (isCorrect) {
-            const onCorrect = dropElement.getAttribute('onCorrect');
-            if (onCorrect) {
-                await executeActions(onCorrect, dropElement, dragElement);
-            }
-        }
-        else {
-            const onInCorrect = dropElement.getAttribute('onInCorrect');
-            await executeActions(onInCorrect, dropElement, dragElement);
-        }
-    }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
         var _a;
@@ -69034,6 +69156,7 @@ const validateObjectiveStatus = async () => {
         return;
     const objectiveString = container['objective'];
     const additionalCheck = container.getAttribute('equationCheck');
+    container.getAttribute('isAllowOnlyCorrect') === 'true' || '';
     console.log('🚀 ~ validateObjectiveStatus ~ additionalCheck:', additionalCheck);
     let equationGiven = false;
     if (objectiveString == null || objectiveString.length === 0) {
@@ -69085,13 +69208,15 @@ const validateObjectiveStatus = async () => {
         await calculateScore();
     }
     else {
-        const onInCorrect = container.getAttribute('onInCorrect');
-        await executeActions(onInCorrect, container);
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
         }
+        else {
+            const onInCorrect = container.getAttribute('onInCorrect');
+            await executeActions(onInCorrect, container);
+        }
     }
 };
 const triggerNextContainer = () => {
@@ -69655,14 +69780,14 @@ const SumTogetherAnimation = async (element, value) => {
     const sign = ((signElement && ((signElement.getAttribute('string') || signElement.textContent) || '')).toString().trim() === '+') ? '+' : '-';
     if (sign === '-') {
         // '-' flow: reveal one by one then change bgColor of last B to red
-        for (let i = 0; i < topRowChildren.length; i++) {
+        for (let i = 0; i < Math.min(number1, topRowChildren.length); i++) {
             await new Promise(resolve => setTimeout(resolve, 75));
             showElement(topRowChildren[i]);
         }
         elementAppearance(true);
         await new Promise(r => setTimeout(r, 500));
         for (let k = 0; k < Math.min(number2, topRowChildren.length); k++) {
-            const idx = topRowChildren.length - 1 - k;
+            const idx = Math.min(number1, topRowChildren.length) - 1 - k;
             setImageBackground(topRowChildren[idx], 'red');
             await new Promise(r => setTimeout(r, 200));
         }
@@ -69687,6 +69812,67 @@ const SumTogetherAnimation = async (element, value) => {
         elementAppearance(false);
     }
 };
+function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr) {
+    const dropRect = dropElement.getBoundingClientRect();
+    const dragRect = dragElement.getBoundingClientRect();
+    const scale = typeof calculateScale === "function" ? calculateScale() : 1;
+    if (!dropElement.dataset.dropCount)
+        dropElement.dataset.dropCount = "0";
+    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    // === READ DROP ZONE SIZE ===
+    const dropWidth = dropRect.width;
+    const dropHeight = dropRect.height;
+    let targetX, targetY;
+    // ---------------- LANDSCAPE WATERFALL ----------------
+    if (orientation === "landscape" && dropAttr.toLowerCase() === "stackcascade") {
+        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
+        targetX = startX + (dropCount * shiftX);
+        targetY = startY + (dropCount * shiftY);
+    }
+    // ---------------- PORTRAIT VERTICAL ----------------
+    else {
+        console.log("📱 Portrait vertical stack");
+        let startX;
+        const stepY = dropHeight * 0.05; // 8% vertical step
+        if (dropElement.id === "unitsDrop") {
+            startX = dropRect.left + dropWidth * 0.4; // special spacing
+        }
+        else if (dropElement.id === "tensDrop") {
+            startX = dropRect.left + dropWidth * 0.25;
+        }
+        else {
+            startX = dropRect.left + dropWidth * 0.16; // normal spacing
+        }
+        const startY = dropRect.top - dropHeight * 0.25; // above start
+        targetX = startX;
+        targetY = startY + (dropCount * stepY);
+    }
+    // ------------ APPLY TRANSFORM SMOOTHLY --------------
+    const dx = (targetX - dragRect.left) / scale;
+    const dy = (targetY - dragRect.top) / scale;
+    dragElement.style.transition = "transform .2s ease-out";
+    dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    dropElement.dataset.dropCount = String(dropCount + 1);
+    // reset size
+    dragElement.style.width = "auto";
+    dragElement.style.height = "auto";
+}
+const updateCalculatorAnswer = () => {
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    const calci = document.querySelector('#lidoCalculator');
+    if (!calci)
+        return;
+    const answerText = container.querySelector('#answer');
+    const value = calci.getAttribute('value');
+    console.log("😀😀😀😀😀😀😀", value);
+    answerText.setAttribute('string', value);
+};
 
 exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/avatar/lido-avatar.js",
     "components/calculator/lido-calculator.js",
+    "components/canvas/lido-canvas.js",
     "components/cell/lido-cell.js",
     "components/column/lido-col.js",
     "components/container/lido-container.js",

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

@@ -1,4 +1,4 @@
-.lido-canvas {
-  height: 100%;
-  width: 100%;
-}
+.lido-canvas {
+  height: 100%;
+  width: 100%;
+}