tricky but snazzy EggbugImg ergonomics improvement
This commit is contained in:
parent
5b47292cdf
commit
eba4ae0813
3 changed files with 72 additions and 33 deletions
|
@ -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
18
html/minigolf.tsx
Normal 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
BIN
static/eggbug-golfball.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 90 KiB |
Loading…
Reference in a new issue