feat: implement theme support for the Wold Emoji Day noodle

Author: jviide

app/components/Noodle/EmojiDay/Logo.vue

@@ -1,115 +1,37 @@
 <template>
-  <div ref="sizer" class="sizer w-full sm:w-[540px] md:w-[640px] lg:w-[900px]"></div>
+  <div class="relative flex">
+    <ThemedLogo v-if="colorMode.value === 'dark'" :emojiSets="darkTheme" />
+    <ThemedLogo v-else :emojiSets="lightTheme" />
+  </div>
 </template>
 
-<style>
-.sizer {
-  position: relative;
-  height: auto;
-  aspect-ratio: 900/360;
-}
-</style>
-
 <script setup lang="ts">
-import { init } from './emoji-thing'
-import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+import ThemedLogo from './ThemedLogo.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'
+import light from './emojisets/themed-light.png'
+import dark from './emojisets/themed-dark.png'
 
-const EMOJI_SET_SOURCES = {
+const colorMode = useColorMode()
+
+const lightTheme = {
   red,
   blue,
   hearts,
   gold,
   faces,
   green,
   earth,
-  cloud,
+  themed: light,
 }
 
-let emojiSetImagesPromise: undefined | Promise<Record<string, HTMLImageElement>>
-
-function loadEmojiSetImages() {
-  if (emojiSetImagesPromise) {
-    return emojiSetImagesPromise
-  }
-
-  const promise = Promise.all(
-    Object.entries(EMOJI_SET_SOURCES).map(([name, src]) => {
-      return new Promise<[string, HTMLImageElement]>((resolve, reject) => {
-        const image = new Image()
-        image.addEventListener('load', () => {
-          resolve([name, image])
-        })
-        image.addEventListener('error', () => {
-          if (promise === emojiSetImagesPromise) {
-            emojiSetImagesPromise = undefined
-          }
-          reject(new Error(`could not load image ${JSON.stringify(src)}`))
-        })
-        image.src = src
-      })
-    }),
-  ).then(sets => Object.fromEntries(sets))
-
-  emojiSetImagesPromise = promise
-  return emojiSetImagesPromise
+const darkTheme = {
+  ...lightTheme,
+  themed: dark,
 }
-
-let running = false
-let handle: undefined | ReturnType<typeof init>
-let observer: undefined | IntersectionObserver
-
-const sizerRef = useTemplateRef<HTMLDivElement>('sizer')
-
-onMounted(() => {
-  const sizer = sizerRef.value
-  if (!sizer) {
-    return
-  }
-
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      if (!entry) {
-        return
-      }
-
-      if (entry.isIntersecting) {
-        running = true
-        loadEmojiSetImages().then(sets => {
-          if (!running) {
-            return
-          }
-          if (!handle) {
-            handle = init(sizer, sets)
-          }
-          handle.start()
-        })
-      } else {
-        running = false
-        handle?.pause()
-      }
-    },
-    {
-      rootMargin: '100px',
-    },
-  )
-  observer.observe(sizer)
-})
-
-onUnmounted(() => {
-  handle?.destroy()
-  handle = undefined
-
-  observer?.disconnect()
-  observer = undefined
-
-  running = false
-})
 </script>

app/components/Noodle/EmojiDay/ThemedLogo.vue

@@ -0,0 +1,100 @@
+<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;
+}
+</style>
+
+<script setup lang="ts">
+import { init } from './emoji-thing'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+
+const props = defineProps<{
+  emojiSets: Record<string, string>
+}>()
+
+let emojiSetImagesPromise: undefined | Promise<Record<string, HTMLImageElement>>
+
+function loadEmojiSetImages() {
+  if (emojiSetImagesPromise) {
+    return emojiSetImagesPromise
+  }
+
+  const promise = Promise.all(
+    Object.entries(props.emojiSets).map(([name, src]) => {
+      return new Promise<[string, HTMLImageElement]>((resolve, reject) => {
+        const image = new Image()
+        image.addEventListener('load', () => {
+          resolve([name, image])
+        })
+        image.addEventListener('error', () => {
+          if (promise === emojiSetImagesPromise) {
+            emojiSetImagesPromise = undefined
+          }
+          reject(new Error(`could not load image ${JSON.stringify(src)}`))
+        })
+        image.src = src
+      })
+    }),
+  ).then(sets => Object.fromEntries(sets))
+
+  emojiSetImagesPromise = promise
+  return emojiSetImagesPromise
+}
+
+let running = false
+let handle: undefined | ReturnType<typeof init>
+let observer: undefined | IntersectionObserver
+
+const sizerRef = useTemplateRef<HTMLDivElement>('sizer')
+
+onMounted(() => {
+  const sizer = sizerRef.value
+  if (!sizer) {
+    return
+  }
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) {
+        return
+      }
+
+      if (entry.isIntersecting) {
+        running = true
+        loadEmojiSetImages().then(sets => {
+          if (!running) {
+            return
+          }
+          if (!handle) {
+            handle = init(sizer, sets)
+          }
+          handle.start()
+        })
+      } else {
+        running = false
+        handle?.pause()
+      }
+    },
+    {
+      rootMargin: '100px',
+    },
+  )
+  observer.observe(sizer)
+})
+
+onUnmounted(() => {
+  handle?.destroy()
+  handle = undefined
+
+  observer?.disconnect()
+  observer = undefined
+
+  running = false
+})
+</script>

app/components/Noodle/EmojiDay/emoji-thing.js

@@ -80,7 +80,7 @@ const GLYPH_CONFIG = [
         path: polyline(569, 130, 592, 123, 613, 136, 628, 168, 628, 257),
       },
       {
-        emojiSet: 'cloud',
+        emojiSet: 'themed',
         emojiCount: 24,
         path: polyline(628, 155, 649, 129, 673, 123, 695, 136, 710, 168, 710, 257),
       },