animate emojis when pressed

package.json

@@ -24,6 +24,7 @@
     "@sveltejs/kit": "^2.0.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@ubermanu/prettier-config": "^3.2.0",
+    "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",

src/app.d.ts

@@ -8,6 +8,13 @@ declare global {
     // interface PageState {}
     // interface Platform {}
   }
+
+  interface SoundData {
+    name: string
+    emoji: string
+    src: { default: string }
+    animation?: string
+  }
 }
 
 export {}

src/routes/EmojiButton.svelte

@@ -1,17 +1,26 @@
 <script>
+  import 'animate.css/animate.min.css'
+
   /** @type {{ data: SoundData }} */
   const { data } = $props()
-
-  /**
-   * @typedef {Object} SoundData
-   * @property {string} name
-   * @property {string} emoji
-   * @property {{ default: string }} src
-   */
-  const { name, emoji, src } = data
+  const { name, emoji, src, animation } = data
 
   const audio = new Audio(src.default)
 
+  let playing = $state(false)
+
+  audio.addEventListener('play', () => {
+    playing = true
+  })
+
+  audio.addEventListener('pause', () => {
+    playing = false
+  })
+
+  audio.addEventListener('ended', () => {
+    playing = false
+  })
+
   function play() {
     audio.play()
   }
@@ -20,20 +29,19 @@
     audio.pause()
     audio.currentTime = 0
   }
-
-  function isPlaying() {
-    return audio.duration > 0 && !audio.paused
-  }
-
-  function handleClick() {
-    return isPlaying() ? stop() : play()
-  }
 </script>
 
 <button
   class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 p-4"
-  onclick={handleClick}
+  onclick={() => (playing ? stop() : play())}
 >
-  <span class="text-5xl" role="img" aria-label={name}>{emoji}</span>
+  <span
+    class="text-5xl"
+    role="img"
+    aria-label={name}
+    style:animation={playing && animation ? `${animation} 1s forwards` : 'none'}
+  >
+    {emoji}
+  </span>
   <span class="text-2xl">{name}</span>
 </button>

src/sounds.js

@@ -1,45 +1,54 @@
+/** @returns {SoundData[]} */
 export default [
   {
     emoji: '👏',
     name: 'Claps',
     src: await import('./media/119029__joedeshon__polite-applause-09.ogg'),
+    animation: 'tada',
   },
   {
     emoji: '😃',
     name: 'Cheers',
     src: await import('./media/337000__tim-kahn__cheer-01.ogg'),
+    animation: 'shakeY',
   },
   {
     emoji: '😂',
     name: 'Laughs',
     src: await import('./media/82385__benboncan__more-amusing.ogg'),
+    animation: 'shakeY',
   },
   {
     emoji: '🥁',
     name: 'Drum roll',
     src: await import(
       './media/drum_roll_sound_effect_extended_high_quality_mzAfTmC3It0.ogg'
     ),
+    animation: 'wobble',
   },
   {
     emoji: '😌',
     name: 'Ahhh!',
     src: await import('./media/336998__tim-kahn__awww-01.ogg'),
+    animation: 'pulse',
   },
   {
     emoji: '😒',
     name: 'Ohhh!',
     src: await import('./media/37234__shades__crowd-ahh-2.ogg'),
+    animation: 'pulse',
   },
   {
     emoji: '😤',
     name: 'Boo!',
     src: await import('./media/336997__tim-kahn__boo-01.ogg'),
+    animation: 'pulse',
   },
   {
     emoji: '🤡',
     name: 'Badum tss!',
     src: await import('./media/200254__rctperson85__badum-chhhhh.mp3'),
+    animation: 'jackInTheBox',
   },
   {
     emoji: '🦗',
@@ -52,47 +61,56 @@ export default [
     src: await import(
       './media/469603__bolkmar__voice-male-humming-thinking.ogg'
     ),
+    animation: 'headShake',
   },
   {
     emoji: '💰',
     name: 'Tip',
     src: await import('./media/tip_sound_tiny_pQoarCfAi40.ogg'),
+    animation: 'heartBeat',
   },
   {
     emoji: '😱',
     name: 'Wilhelm',
     src: await import('./media/64939__syna-max__wilhelm-scream.ogg'),
+    animation: 'bounce',
   },
   {
     emoji: '🧹',
     name: 'Vacuum',
     src: await import(
       './media/430632__inspectorj__vacuum-cleaner-on-idle-off-close-a.ogg'
     ),
+    animation: 'rotateInUpRight',
   },
   {
     emoji: '🤮',
     name: 'Puke',
     src: await import('./media/469888__georgisound__puking-and-diarrhea.ogg'),
+    animation: 'rotateInUpLeft',
   },
   {
     emoji: '🤧',
     name: 'Sneeze',
     src: await import('./media/505250__jpbillingsleyjr__a-man-sneezing.ogg'),
+    animation: 'headShake',
   },
   {
     emoji: '👶',
     name: 'Cooing',
     src: await import('./media/baby_cooing.ogg'),
+    animation: 'headShake',
   },
   {
     emoji: '🚑',
     name: 'Wee Woo',
     src: await import('./media/469413__sofialomba__ambulance.ogg'),
+    animation: 'lightSpeedInRight',
   },
   {
     emoji: '🐵',
     name: 'HA!',
     src: await import('./media/458396__befig__monkey-cry.ogg'),
+    animation: 'flash',
   },
 ]