mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tricky but snazzy EggbugImg ergonomics improvement

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

87
html/common.tsx
View file

@ -40,41 +40,62 @@ export const HCenter = ({
</div> </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) => { 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 90 KiB