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