fight done enough, gonna hack in a timer

html/common.tsx

@@ -15,3 +15,8 @@ export const HCenter: Component = (attributes, children) => (
         {...children}
     </div>
 );
+
+export const styles = (s: Record<string, string | number>): string =>
+    Object.entries(s)
+        .map(([rule, val]) => `${rule}: ${val};`)
+        .join("");

html/eggbug-spamclick-battle.tsx

@@ -1,4 +1,4 @@
-import { HCenter, Main } from "./common.tsx";
+import { HCenter, Main, styles } from "./common.tsx";
 import { debug_render } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
 
@@ -17,9 +17,10 @@ function health_style(current: number, last: number, max: number) {
     const dhealth = last - current;
     console.log(inc_width, dhealth);
 
-    return `transform: translateX(${-(inc_width * dhealth)}%); width: ${
-        last * inc_width
-    }%;`;
+    return styles({
+        transform: `translateX(${-(inc_width * dhealth)}%)`,
+        width: `${last * inc_width}%`,
+    });
 }
 
 // could be generalized
@@ -34,8 +35,12 @@ const Health: Component = ({ current, last, max }) => (
                     style={health_style(current, last, max)}
                 ></div>
             </div>
-            <span class="health-current">{Math.floor(current).toString()}</span>
-            /<span class="health-max">{max.toString()}</span>
+            <HCenter class="health-numeric">
+                <span class="health-current">
+                    {Math.floor(current).toString()}
+                </span>
+                /<span class="health-max">{max.toString()}</span>
+            </HCenter>
         </div>
     )
 );
@@ -51,8 +56,30 @@ const BattleFrame: Component = ({ health, last_health, max_health, msg }) => (
 const Defeated: Component = ({ last_health, max_health }) => (
     <div class="defeated">
         <Eggbug />
-        <Health current={0} last={last_health} max={max_health} />
-        defeated...
+        <Health current={0} last={0} max={max_health} />
+        eggbug is physically unharmed, emotionally destroyed <br />
+        ... <br />
+        ok eggbug is fine now <br />
+        "reeadbug" 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>
 );
 
@@ -72,6 +99,9 @@ const Battle: Component = ({
                     last_health={last_health}
                     max_health={max_health}
                 />
+                {health < last_health && (
+                    <DamageNumber n={last_health - health} />
+                )}
             </summary>
             <Battle
                 health={
@@ -87,12 +117,11 @@ const Battle: Component = ({
         <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)
 debug_render(
     <Main>
-        <Battle
-            max_health={10_000}
-            damage_multiplier={1000}
-            damage_bonus={50}
-        />
+        <Battle max_health={10_000} damage_multiplier={200} damage_bonus={10} />
     </Main>
 );