tricky but snazzy EggbugImg ergonomics improvement

html/common.tsx

@@ -40,41 +40,62 @@ export const HCenter = ({
     </div>
 );
 
-export const eggbug_emotions = {
+export const eggbug_emotions = (attrs: JSX.HTMLAttributes<HTMLImageElement>) =>
-    smiling: (
+    ({
-        <img
+        smiling: (
-            class="eggbug"
+            <img
-            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
+                class="eggbug"
-            alt="eggbug, smiling"
+                src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
-        />
+                alt="eggbug, smiling"
-    ),
+                {...attrs}
-    frowning: (
+            />
-        <img
+        ),
-            class="eggbug"
+        frowning: (
-            src="https://static.pyrope.net/eggbug-sad.png"
+            <img
-            alt="eggbug, frowning"
+                class="eggbug"
-        />
+                src="https://static.pyrope.net/eggbug-sad.png"
-    ),
+                alt="eggbug, frowning"
-    revengeance: (
+                {...attrs}
-        <img
+            />
-            class="eggbug"
+        ),
-            src="https://static.pyrope.net/eggbug-revengeance.png"
+        revengeance: (
-            alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!"
+            <img
-        />
+                class="eggbug"
-    ),
+                src="https://static.pyrope.net/eggbug-revengeance.png"
-    jpeg_annihilation: (
+                alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!"
-        <img
+                {...attrs}
-            class="eggbug"
+            />
-            src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif"
+        ),
-            alt="eggbug dissolving as the image gets more and more jpeg"
+        jpeg_annihilation: (
-        />
+            <img
-    ),
+                class="eggbug"
-} as const;
+                src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif"
+                alt="eggbug dissolving as the image gets more and more jpeg"
+                {...attrs}
+            />
+        ),
+        golfball: (
+            <img
+                class="eggbug"
+                src="https://static.pyrope.net/eggbug-golfball.png"
+                alt="eggbug as a golfball. no legs"
+                {...attrs}
+            />
+        ),
+    } as const);
 
-export type EggbugEmotion = keyof typeof eggbug_emotions;
+export type EggbugEmotion = keyof ReturnType<typeof eggbug_emotions>;
+type bla = ({
+    type: EggbugEmotion;
+} & JSX.HTMLAttributes<HTMLImageElement>)["type"];
 
-export const EggbugImg = ({ type }: { type: EggbugEmotion }) =>
+export const EggbugImg = ({
-    eggbug_emotions[type];
+    type,
+    ...attrs
+}: { type: EggbugEmotion } & Omit<
+    JSX.HTMLAttributes<HTMLImageElement>,
+    "type"
+>) => eggbug_emotions(attrs)[type];
 
 export const render_and_copy = (elem: VNode, pretty = false) => {
     const rendered = render(elem, null, { pretty });

html/minigolf.tsx

@@ -0,0 +1,18 @@
+import { EggbugImg, render_and_copy } from "./common.tsx";
+
+render_and_copy(
+    <div style={{ resize: "both", overflow: "hidden" }}>
+        <div
+            style={{
+                position: "absolute",
+                right: 0,
+                bottom: 0,
+                aspectRatio: 1,
+                width: "5rem",
+                pointerEvents: "none",
+            }}
+        >
+            <EggbugImg type="golfball" style={{ margin: 0 }} />
+        </div>
+    </div>
+);