import { EggbugImg, HCenter, Main, render_and_copy } from "./common.tsx"; const Eggbug = () => ( <HCenter> <EggbugImg type="smiling" /> </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, }: { health: number; last_health: number; max_health: number; }) => ( <div class="battle-frame"> <Eggbug /> <Health current={health} last={last_health} max={max_health} /> </div> ); const Defeated = ({ last_health, max_health, }: { last_health: number; max_health: number; }) => ( <div class="defeated"> <Eggbug /> <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> </div> ); const DamageNumber = ({ n }: { n: 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: `calc(${100 * Math.random()}px + 15%)`, left: `calc(${100 * Math.random()}px + 25%)`, // tried some exponential stuff but it was too unwieldy // i think this still accomplishes that punch fontSize: `calc(${n / 200} * 2rem + 0.5rem)`, }} > <div class="sway">{Math.round(n).toString()}</div> </div> ); const Battle = ({ max_health = 100, health = max_health, last_health = health, damage_multiplier = 10, damage_bonus = 1, }: // ...rest Partial<{ max_health: number; health: number; last_health: number; damage_multiplier: number; damage_bonus: number; }>) => health > 0 ? ( <details class="battle" /*{...rest}*/> <summary> <BattleFrame health={health} last_health={last_health} max_health={max_health} /> {health < last_health && ( <DamageNumber n={last_health - health} /> )} </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} /> </details> ) : ( <Defeated last_health={last_health} max_health={max_health} /> ); // 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={200} damage_bonus={10} /> {/* <Timer /> */} </Main> );