155 lines
4.2 KiB
TypeScript
155 lines
4.2 KiB
TypeScript
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>
|
|
);
|