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

Animate the slap for more dopamine!

Browse Source
This commit is contained in:
Ritchie Cunningham 2025-08-23 01:19:41 +01:00
parent 62c3def856
commit d48b0950c6
3 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/index.html vendored
View File

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

31
dist/script.js vendored
View File

@ -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'); const slapSound = document.getElementById('slap-sound');
slapContainer.addEventListener('mousedown', () => { const initialHandRight = 20;
const emoji = document.createElement('span'); hand.style.right = `${initialHandRight}px`;
emoji.classList.add('slap-emoji');
emoji.textContent = '👋🏿'; slapImage.addEventListener('click', (event) => {
slapContainer.appendChild(emoji); const x = event.clientX;
slapContainer.classList.add('slapped'); 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.currentTime = 0;
slapSound.play(); slapSound.play();
/* Move the hand back to a ready position, awaiting the next slap to
* Ryan's stoopid face!
* */
setTimeout(() => { setTimeout(() => {
slapContainer.classList.remove('slapped'); hand.style.left = 'auto'; /* Unset left property. */
emoji.remove(); hand.style.right = `${initialHandRight}px`;
}, 200); hand.style.top = '50%';
}, 500);
}); });

17
dist/style.css vendored
View File

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