171 lines
9.7 KiB
TypeScript
171 lines
9.7 KiB
TypeScript
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>
|
|
);
|