blue-chestnut-solar-expert 0.0.68 → 0.0.69

package/dist/collection/components/map-draw/polygon-information.js

@@ -0,0 +1,211 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+import { azimuthToCardinal } from "../../utils/utils";
+export class PolygonInformation {
+    currentPolygon;
+    numberOfPanels;
+    handleAzimuthChange;
+    handlePitchChange;
+    calculateSolarPanels;
+    markAsFlatRoof;
+    currentTool;
+    getDisplayAzimuth(azimuth) {
+        return (Math.round(azimuth) + 90) % 360;
+    }
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        // console.log(this.currentPolygon);
+        return (h("div", { key: '060e66e13afe182ecbf621c096f1c6f153e74b41', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
+                border: "1px solid var(--color-border)",
+            } }, h("div", { key: '2d0461d15674861e3823cb0d431ca9ef6dd7e5e3', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: '904865a975021b13726c7b4e7f8ca1500ff0b9dd', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: 'e8dbba596ca4e30c305967eb5ff2510134fffc02', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
+            ? (h("div", { class: "space-y-4" }, h("div", null, h("div", { class: "grid grid-cols-2 gap-2" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.area), h("p", { class: "text-lg" }, this.currentPolygon
+                ?.area
+                .toFixed(0), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.numberOfPanels ?? 0))))), h("div", { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handleAzimuthChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: this.getDisplayAzimuth(this.currentPolygon
+                    ?.azimuth ??
+                    0) }), "(", azimuthToCardinal(this.getDisplayAzimuth(this.currentPolygon.azimuth)), ")"), !state.isIOS && (h("input", { type: "range", min: "0", max: "360", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.getDisplayAzimuth(this.currentPolygon
+                    ?.azimuth ??
+                    0), onInput: (e) => {
+                    this.handleAzimuthChange(e);
+                } }))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted md:pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handlePitchChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: Math.round(this.currentPolygon
+                    ?.pitch ??
+                    0) }), "\u00B0"), !state.isIOS && (h("input", { type: "range", min: "0", max: "90", step: "1", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: Math.round(this.currentPolygon
+                    ?.pitch ??
+                    0), onInput: (e) => {
+                    this.handlePitchChange(e);
+                } }))))))
+            : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
+    }
+    static get is() { return "polygon-information"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPolygon": {
+                "type": "unknown",
+                "attribute": "current-polygon",
+                "mutable": false,
+                "complexType": {
+                    "original": "Polygon",
+                    "resolved": "Polygon",
+                    "references": {
+                        "Polygon": {
+                            "location": "import",
+                            "path": "harmonia-types",
+                            "id": "../../../harmonia/packages/harmonia-types/dist/index.d.ts::Polygon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "numberOfPanels": {
+                "type": "number",
+                "attribute": "number-of-panels",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "handleAzimuthChange": {
+                "type": "unknown",
+                "attribute": "handle-azimuth-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handlePitchChange": {
+                "type": "unknown",
+                "attribute": "handle-pitch-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "calculateSolarPanels": {
+                "type": "unknown",
+                "attribute": "calculate-solar-panels",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "markAsFlatRoof": {
+                "type": "unknown",
+                "attribute": "mark-as-flat-roof",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "currentTool": {
+                "type": "string",
+                "attribute": "current-tool",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=polygon-information.js.map

package/dist/collection/components/map-draw/polygon-information.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon-information.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-information.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon } from \"harmonia-types\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n    tag: \"polygon-information\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonInformation {\r\n    @Prop()\r\n    currentPolygon: Polygon;\r\n    @Prop()\r\n    numberOfPanels: number | undefined;\r\n    @Prop()\r\n    handleAzimuthChange: (event: Event) => void;\r\n    @Prop()\r\n    handlePitchChange: (event: Event) => void;\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n    @Prop()\r\n    markAsFlatRoof: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    private getDisplayAzimuth(azimuth: number): number {\r\n        return (Math.round(azimuth) + 90) % 360;\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        // console.log(this.currentPolygon);\r\n\r\n        return (\r\n            <div\r\n                class=\"flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2\"\r\n                style={{\r\n                    border: \"1px solid var(--color-border)\",\r\n                }}\r\n            >\r\n                <div class=\"w-full bg-primary rounded-4xl p-3 text-secondary\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    <polygon-buttons\r\n                        calculateSolarPanels={this.calculateSolarPanels}\r\n                        markAsFlatRoof={this.markAsFlatRoof}\r\n                        currentTool={this.currentTool}\r\n                    />\r\n                    {this.currentPolygon?.area\r\n                        ? (\r\n                            <div class=\"space-y-4\">\r\n                                <div>\r\n                                    <div class=\"grid grid-cols-2 gap-2\">\r\n                                        <div>\r\n                                            <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                {t.mapDraw.area}\r\n                                            </h4>\r\n                                            <p class=\"text-lg\">\r\n                                                {this.currentPolygon\r\n                                                    ?.area\r\n                                                    .toFixed(0)} m²\r\n                                            </p>\r\n                                        </div>\r\n                                        <div>\r\n                                            <div>\r\n                                                <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                    {t.mapDraw.panels}\r\n                                                </h4>\r\n                                                <p class=\"text-lg\">\r\n                                                    {this.numberOfPanels ?? 0}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                            {t.mapDraw.azimuth}\r\n                                        </h4>\r\n                                        <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                            <input\r\n                                                class=\"text-lg w-full\"\r\n                                                onKeyDown={(e) => {\r\n                                                    if (e.key === \"Enter\") {\r\n                                                        this.handleAzimuthChange(\r\n                                                            e,\r\n                                                        );\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .blur();\r\n                                                    }\r\n                                                }}\r\n                                                value={this.getDisplayAzimuth(\r\n                                                    this.currentPolygon\r\n                                                        ?.azimuth ??\r\n                                                        0,\r\n                                                )}\r\n                                            />\r\n                                            ({azimuthToCardinal(\r\n                                                this.getDisplayAzimuth(\r\n                                                    this.currentPolygon.azimuth,\r\n                                                ),\r\n                                            )})\r\n                                        </div>\r\n                                        {!state.isIOS && (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"360\"\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                                value={this.getDisplayAzimuth(\r\n                                                    this.currentPolygon\r\n                                                        ?.azimuth ??\r\n                                                        0,\r\n                                                )}\r\n                                                onInput={(e) => {\r\n                                                    this.handleAzimuthChange(e);\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                    </div>\r\n                                    <div>\r\n                                        <h4 class=\"text-sm font-medium text-text-muted md:pl-2\">\r\n                                            {t.mapDraw.pitch}\r\n                                        </h4>\r\n                                        <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                            <input\r\n                                                class=\"text-lg w-full\"\r\n                                                onKeyDown={(e) => {\r\n                                                    if (e.key === \"Enter\") {\r\n                                                        this.handlePitchChange(\r\n                                                            e,\r\n                                                        );\r\n                                                        (e.target as HTMLInputElement)\r\n                                                            .blur();\r\n                                                    }\r\n                                                }}\r\n                                                value={Math.round(\r\n                                                    this.currentPolygon\r\n                                                        ?.pitch ??\r\n                                                        0,\r\n                                                )}\r\n                                            />\r\n                                            °\r\n                                        </div>\r\n                                        {!state.isIOS && (\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min=\"0\"\r\n                                                max=\"90\"\r\n                                                step=\"1\"\r\n                                                class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                                value={Math.round(\r\n                                                    this.currentPolygon\r\n                                                        ?.pitch ??\r\n                                                        0,\r\n                                                )}\r\n                                                onInput={(e) => {\r\n                                                    this.handlePitchChange(e);\r\n                                                }}\r\n                                            />\r\n                                        )}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                        : (\r\n                            <p class=\"text-text-secondary text-center\">\r\n                                {t.mapDraw.noPolygonSelected}\r\n                            </p>\r\n                        )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/map-draw/tool-box.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+import { tools, undoTool } from "../../utils/render/tools";
+export class ToolBox {
+    currentTool;
+    undoCallback;
+    onToolSelect;
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        const undoToolStrings = t.mapDraw.tools[undoTool.name];
+        return (h("div", { key: '2d370aab5a5abc591a825e8731427987bc025104', class: "flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
+            const toolStrings = t.mapDraw.tools[tool.name];
+            return (h("button", { class: `px-3 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
+                    ? "bg-secondary hover:bg-secondary/80"
+                    : "bg-primary hover:bg-muted"}`, style: {
+                    color: this.currentTool.name === tool.name
+                        ? "var(--color-secondary-foreground)"
+                        : "var(--color-primary-foreground)",
+                    border: "1px solid var(--color-border)",
+                }, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
+        }), h("button", { key: '528e903d4e16afd09c583c1ac5e4472862e4a83d', class: `px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`, style: {
+                border: "1px solid var(--color-border)",
+            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '2e04251067a1c45dda457ed0803b1949b0425898', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: '4aa276bbf830aab8849641af22a0bfb3da01191b' }), h("span", { key: '1378fa20a41e5e510c96346f085502ed2aaaea95' }, undoToolStrings.name)))));
+    }
+    static get is() { return "tool-box"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentTool": {
+                "type": "unknown",
+                "attribute": "current-tool",
+                "mutable": false,
+                "complexType": {
+                    "original": "Tool",
+                    "resolved": "Tool",
+                    "references": {
+                        "Tool": {
+                            "location": "import",
+                            "path": "../../utils/render/tools",
+                            "id": "src/utils/render/tools.ts::Tool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "undoCallback": {
+                "type": "unknown",
+                "attribute": "undo-callback",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onToolSelect": {
+                "type": "unknown",
+                "attribute": "on-tool-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "(tool: Tool) => void",
+                    "resolved": "(tool: Tool) => void",
+                    "references": {
+                        "Tool": {
+                            "location": "import",
+                            "path": "../../utils/render/tools",
+                            "id": "src/utils/render/tools.ts::Tool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=tool-box.js.map

package/dist/collection/components/map-draw/tool-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,mGAAmG;YACzG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,wDACH,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,oCAAoC;wBACtC,CAAC,CAAC,2BACV,EAAE,EACF,KAAK,EAAE;wBACH,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;4BACtC,CAAC,CAAC,mCAAmC;4BACrC,CAAC,CAAC,iCAAiC;wBACvC,MAAM,EAAE,+BAA+B;qBAC1C,gBACW,WAAW,CAAC,SAAS,EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,8IAA8I,EACrJ,KAAK,EAAE;oBACH,MAAM,EAAE,+BAA+B;iBAC1C,gBACW,eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n    tag: \"tool-box\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToolBox {\r\n    @Prop()\r\n    currentTool: Tool;\r\n    @Prop()\r\n    undoCallback: () => void;\r\n    @Prop()\r\n    onToolSelect: (tool: Tool) => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n        return (\r\n            <div class=\"flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs\">\r\n                {tools.map((tool) => {\r\n                    const toolStrings = t.mapDraw.tools[tool.name];\r\n                    return (\r\n                        <button\r\n                            class={`px-3 py-2 rounded-4xl transition-colors duration-200 ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-secondary hover:bg-secondary/80\"\r\n                                    : \"bg-primary hover:bg-muted\"\r\n                            }`}\r\n                            style={{\r\n                                color: this.currentTool.name === tool.name\r\n                                    ? \"var(--color-secondary-foreground)\"\r\n                                    : \"var(--color-primary-foreground)\",\r\n                                border: \"1px solid var(--color-border)\",\r\n                            }}\r\n                            aria-label={toolStrings.ariaLabel}\r\n                            title={toolStrings.explanation}\r\n                            onClick={() => this.onToolSelect(tool)}\r\n                        >\r\n                            <div class=\"flex items-center gap-1 flex-col\">\r\n                                <icon-selector name={tool.icon} />\r\n                                <span>{toolStrings.name}</span>\r\n                            </div>\r\n                        </button>\r\n                    );\r\n                })}\r\n                <button\r\n                    class={`px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`}\r\n                    style={{\r\n                        border: \"1px solid var(--color-border)\",\r\n                    }}\r\n                    aria-label={undoToolStrings.ariaLabel}\r\n                    title={undoToolStrings.explanation}\r\n                    onClick={() => this.undoCallback()}\r\n                >\r\n                    <div class=\"flex items-center gap-1 flex-col\">\r\n                        <undo-icon />\r\n                        <span>{undoToolStrings.name}</span>\r\n                    </div>\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/map-draw/tutorial-component.js

@@ -0,0 +1,219 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+export class TutorialComponent {
+    onClose;
+    onSkip;
+    showSkipButton = false;
+    title;
+    description;
+    videoSource;
+    isLoading = true;
+    dotCount = 0;
+    isVideoPlaying = false;
+    dotInterval;
+    handleCloseTutorial = () => {
+        if (this.onClose) {
+            this.onClose();
+        }
+    };
+    handleSkipTutorial = () => {
+        if (this.onSkip) {
+            this.onSkip();
+        }
+    };
+    handleVideoLoadStart = () => {
+        this.isLoading = true;
+    };
+    handleVideoCanPlay = () => {
+        this.isLoading = false;
+        this.stopDotAnimation();
+    };
+    handleVideoPlay = () => {
+        this.isVideoPlaying = true;
+    };
+    handleVideoPause = () => {
+        this.isVideoPlaying = false;
+    };
+    handleVideoClick = () => {
+        if (state.isMobile) {
+            const video = document.querySelector("video");
+            if (video) {
+                if (video.paused) {
+                    video.play();
+                }
+                else {
+                    video.pause();
+                }
+            }
+        }
+    };
+    componentWillLoad() {
+        this.startDotAnimation();
+    }
+    componentWillUnload() {
+        this.stopDotAnimation();
+    }
+    startDotAnimation() {
+        this.dotInterval = window.setInterval(() => {
+            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)
+        }, 500); // Change every 500ms
+    }
+    stopDotAnimation() {
+        if (this.dotInterval) {
+            clearInterval(this.dotInterval);
+            this.dotInterval = null;
+        }
+    }
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        // Use provided props or fall back to default values
+        const tutorialTitle = this.title || t.mapDraw.tutorial.title;
+        const tutorialDescription = this.description ||
+            t.mapDraw.tutorial.description;
+        const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
+        return (h("div", { key: '2f9134a303787f3f1bef384971812aebb664ef44', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '98d065ba7e264dfe3317defec98dda11dac51315', class: "absolute inset-0", style: {
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+            } }), h("div", { key: 'cf65eb0cf7a7663fa9e199089e115117dbcf3ee7', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'df0111b1ab74a04b5141eed9f44c2a7a25c2d363', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: 'ce343c8ce4216038e523a86ea64233177d4da27d', class: "w-full text-center space-y-4" }, h("h2", { key: 'fbedfae3afbd578e20a2b42bcafbed33636d4206', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: 'd13ab83f9278cd645a0bb03010d7c703b930ad23', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '46a5cd8d8dc850b4eeda9eaa6066d1de1bae98d2', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: 'd2ece90512af28d8fa078be7a0a9e354ce3c4cf0', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, this.isLoading && (h("div", { key: 'd9d72623a1947f094fa60fd2fdfeaa95297b7849', class: "absolute inset-0 flex items-center justify-center z-10" }, h("span", { key: '4b18decb7ac66203d7a227d48c70ff91c9ec6824', class: "text-text-secondary" }, t.mapDraw.loading, ".".repeat(this.dotCount)))), h("video", { key: '19ceccc0a48869f3fc1c5b0de0a8bbf6786e5d0e', class: `w-full h-full object-contain rounded-4xl ${state.isMobile
+                ? "cursor-pointer"
+                : "pointer-events-none"}`, autoplay: true, muted: true, loop: true, playsinline: true, onLoadStart: this.handleVideoLoadStart, onCanPlay: this.handleVideoCanPlay, onPlay: this.handleVideoPlay, onPause: this.handleVideoPause, onClick: this.handleVideoClick, style: {
+                aspectRatio: "1/1",
+            } }, h("source", { key: '3652b2397c4397578049cec441a50f0dcb02ad7d', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), state.isMobile && !this.isVideoPlaying && (h("div", { key: '41e7cebeb19caa36e6e89df1dc042314b069892e', class: "text-center" }, h("p", { key: '970fbbe47bec2c4beecd966179d3d8693326aa8d', class: "text-sm text-text-secondary" }, t.mapDraw.tutorial.mobileInstruction))), h("div", { key: '206ec33205f1353533edcb5598b523892ed9c80d', class: "w-full flex justify-center gap-4" }, this.showSkipButton && (h("button", { key: 'd849283abdb80d41f39d5a0b0ec5f116d9e498a5', onClick: this.handleSkipTutorial, class: "px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0" }, t.mapDraw.tutorial.obstacle.skip)), h("button", { key: 'e4fcd08b350da47dc2849eec3ff72b682d89fb83', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
+    }
+    static get is() { return "tutorial-component"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "onClose": {
+                "type": "unknown",
+                "attribute": "on-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onSkip": {
+                "type": "unknown",
+                "attribute": "on-skip",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showSkipButton": {
+                "type": "boolean",
+                "attribute": "show-skip-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "title": {
+                "type": "string",
+                "attribute": "title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "videoSource": {
+                "type": "string",
+                "attribute": "video-source",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "dotCount": {},
+            "isVideoPlaying": {}
+        };
+    }
+}
+//# sourceMappingURL=tutorial-component.js.map

package/dist/collection/components/map-draw/tutorial-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tutorial-component.js","sourceRoot":"","sources":["../../../src/components/map-draw/tutorial-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOpC,MAAM,OAAO,iBAAiB;IAE1B,OAAO,CAAa;IAEpB,MAAM,CAAc;IAEpB,cAAc,GAAa,KAAK,CAAC;IAEjC,KAAK,CAAU;IAEf,WAAW,CAAU;IAErB,WAAW,CAAU;IAGb,SAAS,GAAG,IAAI,CAAC;IAEjB,QAAQ,GAAG,CAAC,CAAC;IAEb,cAAc,GAAG,KAAK,CAAC;IAEvB,WAAW,CAAS;IAEpB,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,MAAM,EAAE,CAAC;QAClB,CAAC;IACL,CAAC,CAAC;IAEM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC,CAAC;IAEM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;YAClE,IAAI,KAAK,EAAE,CAAC;gBACR,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;oBACf,KAAK,CAAC,IAAI,EAAE,CAAC;gBACjB,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,KAAK,EAAE,CAAC;gBAClB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,iBAAiB;QACb,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,+BAA+B;QAC5E,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,qBAAqB;IAClC,CAAC;IAEO,gBAAgB;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC5B,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7D,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,IAAI,8BAA8B,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,yDAAyD;YAEhE,4DACI,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;oBACH,eAAe,EAAE,oBAAoB;iBACxC,GACH;YAGF,4DAAK,KAAK,EAAC,2DAA2D;gBAClE,4DAAK,KAAK,EAAC,gDAAgD;oBAEvD,4DAAK,KAAK,EAAC,8BAA8B;wBACrC,2DAAI,KAAK,EAAC,mCAAmC,IACxC,aAAa,CACb;wBACL,0DAAG,KAAK,EAAC,qBAAqB,IACzB,mBAAmB,CACpB,CACF;oBAGN,4DAAK,KAAK,EAAC,wDAAwD;wBAC/D,4DAAK,KAAK,EAAC,8FAA8F;4BAEpG,IAAI,CAAC,SAAS,IAAI,CACf,4DAAK,KAAK,EAAC,wDAAwD;gCAC/D,6DAAM,KAAK,EAAC,qBAAqB;oCAC5B,CAAC,CAAC,OAAO,CAAC,OAAO;oCACjB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CACvB,CACL,CACT;4BAED,8DACI,KAAK,EAAE,4CACH,KAAK,CAAC,QAAQ;oCACV,CAAC,CAAC,gBAAgB;oCAClB,CAAC,CAAC,qBACV,EAAE,EACF,QAAQ,QACR,KAAK,QACL,IAAI,QACJ,WAAW,QACX,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAE;oCACH,WAAW,EAAE,KAAK;iCACrB;gCAED,+DACI,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,WAAW,GAClB;+EAEE,CACN,CACJ;oBAGL,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CACvC,4DAAK,KAAK,EAAC,aAAa;wBACpB,0DAAG,KAAK,EAAC,6BAA6B,IACjC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CACrC,CACF,CACT;oBAGD,4DAAK,KAAK,EAAC,kCAAkC;wBACxC,IAAI,CAAC,cAAc,IAAI,CACpB,+DACI,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,KAAK,EAAC,kLAAkL,IAEvL,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAC5B,CACZ;wBACD,+DACI,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAC,qLAAqL,IAE1L,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CACzB,CACP,CACJ,CACJ,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"tutorial-component\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n    @Prop()\r\n    onClose: () => void;\r\n    @Prop()\r\n    onSkip?: () => void;\r\n    @Prop()\r\n    showSkipButton?: boolean = false;\r\n    @Prop()\r\n    title?: string;\r\n    @Prop()\r\n    description?: string;\r\n    @Prop()\r\n    videoSource?: string;\r\n\r\n    @State()\r\n    private isLoading = true;\r\n    @State()\r\n    private dotCount = 0;\r\n    @State()\r\n    private isVideoPlaying = false;\r\n\r\n    private dotInterval: number;\r\n\r\n    private handleCloseTutorial = () => {\r\n        if (this.onClose) {\r\n            this.onClose();\r\n        }\r\n    };\r\n\r\n    private handleSkipTutorial = () => {\r\n        if (this.onSkip) {\r\n            this.onSkip();\r\n        }\r\n    };\r\n\r\n    private handleVideoLoadStart = () => {\r\n        this.isLoading = true;\r\n    };\r\n\r\n    private handleVideoCanPlay = () => {\r\n        this.isLoading = false;\r\n        this.stopDotAnimation();\r\n    };\r\n\r\n    private handleVideoPlay = () => {\r\n        this.isVideoPlaying = true;\r\n    };\r\n\r\n    private handleVideoPause = () => {\r\n        this.isVideoPlaying = false;\r\n    };\r\n\r\n    private handleVideoClick = () => {\r\n        if (state.isMobile) {\r\n            const video = document.querySelector(\"video\") as HTMLVideoElement;\r\n            if (video) {\r\n                if (video.paused) {\r\n                    video.play();\r\n                } else {\r\n                    video.pause();\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    componentWillLoad() {\r\n        this.startDotAnimation();\r\n    }\r\n\r\n    componentWillUnload() {\r\n        this.stopDotAnimation();\r\n    }\r\n\r\n    private startDotAnimation() {\r\n        this.dotInterval = window.setInterval(() => {\r\n            this.dotCount = (this.dotCount + 1) % 4; // 0, 1, 2, 3 (0 means no dots)\r\n        }, 500); // Change every 500ms\r\n    }\r\n\r\n    private stopDotAnimation() {\r\n        if (this.dotInterval) {\r\n            clearInterval(this.dotInterval);\r\n            this.dotInterval = null;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Use provided props or fall back to default values\r\n        const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n        const tutorialDescription = this.description ||\r\n            t.mapDraw.tutorial.description;\r\n        const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n        return (\r\n            <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n                {/* Backdrop */}\r\n                <div\r\n                    class=\"absolute inset-0\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                    }}\r\n                />\r\n\r\n                {/* Scrollable content container */}\r\n                <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n                    <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n                        {/* Title and Description */}\r\n                        <div class=\"w-full text-center space-y-4\">\r\n                            <h2 class=\"text-2xl font-bold text-secondary\">\r\n                                {tutorialTitle}\r\n                            </h2>\r\n                            <p class=\"text-text-secondary\">\r\n                                {tutorialDescription}\r\n                            </p>\r\n                        </div>\r\n\r\n                        {/* Tutorial Video Container */}\r\n                        <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n                            <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n                                {/* Loading Spinner */}\r\n                                {this.isLoading && (\r\n                                    <div class=\"absolute inset-0 flex items-center justify-center z-10\">\r\n                                        <span class=\"text-text-secondary\">\r\n                                            {t.mapDraw.loading}\r\n                                            {\".\".repeat(this.dotCount)}\r\n                                        </span>\r\n                                    </div>\r\n                                )}\r\n\r\n                                <video\r\n                                    class={`w-full h-full object-contain rounded-4xl ${\r\n                                        state.isMobile\r\n                                            ? \"cursor-pointer\"\r\n                                            : \"pointer-events-none\"\r\n                                    }`}\r\n                                    autoplay\r\n                                    muted\r\n                                    loop\r\n                                    playsinline\r\n                                    onLoadStart={this.handleVideoLoadStart}\r\n                                    onCanPlay={this.handleVideoCanPlay}\r\n                                    onPlay={this.handleVideoPlay}\r\n                                    onPause={this.handleVideoPause}\r\n                                    onClick={this.handleVideoClick}\r\n                                    style={{\r\n                                        aspectRatio: \"1/1\",\r\n                                    }}\r\n                                >\r\n                                    <source\r\n                                        src={videoSrc}\r\n                                        type=\"video/mp4\"\r\n                                    />\r\n                                    Your browser does not support the video tag.\r\n                                </video>\r\n                            </div>\r\n                        </div>\r\n\r\n                        {/* Mobile Instruction Text */}\r\n                        {state.isMobile && !this.isVideoPlaying && (\r\n                            <div class=\"text-center\">\r\n                                <p class=\"text-sm text-text-secondary\">\r\n                                    {t.mapDraw.tutorial.mobileInstruction}\r\n                                </p>\r\n                            </div>\r\n                        )}\r\n\r\n                        {/* Close Button */}\r\n                        <div class=\"w-full flex justify-center gap-4\">\r\n                            {this.showSkipButton && (\r\n                                <button\r\n                                    onClick={this.handleSkipTutorial}\r\n                                    class=\"px-6 py-3 bg-gray-500 text-white rounded-lg font-medium hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-0\"\r\n                                >\r\n                                    {t.mapDraw.tutorial.obstacle.skip}\r\n                                </button>\r\n                            )}\r\n                            <button\r\n                                onClick={this.handleCloseTutorial}\r\n                                class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n                            >\r\n                                {t.mapDraw.tutorial.understood}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}