cohost/html/coq.tsx

283 lines
10 KiB
TypeScript

import { Main, render_and_copy } from "./common.tsx";
import { reify_dialogue } from "./dialogue.tsx";
import { ComponentChildren, toChildArray, JSX } from "preact";
const Option = ({
n,
children,
}: {
n: number;
children: ComponentChildren;
}) => (
<>
<span
class="number"
title={`Option #${n} (there's no actual keyboard shortcut, sorry)`}
>{`[${n}]`}</span>{" "}
{...toChildArray(children)}
</>
);
const WaterRitual = () => (
<span class="water-ritual">
[begin water ritual; <span class="one">1</span> dram of{" "}
<span class="water">water</span>]
</span>
);
const End = () => <span class="end">[End]</span>;
const Name = ({
color,
children,
}: {
color: string;
children: ComponentChildren;
}) => (
<div style={`color: ${color};`} class="name">
{...toChildArray(children)}
</div>
);
const Speech = ({
name,
name_color,
children,
portrait = <></>,
}: {
name: string;
name_color: string;
children: ComponentChildren;
portrait: JSX.Element;
}) => (
<div class="speech">
<div class="portrait">{portrait}</div>
<Name color={name_color}>{name}</Name>
<img
src="https://static.pyrope.net/coq-hr.png"
alt="a snazzy horizontal rule with three central spikes, taken from caves of qud"
/>
<div class="text">{...toChildArray(children)}</div>
</div>
);
const Website = () => <span class="website">website</span>;
const Eggbug = ({
emotion,
children,
}: {
emotion?: "angry";
children: ComponentChildren;
}) => (
<Speech
name="Eggbug"
name_color="#83254F"
portrait={
<img
src={`https://static.pyrope.net/coq-eggbug-sprite${
emotion ? `-${emotion}` : ""
}.png`}
alt={`a pixel-art, caves of qud-style portrait of eggbug${
emotion ? ` that looks ${emotion}` : ""
}}`}
/>
}
>
{...toChildArray(children)}
</Speech>
);
const dialogue = reify_dialogue([
<Eggbug>
hi hey hi what whati
<br /> what is up
</Eggbug>,
[
<Option n={1}>I want your stuff</Option>,
[
<Eggbug>
oh cool that's neat what stuff like what stuff are you talking
about
</Eggbug>,
[
<Option n={1}>You know, your... stuff.</Option>,
[
<Eggbug>
i really don't know how would i know what ur talking
about lol
</Eggbug>,
[
<Option n={1}>
Items, trinkets, books. Stuff. You really should
know this
</Option>,
[
<Eggbug>
okay like, okay yeah idon't know still
</Eggbug>,
[
<Option n={1}>Give</Option>,
[
<Eggbug>what</Eggbug>,
[
<Option n={1}>me</Option>,
[
<Eggbug>
oh mehbark is like making the
player like click through a
bunch for comedic effect ok
</Eggbug>,
[
<Option n={1}>your</Option>,
[
<Eggbug>
it's taking them a ton
of effort to make this
deep tree though lol
like they're typing it
in and thinking hm maybe
i could abstract this a
bit but they know that
will be more trouble
than it's worth
</Eggbug>,
[
<Option n={1}>
stuff.
</Option>,
<Eggbug>
aslo it's 5 in the
morning for
the&mdash; oh it's
done
<br /> i still have
no stuff ok
<br />
game over i guess
(all of these paths
lead to game over
(except one (this
was definitely
planned and not
decided as this was
being written)))
</Eggbug>,
],
],
],
],
],
],
],
],
],
],
],
],
],
[
<Option n={2}>Where are your wings???</Option>,
[
<Eggbug>
That my friend, is a long, sad story. There was a time when
people cared to hear it, but I fear that time has passed.
</Eggbug>,
[
<Option n={1}>
Thanks for warning me. That sounds really boring, PASS!
</Option>,
<Eggbug emotion="angry">
you are such a butt you suck your so annoying LEAVE{" "}
<a href="https://cohost.org/mehbark/post/1967096-game-over">
<span style="color: red;">GAME OVER</span>
<span style="color: red;">GAME OVER</span>
<span style="color: red;">GAME OVER</span>
</a>
</Eggbug>,
],
[
<Option n={2}>
I would be honored to any tale from an eggbug of your
stature, let alone one of such great intrigue.
</Option>,
[
<Eggbug>
okay, get comfortable, something to eat, something to
drink, heck, maybe even rent a{" "}
<a href="https://www.webstaurantstore.com/55609/portable-toilets-and-urinals.html">
portable bathroom
</a>{" "}
to keep nearby. this is a LONG story
</Eggbug>,
[
<Option n={1}>
I have done every single one of those things, and I
also hired a guy to slap me whenever I'm falling
asleep (due to length, not boredom, of course).
</Option>,
<Eggbug>
it was to hard to get the pixelts to work
</Eggbug>,
],
],
],
],
],
[
<Option n={3}>
Based on an in-depth analysis of the mehbark, I have found a{" "}
<span class="power-word">power word</span> that will GUARANTEE my
victory.
</Option>,
[
<Eggbug>
heck yes i love <span class="power-word">power word</span>s have
at it ( idoubt it will work no offense)
</Eggbug>,
[
<Option n={1}>homestuck</Option>,
<span class="win">you win</span>,
],
],
],
[
<Option n={4}>
Your thirst is mine, my water is yours. <WaterRitual />{" "}
</Option>,
[
<div>
You don't have any water because this is a <Website />. <br />
also eggbug probably uses like eggbug juice or something
</div>,
[
<Option n={1}>Wait, really?</Option>,
<Eggbug>
how wouldi know lol ask like a cohost maker lol
</Eggbug>,
],
],
],
[
<Option n={5}>
Live and drink. <End />
</Option>,
<Eggbug>
uh what
<br />
ok
<br />i guess
<br />
every dialogue tree eventually ends anyways so this is just like to
look more coqqy iguess
</Eggbug>,
],
]);
render_and_copy(
<Main>
<div class="gradient">{dialogue}</div>
<div class="scanlines"></div>
</Main>
);