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 = (
        <img
            src="https://static.pyrope.net/hlm-1.png"
            alt="a screenshot from hotline miami 2: wrong number. jacket, wearing a rooster mask, is standing in a building holding a baseball bat in front of a purpleish-pink blob that sort of resembles eggbug. it is raining outside the building, and the Void is cyan. css and html are spelled in blood on the left and right sides of the building respectiveland right sides of the building respectively."
        />
    ),
    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>
);