import { useAlpine } from "https://cdn.skypack.dev/alpinejs@3.x.x";
import { useEffect } from "https://cdn.skypack.dev/react@17.0.3/default";
import { useHistory } from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js";

document.addEventListener("alpine:init", () => {
 useAlpine({
    setup() {
      let xpos = 10;
      let ypos = 10;

      useEffect(() => {
        document.addEventListener("keydown", (event) => {
          if (event.code === "ArrowLeft") {
            xpos -= 10;
          }
          if (event.code === "ArrowRight") {
            xpos += 10;
          }
          if (event.code === "ArrowUp") {
            ypos -= 10;
          }
          if (event.code === "ArrowDown") {
            ypos += 10;
          }
        });
      }, []);

      useEffect(() => {
        const image = document.querySelector("#mario");
        image.style.left = `${xpos}px`;
        image.style.top = `${ypos}px`;
      });
    },
 });
});