cohost/html/hotline-miami.tsx

import {
    EggbugImg,
    Main,
    mk_class_wrapper,
    render_and_copy,
} from "./common.tsx";
import { ComponentChildren, JSX, toChildArray } from "preact";

const Pulse = ({ children }: { children: ComponentChildren }) => (
    <div class="pulse">
        <div class="pulse-bottom">{...toChildArray(children)}</div>
        <div class="pulse-top">{...toChildArray(children)}</div>
    </div>
);

const Portrait = ({ href, alt }: { href: string; alt: string }) => (
    <img class="portrait" href={href} alt={alt} />
);

const Wiggle = mk_class_wrapper("wiggle");

const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
    <div class="portrait-frame">
        <div class="portrait-frame-inner"></div>
        <Wiggle>{children}</Wiggle>
    </div>
);

const Frame = ({
    tooltip = "PRESS [RMB] TO OPEN BROWSER CONTEXT MENU",
    game = <></>,
    portrait = <EggbugImg type="smiling" />,
    dialogue = "",
    children,
}: {
    tooltip?: string;
    game?: JSX.Element;
    portrait?: JSX.Element;
    dialogue?: string;
    children?: ComponentChildren;
}) =>
    children ? (
        <details class="frame">
            <summary class="frame">
                <div class="top">{tooltip}</div>
                <div class="middle">
                    <div class="game">{game}</div>
                    <PortraitFrame>{portrait}</PortraitFrame>
                </div>
                <div class="bottom">
                    <Pulse>{dialogue}</Pulse>
                </div>
            </summary>
            <div class="next-frame">{...toChildArray(children)}</div>
        </details>
    ) : (
        <div class="frame">
            <div class="top">{tooltip}</div>
            <div class="middle">
                <div class="game">{game}</div>
                <PortraitFrame>{portrait}</PortraitFrame>
            </div>
            <div class="bottom">
                <Pulse>{dialogue}</Pulse>
            </div>
        </div>
    );

// score wiggles faster the more points you get but resets
// there is a canonicl speed for like "go to car"
// could also do bigger ui elements
// but those might depend more on font
// dialogue is also consistent
// but i'm kind of sick of dialogue
// can also recreate the portrait background
// trying to only change the text color may be a dead end :(
// i'll probably go for a different ui element
render_and_copy(
    <Main>
        <Frame dialogue="homestuck is a webcomic by andrew hussie">
            <Frame dialogue="it features a large cast of characters">
                <Frame dialogue="rick roll in tooltip" tooltip="rick roll">
                    <Frame dialogue=" multiline text multiline text multiline text multiline text multiline text" />{" "}
                </Frame>
            </Frame>
        </Frame>
    </Main>
);