coq talk with eggbug
This commit is contained in:
parent
f4d9cf8c5e
commit
619818774e
2 changed files with 258 additions and 16 deletions
257
html/coq.tsx
Normal file
257
html/coq.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
||||||
|
import { reify_dialogue } from "./dialogue.tsx";
|
||||||
|
import { debug_render } from "./html.ts";
|
||||||
|
import { Component } from "./jsx/jsx-runtime.ts";
|
||||||
|
|
||||||
|
const Option: Component = ({ n }, children) => (
|
||||||
|
<>
|
||||||
|
<span
|
||||||
|
class="number"
|
||||||
|
title={`Option #${n} (there's no actual keyboard shortcut, sorry)`}
|
||||||
|
>{`[${n}]`}</span>{" "}
|
||||||
|
{...children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const WaterRitual: Component = () => (
|
||||||
|
<span class="water-ritual">
|
||||||
|
[begin water ritual; <span class="one">1</span> dram of{" "}
|
||||||
|
<span class="water">water</span>]
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
const End: Component = () => <span class="end">[End]</span>;
|
||||||
|
|
||||||
|
const Name: Component = ({ color }, children) => (
|
||||||
|
<div style={`color: ${color};`} class="name">
|
||||||
|
{...children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Speech: Component = (
|
||||||
|
{ name, name_color, portrait = <></> },
|
||||||
|
children
|
||||||
|
) => (
|
||||||
|
<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">{...children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Website: Component = () => <span class="website">website</span>;
|
||||||
|
|
||||||
|
const Eggbug: Component = ({ emotion }, children) => (
|
||||||
|
<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}` : ""
|
||||||
|
}}`}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{...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={1}>
|
||||||
|
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>,
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
debug_render(
|
||||||
|
<div class="main">
|
||||||
|
<div class="gradient">{dialogue}</div>
|
||||||
|
<div class="scanlines"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
@ -8,7 +8,7 @@ function not_empty<T>(arr: T[]): arr is [T, ...T[]] {
|
||||||
return arr.length > 0;
|
return arr.length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
function reify_dialogue(d: Dialogue): Html {
|
export function reify_dialogue(d: Dialogue): Html {
|
||||||
if (!Array.isArray(d)) return d;
|
if (!Array.isArray(d)) return d;
|
||||||
|
|
||||||
const [r, ...rest] = d;
|
const [r, ...rest] = d;
|
||||||
|
|
@ -30,18 +30,3 @@ function reify_dialogue(d: Dialogue): Html {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const rd = reify_dialogue([
|
|
||||||
"Hi!",
|
|
||||||
["Hello!", "How are you!"],
|
|
||||||
[
|
|
||||||
"Bye",
|
|
||||||
[
|
|
||||||
":(",
|
|
||||||
["Sorry", <span class="blue">:D</span>],
|
|
||||||
["Not sorry", <span class="red">D:</span>],
|
|
||||||
],
|
|
||||||
],
|
|
||||||
]);
|
|
||||||
|
|
||||||
debug_render(rd);
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue