import { EggbugImg, Main, render_and_copy } from "./common.tsx";

const GolfBall = () => (
    <div
        style={{
            resize: "both",
            overflow: "hidden",
            display: "flex",
            position: "relative",
            width: "22%",
            height: "23.5%",
            transition: "all cubic-bezier(0.19, 1, 0.22, 1) 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={{
                    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", 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
// 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"
// 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)