128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
import { HCenter, Main, styles } from "./common.tsx";
|
|
import { debug_render } from "./html.ts";
|
|
import { Component } from "./jsx/jsx-runtime.ts";
|
|
|
|
const Eggbug: Component = () => (
|
|
<HCenter>
|
|
<img
|
|
class="eggbug"
|
|
src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
|
|
alt="eggbug, 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 styles({
|
|
transform: `translateX(${-(inc_width * dhealth)}%)`,
|
|
width: `${last * inc_width}%`,
|
|
});
|
|
}
|
|
|
|
// could be generalized
|
|
// might be worthwhile later since <progress> is BAN
|
|
const Health: Component = ({ current, last, max }) => (
|
|
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: Component = ({ health, last_health, max_health, msg }) => (
|
|
<div class="battle-frame">
|
|
<Eggbug />
|
|
<Health current={health} last={last_health} max={max_health} />
|
|
</div>
|
|
);
|
|
|
|
const Defeated: Component = ({ last_health, max_health }) => (
|
|
<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 />
|
|
"reeadbug" to "killbug"
|
|
</div>
|
|
);
|
|
|
|
const DamageNumber: Component = ({ n }) => (
|
|
<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={styles({
|
|
top: `calc(${100 * Math.random()}px + 25%)`,
|
|
left: `calc(${100 * Math.random()}px + 35%)`,
|
|
// tried some exponential stuff but it was too unwieldy
|
|
// i think this still accomplishes that punch
|
|
"font-size": `calc(${n / 200} * 2rem + 0.5rem)`,
|
|
})}
|
|
>
|
|
<div class="sway">{Math.round(n).toString()}</div>
|
|
</div>
|
|
);
|
|
|
|
const Battle: Component = ({
|
|
max_health = 100,
|
|
health = max_health,
|
|
last_health = health,
|
|
damage_multiplier = 10,
|
|
damage_bonus = 1,
|
|
...rest
|
|
}) =>
|
|
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)
|
|
debug_render(
|
|
<Main>
|
|
<Battle max_health={10_000} damage_multiplier={200} damage_bonus={10} />
|
|
</Main>
|
|
);
|