eggolf: further planning

html/minigolf.tsx

@@ -1,6 +1,7 @@
-import { EggbugImg, render_and_copy } from "./common.tsx";
+import { JSX } from "preact/jsx-runtime";
+import { EggbugImg, Main, render_and_copy } from "./common.tsx";
 
-render_and_copy(
+const GolfBall = () => (
     <div
         style={{
             resize: "both",
@@ -8,7 +9,10 @@ render_and_copy(
             position: "relative",
             // TODO: V REMOVE ME V
             outline: "1px solid red",
+            width: "10rem",
             height: "10rem",
+            transition: "all 5s",
+            gridArea: "1 / 1",
         }}
     >
         <EggbugImg
@@ -26,5 +30,18 @@ render_and_copy(
     </div>
 );
 
+render_and_copy(
+    <Main style={{ display: "grid" }}>
+        <GolfBall />
+    </Main>
+);
+
 // OOOO: score with like a dial thing and an arrow pointing to it
+// TWO DIALS WILL LOOK EVEN COOLER
+// lower is better, just have to add the dials
 // might be possible to have multiple holes with a details element that comes into frame hm
+
+// hm this kinda sucks. you just drag it to the hole, there's no challenge
+// 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"