// just for crosshairs positioning
window.addEventListener("DOMContentLoaded",() => {
	const credits = new SSBCredits(".credits");
});

class SSBCredits {
    constructor(sel) {
        this.el = document.querySelector(sel);
        this.el?.addEventListener("click",this.crosshairsUpdate.bind(this));
    }
    crosshairsUpdate(e) {
        const { pageX, pageY } = e;

        if (pageX > 0 && pageY > 0) {
            const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = this.el;
            const x = Math.round(pageX - offsetLeft - offsetWidth / 2);
            const y = Math.round(pageY - offsetTop - offsetHeight / 2);
    
            this.el.style.setProperty("--crosshairsX",`${x}px`);
            this.el.style.setProperty("--crosshairsY",`${y}px`);
            this.el.style.setProperty("--hitVisibility","visible");
        } else {
            // hide the red box and do nothing to the crosshairs if keypress
            this.el.style.setProperty("--hitVisibility","hidden");
        }
    }
}