lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

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

@@ -33,7 +33,6 @@ export class LidoTrace {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
-        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -50,8 +49,8 @@ export class LidoTrace {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 375, // Increased general proximity threshold (was 100)
-            freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
+            proximityThreshold: 100, // General proximity threshold
+            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
             rafId: null,
             pointerMoveEvent: null,
             activePointerId: null,
@@ -387,7 +386,7 @@ export class LidoTrace {
     }
     // Modified handlePointerMove function
     handlePointerMove(state) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -399,15 +398,6 @@ export class LidoTrace {
             x: parseFloat(state.circle.getAttribute('cx')),
             y: parseFloat(state.circle.getAttribute('cy')),
         };
-        // Only update if pointer moved a minimum distance (to reduce unnecessary updates)
-        const MOVE_THRESHOLD = 1; // px
-        if (state.lastPointerPos) {
-            const dx = pointerPos.x - state.lastPointerPos.x;
-            const dy = pointerPos.y - state.lastPointerPos.y;
-            if (dx * dx + dy * dy < MOVE_THRESHOLD * MOVE_THRESHOLD) {
-                return;
-            }
-        }
         const currentPath = state.paths[state.currentPathIndex];
         if (!currentPath) {
             console.error('No valid path found at the current index');
@@ -435,76 +425,48 @@ export class LidoTrace {
         }
         // For free trace mode and blind free trace mode, allow free drawing only if within the reduced proximity threshold
         if (state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace) {
-            // Throttle: Only update every 2nd event (for reducing excessive dom updates)
-            this.freeTraceUpdateCounter = (this.freeTraceUpdateCounter || 0) + 1;
-            if (this.freeTraceUpdateCounter % 2 !== 0) {
-                return;
-            }
             // Initialize the currentFreePath array if it's not created
             if (!state.currentFreePath) {
                 state.currentFreePath = [];
             }
-            // Create a new polyline element if it's the first trace for the current path index
+            // Create a new path element if it's the first trace for the current path index
             if (!state.currentFreePath[state.currentPathIndex]) {
-                const newPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                // newPath.setAttribute('stroke', 'green');
                 const strokeWidth = state.paths[state.currentPathIndex].style['stroke-width'] || state.paths[state.currentPathIndex].getAttribute('stroke-width');
-                newPolyline.setAttribute('stroke-width', strokeWidth);
-                newPolyline.setAttribute('fill', 'none');
-                newPolyline.setAttribute('stroke-linecap', 'round');
-                newPolyline.setAttribute('stroke', 'lightgreen');
-                newPolyline.setAttribute('points', `${pointerPos.x},${pointerPos.y}`);
-                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPolyline);
-                state.currentFreePath[state.currentPathIndex] = newPolyline;
-                // Store points array for this polyline
-                state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
-                state.currentFreePolylinePoints[state.currentPathIndex] = [
-                    { x: pointerPos.x, y: pointerPos.y }
-                ];
+                newPath.setAttribute('stroke-width', strokeWidth);
+                newPath.setAttribute('fill', 'none');
+                newPath.setAttribute('stroke-linecap', 'round');
+                newPath.setAttribute('stroke', 'lightgreen');
+                // Start the new path at the current pointer position
+                newPath.setAttribute('d', `M${pointerPos.x},${pointerPos.y}`);
+                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPath);
+                state.currentFreePath[state.currentPathIndex] = newPath;
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
-                // Add a points counter to limit path growth
-                state.freeTracePointsCount = 1;
             }
-            // Limit the number of points in the free trace path for performance
-            const MAX_FREE_TRACE_POINTS = 10;
-            state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
-            if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
-                // If limit reached, skip adding more points
-                return;
-            }
-            // Add the new point to the polyline's points array
-            state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
-            let pointsArr = state.currentFreePolylinePoints[state.currentPathIndex] || [];
-            pointsArr.push({ x: pointerPos.x, y: pointerPos.y });
-            state.currentFreePolylinePoints[state.currentPathIndex] = pointsArr;
-            // Update the polyline's points attribute
-            const pointsStr = pointsArr.map(pt => `${pt.x},${pt.y}`).join(' ');
-            state.currentFreePath[state.currentPathIndex].setAttribute('points', pointsStr);
+            // Get the previous position to draw a smooth curve
+            const previousPos = state.lastPointerPos || pointerPos;
+            // Create a quadratic curve from the previous point to the current point
+            const newPathData = state.currentFreePath[state.currentPathIndex].getAttribute('d');
+            const midPointX = (previousPos.x + pointerPos.x) / 2;
+            const midPointY = (previousPos.y + pointerPos.y) / 2;
+            const updatedPathData = `${newPathData} Q ${previousPos.x},${previousPos.y} ${midPointX},${midPointY}`;
+            // Update the path's 'd' attribute with the new curve
+            state.currentFreePath[state.currentPathIndex].setAttribute('d', updatedPathData);
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // Only re-append if not already children list
-            const childNodes = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.childNodes;
-            let circleFound = false;
-            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
-                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
-                if (child && child.tagName === 'circle') {
-                    circleFound = true;
-                    break; // No need to continue once found
-                }
-            }
-            // If not found, append the circle
-            if (!circleFound && state.circle) {
-                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
-            }
+            // Make sure the red dot (circle) is always on top
+            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
-            // For polyline, estimate the end by number of points (not path length)
-            if (pointsArr.length >= MAX_FREE_TRACE_POINTS) {
+            const currentPathLength = currentPath.getTotalLength();
+            const distanceToEnd = currentPathLength - closestPoint.length;
+            // If close to the end of the path, move to the next path
+            if (distanceToEnd < 5) {
                 this.moveToNextPath(state);
                 state.currentFreePath[state.currentPathIndex] = null; // Reset free path for next path
-                state.currentFreePolylinePoints[state.currentPathIndex] = [];
-                state.freeTracePointsCount = 0;
             }
             // this.resetIdleTimer(state); // ← keep timer alive
             return; // Exit early since we're in free trace or blind free trace mode
@@ -512,62 +474,24 @@ export class LidoTrace {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         if (state.isDragging && closestPoint.length >= state.lastLength) {
             state.lastLength = closestPoint.length;
-            // Only update the circle if it moved enough
-            if (Math.abs(closestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(closestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
-                state.circle.setAttribute('cx', closestPoint.x.toString());
-                state.circle.setAttribute('cy', closestPoint.y.toString());
-            }
-            // Only re-append if not already children list
-            const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
-            let circleFound = false;
-            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
-                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
-                if (child && child.tagName === 'circle') {
-                    circleFound = true;
-                    break; // No need to continue once found
-                }
-            }
-            // If not found, append the circle
-            if (!circleFound && state.circle) {
-                (_e = state.svg) === null || _e === void 0 ? void 0 : _e.appendChild(state.circle);
-            }
-            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
-            // Completion logic for closed paths: only allow completion if almost all points are traced
-            const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
-            let percentComplete = state.lastLength / state.totalPathLength;
-            let startPoint = currentPath.getPointAtLength(0);
-            let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
-            let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
-            console.log('lastLength, totalPathLength', state.lastLength, state.totalPathLength);
-            console.log('percentComplete', percentComplete);
-            console.log('startPoint, endPoint', startPoint, endPoint);
-            console.log('distance squared between start & end:', this.getDistanceSquared(startPoint, endPoint));
-            console.log('pathIsClosed:', pathIsClosed);
-            if (pathIsClosed && state.totalPathLength > 50) {
-                if (percentComplete >= COMPLETION_THRESHOLD) {
-                    if (state.currentPathIndex < state.paths.length - 1) {
-                        this.moveToNextPath(state);
-                    }
-                    else if (state.currentPathIndex === state.paths.length - 1) {
-                        this.moveToNextContainer();
-                    }
-                }
-            }
-            else {
-                // For open paths, allow completion if near the end
-                if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
-                    this.moveToNextPath(state);
-                }
-                else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
-                    this.moveToNextContainer();
-                }
-            }
+            state.circle.setAttribute('cx', closestPoint.x.toString());
+            state.circle.setAttribute('cy', closestPoint.y.toString());
+            // Make sure the red dot (circle) is always on top
+            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+        }
+        // Check if the current path is completed
+        if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+            this.moveToNextPath(state);
+        }
+        else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+            //   this.loadAnotherSVG(state, true);
+            this.moveToNextContainer();
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
-        this.isDragging = false;
         if (this.moving)
             return; // Prevent multiple calls
         this.moving = true; // Set moving to true to prevent re-entrance
