Metaverse/JoyStick.js

class JoyStick {
    constructor(e) {
        E(this, "_zone", document.createElement("div"));
        E(this, "_joystick", null);
        E(this, "_room");
        this._room = e
    }
    init(e) {
        const {interval: t=33, triggerDistance: r=25, style: n={
            left: 0,
            bottom: 0
        }} = e
          , o = (u,c)=>{
            this._room.actionsHandler.joystick({
                degree: Math.floor(u),
                level: Math.floor(c / 5)
            })
        }
          , a = this._zone;
        document.body.appendChild(a),
        a.style.position = "absolute",
        a.style.width = "200px",
        a.style.height = "200px",
        a.style.left = String(n.left),
        a.style.bottom = String(n.bottom),
        a.style.zIndex = "999",
        a.style.userSelect = "none",
        a.style.webkitUserSelect = "none",
        this._joystick = nipplejs.create({
            zone: a,
            mode: "static",
            position: {
                left: "50%",
                top: "50%"
            },
            color: "white"
        });
        let s, l;
        return this._joystick.on("move", (u,c)=>{
            s = c
        }
        ),
        this._joystick.on("start", ()=>{
            l = window.setInterval(()=>{
                s && s.distance > r && o && o(s.angle.degree, s.distance)
            }
            , t)
        }
        ),
        this._joystick.on("end", ()=>{
            l && window.clearInterval(l),
            l = void 0
        }
        ),
        this._joystick
    }
    show() {
        if (!this._joystick)
            throw new Error("joystick is not created");
        this._zone.style.display = "block"
    }
    hide() {
        if (!this._joystick)
            throw new Error("joystick is not created");
        this._zone.style.display = "none"
    }
}