screw it, eggolf DONE ENOUGH

html/minigolf.tsx

@@ -1,4 +1,3 @@
-import { JSX } from "preact/jsx-runtime";
 import { EggbugImg, Main, render_and_copy } from "./common.tsx";
 
 const GolfBall = () => (
@@ -6,15 +5,22 @@ const GolfBall = () => (
         style={{
             resize: "both",
             overflow: "hidden",
+            display: "flex",
             position: "relative",
-            // TODO: V REMOVE ME V
-            outline: "1px solid red",
-            width: "10rem",
-            height: "10rem",
-            transition: "all 5s",
+            width: "22%",
+            height: "23.5%",
+            transition: "all ease-out 2s",
             gridArea: "1 / 1",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            // backgroundImage:
+            //     "url(https://static.pyrope.net/eggbug-golfball.png)",
+            // backgroundPosition: "150% 150%",
+            // backgroundRepeat: "no-repeat",
+            // backgroundSize: "5rem",
         }}
     >
+        <div style={{ overflow: "visible" }}>
             <EggbugImg
                 type="golfball"
                 style={{
@@ -24,16 +30,45 @@ const GolfBall = () => (
                     bottom: 0,
                     width: "5rem",
                     height: "5rem",
-                pointerEvents: "none",
+                    transform: "translate(23%, 23%)",
                 }}
             />
         </div>
+    </div>
+);
+
+const Green = () => (
+    <img
+        style={{ gridArea: "1 / 1", margin: 0, width: "100%", height: "100%" }}
+        src="https://static.pyrope.net/golf-green.png"
+        alt="a crappy looking golf green drawn in kolourpaint. its crude geometry and eye-searing colors betray a total lack of artistic prowess"
+    />
 );
 
 render_and_copy(
-    <Main style={{ display: "grid" }}>
+    <>
+        <Main style={{ display: "grid", width: "100%", aspectRatio: "1" }}>
             <GolfBall />
+            <Green />
         </Main>
+        you might say that minigolf has no challenge if the barriers mean
+        nothing and there's 2 holes.
+        <br />
+        however, i have crafted beautiful, marvelous, just great, fantastic
+        rules to account for this!
+        <br />
+        <ul>
+            <li>
+                the goal is to get as few points as possible (i stole this idea
+                from watching soccer)
+            </li>
+            <li>each stroke is one point (honor system)</li>
+            <li>you may write an essay about what hole you chose and why</li>
+            <li>
+                each paragraph of this essay removes one point from your score
+            </li>
+        </ul>
+    </>
 );
 
 // OOOO: score with like a dial thing and an arrow pointing to it
@@ -45,3 +80,6 @@ render_and_copy(
 // i could have the ball be in a different place but then that would feel bad
 // i think i'll go for the toy angle.
 // keep the dials, have a "course"
+// idk about the dials they seem like a lot of work
+// as always, it is woefully apparent that I SUCK AT RESIZEABLE CRIMES
+// i can't even *copy* (specifically blackle)