283 lines
10 KiB
TypeScript
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— 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>
|
|
);
|