diff --git a/src/app/globals.css b/src/app/globals.css
index 456acba..f1fcebc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,11 +10,9 @@
@keyframes click-bounce {
0%, 100% {
transform: translate(0px, 0px) scale(1, 1);
- /* animation-timing-function: linear(0.2, 0.8, 1); */
}
- 20% {
+ 15% {
transform: translate(0px, 14px) scale(1.2, 0.9);
- /* animation-timing-function: cubic-bezier(0.8, 0, 1, 1); */
}
}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index bf855e3..021ba9c 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -19,8 +19,10 @@ export default function NotFound() {
{">]"}Image source
diff --git a/src/components/wobbling-image.tsx b/src/components/wobbling-image.tsx
index 7f98c2d..5609014 100644
--- a/src/components/wobbling-image.tsx
+++ b/src/components/wobbling-image.tsx
@@ -5,14 +5,20 @@ import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react"
interface WobblingImageInterface {
- img1: string
- img2?: string
+ images: {
+ idle: string;
+ poked?: string;
+ weird?: string;
+ }
}
function WobblingImage ({
- img1, img2
+ images
}: WobblingImageInterface) {
const size = 400;
+ const [isPoked, setPoked] = useState(false);
+ const pokeTimeoutRef = useRef
(null);
+
const [isAnimating, setIsAnimating] = useState(false);
const audioPath = "/sound/poke.wav";
@@ -82,11 +88,20 @@ function WobblingImage ({
function handleClick() {
setIsAnimating(false);
requestAnimationFrame(() => setIsAnimating(true));
+
playRandomPitch();
if (dummyAudio && !audioLoaded) {
dummyAudio.currentTime = 0;
dummyAudio.play();
}
+
+ if (pokeTimeoutRef.current) {
+ clearTimeout(pokeTimeoutRef.current);
+ }
+ setPoked(true);
+ pokeTimeoutRef.current = setTimeout(() => {
+ setPoked(false);
+ }, 600);
}
function handleAnimationEnd() {
@@ -98,7 +113,7 @@ function WobblingImage ({
e.preventDefault()}
>