cohost/html/hotline-miami.tsx

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

const Pulse = ({ children }: { children: ComponentChildren }): JSX.Element => (
    <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 PortraitFrame = ({ children }: { children: ComponentChildren }) => (
    <div class="portrait-frame">
        <div class="portrait-frame-inner">{children}</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>
        <div class="top">press [rmb] to AWESOMESAUCE</div>
        <div class="middle">
            <div class="game"></div>
            <PortraitFrame>
                <EggbugImg type="smiling" />
            </PortraitFrame>
        </div>
        <div class="bottom">
            <Pulse>
                FORTNITE BATTLE ROYALE PLAY FREE NOW AWESOME FUN GAME PLAY FOR
                FREE NOW! WIN
            </Pulse>
        </div>
    </Main>
);