const slapImage = document.getElementById('slap-image');
const hand = document.getElementById('hand');
const fist = document.getElementById('fist');
const slapSound = document.getElementById('slap-sound');

const initialHandRight = 20;
const initialFistRight = 20;

hand.style.right = `${initialHandRight}px`;
fist.style.right = `${initialFistRight}px`;

let pressTimer = null;

/*
 * Slap Ryan with the hand or fist.
 */
function doAction(emoji, x, y) {
    emoji.style.right = 'auto'; /* Unset right property. */
    emoji.style.left = `${x - emoji.offsetWidth / 2}px`;
    emoji.style.top = `${y - emoji.offsetHeight / 2}px`;

    slapSound.currentTime = 0;
    slapSound.play();

    /* Move the emoji back to a ready position. */
    setTimeout(() => {
        emoji.style.left = 'auto'; /* Unset left property. */
        if (emoji === hand) {
            emoji.style.right = `${initialHandRight}px`;
            emoji.style.top = '50%';
        } else {
            emoji.style.right = `${initialFistRight}px`;
            emoji.style.top = 'calc(50% + 150px)';
        }
    }, 500);
}

/*
 * Handle mouse events.
 */
slapImage.addEventListener('mousedown', (event) => {
    if (event.button === 0) { // Left mouse button
        /* Start a timer to detect a long press. */
        pressTimer = setTimeout(() => {
            doAction(fist, event.clientX, event.clientY);
            pressTimer = null;
        }, 500);
    } else if (event.button === 2) { // Right mouse button
        doAction(fist, event.clientX, event.clientY);
    }
});

slapImage.addEventListener('mouseup', (event) => {
    if (pressTimer && event.button === 0) {
        /* If the timer is still running, it was a short press. */
        clearTimeout(pressTimer);
        doAction(hand, event.clientX, event.clientY);
    }
});

/* Prevent the context menu on right-click. */
slapImage.addEventListener('contextmenu', (event) => {
    event.preventDefault();
});

/*
 * Handle touch events.
 */
slapImage.addEventListener('touchstart', (event) => {
    /* Start a timer to detect a long press. */
    pressTimer = setTimeout(() => {
        doAction(fist, event.touches[0].clientX, event.touches[0].clientY);
        pressTimer = null;
    }, 500);
});

slapImage.addEventListener('touchend', (event) => {
    if (pressTimer) {
        /* If the timer is still running, it was a short press. */
        clearTimeout(pressTimer);
        doAction(hand, event.changedTouches[0].clientX, event.changedTouches[0].clientY);
    }
});

slapImage.addEventListener('touchmove', (event) => {
    /* Cancel the long press if the user moves their finger. */
    clearTimeout(pressTimer);
});