kill eggbug 2.0: DONE ENOUGH

html/common.tsx

@@ -47,9 +47,32 @@ export const eggbug_emotions = {
             alt="eggbug, smiling"
         />
     ),
+    frowning: (
+        <img
+            class="eggbug"
+            src="https://static.pyrope.net/eggbug-sad.png"
+            alt="eggbug, frowning"
+        />
+    ),
+    revengeance: (
+        <img
+            class="eggbug"
+            src="https://static.pyrope.net/eggbug-revengeance.png"
+            alt="ULTRA EGGBUG REVENGEANCE, MEGA. THERE IS FIRE. THERE IS TRISCAR. EGGBUG REVENGEANCE. YOU ARE. DIE!"
+        />
+    ),
+    jpeg_annihilation: (
+        <img
+            class="eggbug"
+            src="https://static.pyrope.net/eggbug-jpeg-annihilation.gif"
+            alt="eggbug dissolving as the image gets more and more jpeg"
+        />
+    ),
 } as const;
 
-export const EggbugImg = ({ type }: { type: keyof typeof eggbug_emotions }) =>
+export type EggbugEmotion = keyof typeof eggbug_emotions;
+
+export const EggbugImg = ({ type }: { type: EggbugEmotion }) =>
     eggbug_emotions[type];
 
 export const render_and_copy = (elem: VNode, pretty = false) => {

html/eggbug-spamclick-battle.tsx

@@ -1,8 +1,14 @@
-import { EggbugImg, HCenter, Main, render_and_copy } from "./common.tsx";
+import {
+    EggbugEmotion,
+    EggbugImg,
+    HCenter,
+    Main,
+    render_and_copy,
+} from "./common.tsx";
 
-const Eggbug = () => (
+const Eggbug = ({ type = "smiling" }: { type?: EggbugEmotion }) => (
     <HCenter>
-        <EggbugImg type="smiling" />
+        <EggbugImg type={type} />
     </HCenter>
 );
 
@@ -52,13 +58,15 @@ const BattleFrame = ({
     health,
     last_health,
     max_health,
+    phase,
 }: {
     health: number;
     last_health: number;
     max_health: number;
+    phase: 1 | 2;
 }) => (
     <div class="battle-frame">
-        <Eggbug />
+        <Eggbug type={phase == 1 ? "smiling" : "revengeance"} />
         <Health current={health} last={last_health} max={max_health} />
     </div>
 );
@@ -66,12 +74,16 @@ const BattleFrame = ({
 const Defeated = ({
     last_health,
     max_health,
+    phase,
 }: {
     last_health: number;
     max_health: number;
-}) => (
+    phase: 1 | 2;
-    <div class="defeated">
+}) =>
-        <Eggbug />
+    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 />
@@ -80,11 +92,35 @@ const Defeated = ({
                 submit runs to{" "}
                 <a href="https://cohost.org/rc/tagged/KILLing%20eggbug%20rapidly">
                     #KILLing eggbug rapidly
-        </a>
+                </a>{" "}
+                <br />
+                click again <br />
+                at you OWN PREIL!
+            </summary>
+            <Battle
+                max_health={100_000_000}
+                damage_multiplier={3_000_000}
+                damage_bonus={10_000}
+                phase={2}
+            />
+        </details>
+    ) : (
+        <div class="defeated" style={{ backgroundColor: "black" }}>
+            <Eggbug type="jpeg_annihilation" />
+            <br />
+            WHAT HAVE YOU DONE
         </div>
     );
 
-const DamageNumber = ({ n }: { n: number }) => (
+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
@@ -92,14 +128,14 @@ const DamageNumber = ({ n }: { n: number }) => (
         // or preact!
         // anything with *actual typing*
         style={{
-            top: `calc(${100 * Math.random()}px + 15%)`,
+            top: `${Math.floor(50 * Math.random())}%`,
-            left: `calc(${100 * Math.random()}px + 25%)`,
+            left: `${Math.floor(50 * Math.random()) + 25 - shl}%`,
             // tried some exponential stuff but it was too unwieldy
             // i think this still accomplishes that punch
-            fontSize: `calc(${n / 200} * 2rem + 0.5rem)`,
+            fontSize: `calc(${dmg / max_dmg} * 5rem + 0.5rem)`,
         }}
     >
-        <div class="sway">{Math.round(n).toString()}</div>
+        <div class="sway">{Math.round(dmg).toString()}</div>
     </div>
 );
 
@@ -109,6 +145,7 @@ const Battle = ({
     last_health = health,
     damage_multiplier = 10,
     damage_bonus = 1,
+    phase = 1,
 }: // ...rest
 Partial<{
     max_health: number;
@@ -116,6 +153,7 @@ Partial<{
     last_health: number;
     damage_multiplier: number;
     damage_bonus: number;
+    phase?: 1 | 2;
 }>) =>
     health > 0 ? (
         <details class="battle" /*{...rest}*/>
@@ -124,9 +162,15 @@ Partial<{
                     health={health}
                     last_health={last_health}
                     max_health={max_health}
+                    phase={phase}
                 />
                 {health < last_health && (
-                    <DamageNumber n={last_health - health} />
+                    <DamageNumber
+                        dmg={last_health - health}
+                        max_dmg={damage_multiplier + damage_bonus}
+                        // V sucks V
+                        shl={phase == 1 ? 0 : 50}
+                    />
                 )}
             </summary>
             <Battle
@@ -137,10 +181,15 @@ Partial<{
                 max_health={max_health}
                 damage_multiplier={damage_multiplier}
                 damage_bonus={damage_bonus}
+                phase={phase}
             />
         </details>
     ) : (
-        <Defeated last_health={last_health} max_health={max_health} />
+        <Defeated
+            last_health={last_health}
+            max_health={max_health}
+            phase={phase}
+        />
     );
 
 // a timer would be flippin rad
@@ -148,7 +197,7 @@ Partial<{
 // (because it would have to)
 render_and_copy(
     <Main>
-        <Battle max_health={10_000} damage_multiplier={200} damage_bonus={10} />
+        <Battle max_health={10_000} damage_multiplier={300} damage_bonus={40} />
         {/* <Timer /> */}
     </Main>
 );

html/random-tag-of-the-day.tsx

@@ -29,6 +29,10 @@ const tags = [
     "rats",
     "worldwide music wednesday",
     "chaos magick",
+    "tea",
+    "journaling",
+    "digital collage",
+    "gamedev",
 ];
 
 const default_repeat = 4;