@@ -578,19 +502,17 @@ export class LidoTrace {
             await this.playTraceAnimation();
         }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
-        console.log('Total SVGs:', this.svgUrls.length);
+        const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
+            await new Promise(resolve => setTimeout(resolve, delay));
             this.currentSvgIndex++;
             await this.initializeSVG();
             this.moving = false;
             return;
         }
-        console.log('onCorrect:', this.onCorrect);
-        console.log('el :', this.el);
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
-        console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -608,13 +530,13 @@ export class LidoTrace {
         const dy = p1.y - p2.y;
         return dx * dx + dy * dy;
     }
-    // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
+    // Find the closest point on the given path to the specified point using two-pass sampling
     getClosestPointOnPath(pathNode, point) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // Optimized: Increase coarse steps for better performance
-        const coarseStep = 40; // was 20
+        // First pass: coarse sampling
+        const coarseStep = 20; // Increased step for better performance
         let coarseClosestPoint = { x: 0, y: 0, length: 0 };
         let coarseMinDistanceSquared = Infinity;
         for (let i = 0; i <= pathLength; i += coarseStep) {
@@ -630,7 +552,7 @@ export class LidoTrace {
             }
         }
         // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 6; // was 2
+        const fineStep = 2; // Increased step to reduce computations
         const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
         const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
         for (let i = searchStart; i <= searchEnd; i += fineStep) {
@@ -790,7 +712,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: 'ca50ce7efcc822c69b8bd673993dace0b7ccad75', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'e473c6c488d952be730ee0a659d216afe41d34a2', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '6be6d97477a80afc0275eef5b17718a5f43ce358', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '4e650d7142c61549aec021fd2a8da4e592eaf94e', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -1194,7 +1116,6 @@ export class LidoTrace {
             "fileIndex": {},
             "isDragging": {},
             "activePointerId": {},
-            "freeTraceUpdateCounter": {},
             "idleTimer": {},
             "fingerImg": {}
         };

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

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '8f9a578e3bf8c491373b7564b93c05de92a3e1a7', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '0dbba1d2c88bac9a29bb81340698f5f3cb36c7be' })));
+        return (h(Host, { key: '7e2bb4af31b5aff0f063a9f6c3cab96cdd25f31f', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '03179b28e45692e61aff0bf3634ef0a72bab0726' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {

package/dist/collection/css/animation.css

@@ -171,4 +171,25 @@
   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; }
+}
+
+@keyframes glowPulse {
+  0% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
+  50% {
+    filter: drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 40px yellow)
+            drop-shadow(0 0 50px orange);
+  }
+  100% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
 }

package/dist/collection/css/index.css

@@ -231,3 +231,48 @@ body {
   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;
+
+  /* this line ensures tint fits only in visible image area */
+  mask-image: var(--mask-url);
+  mask-size: cover;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}

package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js

@@ -83,57 +83,56 @@ function getContainerXml(args) {
     return `
    <main>
 		<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.png" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
-		 <lido-text id="fullSentence" visible="false" onEntry="this.display='none';" string="{full_sentence}" audio="{full_sentence_audio}"></lido-text>
-           <!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.-87px, portrait.541px" y="landscape.350px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='leftToPlace 2.5s linear';">
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1267px, portrait.541px" y="landscape.587px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
 			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
 			</lido-avatar>
 		</lido-cell>
 
 		<!--Parent cell  -->
-		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent" margin="landscape.0,portrait.-90px 0px 0px 0px">
+		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
 			<!-- heading -->
 			<lido-cell   visible="true" margin="landscape.12px 0px -17px 0px, portrait.0px 0px 0px;">
-				<lido-text show-speak-icon="true" id="heading" tab-index="1" width="landscape.354px,portrait.433px" visible="true" audio="${args.headingAudio}" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="black" font-size="landscape.45px, portrait.45px" bg-color="transparent" onEntry=" this.fontWeight='700';" margin="landscape.32px 0px 4px 0px,portrait.18px 0px 0px 0px">
+				<lido-text show-speak-icon="true" id="heading" tab-index="1" width="354px" visible="true" audio="${args.headingAudio}" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="black" font-size="landscape.36px, portrait.40px" bg-color="transparent" onEntry=" this.fontWeight='700';" margin="landscape.32px 0px 4px 0px,portrait.18px 0px 0px 0px">
 				</lido-text>
 			</lido-cell>
 			<!-- fill up based on image -->
 
-			<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.90%, portrait.100%" height="landscape.70%, portrait.80%" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';" margin="landscape.0 , portrait.-18px 0px 0px 0px">
+			<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.auto, portrait.69%" height="landscape.59%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';" margin="landscape.0 , portrait.18px 0px 0px 0px">
 
 				<!-- image -->
-				${args.img.length === 0 ? '' : `<lido-image id="image1" disable-edit="true" visible="true" src="${args.img}" width="landscape.542px, portrait.100%" height="landscape.100%, portrait.62%" margin="landscape.0px 0px 0px 0px , portrait. 0">
+				${args.img.length === 0 ? '' : `<lido-image id="image1" disable-edit="true" visible="true" src="${args.img}" width="landscape.515px, portrait.100%" height="landscape.100%, portrait.62%" margin="landscape.0px 0px 0px 0px , portrait. 0">
 				</lido-image>`}
 				<!-- text -->
 
 				
 
-				<lido-cell layout="flex" bg-Color="transparent"  visible="true" height="landscape.100%,portrait.80%" width="landscape.754px, portrait.100%" onEntry="this.align-content='center'; this.gap='32px';this.display='ruby';" margin="landscape.21px 0px 0px 61px, portrait.45px 6px 0px 64px">
+				<lido-cell layout="flex" bg-Color="transparent"  visible="true" height="landscape.100%,portrait.auto" width="landscape.600px, portrait.97%" onEntry="this.align-content='center'; this.gap='32px';this.display='ruby';" margin="landscape.21px 0px 0px 61px, portrait.33px 0px 0px 64px">
 
-					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text1}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="3" drop-attr="stretch" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer1}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow='';this.fontWeight='600'; this.margin-right='35px';" ></lido-text>
-					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text2}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
-					<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text3}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 18px 0px 0px';"></lido-text>
-					<lido-text tab-index="6" drop-attr="stretch" id="drop2" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer2}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; this.fontWeight='600';" ></lido-text>
-					<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text4}" bg-color="transparent"  onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text5}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="9" drop-attr="stretch" id="drop3" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer3}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; this.fontWeight='600'; "></lido-text>
-					<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text6}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px';"></lido-text>
-					<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text7} " bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="12" id="drop4" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer4}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px'; this.fontWeight='600'; this.margin-top='17px';" ></lido-text>
-					<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text8}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text1}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="3" drop-attr="stretch" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer1}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
+					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text2}" bg-color="transparent" onEntry="this.position='relative';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text3}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 18px 0px 0px';"></lido-text>
+					<lido-text tab-index="6" drop-attr="stretch" id="drop2" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer2}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; " ></lido-text>
+					<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text4}" bg-color="transparent"  onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text5}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="9" drop-attr="stretch" id="drop3" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer3}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px';  "></lido-text>
+					<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text6}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px';"></lido-text>
+					<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text7} " bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="12" id="drop4" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer4}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px'; this.margin-top='17px';" ></lido-text>
+					<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text8}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
 
 				</lido-cell>
 				
 			</lido-cell>
