88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
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);
|
|
}); |