feat: add World Emoji Day noodle implementation

Author: jviide

app/components/Noodle/EmojiDay/Logo.vue

@@ -0,0 +1,109 @@
+<template>
+  <div ref="sizer" class="sizer w-full sm:w-[540px] md:w-[640px] lg:w-[900px]"></div>
+</template>
+
+<style>
+.sizer {
+  position: relative;
+  height: auto;
+  aspect-ratio: 900/360;
+}
+
+.sizer > img {
+  display: none;
+}
+</style>
+
+<script setup lang="ts">
+import { init } from './emoji-thing'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+import red from './emojisets/red.png'
+import blue from './emojisets/blue.png'
+import faces from './emojisets/faces.png'
+import gold from './emojisets/gold.png'
+import hearts from './emojisets/hearts.png'
+import green from './emojisets/green.png'
+import earth from './emojisets/earth.png'
+import cloud from './emojisets/cloud.png'
+
+const EMOJI_SET_SOURCES = {
+  red,
+  blue,
+  hearts,
+  gold,
+  faces,
+  green,
+  earth,
+  cloud,
+}
+
+let emojiSetImagesPromise: undefined | Promise<Record<string, HTMLImageElement>>
+
+function loadEmojiSetImages() {
+  if (emojiSetImagesPromise) {
+    return emojiSetImagesPromise
+  }
+
+  const promises = Object.entries(EMOJI_SET_SOURCES).map(([name, src]) => {
+    return new Promise(resolve => {
+      const image = new Image()
+      image.addEventListener('load', () => {
+        resolve([name, image])
+      })
+      image.src = src
+    })
+  })
+
+  emojiSetImagesPromise = Promise.all(promises).then(sets => Object.fromEntries(sets))
+  return emojiSetImagesPromise
+}
+
+let running = false
+let handle: undefined | ReturnType<typeof init>
+let observer: undefined | IntersectionObserver
+
+const sizer = useTemplateRef<HTMLDivElement>('sizer')
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) {
+        return
+      }
+
+      if (entry.isIntersecting) {
+        running = true
+        loadEmojiSetImages().then(sets => {
+          if (!running) {
+            return
+          }
+          if (!handle) {
+            handle = init(sizer.value, sets)
+          }
+          handle.start()
+        })
+      } else {
+        running = false
+        handle?.pause()
+      }
+    },
+    {
+      rootMargin: '100px',
+    },
+  )
+
+  if (sizer.value) {
+    observer.observe(sizer.value)
+  }
+})
+
+onUnmounted(() => {
+  handle?.destroy()
+  handle = undefined
+
+  observer?.disconnect()
+  observer = undefined
+
+  running = false
+})
+</script>