import { EggbugEmotion, EggbugImg, HCenter, Main, render_and_copy, } from "./common.tsx"; const Eggbug = ({ type = "smiling" }: { type?: EggbugEmotion }) => ( <HCenter> <EggbugImg type={type} /> </HCenter> ); function health_style(current: number, last: number, max: number) { const inc_width = 100 / max; const dhealth = last - current; console.log(inc_width, dhealth); return { transform: `translateX(${-(inc_width * dhealth)}%)`, width: `${last * inc_width}%`, }; } // could be generalized // might be worthwhile later since <progress> is BAN const Health = ({ current, last, max, }: { current: number; last: number; max: number; }) => ( console.log({ current, last, max }), ( <div class="health"> <div class="health-bar"> <div class="health-full" style={health_style(current, last, max)} ></div> </div> <HCenter /*class="health-numeric"*/> <span class="health-current"> {Math.floor(current).toString()} </span> /<span class="health-max">{max.toString()}</span> </HCenter> </div> ) ); // one-time animations of hit numbers of health flying off the screen const BattleFrame = ({ health, last_health, max_health, phase, }: { health: number; last_health: number; max_health: number; phase: 1 | 2; }) => ( <div class="battle-frame"> <Eggbug type={phase == 1 ? "smiling" : "revengeance"} /> <Health current={health} last={last_health} max={max_health} /> </div> ); const Defeated = ({ last_health, max_health, phase, }: { last_health: number; max_health: number; phase: 1 | 2; }) => phase == 1 ? ( <details class="defeated" style={{ backgroundColor: "#232233" }}> <summary> <Eggbug type="frowning" /> <Health current={0} last={0} max={max_health} /> eggbug is physically unharmed, emotionally destroyed <br /> ... <br /> ok eggbug is fine now <br /> "re bug" to "killbug" <br /> submit runs to{" "} <a href="https://cohost.org/rc/tagged/KILLing%20eggbug%20rapidly"> #KILLing eggbug rapidly </a>{" "} <br /> click again <br /> at you OWN PREIL! </summary> <Battle max_health={100_000_000} damage_multiplier={5_000_000} damage_bonus={10_000} phase={2} /> </details> ) : ( <div class="defeated" style={{ backgroundColor: "black" }}> <Eggbug type="jpeg_annihilation" /> <br /> WHAT HAVE YOU DONE </div> ); const DamageNumber = ({ dmg, max_dmg, shl, }: { dmg: number; max_dmg: number; shl: number; }) => ( <div class="damage-number" // changing this to use this much nicer styles thing helped me notice the bug awesome // i still should really, really switch to react // or preact! // anything with *actual typing* style={{ top: `${Math.floor(50 * Math.random())}%`, left: `${Math.floor(50 * Math.random()) + 25 - shl}%`, // tried some exponential stuff but it was too unwieldy // i think this still accomplishes that punch fontSize: `calc(${dmg / max_dmg} * 5rem + 0.5rem)`, }} > <div class="sway">{Math.round(dmg).toString()}</div> </div> ); const Battle = ({ max_health = 100, health = max_health, last_health = health, damage_multiplier = 10, damage_bonus = 1, phase = 1, }: // ...rest Partial<{ max_health: number; health: number; last_health: number; damage_multiplier: number; damage_bonus: number; phase?: 1 | 2; }>) => health > 0 ? ( <details class="battle" /*{...rest}*/> <summary> <BattleFrame health={health} last_health={last_health} max_health={max_health} phase={phase} /> {health < last_health && ( <DamageNumber dmg={last_health - health} max_dmg={damage_multiplier + damage_bonus} // V sucks V shl={phase == 1 ? 0 : 50} /> )} </summary> <Battle health={ health - (damage_multiplier * Math.random() + damage_bonus) } last_health={health} max_health={max_health} damage_multiplier={damage_multiplier} damage_bonus={damage_bonus} phase={phase} /> </details> ) : ( <Defeated last_health={last_health} max_health={max_health} phase={phase} /> ); // a timer would be flippin rad // (it would look like an actual scrolling clock thingie) // (because it would have to) render_and_copy( <Main> <Battle max_health={10_000} damage_multiplier={300} damage_bonus={40} /> {/* <Timer /> */} </Main> );