let mouseDown = false;
let mouseDownEver = false;
document.onmousedown = function(e) {
    if (e.button === 0) {
        mouseDown = true;
        mouseDownEver = true;
    }
};
document.onmouseup = function(e) {
    if (e.button === 0) {
        mouseDown = false;
        document.getElementById("slingshot").classList.add("ungrabbed");
    }
};
document.ontouchend = function(e) {
    document.getElementById("slingshot").classList.add("ungrabbed");
};
document.ontouchstart = function(e) {
    e.preventDefault();
    e.stopPropagation();
};
function distance(p1, p2) {
    return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2);
}

document.addEventListener("mousemove", (e) => {
    if (mouseDown) {
        document.getElementById("slingshot").classList.remove("ungrabbed");
        cursorX = e.pageX;
        cursorY = window.innerHeight - e.pageY;
        const slingshot = document.getElementById("slingshot");
        slingshot.style.width = distance({x: cursorX, y: cursorY}, {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        }) + "px";
        const angle = cursorX >= window.innerWidth / 2 ? -Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) : (-Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) - Math.PI);
        slingshot.style.transform = "rotate(" + angle + "rad)";
    }
});


document.addEventListener("touchmove", (e) => {
    document.getElementById("slingshot").classList.remove("ungrabbed");
    cursorX = e.touches[0].clientX;
    cursorY = window.innerHeight - e.touches[0].clientY;
    const slingshot = document.getElementById("slingshot");
    slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px";
    const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
    slingshot.style.transform = "rotate(" + angle + "rad)";
});