99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import { HCenter, Main } 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 `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>
|
|
<span class="health-current">{Math.floor(current).toString()}</span>
|
|
/<span class="health-max">{max.toString()}</span>
|
|
</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={last_health} max={max_health} />
|
|
defeated...
|
|
</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}
|
|
/>
|
|
</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} />
|
|
);
|
|
|
|
debug_render(
|
|
<Main>
|
|
<Battle
|
|
max_health={10_000}
|
|
damage_multiplier={1000}
|
|
damage_bonus={50}
|
|
/>
|
|
</Main>
|
|
);
|