lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

package/dist/esm/{utils-b5eb2360.js → utils-eefe4a1c.js}

@@ -224,6 +224,45 @@ function balanceResult(container, objectiveString) {
     return res;
 }
 
+function dragDropAnimation(container, dragElement, dropElement) {
+    container.style.pointerEvents = 'none';
+    setTimeout(() => {
+        const div = document.createElement('div');
+        container.append(div);
+        div.classList.add('after-drop-popup-container');
+        dragElement.style.scale = `1`;
+        dropElement.style.scale = `1`;
+        const allDragElements = container.querySelectorAll('[type="drag"]');
+        const dragParents = Array.from(allDragElements).map(el => el.parentElement);
+        const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
+        // Remove from old parents
+        if (allSameParent) {
+            dragElement.remove();
+            dropElement.remove();
+        }
+        else {
+            dragElement.parentElement.parentElement.remove();
+            dropElement.parentElement.parentElement.remove();
+        }
+        // Add animation and popup classes
+        dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
+        dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
+        div.appendChild(dragElement);
+        div.appendChild(dropElement);
+        dropElement.classList.remove('empty');
+        setTimeout(() => {
+            dragElement.classList.remove('zoom-fade-in');
+            dropElement.classList.remove('zoom-fade-in');
+            dragElement.classList.add('zoom-fade-out');
+            dropElement.classList.add('zoom-fade-out');
+            setTimeout(() => {
+                div.remove();
+                container.style.pointerEvents = 'auto';
+            }, 800); // match animation duration
+        }, 2000); // stay for 2 seconds
+    }, 250);
+}
+
 function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
     const dropElements = document.querySelectorAll("[type='drop']");
@@ -290,7 +329,7 @@ function enableDraggingWithScaling(element) {
             isDragging = false;
             return;
         }
-        // AudioPlayer.getI().stop();
+        AudioPlayer.getI().stop();
         removeHighlight(element);
         isDragging = true;
         isClicked = true;
@@ -394,6 +433,7 @@ function enableDraggingWithScaling(element) {
     // Start observing the element
     observer.observe(container, observerConfig);
     const onMove = (event) => {
+        console.log('moved');
         if (!isDragging)
             return;
         if (isDraggingDisabled) {
@@ -402,7 +442,7 @@ function enableDraggingWithScaling(element) {
         }
         isClicked = false;
         element.style.transition = 'none';
-        const containerScale = getElementScale$1(container);
+        const containerScale = calculateScale();
         let dx = 0;
         let dy = 0;
         if (event instanceof MouseEvent) {
@@ -454,7 +494,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';
+                }
             }
         }
     };
@@ -509,6 +551,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) {
@@ -698,7 +741,6 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     });
     handleShowCheck();
 }
-const tempVanishedValues = [];
 async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const container = document.getElementById(LidoContainer);
@@ -710,10 +752,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;
     }
@@ -725,7 +767,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
-        // let isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         let isCorrect;
         const dragValue = ((_c = dragElement.getAttribute('value')) === null || _c === void 0 ? void 0 : _c.trim()) || "";
         const dropValue = ((_d = dropElement.getAttribute('value')) === null || _d === void 0 ? void 0 : _d.trim()) || "";
@@ -742,7 +783,8 @@ async function onElementDropComplete(dragElement, dropElement) {
             }
         }
         else {
-            isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
+            //strings
+            isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
         }
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
@@ -752,6 +794,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
+                storingEachActivityScore(false);
                 // const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
                 // if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
                 //   dropHasDrag[oldDropIndex].isFull = false;
@@ -777,61 +820,18 @@ async function onElementDropComplete(dragElement, dropElement) {
         else {
             const checkdropAttr = container.getAttribute('dropAttr');
             if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
-                container.style.pointerEvents = "none";
-                setTimeout(() => {
-                    var _a, _b, _c;
-                    const div = document.createElement('div');
-                    container.append(div);
-                    div.classList.add('after-drop-popup-container');
-                    dragElement.style.scale = `1`;
-                    dropElement.style.scale = `1`;
-                    const allDragElements = container.querySelectorAll('[type="drag"]');
-                    const dragParents = Array.from(allDragElements).map(el => el.parentElement);
-                    const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
-                    JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-                    const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
-                    if (vanishedValue) {
-                        tempVanishedValues.push(vanishedValue);
-                    }
-                    // Remove from old parents
-                    if (allSameParent) {
-                        dragElement.remove();
-                        dropElement.remove();
-                    }
-                    else {
-                        dragElement.parentElement.parentElement.remove();
-                        dropElement.parentElement.parentElement.remove();
-                    }
-                    // Add animation and popup classes
-                    dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
-                    dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
-                    div.appendChild(dragElement);
-                    div.appendChild(dropElement);
-                    dropElement.classList.remove('empty');
-                    setTimeout(() => {
-                        dragElement.classList.remove('zoom-fade-in');
-                        dropElement.classList.remove('zoom-fade-in');
-                        dragElement.classList.add('zoom-fade-out');
-                        dropElement.classList.add('zoom-fade-out');
-                        setTimeout(() => {
-                            div.remove();
-                            container.style.pointerEvents = 'auto';
-                            const objective = container.getAttribute('objective');
-                            if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
-                                (async () => {
-                                    isCorrect = true;
-                                    const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
-                                    await executeActions(onCorrect, container);
-                                    window.dispatchEvent(new CustomEvent(NextContainerKey));
-                                    tempVanishedValues.length = 0;
-                                })();
-                            }
-                        }, 800); // match animation duration
-                    }, 2000); // stay for 2 seconds
-                }, 250);
+                //This function coming from animationhandler.ts
+                dragDropAnimation(container, dragElement, dropElement);
             }
         }
     }
