cohost/html/eggbug-spamclick-battle.tsx

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 />
        "re bug" 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} />
    );

const Timer: Component = () => (
    <details class="timer">
        <summary>
            click this when done (HONOR SYSTEM) (EVEN AMONG EGGBUGS THERE CAN BE
            HONOR)
            <div class="timer-scroll">
                {[
                    ...new Array(601).fill(undefined).map((_, i) => `${i}s`),
                    "∞s",
                ]}
            </div>
        </summary>
    </details>
);

// 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} />
        {/* <Timer /> */}
    </Main>
);