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

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');