lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17-dev

package/dist/cjs/{decode-C08Ujimj.js → decode-DUZYNXIv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BkBqiwe8.js');
+var index = require('./index-BEjUmVtH.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-BkBqiwe8.js → index-BEjUmVtH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-Dy19zuTX.js');
+var index$1 = require('./index-DnqQXD5x.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -321,7 +321,7 @@ function dragDropAnimation(container, dragElement, dropElement) {
         dropElement.classList.remove('zoom-fade-in');
         dragElement.classList.add('zoom-fade-out');
         dropElement.classList.add('zoom-fade-out');
-        setTimeout(() => {
+        const cleanup = () => {
             div.remove();
             container.style.pointerEvents = 'auto';
             if (isObjectiveComplete) {
@@ -329,10 +329,18 @@ function dragDropAnimation(container, dragElement, dropElement) {
                 triggerNextContainer();
                 container.removeAttribute(AnimationVanishedValuesKey);
             }
-        }, 800); // match animation duration
+        };
+        const templateId = (container.getAttribute('template-id') || '').toLowerCase();
+        if (templateId === 'letterpairing' || templateId === 'numberpair') {
+            cleanup();
+        }
+        else {
+            setTimeout(cleanup, 800); // match animation duration
+        }
     }, 250);
 }
 
