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,34 +5,70 @@ 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",
         }}
     >
-        <EggbugImg
-            type="golfball"
-            style={{
-                margin: 0,
-                position: "absolute",
-                right: 0,
-                bottom: 0,
-                width: "5rem",
-                height: "5rem",
-                pointerEvents: "none",
-            }}
-        />
+        <div style={{ overflow: "visible" }}>
+            <EggbugImg
+                type="golfball"
+                style={{
+                    margin: 0,
+                    position: "absolute",
+                    right: 0,
+                    bottom: 0,
+                    width: "5rem",
+                    height: "5rem",
+                    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" }}>
-        <GolfBall />
-    </Main>
+    <>
+        <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)