Animate the slap for more dopamine!

dist/index.html

@@ -10,6 +10,7 @@
     <div id="slap-container">
         <img src="ryan.jpg" alt="Slap Me" id="slap-image">
     </div>
+    <div id="hand">👋🏿</div>
     <audio id="slap-sound" src="slap.mp3" preload="auto"></audio>
     <script src="script.js"></script>
 </body>

dist/script.js

@@ -1,17 +1,28 @@
-const slapContainer = document.getElementById('slap-container');
+const slapImage = document.getElementById('slap-image');
+const hand = document.getElementById('hand');
 const slapSound = document.getElementById('slap-sound');
 
-slapContainer.addEventListener('mousedown', () => {
-    const emoji = document.createElement('span');
-    emoji.classList.add('slap-emoji');
-    emoji.textContent = '👋🏿';
-    slapContainer.appendChild(emoji);
-    slapContainer.classList.add('slapped');
+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(() => {
-        slapContainer.classList.remove('slapped');
-        emoji.remove();
-    }, 200);
+        hand.style.left = 'auto'; /* Unset left property. */
+        hand.style.right = `${initialHandRight}px`;
+        hand.style.top = '50%';
+    }, 500);
 });

dist/style.css

@@ -5,6 +5,7 @@ body {
     height: 100vh;
     margin: 0;
     background-color: #121212;
+    overflow: hidden; /* Hide the hand when it's off-screen. */
 }
 
 #slap-container {
@@ -16,18 +17,14 @@ body {
     height: auto;
     border: 2px solid #f0f0f0;
     border-radius: 10px;
+    cursor: pointer;
 }
 
-.slap-emoji {
+#hand {
     position: absolute;
+    right: 20px;
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 100px;
-    opacity: 0;
-    transition: opacity 0.2s ease-out;
+    font-size: 150px;
+    transform: translateY(-50%);
+    transition: all 0.2s ease-in-out;
 }
-
-#slap-container.slapped .slap-emoji {
-    opacity: 1;
-}