108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
|
import { ComponentChildren } from "preact";
|
||
|
|
import { Cycle, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
const Msg = ({
|
||
|
|
hash,
|
||
|
|
children,
|
||
|
|
bridge = " then",
|
||
|
|
click_blue = "click blue",
|
||
|
|
}: {
|
||
|
|
hash: string;
|
||
|
|
children: ComponentChildren;
|
||
|
|
bridge?: string;
|
||
|
|
click_blue?: string;
|
||
|
|
}) => (
|
||
|
|
<span>
|
||
|
|
<a
|
||
|
|
href={`#${hash}`}
|
||
|
|
style={{
|
||
|
|
fontWeight: "bold",
|
||
|
|
textDecoration: "none",
|
||
|
|
color: "#f26565",
|
||
|
|
cursor: "pointer",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</a>
|
||
|
|
{bridge}{" "}
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
fontWeight: "bold",
|
||
|
|
color: "rgb(87, 144, 251)",
|
||
|
|
cursor: "pointer",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{click_blue}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<Cycle width_px={480} height_px={50}>
|
||
|
|
<span>
|
||
|
|
here's how this works:{" "}
|
||
|
|
<Msg hash="Good job!" bridge=", then you">
|
||
|
|
you click red
|
||
|
|
</Msg>
|
||
|
|
</span>
|
||
|
|
<Msg hash="Good job, again!" bridge=", then">
|
||
|
|
click red
|
||
|
|
</Msg>
|
||
|
|
<span>
|
||
|
|
one more time.{" "}
|
||
|
|
<Msg hash="Hello!" bridge=", then">
|
||
|
|
click red
|
||
|
|
</Msg>
|
||
|
|
, no matter what.
|
||
|
|
</span>
|
||
|
|
<Msg hash="Hello?" bridge=" then " click_blue="click me and let's go">
|
||
|
|
got it? did you click this too?
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="Hello??"
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="yeah, sorry. bit of a slip-up!"
|
||
|
|
>
|
||
|
|
um... "me?"
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="Are you even seeing this?"
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="i'm sorry"
|
||
|
|
>
|
||
|
|
it's... fine. don't sweat it, blue.
|
||
|
|
</Msg>
|
||
|
|
<Msg hash="Oh right." bridge=" ... " click_blue="...">
|
||
|
|
whatever. we can still salvage this. probably.
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="You care more about these dumb colors."
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="getting clicked?"
|
||
|
|
>
|
||
|
|
let's just... what were we even doing?
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="You know, they really weren't meant to be a TIHYLtTW reference."
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="well we can't talk if we aren't clicked"
|
||
|
|
>
|
||
|
|
yeah, yeah of course. but why??
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="Even though 'mehbark' did read that novella a while ago."
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="okay, okay. sheesh, calm down!"
|
||
|
|
>
|
||
|
|
that's not a reason!
|
||
|
|
</Msg>
|
||
|
|
<Msg
|
||
|
|
hash="They liked it! But that's irrelevant, red and blue just came to mind."
|
||
|
|
bridge=" ... "
|
||
|
|
click_blue="you're right"
|
||
|
|
>
|
||
|
|
don't tell me to c- you know what, let's not.
|
||
|
|
</Msg>
|
||
|
|
</Cycle>
|
||
|
|
);
|