1 files changed, 27 insertions, 0 deletions
diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index 051554d..b94fca0 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -50,6 +50,10 @@ function assetUrl(file, kind) {
     const backdrops = globalThis.__BLUEBEY_BACKGROUNDS__ ?? {};
     return backdrops[file] ?? `assets/backgrounds/${file}.webp`;
   }
+  if (kind === 'beard') {
+    const beards = globalThis.__BLUEBEY_BEARDS__ ?? {};
+    return beards[file] ?? `assets/beards/${file}`;
+  }
   return inlined[file] ?? `assets/fonts/${file}`;
 }
 
@@ -385,6 +389,29 @@ async function init() {
   });
   const animator = new Animator({ state });
 
+  // Beard drawings supplied as files (`assets/beards/<kind>.png`): a kind that has
+  // one is drawn from the file instead of the built-in strokes. A missing file is
+  // skipped, so the app works before any are added.
+  void (async () => {
+    // Only the kinds that actually ship a drawing. Add a name here when its file is
+    // added to assets/beards/, so no 404s are logged for the ones without one.
+    const kinds = ['scotch'];
+    const loaded = {};
+    await Promise.all(kinds.map(async (kind) => {
+      try {
+        const response = await fetch(assetUrl(`${kind}.png`, 'beard'));
+        if (!response.ok) return;
+        loaded[kind] = await createImageBitmap(await response.blob());
+      } catch {
+        /* no drawing for this kind: the built-in one is used */
+      }
+    }));
+    if (Object.keys(loaded).length) {
+      face.setBeardImages(loaded);
+      app.needsRender = true;
+    }
+  })();
+
   // ------------------------------------------------------------------- look
   const look = createLook({
     renderer,