cohost/html/eggbug-spamclick-battle.tsx

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>
);