Fix: press and hold gesture to punch.

dist/script.js

@@ -9,47 +9,80 @@ const initialFistRight = 20;
 hand.style.right = `${initialHandRight}px`;
 fist.style.right = `${initialFistRight}px`;
 
+let pressTimer = null;
 
-slapImage.addEventListener('click', (event) => {
+/*
-    const x = event.clientX;
+ * Slap Ryan with the hand or fist.
-    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(() => {
+function doAction(emoji, x, y) {
-        hand.style.left = 'auto'; /* Unset left property. */
+    emoji.style.right = 'auto'; /* Unset right property. */
-        hand.style.right = `${initialHandRight}px`;
+    emoji.style.left = `${x - emoji.offsetWidth / 2}px`;
-        hand.style.top = '50%';
+    emoji.style.top = `${y - emoji.offsetHeight / 2}px`;
-    }, 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! */
+    /* Move the emoji back to a ready position. */
     setTimeout(() => {
-        fist.style.left = 'auto'; // Unset left property
+        emoji.style.left = 'auto'; /* Unset left property. */
-        fist.style.right = '20px';
+        if (emoji === hand) {
-        fist.style.top = 'calc(50% + 150px)';
+            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);
+});