Rtch/slap_ryan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now punch him in the face!

Browse Source
This commit is contained in:
Ritchie Cunningham 2025-08-23 01:59:17 +01:00
parent d48b0950c6
commit bfee7cb083
3 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/index.html vendored
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>F.ck Ryan</title>
<title>👋🏿 F.ck Ryan ✊🏾</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
@ -11,6 +11,7 @@
<img src="ryan.jpg" alt="Slap Me" id="slap-image">
</div>
<div id="hand">👋🏿</div>
<div id="fist">✊🏾</div>
<audio id="slap-sound" src="slap.mp3" preload="auto"></audio>
<script src="script.js"></script>
</body>

29
dist/script.js vendored
View File

@ -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);
});

9
dist/style.css vendored
View File

@ -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;
}