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

const initialHandRight = 20;
hand.style.right = `${initialHandRight}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);
});