tricky but snazzy EggbugImg ergonomics improvement

This commit is contained in:
mehbark 2023-08-23 20:31:10 -04:00
parent 5b47292cdf
commit eba4ae0813
3 changed files with 72 additions and 33 deletions

View file

@ -40,12 +40,14 @@ export const HCenter = ({
</div> </div>
); );
export const eggbug_emotions = { export const eggbug_emotions = (attrs: JSX.HTMLAttributes<HTMLImageElement>) =>
({
smiling: ( smiling: (
<img <img
class="eggbug" class="eggbug"
src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png" src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
alt="eggbug, smiling" alt="eggbug, smiling"
{...attrs}
/> />
), ),
frowning: ( frowning: (
@ -53,6 +55,7 @@ export const eggbug_emotions = {
class="eggbug" class="eggbug"
src="https://static.pyrope.net/eggbug-sad.png" src="https://static.pyrope.net/eggbug-sad.png"
alt="eggbug, frowning" alt="eggbug, frowning"
{...attrs}
/> />
), ),
revengeance: ( revengeance: (
@ -60,6 +63,7 @@ export const eggbug_emotions = {
class="eggbug" class="eggbug"
src="https://static.pyrope.net/eggbug-revengeance.png" src="https://static.pyrope.net/eggbug-revengeance.png"
alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!" alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!"
{...attrs}
/> />
), ),
jpeg_annihilation: ( jpeg_annihilation: (
@ -67,14 +71,31 @@ export const eggbug_emotions = {
class="eggbug" class="eggbug"
src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif" src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif"
alt="eggbug dissolving as the image gets more and more jpeg" alt="eggbug dissolving as the image gets more and more jpeg"
{...attrs}
/> />
), ),
} as const; 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) => { export const render_and_copy = (elem: VNode, pretty = false) => {
const rendered = render(elem, null, { pretty }); const rendered = render(elem, null, { pretty });

18
html/minigolf.tsx Normal file
View file

@ -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>
);

BIN
static/eggbug-golfball.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB