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()} > clip1