cohost/html/coq.tsx

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>
);