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`;


slapImage.addEventListener('click', (event) => {
    const x = event.clientX;
    const y = event.clientY;

    /* Slap the shit out of Ryan. */
    hand.style.right = 'auto'; /* Unset right property. */
    hand.style.left = `${x - hand.offsetWidth / 2}px`;
    hand.style.top = `${y - hand.offsetHeight / 2}px`;

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

    /* Move the hand back to a ready position, awaiting the next slap to
     * Ryan's stoopid face!
     */
    setTimeout(() => {
        hand.style.left = 'auto'; /* Unset left property. */
        hand.style.right = `${initialHandRight}px`;
        hand.style.top = '50%';
    }, 500);
});

slapImage.addEventListener('contextmenu', (event) => {
    event.preventDefault(); /* Prevent the default context menu. */

    const x = event.clientX;
    const y = event.clientY;

    /* Punch the f.ck out of him. */
    fist.style.right = 'auto'; // Unset right property
    fist.style.left = `${x - fist.offsetWidth / 2}px`;
    fist.style.top = `${y - fist.offsetHeight / 2}px`;

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

    /* Move back, ready to go again! */
    setTimeout(() => {
        fist.style.left = 'auto'; // Unset left property
        fist.style.right = '20px';
        fist.style.top = 'calc(50% + 150px)';
    }, 500);
});