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

package/dist/components/p-44808985.js

@@ -0,0 +1,186 @@
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-bed94c37.js';
+
+const lidoBalanceCss = "#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^=\"M78.9414\"]{fill:white}";
+const LidoBalanceStyle0 = lidoBalanceCss;
+
+const LidoBalance = /*@__PURE__*/ proxyCustomElement(class LidoBalance extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.currentAngle = 0;
+        this.pivotimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg';
+        this.scaleimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg';
+        this.handlerimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg';
+        this.fill = 'brown';
+        this.tilt = 0;
+        this.maxTilt = 9.5;
+        this.onEntry = '';
+        this.height = 'auto';
+        this.width = 'auto';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.visible = false;
+        this.margin = '';
+        this.padding = '';
+        this.balanceSymbol = '=';
+        this.showSymbol = false;
+        this.operation = 'count';
+        this.pivotSvg = '';
+        this.scaleSvg = '';
+        this.handlerSvg = '';
+        this.style = {};
+        this.tiltf = 0;
+        this.leftVal = 0;
+        this.rightVal = 0;
+    }
+    async revealSymbol() {
+        this.showSymbol = true;
+    }
+    async hideSymbol() {
+        this.showSymbol = false;
+    }
+    async componentWillLoad() {
+        this.updateStyles();
+        this.pivotSvg = await this.fetchAndApplyFill(this.pivotimage);
+        this.scaleSvg = await this.fetchAndApplyFill(this.scaleimage);
+        this.handlerSvg = await this.fetchAndApplyFill(this.handlerimage);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.animateBalance();
+        }, 4000);
+        this.leftParentEl = document.getElementById("leftparent");
+        this.rightParentEl = document.getElementById("rightparent");
+        initEventsForElement(this.el);
+    }
+    disconnectedCallback() {
+        if (this.animationFrameId != null)
+            cancelAnimationFrame(this.animationFrameId);
+    }
+    async fetchAndApplyFill(url) {
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                return '';
+            let svg = await res.text();
+            svg = svg.replace(/fill="[^"]*"/g, '');
+            svg = svg.replace(/stroke="[^"]*"/g, '');
+            svg = svg.replace(/<svg([^>]*)>/, `<svg$1 fill="${this.fill}" stroke="${this.fill}">`);
+            return svg;
+        }
+        catch (e) {
+            console.error('SVG fetch failed:', e);
+            return '';
+        }
+    }
+    tiltChanged(newValue) {
+        this.tiltf = newValue;
+    }
+    async updateTilt(leftVal, rightVal) {
+        const diff = rightVal - leftVal;
+        const newTilt = Math.max(-5, Math.min(5, diff));
+        this.tiltf = newTilt;
+    }
+    animateBalance() {
+        const rotate = () => {
+            let targetAngle = (this.tiltf / 5) * this.maxTilt;
+            if (targetAngle > this.maxTilt)
+                targetAngle = this.maxTilt;
+            if (targetAngle < -this.maxTilt)
+                targetAngle = -this.maxTilt;
+            this.currentAngle += (targetAngle - this.currentAngle) * 0.1;
+            if (this.currentAngle > this.maxTilt)
+                this.currentAngle = this.maxTilt;
+            if (this.currentAngle < -this.maxTilt)
+                this.currentAngle = -this.maxTilt;
+            if (this.scaleEl) {
+                this.scaleEl.style.transform = `rotate(${this.currentAngle}deg)`;
+                this.scaleEl.style.transformOrigin = '50% 80%';
+            }
+            if (this.leftParentEl && this.rightParentEl) {
+                const maxOffset = 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftParentEl.style.transform = `translateY(${-offset}px)`;
+                this.rightParentEl.style.transform = `translateY(${offset}px)`;
+            }
+            if (this.leftHandleEl && this.rightHandleEl) {
+                const isPortrait = window.innerHeight > window.innerWidth;
+                const maxOffset = isPortrait ? 40 : 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftHandleEl.style.transform = `translateY(${-offset}px)`;
+                this.rightHandleEl.style.transform = `translateY(${offset}px)`;
+            }
+            this.animationFrameId = requestAnimationFrame(rotate);
+        };
+        rotate();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: parseProp(this.height, orientation),
+            width: parseProp(this.width, orientation),
+            top: parseProp(this.y, orientation),
+            left: parseProp(this.x, orientation),
+            zIndex: this.z,
+            display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none',
+            margin: parseProp(this.margin, orientation),
+            padding: parseProp(this.padding, orientation),
+        };
+    }
+    render() {
+        return (h(Host, { key: '868cc05ae503a6e04039c615815102470eb402d4', id: "lido-balance", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '2627a49d1ad5045bd9a3ac217354c9be98f1f52b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'c5b2432f5e3c62ebbb7f17146f18e22e7e2b29bb', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'd5e8051aedb784189f19a1e7b0dfd645e95ed4a5', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '3779886d4fc8dfadc0791f69cb87df78d5f843c8', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'df5d4094c302548bf64f166643a3f05d262d95b1', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "tilt": ["tiltChanged"]
+    }; }
+    static get style() { return LidoBalanceStyle0; }
+}, [0, "lido-balance", {
+        "pivotimage": [1],
+        "scaleimage": [1],
+        "handlerimage": [1],
+        "fill": [1],
+        "tilt": [2],
+        "maxTilt": [2, "max-tilt"],
+        "onEntry": [1, "on-entry"],
+        "height": [1],
+        "width": [1],
+        "x": [1],
+        "y": [1],
+        "z": [1],
+        "visible": [8],
+        "margin": [1],
+        "padding": [1],
+        "balanceSymbol": [1537, "balance-symbol"],
+        "showSymbol": [1540, "show-symbol"],
+        "operation": [1],
+        "pivotSvg": [32],
+        "scaleSvg": [32],
+        "handlerSvg": [32],
+        "style": [32],
+        "tiltf": [32],
+        "leftVal": [32],
+        "rightVal": [32],
+        "revealSymbol": [64],
+        "hideSymbol": [64],
+        "updateTilt": [64]
+    }, undefined, {
+        "tilt": ["tiltChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lido-balance"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lido-balance":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LidoBalance);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LidoBalance as L, defineCustomElement as d };

package/dist/components/{p-4cabbf28.js → p-52844fa4.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-bed94c37.js';
 
 const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;
@@ -80,7 +80,7 @@ const LidoCol = /*@__PURE__*/ proxyCustomElement(class LidoCol extends H {
         };
     }
     render() {
-        return (h(Host, { key: '753487ca4817b020aaf7e34dadff00a61c826dfc', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'a9d9f0f2c30dc02e6468e597b5a02e032d786538' })));
+        return (h(Host, { key: '1cf21bb1e817c9078213312aa7165423eaf54ea7', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'c3bc168ccccacf1425b5d93853bc27ab2962436f' })));
     }
     get el() { return this; }
     static get style() { return LidoColStyle0; }

package/dist/components/{p-4882df37.js → p-73e31a86.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, m as parseProp, T as fraction, h, j as Host } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, U as fraction, h, j as Host } from './p-bed94c37.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: 'a7be214e99b8917ebe3d4ae0275036e77967d3b7', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e3210823de751a3fdff90b54bf93fc13890ca28a', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '57ee54a6a0e7d3bbac893ce535a3375ea529e75a', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '386330e0562851f2f00aba169018c23bf5ffa4b7', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-af54a485.js → p-74849cdd.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, I as executeActions, F as triggerNextContainer, o as handleFloatElementPosition, O as storingEachActivityScore, Q as DropAction, m as parseProp, h, j as Host } from './p-cfa2aec8.js';
-import { d as defineCustomElement$1 } from './p-cac6c8bf.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, o as executeActions, O as triggerNextContainer, u as handleFloatElementPosition, n as storingEachActivityScore, Q as DropAction, k as parseProp, h, j as Host } from './p-bed94c37.js';
+import { d as defineCustomElement$1 } from './p-afbc196f.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;
@@ -118,10 +118,10 @@ const LidoKeyboard = /*@__PURE__*/ proxyCustomElement(class LidoKeyboard extends
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: 'b01d3c5bab495def25c14239a3c94e9f6af15b4f', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '1e475df899a9e8cead3d4ee313d6e0b09a1e766f', class: "input-area" }, h("input", { key: '1d27787a42dc81ba97d5045718d726683bf8f32a', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '5695c9662b22bd7c3d7c7dfc49481641e795b290', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: 'e4cd1fc51d8d3c87ed011120f13454bbef1883b3', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '114224c18345951e749db6f1eba242cc1179431f', class: "input-area" }, h("input", { key: '14741df7dc29f51420c1164ddebf60fd464fade4', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '3bb801fbcab03b58a628c4c365f46113e9829fdc', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: 'd1a786e8f4015c7aeaeffe7a677f1f7e106b3691', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'bdd01380b832949bf2abbe4481ac000c1f3a358f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: 'd54959bfe639803c7e048d5112514a7dccbf9dc4', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '46212bcfe4e5c22744d13d8235d82bdb73bce802', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'a886ac1d7ceadda37eadd4bed59bd5096d46619f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '5238d1dc1bafda2ffab63932d1f5d29ef449bf4b', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

package/dist/components/{p-9c56f378.js → p-7f7e5672.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-bed94c37.js';
 
 const lidoRowCss = ".lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}";
 const LidoRowStyle0 = lidoRowCss;
@@ -77,7 +77,7 @@ const LidoRow = /*@__PURE__*/ proxyCustomElement(class LidoRow extends H {
         };
     }
     render() {
-        return (h(Host, { key: '03f15dcfc2abc394d0313d4b40dd6465a19dc34a', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: 'fbb5e6ce6b8436d718c043561e0d92908baaabdc' })));
+        return (h(Host, { key: '4c1f45afe8866df81a6a798afe348e03fa1f4292', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: '194de56621025a4b1a4fdb6ccae347f34dc19fdb' })));
     }
     get el() { return this; }
     static get style() { return LidoRowStyle0; }

package/dist/components/{p-4dbae73b.js → p-835b973d.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-bed94c37.js';
 
 const lidoWrapCss = ".lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}";
 const LidoWrapStyle0 = lidoWrapCss;
@@ -78,7 +78,7 @@ const LidoWrap = /*@__PURE__*/ proxyCustomElement(class LidoWrap extends H {
         };
     }
     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' })));
     }
     get el() { return this; }
     static get style() { return LidoWrapStyle0; }

package/dist/components/{p-b55af747.js → p-90465904.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, U as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, V as speakIcon, I as executeActions, F as triggerNextContainer, L as LidoContainer, m as parseProp, h, j as Host, W as fingerUrl } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, V as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, W as speakIcon, o as executeActions, O as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, X as fingerUrl } from './p-bed94c37.js';
 
 const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;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;
@@ -36,7 +36,6 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
-        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -53,8 +52,8 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             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,
@@ -390,7 +389,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
     }
     // 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)
@@ -402,15 +401,6 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             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');
@@ -438,76 +428,48 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         }
         // 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
@@ -515,62 +477,24 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         // 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
@@ -581,19 +505,17 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             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
@@ -611,13 +533,13 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         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) {
@@ -633,7 +555,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             }
         }
         // 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) {
@@ -793,7 +715,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     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 assetsDirs() { return ["svg", "images"]; }
     get el() { return this; }
@@ -832,7 +754,6 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         "fileIndex": [32],
         "isDragging": [32],
         "activePointerId": [32],
-        "freeTraceUpdateCounter": [32],
         "idleTimer": [32],
         "fingerImg": [32]
     }, undefined, {

package/dist/components/{p-cae021c6.js → p-904711c8.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-cfa2aec8.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-bed94c37.js';
 
 const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
 const LidoShapeStyle0 = lidoShapeCss;
@@ -52,7 +52,7 @@ const LidoShape = /*@__PURE__*/ proxyCustomElement(class LidoShape extends H {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: '887f02445ef694f84ebc85e05e4dfb740d0bc78b', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: 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, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: '6712d974e85c5d82dabb5ed0d482ece4b18af16a', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: 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, "disable-speak": this.disableSpeak }));
     }
     get el() { return this; }
     static get style() { return LidoShapeStyle0; }