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 @@
👋🏿
+ ✊🏾
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;
+}