cohost/html/eggbug-spamclick-battle.tsx

204 lines
5.4 KiB
TypeScript
Raw Normal View History

2023-07-31 17:07:27 -04:00
import {
EggbugEmotion,
EggbugImg,
HCenter,
Main,
render_and_copy,
} from "./common.tsx";
2023-07-31 17:07:27 -04:00
const Eggbug = ({ type = "smiling" }: { type?: EggbugEmotion }) => (
2023-07-12 07:05:48 -04:00
<HCenter>
2023-07-31 17:07:27 -04:00
<EggbugImg type={type} />
2023-07-12 07:05:48 -04:00
</HCenter>
);
2023-07-12 07:05:48 -04:00
function health_style(current: number, last: number, max: number) {
const inc_width = 100 / max;
const dhealth = last - current;
console.log(inc_width, dhealth);
2023-07-12 14:15:53 -04:00
return {
transform: `translateX(${-(inc_width * dhealth)}%)`,
width: `${last * inc_width}%`,
2023-07-12 14:15:53 -04:00
};
2023-07-12 07:05:48 -04:00
}
// could be generalized
// might be worthwhile later since <progress> is BAN
2023-07-12 14:15:53 -04:00
const Health = ({
current,
last,
max,
}: {
current: number;
last: number;
max: number;
}) => (
2023-07-12 07:05:48 -04:00
console.log({ current, last, max }),
(
<div class="health">
<div class="health-bar">
<div
class="health-full"
style={health_style(current, last, max)}
></div>
</div>
2023-07-12 14:15:53 -04:00
<HCenter /*class="health-numeric"*/>
<span class="health-current">
{Math.floor(current).toString()}
</span>
/<span class="health-max">{max.toString()}</span>
</HCenter>
2023-07-12 07:05:48 -04:00
</div>
)
);
// one-time animations of hit numbers of health flying off the screen
2023-07-12 14:15:53 -04:00
const BattleFrame = ({
health,
last_health,
max_health,
2023-07-31 17:07:27 -04:00
phase,
2023-07-12 14:15:53 -04:00
}: {
health: number;
last_health: number;
max_health: number;
2023-07-31 17:07:27 -04:00
phase: 1 | 2;
2023-07-12 14:15:53 -04:00
}) => (
2023-07-12 07:05:48 -04:00
<div class="battle-frame">
2023-07-31 17:07:27 -04:00
<Eggbug type={phase == 1 ? "smiling" : "revengeance"} />
2023-07-12 07:05:48 -04:00
<Health current={health} last={last_health} max={max_health} />
</div>
);
2023-07-12 14:15:53 -04:00
const Defeated = ({
last_health,
max_health,
2023-07-31 17:07:27 -04:00
phase,
2023-07-12 14:15:53 -04:00
}: {
last_health: number;
max_health: number;
2023-07-31 17:07:27 -04:00
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}
2023-07-31 17:07:27 -04:00
damage_bonus={10_000}
phase={2}
/>
</details>
) : (
<div class="defeated" style={{ backgroundColor: "black" }}>
<Eggbug type="jpeg_annihilation" />
<br />
WHAT HAVE YOU DONE
</div>
);
2023-07-31 17:07:27 -04:00
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*
2023-07-12 14:15:53 -04:00
style={{
2023-07-31 17:07:27 -04:00
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
2023-07-31 17:07:27 -04:00
fontSize: `calc(${dmg / max_dmg} * 5rem + 0.5rem)`,
2023-07-12 14:15:53 -04:00
}}
>
2023-07-31 17:07:27 -04:00
<div class="sway">{Math.round(dmg).toString()}</div>
2023-07-12 07:05:48 -04:00
</div>
);
2023-07-12 14:15:53 -04:00
const Battle = ({
2023-07-12 07:05:48 -04:00
max_health = 100,
health = max_health,
last_health = health,
damage_multiplier = 10,
damage_bonus = 1,
2023-07-31 17:07:27 -04:00
phase = 1,
2023-07-12 14:15:53 -04:00
}: // ...rest
Partial<{
max_health: number;
health: number;
last_health: number;
damage_multiplier: number;
damage_bonus: number;
2023-07-31 17:07:27 -04:00
phase?: 1 | 2;
2023-07-12 14:15:53 -04:00
}>) =>
2023-07-12 07:05:48 -04:00
health > 0 ? (
2023-07-12 14:15:53 -04:00
<details class="battle" /*{...rest}*/>
2023-07-12 07:05:48 -04:00
<summary>
<BattleFrame
health={health}
last_health={last_health}
max_health={max_health}
2023-07-31 17:07:27 -04:00
phase={phase}
2023-07-12 07:05:48 -04:00
/>
{health < last_health && (
2023-07-31 17:07:27 -04:00
<DamageNumber
dmg={last_health - health}
max_dmg={damage_multiplier + damage_bonus}
// V sucks V
shl={phase == 1 ? 0 : 50}
/>
)}
2023-07-12 07:05:48 -04:00
</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}
2023-07-31 17:07:27 -04:00
phase={phase}
2023-07-12 07:05:48 -04:00
/>
</details>
) : (
2023-07-31 17:07:27 -04:00
<Defeated
last_health={last_health}
max_health={max_health}
phase={phase}
/>
2023-07-12 07:05:48 -04:00
);
// a timer would be flippin rad
// (it would look like an actual scrolling clock thingie)
// (because it would have to)
2023-07-12 14:15:53 -04:00
render_and_copy(
2023-07-12 07:05:48 -04:00
<Main>
2023-07-31 17:07:27 -04:00
<Battle max_health={10_000} damage_multiplier={300} damage_bonus={40} />
{/* <Timer /> */}
2023-07-12 07:05:48 -04:00
</Main>
);