lido-player 0.0.2-beta-21-dev → 0.0.2-beta-23-dev

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -1,5 +1,5 @@
 import { calculateScale, countPatternWords, buildDragSelectedMapFromDOM, getSortedValuesArrayFromMap, executeActions, handleShowCheck, handlingElementFlexibleWidth, onActivityComplete, storingEachActivityScore } from "../utils";
-import { updateBalanceOnDrop } from "./lidoBalanceHandler";
+import { placeDragOnBalancePlate, updateBalanceOnDrop } from "./lidoBalanceHandler";
 import { AudioPlayer } from "../audioPlayer";
 import { DropLength, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, LIDO_INTERACTION_CLEANUP_EVENT } from "../constants";
 import { dispatchElementDropEvent } from "../customEvents";
@@ -62,6 +62,19 @@ export 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) {
@@ -74,6 +87,33 @@ export function enableDraggingWithScaling(element) {
     let verticalDistance;
     let horizontalDistance;
     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")
@@ -90,17 +130,29 @@ export 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`;
@@ -119,7 +171,7 @@ export 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);
@@ -196,31 +248,31 @@ export 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;
+        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)`;
         }
-        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)`;
+        touchTransformUpdated = false;
+        if (deferTouchDropValidation)
+            return;
         // Check for overlaps and highlight only the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement(element, 'drop');
         const allElements = document.querySelectorAll("[type='drop']");
@@ -259,6 +311,44 @@ export 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);
@@ -266,9 +356,19 @@ export 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) {
@@ -374,6 +474,15 @@ export 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);
@@ -447,7 +556,8 @@ export async function handleResetDragElement(dragElement, dropElement, dropHasDr
     dragElement.classList.remove('dropped');
     const container = document.getElementById(LidoContainer);
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
-    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped'));
+    const balanceHome = dragElement.__lidoBalanceHome;
+    const cloneDragElement = ((balanceHome === null || balanceHome === void 0 ? void 0 : balanceHome.isConnected) ? balanceHome : Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped')));
     dragElement.style.transition = 'transform 0.5s ease';
     if (cloneDragElement) {
         animateDragToTarget(dragElement, cloneDragElement, container);
@@ -464,6 +574,7 @@ export async function handleResetDragElement(dragElement, dropElement, dropHasDr
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.position = 'unset';
             cloneDragElement.replaceWith(dragElement);
+            delete dragElement.__lidoBalanceHome;
         }, 500);
     }
     else {
@@ -787,6 +898,10 @@ export async function onElementDropComplete(dragElement, dropElement) {
     }
     highlightElement();
     await onActivityComplete(dragElement, dropElement);
+    const dropAction = container.getAttribute('drop-action');
+    if (container.querySelector('lido-balance') && dropAction !== DropAction.Move && dropAction !== DropAction.InfiniteDrop) {
+        placeDragOnBalancePlate(dragElement, dropElement);
+    }
 }
 export function updateDropBorder(element) {
     var _a;
@@ -855,14 +970,14 @@ export 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);
     }

package/dist/collection/utils/utilsHandlers/highlightHandler.js

@@ -8,32 +8,32 @@ export function showWrongAnswerAnimation(elements) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-          @keyframes enhanced-shake {
-              0% { left: 0; }
-              10% { left: -8px; }
-              20% { left: 8px; }
-              30% { left: -8px; }
-              40% { left: 8px; }
-              50% { left: -6px; }
-              60% { left: 6px; }
-              70% { left: -4px; }
-              80% { left: 4px; }
-              90% { left: -2px; }
-              100% { left: 0; }
-          }
-
-          
-          .wrong-answer {
-              position: relative; /* Enable relative positioning to move the element */
-              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
-              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
-
-              border: 4px solid red;
-          }
-
-          
+        style.innerHTML = `
+          @keyframes enhanced-shake {
+              0% { left: 0; }
+              10% { left: -8px; }
+              20% { left: 8px; }
+              30% { left: -8px; }
+              40% { left: 8px; }
+              50% { left: -6px; }
+              60% { left: 6px; }
+              70% { left: -4px; }
+              80% { left: 4px; }
+              90% { left: -2px; }
+              100% { left: 0; }
+          }
+
+          
+          .wrong-answer {
+              position: relative; /* Enable relative positioning to move the element */
+              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
+              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
+
+              border: 4px solid red;
+          }
+
+          
       `;
         document.head.appendChild(style);
     }
@@ -61,34 +61,34 @@ export 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);
     }

package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js

@@ -1,5 +1,49 @@
-import { equationCheck } from "../utils";
+import { calculateScale, equationCheck } from "../utils";
+/**
+ * Mount a drag item on a balance plate without using the generic
+ * `drop-action="move"` flow. The generic flow creates a new source placeholder
+ * for every move, which makes a previously used plate become the item's source.
+ *
+ * A balance item gets exactly one home placeholder: its original source. It can
+ * then move freely between plate parents while continuing to inherit the plate's
+ * tilt translation.
+ */
+export function placeDragOnBalancePlate(dragElement, dropElement) {
+    var _a;
+    const balanceEl = document.querySelector('lido-balance');
+    const plateParent = dropElement === null || dropElement === void 0 ? void 0 : dropElement.parentElement;
+    if (!balanceEl || !plateParent)
+        return;
+    const drag = dragElement;
+    if (!((_a = drag.__lidoBalanceHome) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+        const home = document.createElement('div');
+        home.className = 'lido-balance-source-placeholder';
+        home.setAttribute('aria-hidden', 'true');
+        drag.replaceWith(home);
+        drag.__lidoBalanceHome = home;
+    }
+    // Appending an existing element moves it; it does not leave a second
+    // placeholder in the previous plate.
+    plateParent.append(drag);
+    drag.style.position = 'absolute';
+    drag.style.zIndex = '1';
+    // The generic drag handler also uses transform. Disable transitions while
+    // changing parents and calculating the new local offset so this is one
+    // placement, rather than a right/left correction animation.
+    drag.style.transition = 'none';
+    drag.style.transform = 'translate(0, 0)';
+    const dropRect = dropElement.getBoundingClientRect();
+    const dragRect = drag.getBoundingClientRect();
+    const scale = calculateScale() || 1;
+    const x = (dropRect.left + dropRect.width / 2 - (dragRect.left + dragRect.width / 2)) / scale;
+    const y = (dropRect.top + dropRect.height / 2 - (dragRect.top + dragRect.height / 2)) / scale;
+    drag.style.transform = `translate(${x}px, ${y}px)`;
+    requestAnimationFrame(() => {
+        drag.style.transition = '';
+    });
+}
 export function updateBalanceOnDrop(dragElement, dropElement) {
+    var _a, _b;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return;
@@ -7,7 +51,20 @@ export function updateBalanceOnDrop(dragElement, dropElement) {
     const rightDrag = Array.from(document.querySelectorAll('[drop-to^="righthandle"]'));
     balanceEl.leftVal = calculateValue(leftDrag, balanceEl.operation);
     balanceEl.rightVal = calculateValue(rightDrag, balanceEl.operation);
+    const container = document.getElementById('lido-container');
+    const objectiveString = (_b = (_a = container === null || container === void 0 ? void 0 : container['objective']) !== null && _a !== void 0 ? _a : container === null || container === void 0 ? void 0 : container.getAttribute('objective')) !== null && _b !== void 0 ? _b : '';
+    const isCorrect = !!container && balanceResult(container, objectiveString);
+    const dropElements = container ? Array.from(container.querySelectorAll('[type="drop"]')) : [];
+    const filledDropCount = dropElements.filter(drop => !!(container === null || container === void 0 ? void 0 : container.querySelector(`[drop-to="${drop.id}"]`))).length;
+    const allDropsFilled = dropElements.length > 0 && filledDropCount === dropElements.length;
+    if (balanceEl.setFeedbackColor) {
+        balanceEl.setFeedbackColor(allDropsFilled && isCorrect ? '#81C127' : allDropsFilled ? '#FF0410' : '');
+    }
     if (balanceEl.updateTilt) {
+        if (!isCorrect) {
+            balanceEl.updateTilt(0, 0);
+            return;
+        }
         balanceEl.updateTilt(balanceEl.leftVal, balanceEl.rightVal);
     }
 }

package/dist/collection/utils/utilsHandlers/sortHandler.js

@@ -163,11 +163,11 @@ export 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);
@@ -390,11 +390,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');