lingo3d/lib/ui/Reticle.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { Reactive } from "@lincode/reactivity";
import Appendable from "../display/core/Appendable";
import { uiContainer } from "../engine/renderLoop/containers";
import { reticleDefaults, reticleSchema } from "../interface/IReticle";
import createElement from "../utils/createElement";
import { texturesUrlPtr } from "../pointers/assetsPathPointers";
class Reticle extends Appendable {
    static componentName = "reticle";
    static defaults = reticleDefaults;
    static schema = reticleSchema;
    constructor() {
        super();
        this.createEffect(() => {
            const variant = this.variantState.get();
            const imageElement = createElement(`
                <img
                  src="${texturesUrlPtr[0]}reticle${variant}.png"
                  style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none; width: 20px;"
                ></img>
            `);
            uiContainer.appendChild(imageElement);
            return () => {
                imageElement.remove();
            };
        }, [this.variantState.get]);
    }
    variantState = new Reactive(1);
    get variant() {
        return this.variantState.get();
    }
    set variant(value) {
        this.variantState.set(value);
    }
}
export default Reticle;
//# sourceMappingURL=Reticle.js.map