+const isBlenderTemplate = (container) => (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'blender';
 function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
     const dropElements = document.querySelectorAll("[type='drop']");
@@ -390,7 +398,6 @@ function enableDraggingWithScaling(element) {
     let mutationFlag = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
-    const templateId = container.getAttribute("template-id");
     if (!container) {
         console.error(`Container with ID "container" not found.`);
         return;
@@ -551,7 +558,7 @@ function enableDraggingWithScaling(element) {
         allElements.forEach(otherElement => {
             var _a;
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
-                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && container.getAttribute("template-id") !== "blender") {
+                if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) && !isBlenderTemplate(container)) {
                     if (otherElement) {
                         setOpacityIfChanged(otherElement, "0.3");
                     }
@@ -639,7 +646,7 @@ function enableDraggingWithScaling(element) {
         else {
             onElementDropComplete(element, mostOverlappedElement);
         }
-        if (templateId === "blender" && element && mostOverlappedElement) {
+        if (isBlenderTemplate(container) && element && mostOverlappedElement) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);
@@ -867,7 +874,7 @@ async function handleResetDragElement(dragElement, dropElement, dropHasDrag, sel
     highlightElement();
 }
 async function onElementDropComplete(dragElement, dropElement) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const container = document.getElementById(LidoContainer);
     const selectedValueData = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : "[]";
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
@@ -1089,28 +1096,48 @@ 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);
-    if (container.getAttribute("template-id") !== "blender") {
+    if (!isBlenderTemplate(container)) {
         storingEachActivityScore(isCorrect);
     }
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_j = dropElement.getAttribute('required-drops')) !== null && _j !== void 0 ? _j : 0);
+        const placedDrops = document.querySelectorAll(`[${DropToAttr}="${dropElement.id}"]`).length;
+        const action = placedDrops > 0 && placedDrops <= requiredDrops
+            ? dropElement.getAttribute('onCorrect')
+            : dropElement.getAttribute('onInCorrect');
+        if (action) {
+            await executeActions(action, dropElement, dragElement);
+        }
+    }
     highlightElement();
     await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
+    var _a;
     if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const showBorder = container.getAttribute('show-drop-border');
-    if (showBorder !== 'true') {
+    if (showBorder !== 'true' && !isBlenderTemplate(container)) {
         return;
     }
     const dropId = element.id;
     const dragSelectedElements = document.querySelectorAll(`[${DropToAttr}="${dropId}"]`);
-    if (dragSelectedElements.length > 0 && container.getAttribute("template-id") !== "blender") {
+    if (isBlenderTemplate(container)) {
+        const requiredDrops = Number((_a = element.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+        const placedDrops = dragSelectedElements.length;
+        const showCorrectBorder = placedDrops > 0 && placedDrops <= requiredDrops;
+        element.classList.toggle('empty', !showCorrectBorder);
+        element.classList.remove('filled');
+        element.style.setProperty('border', showCorrectBorder ? '5px dashed green' : '5px dashed #f34d08', 'important');
+        return;
+    }
+    if (dragSelectedElements.length > 0 && !isBlenderTemplate(container)) {
         element.classList.add('filled');
         element.classList.remove('empty');
         element.classList.remove('highlight-element');
@@ -1197,7 +1224,7 @@ async function onClickDropOrDragElement(element, type) {
         // Move the drag element to the drop position
         selectedDragElement.style.transform = `translate(${translateX}px, ${translateY}px)`;
         // Remove highlights after moving the element
-        if (container.getAttribute("template-id") !== "blender") {
+        if (!isBlenderTemplate(container)) {
             const allElements = document.querySelectorAll(`*`);
             allElements.forEach(el => {
                 removeHighlight(el);
@@ -1439,9 +1466,18 @@ function highlightElement() {
 }
 
 class AudioPlayer {
+    resolvePlaybackWait() {
+        if (!this.endPromiseResolve) {
+            return;
+        }
+        const resolve = this.endPromiseResolve;
+        this.endPromiseResolve = null;
+        resolve();
+    }
     constructor() {
         this.currentTargetElement = null;
         this.pendingReplayElement = null;
+        this.playbackHasStarted = false;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
@@ -1499,15 +1535,12 @@ class AudioPlayer {
             window.speechSynthesis.cancel();
         }
         // Resolve any pending "ended" wait so callers can continue.
-        if (this.endPromiseResolve) {
-            const resolve = this.endPromiseResolve;
-            this.endPromiseResolve = null;
-            resolve();
-        }
+        this.resolvePlaybackWait();
         if (!preserveReplay) {
             this.pendingReplayElement = null;
         }
         this.currentTargetElement = null;
+        this.playbackHasStarted = false;
         this.audioElement.pause();
         this.audioElement.currentTime = 0;
         this.audioElement.src = '';
@@ -1545,6 +1578,7 @@ class AudioPlayer {
     }
     async play(targetElement) {
         this.registerVisibilityEvents();
+        this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
             this.pendingReplayElement = targetElement;
             await this.stop(true);
@@ -1598,6 +1632,24 @@ class AudioPlayer {
         if (audioUrl) {
             audioUrl = convertUrlToRelative(audioUrl);
             this.audioElement.src = audioUrl;
+            this.audioElement.onplaying = () => {
+                this.playbackHasStarted = true;
+            };
+            this.audioElement.onpause = () => {
+                if (this.playbackHasStarted && !this.audioElement.ended) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onstalled = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onerror = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
             try {
                 // setDraggingDisabled(true);
                 const language = container.getAttribute('Lang') || 'en';
@@ -1627,10 +1679,7 @@ class AudioPlayer {
                 await new Promise(resolve => {
                     this.endPromiseResolve = resolve;
                     this.audioElement.onended = () => {
-                        if (this.endPromiseResolve === resolve) {
-                            this.endPromiseResolve = null;
-                        }
-                        resolve();
+                        this.resolvePlaybackWait();
                     };
                 });
             }
@@ -2413,6 +2462,9 @@ function slidingWithScaling(element) {
     if (container.getAttribute('canplay') === 'false')
         return;
     const onStart = (event) => {
+        const templateId = container.getAttribute('template-id');
+        if ((templateId === 'arrangeLetters' || templateId === 'reorder') && container.getAttribute('game-completed') === 'true')
+            return;
         removeHighlight(element);
         isDragging = true;
         elementRect = element.getBoundingClientRect();
@@ -2560,7 +2612,7 @@ function slidingWithScaling(element) {
         element.style.transform = 'translate(0, 0)';
         setTimeout(() => {
             if (overlapElement) {
-                slideCompleted(element);
+                void slideCompleted(element);
                 overlapElement = false;
             }
         }, 300);
@@ -2584,27 +2636,95 @@ function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-const slideCompleted = (slideElement) => {
+const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
+const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
+const getSlideValuesForValidation = (container, slideElements) => {
+    if (isReorderContainer(container)) {
+        return slideElements.map(element => element.id);
+    }
+    return slideElements.map(element => element['value']);
+};
+const updateArrangeLettersCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+const isArrangeLettersComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+const updateReorderCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+const isReorderComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+const slideCompleted = async (slideElement) => {
     var _a;
     const container = document.getElementById(LidoContainer);
     const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-    const allSlideElements = document.querySelectorAll("[type='slide']");
-    let index = 0;
-    allSlideElements.forEach(item => {
-        slideArr[index++] = item['value'];
+    const allSlideElements = Array.from(document.querySelectorAll("[type='slide']"));
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    slideValues.forEach((value, index) => {
+        slideArr[index] = value;
     });
     container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
-    const elementIndex = slideArr.indexOf(slideElement['value']);
-    const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    if (isArrangeLettersContainer(container)) {
+        updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
+    }
+    else if (isReorderContainer(container)) {
+        updateReorderCorrectness(container, slideValues, objectiveArray);
+    }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
-        // validationForSlideHandler();
     }
     else {
         storingEachActivityScore(isCorrect);
     }
+    if (isArrangeLettersContainer(container) || isReorderContainer(container)) {
+        await validationForSlideHandler(slideValues);
+    }
+};
+const validationForSlideHandler = async (slideValues) => {
+    const container = document.getElementById(LidoContainer);
+    if (!container || (!isArrangeLettersContainer(container) && !isReorderContainer(container)) || container.getAttribute('game-completed') === 'true')
+        return;
+    const objectiveString = document.getElementById(LidoContainer)['objective'];
+    const isComplete = isArrangeLettersContainer(container)
+        ? isArrangeLettersComplete(slideValues, objectiveString)
+        : isReorderComplete(slideValues, objectiveString);
+    if (isComplete) {
+        await validateObjectiveStatus();
+    }
 };
 
 const getContainerScale = (container) => {
@@ -3957,6 +4077,14 @@ function addClickListenerForClickType(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    const isBubbleTypeKeyboardKey = (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'bubbleType' &&
+        element.closest('lido-keyboard') !== null;
+    // BubbleType manages key clicks and audio in lido-keyboard.tsx directly.
+    // Letting the generic click handler attach here creates a competing stop/play
+    // path that can interrupt the first bubble audio.
+    if (isBubbleTypeKeyboardKey) {
+        return;
+    }
     element.style.cursor = 'pointer';
     if (!element) {
         console.error('No element provided.');
@@ -72045,27 +72173,24 @@ const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 /* ------------------ animation ------------------ */
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, container) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
-      }`;
-        const styleSheet = document.styleSheets[0];
-        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-        activeCell.style.animation = `widthDecrease 0s`;
-        activeCell.addEventListener("animationend", () => {
-            activeCell.remove();
+        let removed = false;
+        const removeActiveCell = () => {
+            if (removed)
+                return;
+            removed = true;
+            if (activeCell.isConnected) {
+                activeCell.remove();
+            }
             // Trigger next container only after the last calculate cell is removed
             const remainingCalculateTypes = container.querySelectorAll("[type='calculate']");
             if (remainingCalculateTypes.length === 0) {
                 setTimeout(() => triggerNextContainer(), 2000);
             }
             resolve();
-        }, { once: true });
+        };
+        // Nimble uses a zero-duration removal; remove synchronously so progression
+        // does not depend on a browser animationend event.
+        removeActiveCell();
     });
 };
 /* ------------------ PRACTICE MODE ------------------ */
@@ -72819,9 +72944,11 @@ const executeActions = async (actionsString, thisElement, element) => {
                         if (dropTo === "hundredsDrop")
                             hundreds++;
                     });
-                    const unitsValue = units * 1;
-                    const tensValue = tens * 10;
-                    const hundredsValue = hundreds * 100;
+                    // Blender displays the number of blocks placed in each column.
+                    // Blender's drag/drop values are also the required block counts.
+                    const unitsValue = units;
+                    const tensValue = tens;
+                    const hundredsValue = hundreds;
                     // ✅ Update Lido Text Boxes
                     const unitsBox = document.getElementById("units");
                     const tensBox = document.getElementById("tens");
@@ -73082,18 +73209,27 @@ const calculateScore = () => {
     gameScore.totalRightMovesCount += rightMoves;
     gameScore.totalWrongMovesCount += wrongMoves;
     let finalScore = Math.floor((rightMoves / (rightMoves + wrongMoves)) * 100);
+    console.log('[Activity Score]', { rightMoves, wrongMoves, activityScore: finalScore });
     storeActivityScore(finalScore);
     gameScore.rightMoves = 0;
     gameScore.wrongMoves = 0;
 };
 async function onActivityComplete(dragElement, dropElement) {
-    var _a, _b;
+    var _a, _b, _c;
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
+    const isBlender = container.getAttribute('template-id') === 'blender';
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
-        const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        let isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        if (isBlender) {
+            const requiredDrops = Number((_a = dropElement.getAttribute('required-drops')) !== null && _a !== void 0 ? _a : 0);
+            const placedDrops = document.querySelectorAll(`[drop-to="${dropElement.id}"]`).length;
+            // Blender accepts every count from 1 through the required count.
+            // Zero or an overfilled drop zone uses the incorrect action.
+            isCorrect = placedDrops > 0 && placedDrops <= requiredDrops;
+        }
         // storing each activity score based on isCorrect for (all drag-drop events)
         // storingEachActivityScore(isCorrect);
         if (isCorrect) {
@@ -73102,10 +73238,10 @@ async function onActivityComplete(dragElement, dropElement) {
                 console.log("Right Moves : ", gameScore.rightMoves);
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
-            const onCorrect = ((_a = container.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
+            const onCorrect = ((_b = container.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.EnableAnimation.toLowerCase()
                 ? ''
                 : dropElement.getAttribute('onCorrect');
-            if (onCorrect) {
+            if (onCorrect && !isBlender) {
                 await executeActions(onCorrect, dropElement, dragElement);
             }
             //for multiply beeds
@@ -73120,7 +73256,7 @@ async function onActivityComplete(dragElement, dropElement) {
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
             }
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            if (onInCorrect) {
+            if (onInCorrect && !isBlender) {
                 await executeActions(onInCorrect, dropElement, dragElement);
             }
         }
@@ -73129,7 +73265,7 @@ async function onActivityComplete(dragElement, dropElement) {
     const sortedValues = getSortedValuesArrayFromMap(dragScore);
     container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
     //localStorage
-    let drag = JSON.parse((_b = localStorage.getItem(DragMapKey)) !== null && _b !== void 0 ? _b : '{}');
+    let drag = JSON.parse((_c = localStorage.getItem(DragMapKey)) !== null && _c !== void 0 ? _c : '{}');
     const index = dropElement.getAttribute('tab-index');
     if (!drag[index]) {
         drag[index] = [];