+    else {
+        const checkdropAttr = container.getAttribute('dropAttr');
+        if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
+            //This function coming from animationhandler.ts
+            dragDropAnimation(container, dragElement, dropElement);
+        }
+    }
     if (dropElement) {
         let selectedValues = JSON.parse((_e = container.getAttribute(SelectedValuesKey)) !== null && _e !== void 0 ? _e : "[]");
         const dragValue = dragElement.getAttribute('value');
@@ -849,7 +849,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');
             }
@@ -884,8 +885,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']");
@@ -963,11 +964,12 @@ async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    storingEachActivityScore(isCorrect);
+    // storingEachActivityScore(isCorrect);
     dragElement.style.opacity = '1';
     await onActivityComplete(dragElement, dropElement);
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
     if (!element || !element.classList.contains('drop-element'))
@@ -1359,7 +1361,7 @@ function enableReorderDrag(element) {
         isClicked = false;
         event.preventDefault();
         const containerRect = container.getBoundingClientRect();
-        const containerScale = getElementScale(container);
+        const containerScale = calculateScale();
         const newLeft = (point.clientX - containerRect.left - offsetXInElement) / containerScale;
         const newTop = (point.clientY - containerRect.top - offsetYInElement) / containerScale;
         element.style.left = `${newLeft}px`;
@@ -1426,9 +1428,7 @@ function enableReorderDrag(element) {
             else {
                 if (element.parentElement['type'] !== 'category') {
                     executeActions('this.alignMatch=true', divEl, element);
-                    setTimeout(() => {
-                        divEl.replaceWith(element);
-                    }, 500);
+                    divEl.replaceWith(element);
                 }
                 else {
                     const categoryElement = element.parentElement;
@@ -1904,9 +1904,6 @@ function slidingWithScaling(element) {
     element.style.transform = 'translate(0, 0)'; // Initialize transform for consistent dragging
     element.addEventListener('mousedown', onStart);
     element.addEventListener('touchstart', onStart);
-    element.addEventListener('click', ev => {
-        onClickDropOrDragElement(element, 'drag');
-    });
 }
 const slideCompleted = (slideElement) => {
     var _a;
@@ -1922,8 +1919,13 @@ const slideCompleted = (slideElement) => {
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);
     const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
-    storingEachActivityScore(isCorrect);
-    handleShowCheck();
+    if (container.getAttribute('is-continue-on-correct') === 'true') {
+        storingEachActivityScore(true);
+        handleShowCheck();
+    }
+    else {
+        storingEachActivityScore(isCorrect);
+    }
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3208,7 +3210,10 @@ function addClickListenerForClickType(element) {
             dispatchClickEvent(element, isCorrect);
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
-                // element.style.pointerEvents = 'none';
+                if (!(element.id && element.id.startsWith('key-button'))) {
+                    element.style.pointerEvents = 'none';
+                }
+                document.body.style.pointerEvents = 'none';
                 await executeActions(onCorrect, element);
             }
             else {
@@ -3265,6 +3270,7 @@ function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
+            AudioPlayer.getI().stop();
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
                 await executeActions(onCorrect, element);
@@ -68578,6 +68584,7 @@ const initEventsForElement = async (element, type) => {
 const executeActions = async (actionsString, thisElement, element) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
+    body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -68608,7 +68615,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const container = document.getElementById(LidoContainer);
                     const containerScale = getElementScale$1(container);
                     dragElement.style.transform = 'translate(0,0)';
-                    console.log("logg alinmatch");
+                    console.log('logg alinmatch');
                     const dropRect = dropElement.getBoundingClientRect();
                     const dragRect = dragElement.getBoundingClientRect();
                     const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -68662,7 +68669,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
                     }
-                    validateObjectiveStatus();
+                    await validateObjectiveStatus();
                     break;
                 }
                 case 'prevBtn': {
@@ -68772,8 +68779,53 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
-                case 'updatedAnswer': {
-                    updatedAnswer();
+                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': {
+                    if (targetElement) {
+                        updateCalculatorAnswer(targetElement);
+                    }
                     break;
                 }
                 default: {
@@ -68783,6 +68835,7 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
+    body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -68792,6 +68845,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const isInfinite = container.getAttribute('drop-action') === DropAction.InfiniteDrop;
     if (isAppend || isInfinite) {
         setTimeout(() => {
+            var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
@@ -68825,6 +68879,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';
@@ -68837,16 +68899,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
@@ -69065,6 +69152,7 @@ const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
+const body = document.body;
 let res;
 const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -69129,6 +69217,7 @@ const validateObjectiveStatus = async () => {
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
+            triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -69151,16 +69240,16 @@ const triggerPrevcontainer = () => {
 function convertUrlToRelative(url) {
     const container = document.getElementById(LidoContainer);
     const baseUrl = container.getAttribute('baseUrl');
-    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
+    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
-    else if (baseUrl) {
-        const newUrl = !url.startsWith('/') ? url : url.substring(1);
-        return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
-    }
-    else {
-        return getAssetPath(url);
+    if (baseUrl) {
+        const newUrl = url.startsWith('/') ? url.slice(1) : url;
+        if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
+            return newUrl;
+        return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
     }
+    return getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -69632,9 +69721,6 @@ const SumTogetherAnimation = async (element, value) => {
         return;
     if (!value)
         return;
-    const container = document.getElementById(LidoContainer);
-    if (!container)
-        return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
     const TopRow = Array.from(element.children)[1];
     const questionRow = Array.from(element.children)[2];
@@ -69729,16 +69815,64 @@ const SumTogetherAnimation = async (element, value) => {
         elementAppearance(false);
     }
 };
-const updatedAnswer = () => {
+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 = (el) => {
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
-    const answerText = container.querySelector('#answer');
-    if (!answerText)
+    const calci = document.querySelector('#lidoCalculator');
+    if (!calci)
         return;
-    const equationAttr = container.getAttribute('equationCheck') || '';
-    const calculatedValue = equationCheck(equationAttr);
-    answerText.setAttribute('string', String(calculatedValue));
+    const value = calci.getAttribute('value');
+    el.setAttribute('string', value);
 };
 
-export { ActivityScoreKey as A, getDefaultExportFromCjs as B, tinyColor as C, triggerNextContainer as D, DropAction as E, validateObjectiveStatus as F, fraction as G, speakIcon as H, fingerUrl as I, LidoContainer as L, NextContainerKey as N, PrevContainerKey as P, RiveService as R, SelectedValuesKey as S, TraceMode as T, convertUrlToRelative as a, storingEachActivityScore as b, commonjsGlobal as c, executeActions as d, equationCheck as e, format as f, attachSpeakIcon as g, handlingChildElements as h, initEventsForElement as i, calculateScale as j, handleFloatElementPosition as k, handleElementClick as l, dispatchActivityChangeEvent as m, dispatchGameCompletedEvent as n, dispatchGameExitEvent as o, parseProp as p, AudioPlayer as q, generateUUIDFallback as r, setVisibilityWithDelay as s, exitUrl as t, prevUrl as u, nextUrl as v, speakUrl as w, getCancelBtnPopup as x, triggerPrevcontainer as y, setCancelBtnPopup as z };
+export { ActivityScoreKey as A, triggerPrevcontainer as B, setCancelBtnPopup as C, getDefaultExportFromCjs as D, tinyColor as E, DropAction as F, validateObjectiveStatus as G, fraction as H, speakIcon as I, fingerUrl as J, LidoContainer as L, NextContainerKey as N, PrevContainerKey as P, RiveService as R, SelectedValuesKey as S, TraceMode as T, convertUrlToRelative as a, storingEachActivityScore as b, commonjsGlobal as c, executeActions as d, equationCheck as e, format as f, attachSpeakIcon as g, handlingChildElements as h, initEventsForElement as i, calculateScale as j, handleFloatElementPosition as k, handleElementClick as l, dispatchActivityChangeEvent as m, dispatchGameCompletedEvent as n, dispatchGameExitEvent as o, parseProp as p, AudioPlayer as q, generateUUIDFallback as r, setVisibilityWithDelay as s, exitUrl as t, prevUrl as u, nextUrl as v, speakUrl as w, getCancelBtnPopup as x, matchStringPattern as y, triggerNextContainer as z };

package/dist/lido-player/index.esm.js

@@ -1 +1 @@
-export{f as format}from"./p-9fd87d44.js";import"./p-9a9d5339.js";
+export{f as format}from"./p-589fc3b8.js";import"./p-9a9d5339.js";