@directivegames/genesys.js 3.1.24

package/dist/src/ui/components/BaseUIComponent.js

@@ -0,0 +1,342 @@
+import * as ENGINE from '../../index.js';
+import { AssetPath } from '../../storage/storageProvider.js';
+import { shortUUID } from '../../utils/Utils.js';
+/**
+ * Abstract base class for all UI components
+ * Provides common functionality and enforces consistent interface
+ */
+export class BaseUIComponent {
+    constructor(ui, options) {
+        Object.defineProperty(this, "ui", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "layout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "elements", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "isInitialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isVisible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        this.ui = ui;
+        this.options = this.mergeWithDefaults(options);
+    }
+    /**
+     * Initialize the component - loads assets and creates layout
+     * Must be called before using the component
+     */
+    async initialize() {
+        if (this.isInitialized) {
+            console.warn(`Component ${this.constructor.name} is already initialized`);
+            return;
+        }
+        try {
+            // Load component assets
+            const { template, styles } = await this.loadAssets();
+            // Create layout with initial data
+            this.layout = this.ui.createLayout(this.getComponentId(), {
+                template,
+                styles,
+                data: this.getInitialData()
+            });
+            // Apply positioning and styling
+            this.applyPositioning();
+            this.applyCustomStyling();
+            // Cache element references
+            this.cacheElements();
+            // Perform component-specific initialization
+            await this.onInitialize();
+            // Set initial visibility
+            if (!this.options.visible) {
+                this.hide();
+            }
+            this.isInitialized = true;
+        }
+        catch (error) {
+            throw new Error(`Failed to initialize ${this.constructor.name}: ${error}`);
+        }
+    }
+    /**
+     * Show the component
+     */
+    show() {
+        if (!this.isInitialized) {
+            console.warn(`Cannot show ${this.constructor.name} - not initialized`);
+            return;
+        }
+        this.layout?.getElement().show();
+        this.isVisible = true;
+        this.onShow();
+    }
+    /**
+     * Hide the component
+     */
+    hide() {
+        if (!this.isInitialized) {
+            console.warn(`Cannot hide ${this.constructor.name} - not initialized`);
+            return;
+        }
+        this.layout?.getElement().hide();
+        this.isVisible = false;
+        this.onHide();
+    }
+    /**
+     * Toggle component visibility
+     */
+    toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    /**
+     * Check if component is visible
+     */
+    getIsVisible() {
+        return this.isVisible;
+    }
+    /**
+     * Check if component is initialized
+     */
+    getIsInitialized() {
+        return this.isInitialized;
+    }
+    /**
+     * Get the root layout element
+     */
+    getElement() {
+        return this.layout?.getElement() ?? null;
+    }
+    /**
+     * Get a cached element by key
+     */
+    getElementByKey(key) {
+        return this.elements.get(key);
+    }
+    /**
+     * Update component data and re-render
+     * Note: This triggers onDataUpdate for component-specific handling
+     */
+    updateData(data) {
+        if (!this.isInitialized || !this.layout) {
+            console.warn(`Cannot update data for ${this.constructor.name} - not initialized`);
+            return;
+        }
+        // Note: UILayout doesn't have updateData method, so we handle updates in onDataUpdate
+        this.onDataUpdate(data);
+    }
+    /**
+     * Set the position of the component using CSS properties
+     * @param styles - CSS positioning properties (e.g. { top: '20px', left: '20px' })
+     * @param selector - Optional CSS selector to target a specific child element
+     */
+    setPosition(styles, selector) {
+        if (!this.isInitialized || !this.layout) {
+            console.warn(`Cannot set position for ${this.constructor.name} - not initialized`);
+            return;
+        }
+        let targetElement = null;
+        if (selector) {
+            // Target a specific child element
+            targetElement = this.layout.querySelector(selector);
+            if (!targetElement) {
+                console.warn(`Cannot find element with selector "${selector}" in ${this.constructor.name}`);
+                return;
+            }
+        }
+        else {
+            // Target the root element of the layout
+            const rootElement = this.layout.getElement();
+            targetElement = rootElement?.element;
+        }
+        if (targetElement) {
+            // Apply positioning styles
+            Object.entries(styles).forEach(([property, value]) => {
+                targetElement.style.setProperty(property, value);
+            });
+        }
+    }
+    /**
+     * Destroy the component and clean up resources
+     */
+    destroy() {
+        if (!this.isInitialized) {
+            return;
+        }
+        this.onDestroy();
+        this.layout?.remove();
+        this.layout = null;
+        this.elements.clear();
+        this.isInitialized = false;
+        this.isVisible = false;
+    }
+    // Virtual methods that subclasses can override
+    /**
+     * Get the unique ID for this component instance
+     * Default implementation uses kebab-case class name + UUID
+     * Override if you need custom ID generation logic
+     */
+    getComponentId() {
+        // Convert class name from PascalCase to kebab-case
+        const className = this.constructor.name;
+        const kebabCase = className
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+        return `${kebabCase}-${shortUUID()}`;
+    }
+    /**
+     * Cache frequently accessed elements after layout creation
+     */
+    cacheElements() {
+        // Override in subclasses to cache specific elements
+    }
+    /**
+     * Called after successful initialization
+     */
+    async onInitialize() {
+        // Override in subclasses for custom initialization
+    }
+    /**
+     * Called when component is shown
+     */
+    onShow() {
+        // Override in subclasses for show logic
+    }
+    /**
+     * Called when component is hidden
+     */
+    onHide() {
+        // Override in subclasses for hide logic
+    }
+    /**
+     * Called when data is updated
+     */
+    onDataUpdate(data) {
+        // Override in subclasses for data update logic
+    }
+    /**
+     * Called before component destruction
+     */
+    onDestroy() {
+        // Override in subclasses for cleanup logic
+    }
+    // Private helper methods
+    async loadAssets() {
+        const { templatePath, stylesPath } = this.getAssetPaths();
+        return await ENGINE.UIAssetLoader.loadUIAsset(AssetPath.fromString(templatePath), AssetPath.fromString(stylesPath));
+    }
+    mergeWithDefaults(options) {
+        const defaults = this.getDefaultOptions();
+        return { ...defaults, ...options };
+    }
+    applyPositioning() {
+        if (!this.layout || !this.options.position)
+            return;
+        const layoutElement = this.layout.getElement();
+        // Find the actual template root (skip Vite injected scripts and other non-template elements)
+        let templateRoot = null;
+        for (let i = 0; i < layoutElement.element.children.length; i++) {
+            const child = layoutElement.element.children[i];
+            // Skip script tags (Vite development scripts)
+            if (child.tagName.toLowerCase() === 'script') {
+                continue;
+            }
+            // Skip elements with Vite-specific attributes
+            if (child.hasAttribute('src') && child.getAttribute('src')?.includes('vite')) {
+                continue;
+            }
+            // This should be our template root
+            templateRoot = child;
+            break;
+        }
+        if (templateRoot) {
+            templateRoot.classList.add(this.options.position);
+        }
+    }
+    applyCustomStyling() {
+        if (!this.layout)
+            return;
+        const element = this.layout.getElement();
+        // Apply custom classes
+        if (this.options.customClasses) {
+            this.options.customClasses.forEach(className => {
+                element.addClass(className);
+            });
+        }
+        // Apply custom styles using direct style property access
+        if (this.options.customStyles) {
+            Object.entries(this.options.customStyles).forEach(([property, value]) => {
+                // Get the underlying HTML element and set style directly
+                const htmlElement = element.element;
+                if (htmlElement && htmlElement.style) {
+                    htmlElement.style.setProperty(property, value);
+                }
+            });
+        }
+    }
+    /**
+     * Utility method to create element wrappers for HTML elements
+     */
+    createElementWrapper(htmlElement) {
+        if (!htmlElement) {
+            throw new Error(`HTML element not found in ${this.constructor.name} layout`);
+        }
+        // Create a wrapper that delegates to the HTML element
+        const wrapper = {
+            element: htmlElement,
+            setText: (text) => {
+                htmlElement.textContent = text;
+                return wrapper;
+            },
+            addClass: (className) => {
+                htmlElement.classList.add(className);
+                return wrapper;
+            },
+            removeClass: (className) => {
+                htmlElement.classList.remove(className);
+                return wrapper;
+            },
+            show: () => {
+                htmlElement.style.display = 'block';
+                return wrapper;
+            },
+            hide: () => {
+                htmlElement.style.display = 'none';
+                return wrapper;
+            },
+            setStyle: (property, value) => {
+                htmlElement.style.setProperty(property, value);
+                return wrapper;
+            }
+        };
+        return wrapper;
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmFzZVVJQ29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3VpL2NvbXBvbmVudHMvQmFzZVVJQ29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE1BQU0sZ0JBQWdCLENBQUM7QUFDekMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzdELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQWdCakQ7OztHQUdHO0FBQ0gsTUFBTSxPQUFnQixlQUFlO0lBUW5DLFlBQVksRUFBb0IsRUFBRSxPQUFpQjtRQVB6Qzs7Ozs7V0FBcUI7UUFDckI7Ozs7O1dBQTRCO1FBQzVCOzs7O21CQUFpQyxJQUFJO1dBQUM7UUFDdEM7Ozs7bUJBQTBDLElBQUksR0FBRyxFQUFFO1dBQUM7UUFDcEQ7Ozs7bUJBQWdCLEtBQUs7V0FBQztRQUN0Qjs7OzttQkFBWSxJQUFJO1dBQUM7UUFHekIsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUM7UUFDYixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksS0FBSyxDQUFDLFVBQVU7UUFDckIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdkIsT0FBTyxDQUFDLElBQUksQ0FBQyxhQUFhLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSx5QkFBeUIsQ0FBQyxDQUFDO1lBQzFFLE9BQU87UUFDVCxDQUFDO1FBRUQsSUFBSSxDQUFDO1lBQ0gsd0JBQXdCO1lBQ3hCLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEdBQUcsTUFBTSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFFckQsa0NBQWtDO1lBQ2xDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FB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

package/dist/src/ui/components/Compass.d.ts

@@ -0,0 +1,28 @@
+import * as THREE from 'three';
+import { BaseUIComponent } from './BaseUIComponent.js';
+import type { BaseUIComponentOptions } from './BaseUIComponent.js';
+export interface CompassOptions extends BaseUIComponentOptions {
+    width?: number;
+    height?: number;
+    pixelsPerDegree?: number;
+}
+export interface CompassDirection {
+    name: string;
+    angle: number;
+    cardinal: boolean;
+}
+export declare class Compass extends BaseUIComponent<CompassOptions> {
+    private compassMarkers;
+    private directions;
+    protected getAssetPaths(): {
+        templatePath: string;
+        stylesPath: string;
+    };
+    protected getDefaultOptions(): Required<CompassOptions>;
+    protected getInitialData(): Record<string, any>;
+    protected onInitialize(): Promise<void>;
+    updateRotation(camera: THREE.Camera): void;
+    private initializeMarkers;
+    private updateCenterLineHeight;
+    protected onDestroy(): void;
+}

package/dist/src/ui/components/Compass.js

@@ -0,0 +1,125 @@
+import * as THREE from 'three';
+import { BaseUIComponent } from './BaseUIComponent.js';
+export class Compass extends BaseUIComponent {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "compassMarkers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "directions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [
+                { name: 'N', angle: 0, cardinal: true },
+                { name: 'NE', angle: 45, cardinal: false },
+                { name: 'E', angle: 90, cardinal: true },
+                { name: 'SE', angle: 135, cardinal: false },
+                { name: 'S', angle: 180, cardinal: true },
+                { name: 'SW', angle: 225, cardinal: false },
+                { name: 'W', angle: 270, cardinal: true },
+                { name: 'NW', angle: 315, cardinal: false }
+            ]
+        });
+    }
+    getAssetPaths() {
+        return {
+            templatePath: '@engine/assets/ui/templates/compass.html',
+            stylesPath: '@engine/assets/ui/styles/compass.css'
+        };
+    }
+    getDefaultOptions() {
+        return {
+            position: 'bottom-center',
+            visible: true,
+            customClasses: [],
+            customStyles: {},
+            width: 300,
+            height: 20,
+            pixelsPerDegree: 2.5
+        };
+    }
+    getInitialData() {
+        return {
+            position: this.options.position,
+            width: this.options.width,
+            height: this.options.height
+        };
+    }
+    async onInitialize() {
+        // Initialize compass markers
+        this.initializeMarkers();
+        // Update center line height based on compass height
+        this.updateCenterLineHeight();
+    }
+    // Public API methods
+    updateRotation(camera) {
+        if (!camera || this.compassMarkers.length === 0)
+            return;
+        // Get the camera's world direction
+        const direction = new THREE.Vector3();
+        camera.getWorldDirection(direction);
+        // Calculate angle in radians (0 = North, positive = clockwise)
+        const angle = Math.atan2(direction.x, direction.z);
+        // Convert to degrees and normalize to 0-360
+        let playerAngle = (angle * 180 / Math.PI + 360) % 360;
+        // Update each marker position
+        const compassCenter = this.options.width / 2;
+        this.compassMarkers.forEach(marker => {
+            const markerAngle = parseFloat(marker.getAttribute('data-angle') ?? '0');
+            // Calculate the relative angle difference
+            let angleDiff = markerAngle - playerAngle;
+            // Normalize angle difference to -180 to 180
+            while (angleDiff > 180)
+                angleDiff -= 360;
+            while (angleDiff < -180)
+                angleDiff += 360;
+            // Convert angle to pixel position
+            const xPosition = compassCenter + (angleDiff * this.options.pixelsPerDegree);
+            // Only show markers that are within the visible area (with some padding)
+            if (xPosition >= -50 && xPosition <= this.options.width + 50) {
+                marker.style.left = `${xPosition}px`;
+                marker.style.display = 'block';
+                // Fade out markers near the edges for a smooth effect
+                const distanceFromCenter = Math.abs(xPosition - compassCenter);
+                const maxDistance = this.options.width / 2;
+                const opacity = Math.max(0.3, 1 - (distanceFromCenter / maxDistance));
+                marker.style.opacity = opacity.toString();
+            }
+            else {
+                marker.style.display = 'none';
+            }
+        });
+    }
+    // Private methods
+    initializeMarkers() {
+        const compassContainer = this.layout?.querySelector('.compass-markers');
+        if (!compassContainer)
+            return;
+        // Create marker elements
+        this.directions.forEach(dir => {
+            const marker = document.createElement('div');
+            marker.className = `compass-marker${dir.cardinal ? ' cardinal' : ''}`;
+            marker.textContent = dir.name;
+            marker.setAttribute('data-angle', dir.angle.toString());
+            compassContainer.appendChild(marker);
+            this.compassMarkers.push(marker);
+        });
+    }
+    updateCenterLineHeight() {
+        const centerLine = this.layout?.querySelector('.compass-center-line');
+        if (centerLine && this.options.height) {
+            // Scale center line height to be about 20% of compass height, but at least 20px
+            const lineHeight = Math.max(20, this.options.height * 0.2);
+            centerLine.style.height = `${lineHeight}px`;
+        }
+    }
+    onDestroy() {
+        // Clean up marker references
+        this.compassMarkers = [];
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tcGFzcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy91aS9jb21wb25lbnRzL0NvbXBhc3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUM7QUFJL0IsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBZ0J2RCxNQUFNLE9BQU8sT0FBUSxTQUFRLGVBQStCO0lBQTVEOztRQUNVOzs7O21CQUFnQyxFQUFFO1dBQUM7UUFFbkM7Ozs7bUJBQWlDO2dCQUN2QyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUN2QyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO2dCQUMxQyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUN4QyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO2dCQUMzQyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUN6QyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO2dCQUMzQyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUN6QyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFO2FBQzVDO1dBQUM7SUErR0osQ0FBQztJQTdHVyxhQUFhO1FBQ3JC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

package/dist/src/ui/components/ControlsPanel.d.ts

@@ -0,0 +1,37 @@
+import { BaseUIComponent } from './BaseUIComponent.js';
+import type { BaseUIComponentOptions } from './BaseUIComponent.js';
+export interface ControlsPanelOptions extends BaseUIComponentOptions {
+    /** Controls to display */
+    controls?: {
+        key: string;
+        description: string;
+    }[];
+    /** Panel title */
+    title?: string;
+}
+export declare class ControlsPanel extends BaseUIComponent<ControlsPanelOptions> {
+    protected getAssetPaths(): {
+        templatePath: string;
+        stylesPath: string;
+    };
+    protected getDefaultOptions(): Required<ControlsPanelOptions>;
+    protected getInitialData(): {
+        title: string;
+        controls: {
+            key: string;
+            description: string;
+        }[];
+    };
+    /**
+     * Set custom position for the controls panel
+     * @param styles - CSS positioning properties
+     */
+    setCustomPosition(styles: Record<string, string>): void;
+    /**
+     * Update the controls list
+     */
+    updateControls(controls: {
+        key: string;
+        description: string;
+    }[]): void;
+}

package/dist/src/ui/components/ControlsPanel.js

@@ -0,0 +1,47 @@
+import { BaseUIComponent } from './BaseUIComponent.js';
+export class ControlsPanel extends BaseUIComponent {
+    getAssetPaths() {
+        return {
+            templatePath: '@engine/assets/ui/templates/controls-help.html',
+            stylesPath: '@engine/assets/ui/styles/controls-help.css'
+        };
+    }
+    getDefaultOptions() {
+        return {
+            position: 'bottom-left',
+            visible: true,
+            customClasses: [],
+            customStyles: {},
+            controls: [
+                { key: 'WASD', description: 'Move' },
+                { key: 'Mouse', description: 'Look' },
+                { key: 'Left Click', description: 'Shoot' },
+                { key: 'R', description: 'Reload' },
+                { key: 'I', description: 'Inventory' },
+                { key: 'P', description: 'Menu' }
+            ],
+            title: 'Controls:'
+        };
+    }
+    getInitialData() {
+        return {
+            title: this.options.title,
+            controls: this.options.controls
+        };
+    }
+    /**
+     * Set custom position for the controls panel
+     * @param styles - CSS positioning properties
+     */
+    setCustomPosition(styles) {
+        this.setPosition(styles, '.controls-container');
+    }
+    /**
+     * Update the controls list
+     */
+    updateControls(controls) {
+        this.options.controls = controls;
+        // Re-render would go here if we had dynamic content updates
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udHJvbHNQYW5lbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy91aS9jb21wb25lbnRzL0NvbnRyb2xzUGFuZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBWXZELE1BQU0sT0FBTyxhQUFjLFNBQVEsZUFBcUM7SUFFbkQsYUFBYTtRQUM5QixPQUFPO1lBQ0wsWUFBWSxFQUFFLGdEQUFnRDtZQUM5RCxVQUFVLEVBQUUsNENBQTRDO1NBQ3pELENBQUM7SUFDSixDQUFDO0lBRWtCLGlCQUFpQjtRQUNsQyxPQUFPO1lBQ0wsUUFBUSxFQUFFLGFBQWE7WUFDdkIsT0FBTyxFQUFFLElBQUk7WUFDYixhQUFhLEVBQUUsRUFBRTtZQUNqQixZQUFZLEVBQUUsRUFBRTtZQUNoQixRQUFRLEVBQUU7Z0JBQ1IsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUU7Z0JBQ3BDLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFO2dCQUNyQyxFQUFFLEdBQUcsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE9BQU8sRUFBRTtnQkFDM0MsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUU7Z0JBQ25DLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFO2dCQUN0QyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRTthQUNsQztZQUNELEtBQUssRUFBRSxXQUFXO1NBQ25CLENBQUM7SUFDSixDQUFDO0lBRWtCLGNBQWM7UUFDL0IsT0FBTztZQUNMLEtBQUssRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUs7WUFDekIsUUFBUSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUTtTQUNoQyxDQUFDO0lBQ0osQ0FBQztJQUVEOzs7T0FHRztJQUNJLGlCQUFpQixDQUFDLE1BQThCO1FBQ3JELElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxFQUFFLHFCQUFxQixDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVEOztPQUVHO0lBQ0ksY0FBYyxDQUFDLFFBQWdEO1FBQ3BFLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUNqQyw0REFBNEQ7SUFDOUQsQ0FBQztDQUNGIn0=

package/dist/src/ui/components/Crosshair.d.ts

@@ -0,0 +1,20 @@
+import { BaseUIComponent } from './BaseUIComponent.js';
+import type { BaseUIComponentOptions } from './BaseUIComponent.js';
+export interface CrosshairOptions extends BaseUIComponentOptions {
+    size?: number;
+    color?: string;
+    style?: 'dot' | 'cross' | 'circle';
+}
+export declare class Crosshair extends BaseUIComponent<CrosshairOptions> {
+    private crosshairElement;
+    protected getAssetPaths(): {
+        templatePath: string;
+        stylesPath: string;
+    };
+    protected getDefaultOptions(): Required<CrosshairOptions>;
+    protected getInitialData(): Record<string, any>;
+    protected cacheElements(): void;
+    setColor(color: string): void;
+    setSize(size: number): void;
+    protected onDestroy(): void;
+}