From bfee7cb083118cd04d4edfe33495d8d7d813f467 Mon Sep 17 00:00:00 2001 From: Ritchie Cunningham Date: Sat, 23 Aug 2025 01:59:17 +0100 Subject: [PATCH] Now punch him in the face! --- dist/index.html | 3 ++- dist/script.js | 29 ++++++++++++++++++++++++++++- dist/style.css | 9 +++++++++ 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9bf747b..9126a64 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,7 +3,7 @@ - F.ck Ryan + 👋🏿 F.ck Ryan ✊🏾 @@ -11,6 +11,7 @@ Slap Me
👋🏿
+
✊🏾
diff --git a/dist/script.js b/dist/script.js index 73b185c..c519ca7 100644 --- a/dist/script.js +++ b/dist/script.js @@ -1,9 +1,14 @@ 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; @@ -19,10 +24,32 @@ slapImage.addEventListener('click', (event) => { /* 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); +}); diff --git a/dist/style.css b/dist/style.css index 8329958..e4c26b6 100644 --- a/dist/style.css +++ b/dist/style.css @@ -28,3 +28,12 @@ body { transform: translateY(-50%); transition: all 0.2s ease-in-out; } + +#fist { + position: absolute; + right: 20px; + top: calc(50% + 150px); /* Position below the hand. */ + font-size: 150px; + transform: translateY(-50%); + transition: all 0.2s ease-in-out; +}