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

package/dist/components/{p-d0131159.js → p-511377d2.js}

@@ -1665,6 +1665,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']");
@@ -1731,7 +1770,7 @@ function enableDraggingWithScaling(element) {
             isDragging = false;
             return;
         }
-        // AudioPlayer.getI().stop();
+        AudioPlayer.getI().stop();
         removeHighlight(element);
         isDragging = true;
         isClicked = true;
@@ -1835,6 +1874,7 @@ function enableDraggingWithScaling(element) {
     // Start observing the element
     observer.observe(container, observerConfig);
     const onMove = (event) => {
+        console.log('moved');
         if (!isDragging)
             return;
         if (isDraggingDisabled) {
@@ -1843,7 +1883,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) {
@@ -1895,7 +1935,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';
+                }
             }
         }
     };
@@ -1950,6 +1992,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) {
@@ -2139,7 +2182,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);
@@ -2151,10 +2193,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;
     }
@@ -2166,7 +2208,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()) || "";
@@ -2183,7 +2224,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';
@@ -2193,6 +2235,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;
@@ -2218,61 +2261,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');
@@ -2290,7 +2290,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');
             }
@@ -2325,8 +2326,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']");
@@ -2404,11 +2405,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'))
@@ -2800,7 +2802,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`;
@@ -2867,9 +2869,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;
@@ -3345,9 +3345,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;
@@ -3363,8 +3360,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 : {};
@@ -4649,7 +4651,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 {
@@ -4706,6 +4711,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);
@@ -70019,6 +70025,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);
@@ -70049,7 +70056,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;
@@ -70103,7 +70110,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': {
@@ -70213,8 +70220,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: {
@@ -70224,6 +70276,7 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
+    body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -70233,6 +70286,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');
@@ -70266,6 +70320,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';
@@ -70278,16 +70340,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
@@ -70506,6 +70593,7 @@ const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
+const body = document.body;
 let res;
 const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -70570,6 +70658,7 @@ const validateObjectiveStatus = async () => {
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
+            triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -70592,16 +70681,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.
@@ -71073,9 +71162,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];
@@ -71170,16 +71256,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, generateUUIDFallback as B, exitUrl as C, prevUrl as D, nextUrl as E, speakUrl as F, getCancelBtnPopup as G, H, triggerPrevcontainer as I, setCancelBtnPopup as J, getDefaultExportFromCjs as K, LidoContainer as L, tinyColor as M, NextContainerKey as N, triggerNextContainer as O, PrevContainerKey as P, DropAction as Q, RiveService as R, SelectedValuesKey as S, validateObjectiveStatus as T, fraction as U, TraceMode as V, speakIcon as W, fingerUrl as X, setNonce as a, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, handlingChildElements as q, attachSpeakIcon as r, setAssetPath as s, calculateScale as t, handleFloatElementPosition as u, handleElementClick as v, dispatchActivityChangeEvent as w, dispatchGameCompletedEvent as x, dispatchGameExitEvent as y, AudioPlayer as z };
+export { ActivityScoreKey as A, generateUUIDFallback as B, exitUrl as C, prevUrl as D, nextUrl as E, speakUrl as F, getCancelBtnPopup as G, H, matchStringPattern as I, triggerNextContainer as J, triggerPrevcontainer as K, LidoContainer as L, setCancelBtnPopup as M, NextContainerKey as N, getDefaultExportFromCjs as O, PrevContainerKey as P, tinyColor as Q, RiveService as R, SelectedValuesKey as S, DropAction as T, validateObjectiveStatus as U, fraction as V, TraceMode as W, speakIcon as X, fingerUrl as Y, setNonce as a, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, handlingChildElements as q, attachSpeakIcon as r, setAssetPath as s, calculateScale as t, handleFloatElementPosition as u, handleElementClick as v, dispatchActivityChangeEvent as w, dispatchGameCompletedEvent as x, dispatchGameExitEvent as y, AudioPlayer as z };

package/dist/components/{p-a8724f06.js → p-561908ec.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-d0131159.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-511377d2.js';
 
 const lidoRowCss = ".lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}";
 const LidoRowStyle0 = lidoRowCss;
@@ -77,7 +77,7 @@ const LidoRow = /*@__PURE__*/ proxyCustomElement(class LidoRow extends H {
         };
     }
     render() {
-        return (h(Host, { key: '0c2548741cde2b82c2add3e1a60cbd68905ffede', 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: 'bc2c6f95f984e82bdb905f850d4ad23c11183697' })));
+        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', 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: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
     }
     get el() { return this; }
     static get style() { return LidoRowStyle0; }

package/dist/components/{p-1c84cf65.js → p-567983a9.js}

@@ -1,9 +1,10 @@
-import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-d0131159.js';
+import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-511377d2.js';
+import { d as defineCustomElement$1 } from './p-b3e67e7f.js';
 
-const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-pad{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-44%;left:16%;z-index:10}#lido-img1{height:50px;width:60px}canvas{touch-action:none;display:block}";
+const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-canvas{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}#lido-exit-button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-43%;left:18%;z-index:10}canvas{touch-action:none;display:block}";
 const LidoCanvasStyle0 = lidoCanvasCss;
 
-const WritingPad = /*@__PURE__*/ proxyCustomElement(class WritingPad extends H {
+const LidoCanvas = /*@__PURE__*/ proxyCustomElement(class LidoCanvas extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -92,7 +93,7 @@ const WritingPad = /*@__PURE__*/ proxyCustomElement(class WritingPad extends H {
         this.loadBackground();
     }
     render() {
-        return (h(Host, { key: '546c916c460a7581d5ecb9c1c5c07d7630cb64c1', id: "lido-canvas", class: "lido-pad", style: this.style }, h("button", { key: 'f0693ce43a33908dcdd833b48b7a849b73b37cc2', onClick: () => this.clearCanvas() }, h("img", { key: 'e3c029b206565ced465a5f1e352b98a11d54d71f', id: "lido-img1", src: "https://cdn-icons-png.flaticon.com/256/458/458595.png", alt: "Clear" })), h("canvas", { key: '1c07d610b7840cdc3f4359539a6d721f50130462', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     get el() { return this; }
     static get style() { return LidoCanvasStyle0; }
@@ -109,15 +110,20 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["lido-canvas"];
+    const components = ["lido-canvas", "lido-text"];
     components.forEach(tagName => { switch (tagName) {
         case "lido-canvas":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, WritingPad);
+                customElements.define(tagName, LidoCanvas);
+            }
+            break;
+        case "lido-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
             }
             break;
     } });
 }
 defineCustomElement();
 
-export { WritingPad as W, defineCustomElement as d };
+export { LidoCanvas as L, defineCustomElement as d };