lido-player 0.0.2-beta-22-dev → 0.0.2-beta-24-dev

package/dist/cjs/{index-0BvcfeCt.js → index-BCRDjbaz.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-DnaH8sO-.js');
+var index$1 = require('./index-DBCFoh1I.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -453,6 +453,19 @@ function enableDraggingWithScaling(element) {
     let clone = null;
     let duplicateElement = null;
     let mutationFlag = false;
+    let pendingMoveFrame = null;
+    let latestClientX = 0;
+    let latestClientY = 0;
+    let hasPendingMove = false;
+    let touchTransformUpdated = false;
+    let touchDragScale = 1;
+    let touchDragScaleY = 1;
+    let touchOffsetX = 0;
+    let touchOffsetY = 0;
+    let touchStartElementLeft = 0;
+    let touchStartElementTop = 0;
+    let touchStartRect = null;
+    let isTouchDragging = false;
     // Fetch the container element
     const container = document.getElementById(LidoContainer);
     if (!container) {
@@ -463,6 +476,33 @@ function enableDraggingWithScaling(element) {
         return;
     handlingElementFlexibleWidth(element, 'drag');
     let dragingElementTransform;
+    const getContainerScale = () => {
+        const transform = window.getComputedStyle(container).transform;
+        const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/);
+        const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+        if (matrix3dMatch) {
+            const values = matrix3dMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[4] ** 2 + values[5] ** 2) || 1,
+            };
+        }
+        if (matrixMatch) {
+            const values = matrixMatch[1].split(',').map(value => parseFloat(value.trim()));
+            return {
+                scaleX: Math.sqrt(values[0] ** 2 + values[1] ** 2) || 1,
+                scaleY: Math.sqrt(values[2] ** 2 + values[3] ** 2) || 1,
+            };
+        }
+        return { scaleX: 1, scaleY: 1 };
+    };
+    const updateTouchDragScale = () => {
+        if (isTouchDragging) {
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+        }
+    };
     const onStart = (event) => {
         var _a, _b;
         if (container && container.getAttribute("game-completed") === "true")
@@ -479,17 +519,29 @@ function enableDraggingWithScaling(element) {
         if (event instanceof MouseEvent) {
             startX = event.clientX;
             startY = event.clientY;
+            touchStartRect = null;
         }
         else {
             startX = event.touches[0].clientX;
             startY = event.touches[0].clientY;
+            isTouchDragging = true;
+            touchStartRect = element.getBoundingClientRect();
+            touchOffsetX = startX - touchStartRect.left;
+            touchOffsetY = startY - touchStartRect.top;
+            touchStartElementLeft = touchStartRect.left;
+            touchStartElementTop = touchStartRect.top;
+            const { scaleX, scaleY } = getContainerScale();
+            touchDragScale = scaleX;
+            touchDragScaleY = scaleY;
+            element.style.willChange = 'transform';
+            window.addEventListener('resize', updateTouchDragScale);
         }
         // Apply dragging styles to the element
         element.style.opacity = '1';
         element.style.cursor = 'grabbing';
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!clone) {
                 clone = element.cloneNode(true);
                 clone.style.left = `${rect.left}px`;
@@ -508,7 +560,7 @@ function enableDraggingWithScaling(element) {
             const imgElement = element.querySelector('img');
             const src = imgElement === null || imgElement === void 0 ? void 0 : imgElement.getAttribute('src');
             const computedStyle = window.getComputedStyle(element);
-            const rect = element.getBoundingClientRect();
+            const rect = touchStartRect || element.getBoundingClientRect();
             if (!duplicateElement) {
                 duplicateElement = element.cloneNode(false);
                 duplicateElement.setAttribute('src', src);
@@ -581,31 +633,31 @@ function enableDraggingWithScaling(element) {
             target.style.opacity = value;
         }
     };
-    const onMove = (event) => {
-        if (!isDragging)
+    const processMove = () => {
+        pendingMoveFrame = null;
+        if (!isDragging || !hasPendingMove)
             return;
+        hasPendingMove = false;
+        const deferTouchDropValidation = touchTransformUpdated;
         if (isDraggingDisabled) {
             isDragging = false;
+            touchTransformUpdated = false;
             return;
         }
-        isClicked = false;
         element.style.transition = 'none';
-        const containerScale = calculateScale();
-        let dx = 0;
-        let dy = 0;
-        if (event instanceof MouseEvent) {
-            dx = (event.clientX - startX) / containerScale;
-            dy = (event.clientY - startY) / containerScale;
-        }
-        else {
-            dx = (event.touches[0].clientX - startX) / containerScale;
-            dy = (event.touches[0].clientY - startY) / containerScale;
-        }
-        // Calculate the new position considering scaling
-        const newLeft = initialX + dx;
-        const newTop = initialY + dy;
-        // Apply transform with translation without boundaries
-        element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        if (!touchTransformUpdated) {
+            const containerScale = calculateScale();
+            const dx = (latestClientX - startX) / containerScale;
+            const dy = (latestClientY - startY) / containerScale;
+            // Calculate the new position considering scaling
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            // Apply transform with translation without boundaries
+            element.style.transform = `translate(${newLeft}px, ${newTop}px)`;
+        }
+        touchTransformUpdated = false;
+        if (deferTouchDropValidation)
+            return;
         // Check for overlaps and highlight only the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         const allElements = document.querySelectorAll("[type='drop']");
@@ -644,6 +696,44 @@ function enableDraggingWithScaling(element) {
             }
         }
     };
+    const onMove = (event) => {
+        if (!isDragging)
+            return;
+        if (isDraggingDisabled) {
+            isDragging = false;
+            return;
+        }
+        if (event instanceof MouseEvent) {
+            touchTransformUpdated = false;
+            latestClientX = event.clientX;
+            latestClientY = event.clientY;
+        }
+        else {
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            latestClientX = touch.clientX;
+            latestClientY = touch.clientY;
+        }
+        if (!(event instanceof MouseEvent)) {
+            element.style.transition = 'none';
+            const desiredLeft = latestClientX - touchOffsetX;
+            const desiredTop = latestClientY - touchOffsetY;
+            const dx = (desiredLeft - touchStartElementLeft) / touchDragScale;
+            const dy = (desiredTop - touchStartElementTop) / touchDragScaleY;
+            const newLeft = initialX + dx;
+            const newTop = initialY + dy;
+            element.style.transform = `translate3d(${newLeft}px, ${newTop}px, 0)`;
+            touchTransformUpdated = true;
+        }
+        isClicked = false;
+        if (event instanceof MouseEvent) {
+            hasPendingMove = true;
+            if (pendingMoveFrame === null) {
+                pendingMoveFrame = requestAnimationFrame(processMove);
+            }
+        }
+    };
     let lastOverlappedElement = null;
     const removeDocumentDragListeners = () => {
         document.removeEventListener('mousemove', onMove);
@@ -651,9 +741,19 @@ function enableDraggingWithScaling(element) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onEnd);
     };
+    const flushPendingMove = () => {
+        if (pendingMoveFrame === null)
+            return;
+        cancelAnimationFrame(pendingMoveFrame);
+        processMove();
+    };
     const onEnd = (endEv) => {
         var _a, _b, _c;
+        flushPendingMove();
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
         removeDocumentDragListeners();
         if (isClicked) {
             if (clone) {
@@ -759,6 +859,15 @@ function enableDraggingWithScaling(element) {
     };
     const cleanup = () => {
         isDragging = false;
+        isTouchDragging = false;
+        element.style.willChange = '';
+        window.removeEventListener('resize', updateTouchDragScale);
+        if (pendingMoveFrame !== null) {
+            cancelAnimationFrame(pendingMoveFrame);
+            pendingMoveFrame = null;
+        }
+        hasPendingMove = false;
+        touchTransformUpdated = false;
         observer.disconnect();
         removeDocumentDragListeners();
         element.removeEventListener('mousedown', onStart);
@@ -1242,14 +1351,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1437,34 +1546,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1481,10 +1590,10 @@ function stopHighlightForSpeakingElement(element) {
 }
 function highlightElement() {
     const container = document.querySelector(LidoContainer);
-    if (container.getAttribute("template-id") === "blender")
-        return;
     if (!container)
         return;
+    if (container.getAttribute("template-id") === "blender")
+        return;
     const dropElements = buildDropHasDragFromDOM();
     const dropEls = container.querySelectorAll(`[type="drop"]`);
     dropEls.forEach(dropEl => {
@@ -1541,6 +1650,7 @@ class AudioPlayer {
         this.currentTargetElement = null;
         this.pendingReplayElement = null;
         this.playbackHasStarted = false;
+        this.playbackSequence = 0;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
@@ -1639,7 +1749,7 @@ class AudioPlayer {
             return el;
         return el.closest('lido-text');
     }
-    async play(targetElement, suppressHighlight = false) {
+    async play(targetElement, suppressHighlight = false, playbackContext) {
         this.registerVisibilityEvents();
         this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
@@ -1651,6 +1761,7 @@ class AudioPlayer {
             }
             this.pendingReplayElement = null;
         }
+        const playbackId = ++this.playbackSequence;
         // Stop any currently playing audio first if target element has audio given
         try {
             await AudioPlayer.getI().stop();
@@ -1674,7 +1785,7 @@ class AudioPlayer {
             targetElement = textElement;
         }
         this.currentTargetElement = targetElement;
-        window.dispatchEvent(new CustomEvent('lidoAudioStarted', { detail: { target: targetElement } }));
+        window.dispatchEvent(new CustomEvent('lidoAudioStarted', { detail: { target: targetElement, playbackId, playbackContext } }));
         // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
         // If no direct audio attribute, check childrens for audio
@@ -1693,6 +1804,7 @@ class AudioPlayer {
             this.audioElement.src = audioUrl;
             this.audioElement.onplaying = () => {
                 this.playbackHasStarted = true;
+                window.dispatchEvent(new CustomEvent('lidoAudioPlaying', { detail: { target: targetElement, playbackId, playbackContext } }));
             };
             this.audioElement.onpause = () => {
                 if (this.playbackHasStarted && !this.audioElement.ended) {
@@ -1771,13 +1883,13 @@ class AudioPlayer {
             await this.waitUntilWindowIsVisible();
             if (this.pendingReplayElement === targetElement) {
                 this.pendingReplayElement = null;
-                return this.play(targetElement);
+                return this.play(targetElement, suppressHighlight, playbackContext);
             }
         }
         if (this.currentTargetElement === targetElement) {
             this.currentTargetElement = null;
         }
-        window.dispatchEvent(new CustomEvent('lidoAudioEnded', { detail: { target: targetElement } }));
+        window.dispatchEvent(new CustomEvent('lidoAudioEnded', { detail: { target: targetElement, playbackId, playbackContext } }));
     }
     // GLOBAL STOP EVENTS (container change, activity change…)
     registerGlobalStopEvents() {
@@ -2170,11 +2282,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2397,11 +2509,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2494,6 +2606,20 @@ async function onDropToCategory(dragElement, categoryElement) {
 }
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+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 syncSlideOrder = (container) => {
+    const slideElements = Array.from(container.querySelectorAll("[type='slide']"));
+    const slideOrder = getSlideValuesForValidation(container, slideElements);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -2554,6 +2680,9 @@ function slidingWithScaling(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    // Slide activities can start in the correct order. Keep their initial DOM
+    // order available to the Next/check validation before the first swap occurs.
+    syncSlideOrder(container);
     const onStart = (event) => {
         const templateId = container.getAttribute('template-id');
         if ((templateId === 'arrangeLetters' || templateId === 'reorder') && container.getAttribute('game-completed') === 'true')
@@ -2729,14 +2858,6 @@ function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-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) => {
@@ -4317,11 +4438,12 @@ function addClickListenerForClickType(element) {
             }, 50);
         }
     });
-    clickableElementStyle(element);
+    initializeClickableElementStyle(element);
 }
-const clickableElementStyle = (element) => {
+const initializeClickableElementStyle = (element) => {
     var _a;
-    const elementShadow = element.offsetHeight * 0.08;
+    const elementHeight = Number.isFinite(element.offsetHeight) ? element.offsetHeight : 0;
+    const elementShadow = elementHeight * 0.08;
     const backGroundColor = ((_a = element.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) || '#FFB742';
     element.style.setProperty('--btn-bg-color', backGroundColor);
     element.style.setProperty('--btn-shadow-px', `0px ${elementShadow}px 0px`);
@@ -72755,6 +72877,34 @@ function getSortedValuesArrayFromMap(map) {
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+// These actions have side effects beyond declarative element styling. They must
+// not run while the player is being displayed in edit mode.
+const nonVisualActions = new Set([
+    'revealImageValue',
+    'scrollCellAfterEquationSolved',
+    'alignMatch',
+    'removeClone',
+    'speak',
+    'fill-slide',
+    'nextBtn',
+    'prevBtn',
+    'stop',
+    'sleep',
+    'avatarAnimate',
+    'cellBorderAnimate',
+    'vibrate',
+    'highlightStarsAndDisapper',
+    'boxAnimationOneByOne',
+    'questionBoxAnimate',
+    'slideAnimation',
+    'showBalanceSymbol',
+    'hideBalanceSymbol',
+    'sumTogetherAnimation',
+    'addText',
+    'disableType',
+    'updateCountBlender',
+    'updateCalculatorAnswer',
+]);
 const initEventsForElement = async (element, type) => {
     const container = document.getElementById(LidoContainer);
     if (!container) {
@@ -72764,10 +72914,29 @@ const initEventsForElement = async (element, type) => {
         return;
     }
     const onEntry = element.getAttribute('onEntry');
-    await executeActions(onEntry, element);
+    const canPlay = container.getAttribute('canplay') !== 'false';
+    await executeActions(onEntry, element, undefined, { visualOnly: !canPlay });
+    // Free movement is an editor interaction and is intentionally available in
+    // edit mode; all gameplay handlers below remain disabled there.
     if (element.getAttribute('move') === 'true') {
         enableFreeMove(element);
     }
+    // The click visual treatment is independent from the click listener. Edit
+    // mode needs the class and custom properties that draw the configured button
+    // background/shadow, but must not install answer-selection behavior.
+    if (!canPlay && type === 'click') {
+        initializeClickableElementStyle(element);
+    }
+    // Edit mode still needs visual initialization, but must not install any
+    // gameplay or touch handlers. In play mode, avoid duplicating listeners if a
+    // component invokes its load hook more than once.
+    if (!canPlay)
+        return;
+    const initializedElement = element;
+    const initializationKey = `${type || ''}:${canPlay}`;
+    if (initializedElement.__lidoInitializationKey === initializationKey)
+        return;
+    initializedElement.__lidoInitializationKey = initializationKey;
     switch (type) {
         case 'drag': {
             enableDraggingWithScaling(element);
@@ -72805,12 +72974,14 @@ const initEventsForElement = async (element, type) => {
     onTouchListenerForOnTouch(element);
 };
 // Function to execute actions parsed from the onMatch string
-const executeActions = async (actionsString, thisElement, element) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const executeActions = async (actionsString, thisElement, element, options = {}) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const actions = parseActions(actionsString);
     // body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
+        if (options.visualOnly && nonVisualActions.has(action.action))
+            continue;
         const queriedElement = document.querySelector(action.actor);
         const targetElement = action.actor === 'this' ? thisElement : action.actor === 'element' ? element : queriedElement ? queriedElement : document.getElementById(action.actor);
         if (targetElement) {
@@ -72931,7 +73102,14 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const riveService = RiveService.getInstance();
                     const riveInstance = riveService.getRiveInstance();
                     if (riveInstance && action.value) {
-                        riveInstance.play(action.value);
+                        const input = (_b = riveInstance
+                            .stateMachineInputs('State Machine 1')) === null || _b === void 0 ? void 0 : _b.find(input => input.name === action.value);
+                        if (input) {
+                            input.fire();
+                        }
+                        else {
+                            console.warn(`Avatar reaction input "${action.value}" was not found in State Machine 1.`);
+                        }
                     }
                     break;
                 }
@@ -72978,8 +73156,8 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const balanceEl = document.querySelector('lido-balance');
                     if (!balanceEl)
                         break;
-                    const leftVal = Number((_b = balanceEl.leftVal) !== null && _b !== void 0 ? _b : Number((_d = (_c = balanceEl.dataset) === null || _c === void 0 ? void 0 : _c.leftVal) !== null && _d !== void 0 ? _d : 0));
-                    const rightVal = Number((_e = balanceEl.rightVal) !== null && _e !== void 0 ? _e : Number((_g = (_f = balanceEl.dataset) === null || _f === void 0 ? void 0 : _f.rightVal) !== null && _g !== void 0 ? _g : 0));
+                    const leftVal = Number((_c = balanceEl.leftVal) !== null && _c !== void 0 ? _c : Number((_e = (_d = balanceEl.dataset) === null || _d === void 0 ? void 0 : _d.leftVal) !== null && _e !== void 0 ? _e : 0));
+                    const rightVal = Number((_f = balanceEl.rightVal) !== null && _f !== void 0 ? _f : Number((_h = (_g = balanceEl.dataset) === null || _g === void 0 ? void 0 : _g.rightVal) !== null && _h !== void 0 ? _h : 0));
                     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
                     balanceEl.balanceSymbol = symbol;
                     balanceEl.dataset.balanceSymbol = symbol;
@@ -73099,11 +73277,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -73454,7 +73632,7 @@ const storeActivityScore = (score) => {
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
     // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
-    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
+    const actualActivitySeconds = Number((Timer.getI().getElapsed() / 1000).toFixed(1));
     ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
     console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
@@ -73466,7 +73644,7 @@ const storeActivityScore = (score) => {
         gameScore.finalScore = Math.floor(finalScore);
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
-        const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        const timeSpendForLesson = Number(ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0).toFixed(1));
         console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;

package/dist/cjs/{index-DnaH8sO-.js → index-DBCFoh1I.js}

@@ -22,7 +22,7 @@ const NAMESPACE = 'lido-player';
 const BUILD = /* lido-player */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\r\n    height 25ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
+const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\n    180deg,\n    rgba(255, 235, 59, 0.95),\n    rgba(255, 214, 0, 0.95)\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\n    height 25ms ease-out,\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-0BvcfeCt.js');
-require('./index-DnaH8sO-.js');
+var index = require('./index-BCRDjbaz.js');
+require('./index-DBCFoh1I.js');