finally functional skeleton

html/common.tsx

@@ -5,3 +5,13 @@ export const Main: Component = (attributes, children) => (
         {...children}
     </div>
 );
+
+export const HCenter: Component = (attributes, children) => (
+    <div
+        {...attributes}
+        class="hcenter"
+        style="display: flex; justify-content: center;"
+    >
+        {...children}
+    </div>
+);

html/eggbug-spamclick-battle.tsx

@@ -1,12 +1,98 @@
+import { HCenter, Main } from "./common.tsx";
 import { debug_render } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
 
 const Eggbug: Component = () => (
-    <img
-        class="eggbug"
-        src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
-        alt="eggbug, smiling"
-    />
+    <HCenter>
+        <img
+            class="eggbug"
+            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
+            alt="eggbug, smiling"
+        />
+    </HCenter>
 );
 
-debug_render(<Eggbug />);
+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>
+);

html/html.ts

@@ -93,12 +93,12 @@ function render_elem(
   mini = false,
 ): string {
   if (children.length == 0) {
-    if (!NON_SELF_CLOSING.includes(tag)) {
+    if (NON_SELF_CLOSING.includes(tag)) {
+      return `<${tag}${render_attributes(attributes)}></${tag}>`;
+    } else {
       return (
         `<${tag}${render_attributes(attributes)}` + (mini ? "/>" : " />")
       );
-    } else {
-      return `<${tag}${render_attributes(attributes)}></${tag}>`;
     }
   } else {
     let inner = "";