lido-player 0.0.2-alpha-27 → 0.0.2-alpha-29

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-0c09d26d.js');
+const utils = require('./utils-89ed7190.js');
 require('./index-fe562525.js');
 
 

package/dist/cjs/lido-avatar_18.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-0c09d26d.js');
+const utils = require('./utils-89ed7190.js');
 
 var rive = {exports: {}};
 
@@ -7086,7 +7086,7 @@ const LidoFloat = class {
 };
 LidoFloat.style = LidoFloatStyle0;
 
-const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}.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:0 2px 4px rgba(151, 150, 150, 0.1) !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:145px}.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-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");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}";
+const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}.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:0 2px 4px rgba(151, 150, 150, 0.1) !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-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");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}";
 const LidoHomeStyle0 = indexCss;
 
 const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}";
@@ -7124,7 +7124,7 @@ const LidoHome = class {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 utils.dispatchGameCompletedEvent();
-                // this.currentContainerIndex = 0;
+                this.currentContainerIndex = null;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];
@@ -7148,6 +7148,8 @@ const LidoHome = class {
         this.updateArrowVisibility = () => {
             setTimeout(() => {
                 const containerElement = this.el.querySelector('lido-container');
+                if (!containerElement)
+                    return;
                 const prevbtn = containerElement.getAttribute('show-prev-button');
                 const nextbtn = containerElement.getAttribute('show-next-button');
                 const rightbtn = this.el.querySelector('#lido-arrow-right');
@@ -7396,14 +7398,14 @@ const LidoHome = class {
         return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, index.h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
                 this.exitFlag = true;
                 utils.AudioPlayer.getI().stop();
-            } }, index.h("lido-image", { src: "./Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left", onClick: () => {
+            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left", onClick: () => {
                 utils.triggerPrevcontainer();
-            } }, index.h("lido-image", { src: "./Previous.svg" })), this.containers.map((_, index$1) => (index.h("div", { class: "parent_dots" }, index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style })))), index.h("div", { id: "lido-arrow-right", onClick: event => {
+            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg" })), this.containers.map((_, index$1) => (index.h("div", { class: "parent_dots" }, index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style })))), index.h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 utils.executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, index.h("lido-image", { src: "./Previous.svg" }))), index.h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "./AudioIcon.svg" }))));
+            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg" }))), index.h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -11056,7 +11058,7 @@ const LidoText = class {
 };
 LidoText.style = LidoTextStyle0;
 
-const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#lido-draggableCircle{cursor:pointer;fill:red;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
+const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#81C127;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
 
 const LidoTrace = class {
@@ -11078,7 +11080,7 @@ const LidoTrace = class {
         this.ariaHidden = '';
         this.tabIndex = 0;
         this.mode = utils.TraceMode.ShowFlow;
-        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/finger.png';
+        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.highlightTextId = '';
@@ -11258,26 +11260,61 @@ const LidoTrace = class {
     getPaths(svg) {
         return Array.from(svg.querySelectorAll('path, line'));
     }
-    // Create flow markers along the path to guide the user
-    createFlowMarkersForPath(path, markerCount = 10) {
+    // Create a single dotted line with an arrow at the end for the entire path
+    createFlowMarkersForPath(path) {
         var _a;
-        const totalLength = path.getTotalLength();
-        const interval = totalLength / (markerCount + 1); // Space markers evenly
-        const markers = [];
-        for (let i = 1; i <= markerCount; i++) {
-            const point = path.getPointAtLength(i * interval);
-            const nextPoint = path.getPointAtLength((i + 0.5) * interval); // Slightly ahead point for direction
-            // Create an arrow marker
-            const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);
-            const arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-            arrowMarker.setAttribute('points', '-5,-5 0,0 -5,5');
-            arrowMarker.setAttribute('fill', 'blue');
-            arrowMarker.setAttribute('transform', `translate(${point.x},${point.y}) rotate(${(angle * 180) / Math.PI})`);
-            arrowMarker.setAttribute('class', 'lido-flow-indicator');
-            markers.push(arrowMarker);
-            (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(arrowMarker); // Append to the same SVG container
-        }
-        return markers;
+        if (!path)
+            return;
+        const svg = path.ownerSVGElement;
+        if (!svg)
+            return;
+        // --- 1. Create the dotted line that follows the same path ---
+        // Create a new <path> element that will visually represent the flow (dotted line)
+        const dottedLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        // Copy the "d" (path drawing instructions) from the original path
+        dottedLine.setAttribute('d', path.getAttribute('d') || '');
+        dottedLine.setAttribute('stroke', 'blue');
+        dottedLine.setAttribute('stroke-width', '2');
+        // Define a repeating pattern of dashes: "6 units on, 6 units off"
+        dottedLine.setAttribute('stroke-dasharray', '6,6');
+        dottedLine.setAttribute('fill', 'none');
+        // Add a class name for styling or later querying
+        dottedLine.setAttribute('class', 'lido-flow-indicator');
+        (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(dottedLine);
+        // --- 2. Ensure we only add <defs> + marker once per SVG ---
+        // Look for an existing <defs> section with our custom ID inside the SVG
+        let defs = svg.querySelector('defs#lido-flow-defs');
+        // If it doesn’t exist, create one and insert it at the top of the SVG
+        if (!defs) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            defs.setAttribute('id', 'lido-flow-defs');
+            svg.insertBefore(defs, svg.firstChild); // defs should usually be at the beginning
+        }
+        // --- 3. Create a unique marker for this path ---
+        const uniqueId = `arrow-${Math.random().toString(36)}`;
+        // Create the <marker> element that defines the arrowhead
+        const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+        marker.setAttribute('id', uniqueId);
+        // Set the width/height of the marker viewport (10x10 units)
+        marker.setAttribute('markerWidth', '10');
+        marker.setAttribute('markerHeight', '10');
+        // Reference point inside the marker (where the path will attach to arrow)
+        marker.setAttribute('refX', '5');
+        marker.setAttribute('refY', '5');
+        // Automatically rotate arrowhead to match the path direction
+        marker.setAttribute('orient', 'auto');
+        // Scale the marker relative to the stroke width of the path
+        marker.setAttribute('markerUnits', 'strokeWidth');
+        // --- Create the arrow shape itself ---
+        const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        // Define the arrowhead shape using SVG path commands
+        arrowPath.setAttribute('d', 'M0,0 L10,5 L0,10 L2,5 Z');
+        arrowPath.setAttribute('fill', 'blue');
+        marker.appendChild(arrowPath);
+        defs.appendChild(marker);
+        // --- 4. Attach the arrow marker to the end of the dotted line  ---
+        dottedLine.setAttribute('marker-end', `url(#${uniqueId})`);
+        return dottedLine;
     }
     // Show or hide flow indicators based on mode
     updateFlowIndicators(state) {
@@ -11340,8 +11377,8 @@ const LidoTrace = class {
         circle.setAttribute('id', 'lido-draggableCircle');
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
-        circle.setAttribute('r', `calc(${strokeWidth || 10} / 2)`); // Radius of the draggable circle
-        circle.setAttribute('fill', 'red');
+        circle.setAttribute('r', `calc(${strokeWidth || 10} / 3)`); // Radius of the draggable circle
+        circle.setAttribute('fill', '#81C127');
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -11704,7 +11741,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'ee0e1841a0d3086d453bd29568c53169456a75ca', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'd3e0ac9c6a51bf307d57b3bba3cddfb02fdf7fc1', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '159d4ee1599806c78c3437907778c240c814711c', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'fa3231b10e80e786fe4967059560a6cdc6749063', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/{utils-0c09d26d.js → utils-89ed7190.js}

@@ -982,7 +982,7 @@ const findMostoverlappedElement = (element, type) => {
         if (type === 'slide') {
             const elementArea = elementRect.width * elementRect.height;
             const otherArea = otherRect.width * otherRect.height;
-            const minRequiredOverlap = Math.min(elementArea, otherArea) * 0.8;
+            const minRequiredOverlap = Math.min(elementArea, otherArea) * 0.1;
             if (overlapArea >= minRequiredOverlap && overlapArea > maxOverlapArea) {
                 maxOverlapArea = overlapArea;
                 mostOverlappedElement = otherElement;
@@ -1177,6 +1177,8 @@ async function onElementDropComplete(dragElement, dropElement) {
                     container.append(div);
                     div.classList.add('after-drop-popup-container');
                     const hasType = dragElement.nextElementSibling;
+                    dragElement.style.scale = `1`;
+                    dropElement.style.scale = `1`;
                     // Remove from old parents
                     if (hasType && hasType.getAttribute('type') === 'drag') {
                         dragElement.remove();
@@ -1582,6 +1584,9 @@ function slidingWithScaling(element) {
     let initialX = 0;
     let initialY = 0;
     element.classList.add('drag-element');
+    let elementRect;
+    let elementLeft;
+    let elementTop;
     // slideNumbers(element);
     // Fetch the container element
     const parentElement = element.parentElement;
@@ -1592,6 +1597,9 @@ function slidingWithScaling(element) {
     const onStart = (event) => {
         removeHighlight(element);
         isDragging = true;
+        elementRect = element.getBoundingClientRect();
+        elementLeft = elementRect.left;
+        elementTop = elementRect.top;
         if (event instanceof MouseEvent) {
             startX = event.clientX;
             startY = event.clientY;
@@ -1653,7 +1661,7 @@ function slidingWithScaling(element) {
             dx = (event.touches[0].clientX - startX) / parentElementScale;
             dy = (event.touches[0].clientY - startY) / parentElementScale;
         }
-        const speedMultiplier = 1.5;
+        const speedMultiplier = 1 / calculateScale();
         const newLeft = initialX + dx * speedMultiplier;
         const newTop = initialY + dy * speedMultiplier;
         // Get the dimensions and scale-corrected position of the container and element
@@ -1678,21 +1686,37 @@ function slidingWithScaling(element) {
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
             if (mostOverlappedElement != element) {
+                isDragging = false;
                 const parent1 = element.parentElement;
                 const parent2 = mostOverlappedElement.parentElement;
+                const overlapRect = mostOverlappedElement.getBoundingClientRect();
+                const container = document.getElementById(LidoContainer);
+                const containerScale = getElementScale(container);
+                const dropCenterX = elementLeft + elementRect.width / 2;
+                const dropCenterY = elementTop + elementRect.height / 2;
+                const dragCenterX = overlapRect.left + overlapRect.width / 2;
+                const dragCenterY = overlapRect.top + overlapRect.height / 2;
+                const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
+                const scaledTop = (dropCenterY - dragCenterY) / containerScale;
+                mostOverlappedElement.style.transition = 'transform 0.3s ease';
+                element.style.transition = 'transform 0.3s ease';
                 if (parent1 && parent2) {
-                    mostOverlappedElement.style.transform = 'translate(0, 0)';
-                    mostOverlappedElement.style.transition = '';
                     // Temporarily detach both elements
                     const elementPlaceholder = document.createComment('element-placeholder');
                     const overlappedPlaceholder = document.createComment('overlapped-placeholder');
-                    parent1.replaceChild(elementPlaceholder, element);
-                    parent2.replaceChild(overlappedPlaceholder, mostOverlappedElement);
                     // Swap the elements
-                    parent1.replaceChild(mostOverlappedElement, elementPlaceholder);
-                    parent2.replaceChild(element, overlappedPlaceholder);
-                    element.style.transform = 'translate(0, 0)';
-                    element.style.transition = '';
+                    mostOverlappedElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
+                    element.style.transform = `translate(${-scaledLeft}px, ${-scaledTop}px)`;
+                    setTimeout(() => {
+                        parent1.replaceChild(elementPlaceholder, element);
+                        parent2.replaceChild(overlappedPlaceholder, mostOverlappedElement);
+                        parent1.replaceChild(mostOverlappedElement, elementPlaceholder);
+                        parent2.replaceChild(element, overlappedPlaceholder);
+                        mostOverlappedElement.style.transform = 'translate(0, 0)';
+                        mostOverlappedElement.style.transition = '';
+                        element.style.transform = 'translate(0, 0)';
+                        element.style.transition = '';
+                    }, 300);
                     // Recalculate starting points for the swapped element
                     startX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
                     startY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
@@ -67951,7 +67975,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     else {
                         dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
                     }
-                    if (dragElement.getAttribute("hasDummy") === "true")
+                    if (dragElement.getAttribute('hasDummy') === 'true')
                         return;
                     afterDropDragHandling(dragElement, dropElement);
                     break;
@@ -68052,7 +68076,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dummyElement.removeAttribute('drop-time');
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
-                dragElement.setAttribute("hasDummy", "true");
+                dragElement.setAttribute('hasDummy', 'true');
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -68346,6 +68370,7 @@ const validateObjectiveStatus = async () => {
                 await executeActions(onCorrect, container);
             }
             triggerNextContainer();
+            await calculateScore();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -68353,9 +68378,9 @@ const validateObjectiveStatus = async () => {
             const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
             if (!isContinueOnCorrect) {
                 triggerNextContainer();
+                await calculateScore();
             }
         }
-        await calculateScore();
     }
 };
 const triggerNextContainer = () => {

package/dist/collection/components/home/lido-home.js

@@ -38,7 +38,7 @@ export class LidoHome {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 dispatchGameCompletedEvent();
-                // this.currentContainerIndex = 0;
+                this.currentContainerIndex = null;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];
@@ -62,6 +62,8 @@ export class LidoHome {
         this.updateArrowVisibility = () => {
             setTimeout(() => {
                 const containerElement = this.el.querySelector('lido-container');
+                if (!containerElement)
+                    return;
                 const prevbtn = containerElement.getAttribute('show-prev-button');
                 const nextbtn = containerElement.getAttribute('show-next-button');
                 const rightbtn = this.el.querySelector('#lido-arrow-right');
@@ -310,14 +312,14 @@ export class LidoHome {
         return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            } }, h("lido-image", { src: "./Close.svg" })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            } }, h("lido-image", { src: "./Previous.svg" })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg" })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, h("lido-image", { src: "./Previous.svg" }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: "./AudioIcon.svg" }))));
+            } }, h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg" }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.

package/dist/collection/components/trace/lido-trace.css

@@ -25,7 +25,7 @@ svg {
 
 #lido-draggableCircle {
   cursor: pointer;
-  fill: red;
+  fill: #81C127;
   transition: fill 0.2s, r 0.2s;
 }
 
@@ -70,6 +70,13 @@ button {
   /* stroke: green !important; */
 }
 
+.lido-flow-indicator {
+  stroke: blue;
+  stroke-width: 2;
+  stroke-dasharray: 6, 6; /* Uniform dotted line */
+  fill: none;
+}
+
 .lido-trace {
   height: 700px;
   width: 700px;

package/dist/collection/components/trace/lido-trace.js

@@ -20,7 +20,7 @@ export class LidoTrace {
         this.ariaHidden = '';
         this.tabIndex = 0;
         this.mode = TraceMode.ShowFlow;
-        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/finger.png';
+        this.fingerHintUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
         this.highlightTextId = '';
@@ -200,26 +200,61 @@ export class LidoTrace {
     getPaths(svg) {
         return Array.from(svg.querySelectorAll('path, line'));
     }
-    // Create flow markers along the path to guide the user
-    createFlowMarkersForPath(path, markerCount = 10) {
+    // Create a single dotted line with an arrow at the end for the entire path
+    createFlowMarkersForPath(path) {
         var _a;
-        const totalLength = path.getTotalLength();
-        const interval = totalLength / (markerCount + 1); // Space markers evenly
-        const markers = [];
-        for (let i = 1; i <= markerCount; i++) {
-            const point = path.getPointAtLength(i * interval);
-            const nextPoint = path.getPointAtLength((i + 0.5) * interval); // Slightly ahead point for direction
-            // Create an arrow marker
-            const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);
-            const arrowMarker = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-            arrowMarker.setAttribute('points', '-5,-5 0,0 -5,5');
-            arrowMarker.setAttribute('fill', 'blue');
-            arrowMarker.setAttribute('transform', `translate(${point.x},${point.y}) rotate(${(angle * 180) / Math.PI})`);
-            arrowMarker.setAttribute('class', 'lido-flow-indicator');
-            markers.push(arrowMarker);
-            (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(arrowMarker); // Append to the same SVG container
+        if (!path)
+            return;
+        const svg = path.ownerSVGElement;
+        if (!svg)
+            return;
+        // --- 1. Create the dotted line that follows the same path ---
+        // Create a new <path> element that will visually represent the flow (dotted line)
+        const dottedLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        // Copy the "d" (path drawing instructions) from the original path
+        dottedLine.setAttribute('d', path.getAttribute('d') || '');
+        dottedLine.setAttribute('stroke', 'blue');
+        dottedLine.setAttribute('stroke-width', '2');
+        // Define a repeating pattern of dashes: "6 units on, 6 units off"
+        dottedLine.setAttribute('stroke-dasharray', '6,6');
+        dottedLine.setAttribute('fill', 'none');
+        // Add a class name for styling or later querying
+        dottedLine.setAttribute('class', 'lido-flow-indicator');
+        (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(dottedLine);
+        // --- 2. Ensure we only add <defs> + marker once per SVG ---
+        // Look for an existing <defs> section with our custom ID inside the SVG
+        let defs = svg.querySelector('defs#lido-flow-defs');
+        // If it doesn’t exist, create one and insert it at the top of the SVG
+        if (!defs) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            defs.setAttribute('id', 'lido-flow-defs');
+            svg.insertBefore(defs, svg.firstChild); // defs should usually be at the beginning
         }
-        return markers;
+        // --- 3. Create a unique marker for this path ---
+        const uniqueId = `arrow-${Math.random().toString(36)}`;
+        // Create the <marker> element that defines the arrowhead
+        const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+        marker.setAttribute('id', uniqueId);
+        // Set the width/height of the marker viewport (10x10 units)
+        marker.setAttribute('markerWidth', '10');
+        marker.setAttribute('markerHeight', '10');
+        // Reference point inside the marker (where the path will attach to arrow)
+        marker.setAttribute('refX', '5');
+        marker.setAttribute('refY', '5');
+        // Automatically rotate arrowhead to match the path direction
+        marker.setAttribute('orient', 'auto');
+        // Scale the marker relative to the stroke width of the path
+        marker.setAttribute('markerUnits', 'strokeWidth');
+        // --- Create the arrow shape itself ---
+        const arrowPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        // Define the arrowhead shape using SVG path commands
+        arrowPath.setAttribute('d', 'M0,0 L10,5 L0,10 L2,5 Z');
+        arrowPath.setAttribute('fill', 'blue');
+        marker.appendChild(arrowPath);
+        defs.appendChild(marker);
+        // --- 4. Attach the arrow marker to the end of the dotted line  ---
+        dottedLine.setAttribute('marker-end', `url(#${uniqueId})`);
+        return dottedLine;
     }
     // Show or hide flow indicators based on mode
     updateFlowIndicators(state) {
@@ -282,8 +317,8 @@ export class LidoTrace {
         circle.setAttribute('id', 'lido-draggableCircle');
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
-        circle.setAttribute('r', `calc(${strokeWidth || 10} / 2)`); // Radius of the draggable circle
-        circle.setAttribute('fill', 'red');
+        circle.setAttribute('r', `calc(${strokeWidth || 10} / 3)`); // Radius of the draggable circle
+        circle.setAttribute('fill', '#81C127');
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -646,7 +681,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'ee0e1841a0d3086d453bd29568c53169456a75ca', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: 'd3e0ac9c6a51bf307d57b3bba3cddfb02fdf7fc1', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '159d4ee1599806c78c3437907778c240c814711c', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, h("div", { key: 'fa3231b10e80e786fe4967059560a6cdc6749063', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -912,7 +947,7 @@ export class LidoTrace {
                 },
                 "attribute": "finger-hint-url",
                 "reflect": false,
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/finger.png'"
+                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg'"
             },
             "onInCorrect": {
                 "type": "string",

package/dist/collection/css/index.css

@@ -88,7 +88,7 @@ body {
   flex-direction: row-reverse;
   align-items: center;
   justify-content: center !important;
-  gap: 145px;
+  gap: 80px;
 }
 
 /* Drag element inside popup */

package/dist/collection/utils/utils.js

@@ -94,7 +94,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     else {
                         dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
                     }
-                    if (dragElement.getAttribute("hasDummy") === "true")
+                    if (dragElement.getAttribute('hasDummy') === 'true')
                         return;
                     afterDropDragHandling(dragElement, dropElement);
                     break;
@@ -195,7 +195,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 dummyElement.removeAttribute('drop-time');
                 dragElement.style.width = dropElement.style.width;
                 dragElement.style.height = dropElement.style.height;
-                dragElement.setAttribute("hasDummy", "true");
+                dragElement.setAttribute('hasDummy', 'true');
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -489,6 +489,7 @@ export const validateObjectiveStatus = async () => {
                 await executeActions(onCorrect, container);
             }
             triggerNextContainer();
+            await calculateScore();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -496,9 +497,9 @@ export const validateObjectiveStatus = async () => {
             const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
             if (!isContinueOnCorrect) {
                 triggerNextContainer();
+                await calculateScore();
             }
         }
-        await calculateScore();
     }
 };
 export const triggerNextContainer = () => {

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

@@ -329,7 +329,7 @@ export const findMostoverlappedElement = (element, type) => {
         if (type === 'slide') {
             const elementArea = elementRect.width * elementRect.height;
             const otherArea = otherRect.width * otherRect.height;
-            const minRequiredOverlap = Math.min(elementArea, otherArea) * 0.8;
+            const minRequiredOverlap = Math.min(elementArea, otherArea) * 0.1;
             if (overlapArea >= minRequiredOverlap && overlapArea > maxOverlapArea) {
                 maxOverlapArea = overlapArea;
                 mostOverlappedElement = otherElement;
@@ -524,6 +524,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
                     container.append(div);
                     div.classList.add('after-drop-popup-container');
                     const hasType = dragElement.nextElementSibling;
+                    dragElement.style.scale = `1`;
+                    dropElement.style.scale = `1`;
                     // Remove from old parents
                     if (hasType && hasType.getAttribute('type') === 'drag') {
                         dragElement.remove();