-			<lido-cell layout="landscape.row, portrait.wrap" childElementsLength="4" onEntry="this.gap='28px';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 0px 74px 0px, portrait.34px 128px 0px 130px">
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option1Audio}" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="landscape.46px,portrait.45px"   type="drag">
+			<lido-cell layout="landscape.row, portrait.wrap" childElementsLength="4" onEntry="this.gap='28px';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 383px 74px 0px, portrait.34px 128px 0px -113px">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option1Audio}" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="40px"   type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option2Audio}" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="landscape.46px,portrait.45px"  type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option2Audio}" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="40px"  type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option3Audio}" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="landscape.46px,portrait.45px" type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option3Audio}" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='400'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="40px" type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option4Audio}" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="landscape.46px,portrait.45px"   type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option4Audio}" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="40px"   type="drag">
 				</lido-text>
 			</lido-cell>
 			

package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js

@@ -97,9 +97,6 @@ function getContainerXml(args) {
               <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
               </lido-avatar>
           </lido-cell>
-
-          
-          
           <lido-cell layout="pos" value="pos2" tab-index="3" id="pos2" visible="true" height="landscape.305px, portrait.auto " width="landscape.100%, portrait.100%;" y="landscape.-35%, portrait.-12%" x="landscape.23%, portrait.0%" onEntry="this.background-color='transparent'">
               <lido-image id="board_bg_wordnote" tab-index="4" disable-edit="true" visible="true" src="https://media.githubusercontent.com/media/chimple/bahama/refs/heads/master/assets/games/rocket/textures/board_bg_wordnote.png">
               </lido-image>

package/dist/collection/stories/Templates/balancing/balancing.stories.js

@@ -0,0 +1,67 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/Balancing',
+    argTypes: {
+        leftValue: { control: 'text' },
+        rightValue: { control: 'text' },
+        objective: { control: 'text' },
+    },
+};
+export default meta;
+export const Balancing = {
+    args: {
+        leftValue: '10-5',
+        rightValue: '11-2',
+        objective: '>',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function escapeXml(str) {
+    if (!str)
+        return '';
+    return str.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+function getContainerXml(args) {
+    const objective = escapeXml(args.objective);
+    const leftValue = escapeXml(args.leftValue);
+    const rightValue = escapeXml(args.rightValue);
+    return `
+   <main>
+    <lido-container visible="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
+      <!-- Check Button -->
+      <lido-pos id="pos1" disable-edit="true" value="pos1" height="70px" width="150px" x="landscape.1324px,portrait.639px" y="landscape.220px,portrait.28%" aria-hidden="true" z="1" bg-color="transparent" type="" visible="true" audio="col1.mp3" onTouch="" onCorrect="" onEntry="">
+        <lido-text id="lido-checkButton" visible="true" bg-color="#5b5bd3" width="150px" height="70px" string="Check" type="click" font-family="'Baloo 2', serif" font-size="30px" font-color="white" onEntry="this.fontWeight='800'; this.addClass='lido-disable-check-button';">
+        </lido-text>
+      </lido-pos>
+      <!-- question -->
+      <lido-text visible="true" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.12%,portrait.-4%" onEntry="this.font-weight='600'; this.position='relative';">
+      </lido-text>
+      <lido-balance  tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.180px,portrait.6%" width="landscape.1136px,portrait.876px">
+      </lido-balance>
+      <!-- drop Element -->
+      <lido-cell layout="row" visible="true" id="leftparent" heigth="auto" width="auto" bg-Color="transparent" y="landscape.-158px,portrait.-276px" x="landscape.-357px,portrait.-293px" onEntry="this.position='relative';">
+        <lido-text visible="true" id="lefthandle1" tab-index="1" value="" height="126px" width="120px" type="drop"></lido-text>
+      </lido-cell>
+      <lido-cell layout="row" visible="true" id="rightparent" heigth="auto" width="auto" bg-Color="transparent" onEntry="this.position='relative';" y="landscape.-32%,portrait.-26%" x="landscape.22%,portrait.31%">
+        <lido-text visible="true" id="righthandle1" tab-index="2" value="" height="126px" width="120px" type="drop"></lido-text>
+      </lido-cell>
+      <!-- dragElements -->
+      <lido-cell visible="true" height="130px" width="80%" layout="row" onEntry="this.position='relative';" y="-35px">
+        <lido-image  is-slice="true" height="126px" width="188px" audio="" id="drag1" value="${leftValue}" tab-index="3" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
+          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="188px" audio="" visible="true" onEntry="this.fontWeight='600';" string="${leftValue}" fontColor="black" font-size="40px"></lido-text>
+        </lido-image>
+        <lido-image is-slice="true"  height="126px" width="188px" audio="" id="drag2" value="${rightValue}" tab-index="4" visible="true"  x="78%" y="0%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/big_fruit.png" type="drag">
+          <lido-text font-family="'Baloo Bhai 2'" height="126px" width="188px" audio="" visible="true" onEntry="this.fontWeight='600';" string="${rightValue}" fontColor="black" font-size="40px"></lido-text>
+        </lido-image>
+      </lido-cell>
+    </lido-container>
+   </main>
+  `;
+}