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="hi">
            <Frame
                dialogue="don't worry, this isn't going to be another dialogue tree"
                tooltip="I'M SICK OF THEM"
            >
                <Frame
                    dialogue="i just wanna talk! :D"
                    tooltip="I CAN'T THINK OF ANYTHING ELSE"
                >
                    <Frame dialogue="so how was">
                        <Frame dialogue="how was yourrr day">
                            <Frame
                                dialogue="uh."
                                tooltip="NEXT TIME I'LL WORK TOWARDS SOMETHING MORE SPECIFIC"
                            >
                                <Frame dialogue="come on, say it to the screen! no one will hear probably">
                                    <Frame dialogue="that's awesome! i had an awesome day to">
                                        <Frame dialogue="i we i was well yeah i was just you know i was eggbug">
                                            <Frame
                                                dialogue="it's my job you know"
                                                tooltip="MASCOTS ARE USEFUL AS A COMMON TOUCHSTONE"
                                            >
                                                <Frame dialogue="so yeah! yeah. oh also uh also btw">
                                                    <Frame dialogue="please don't like. hit me. with the bat">
                                                        <Frame dialogue="that would hurt obv">
                                                            <Frame dialogue="wait what did you say?">
                                                                <Frame
                                                                    dialogue="this is a static image?"
                                                                    tooltip="I COULD HAVE DONE MORE THAN ONE"
                                                                >
                                                                    <Frame
                                                                        dialogue="oh wait that's rad"
                                                                        tooltip="I DIDN'T"
                                                                    >
                                                                        <Frame dialogue="i don't think my body is actually eggbug">
                                                                            <Frame dialogue="which is like super duper weird right">
                                                                                <Frame dialogue="i think i'm just like">
                                                                                    <Frame
                                                                                        dialogue="a panther mask or something"
                                                                                        tooltip="I'M JUST GLAD I FOUND SOMETHING THAT LOOKS OK"
                                                                                    >
                                                                                        <Frame dialogue="and hey! wait a minute">
                                                                                            <Frame
                                                                                                dialogue="why do i reset when u click D:"
                                                                                                tooltip="SORRY I EVEN EMAILED MYSELF A WAY TO FIX IT"
                                                                                            >
                                                                                                <Frame
                                                                                                    dialogue="it's really nauseating..."
                                                                                                    tooltip="BUT DIDN'T BOTHER"
                                                                                                >
                                                                                                    <Frame dialogue="anyway">
                                                                                                        <Frame
                                                                                                            dialogue="take care"
                                                                                                            tooltip="THIS IS A HOTLINE MIAMI THING FOR SURE"
                                                                                                        >
                                                                                                            <Frame
                                                                                                                dialogue="i'll go back to my eggjob"
                                                                                                                tooltip="SO SUCCESS. I GUESS"
                                                                                                            />
                                                                                                        </Frame>
                                                                                                    </Frame>
                                                                                                </Frame>
                                                                                            </Frame>
                                                                                        </Frame>
                                                                                    </Frame>
                                                                                </Frame>
                                                                            </Frame>
                                                                        </Frame>
                                                                    </Frame>
                                                                </Frame>
                                                            </Frame>
                                                        </Frame>
                                                    </Frame>
                                                </Frame>
                                            </Frame>
                                        </Frame>
                                    </Frame>
                                </Frame>
                            </Frame>
                        </Frame>
                    </Frame>
                </Frame>
            </Frame>
        </Frame>
    </Main>
);