public/bluebey-studio: ダリひげを左右半分の画像にして間隔を調整可能に

hige-2-right（ぶるべーから見て右側のダリ髭）を取り込み、左右それぞれに描いて「左右の間隔」で開きを調整できるようにした。ファイル名が -right.png のものは片側（ミラーして2枚描く）として扱う。

全幅だった kaiser.png は kaiser-right.png に置き換えた。

1 files changed, 15 insertions, 7 deletions

diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index f90dfc8..9514ca4 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -393,17 +393,25 @@ async function init() {
   // 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', 'kaiser', 'apron'];
+    // Each entry: a beard kind and the drawing in `assets/beards/`. A file ending
+    // `-right.png` is one side of a moustache; it is drawn twice (mirrored) with a
+    // `spacing` gap between them. A kind with no entry uses the built-in strokes.
+    const files = [
+      { kind: 'scotch', file: 'scotch.png' },
+      { kind: 'kaiser', file: 'kaiser-right.png' },
+      { kind: 'apron', file: 'apron.png' },
+    ];
     const loaded = {};
-    await Promise.all(kinds.map(async (kind) => {
+    await Promise.all(files.map(async ({ kind, file }) => {
       try {
-        const response = await fetch(assetUrl(`${kind}.png`, 'beard'));
+        const response = await fetch(assetUrl(file, 'beard'));
         if (!response.ok) return;
-        loaded[kind] = await createImageBitmap(await response.blob());
+        loaded[kind] = {
+          image: await createImageBitmap(await response.blob()),
+          half: file.endsWith('-right.png'),
+        };
       } catch {
-        /* no drawing for this kind: the built-in one is used */
+        /* a missing drawing falls back to the built-in strokes */
       }
     }));
     if (Object.keys(loaded).length) {