import kaplay from "./modules/kaplay.js";
import { KaplayMap } from "./KaplayMap/map.js";
import { EventMapperManager } from "./KaplayMap/mapper.js";

const map = document.querySelector("#map");
const mapUi = document.querySelector("#map-ui");

const kp = kaplay({
  canvas: map,
  focus: true,
  loadingScreen: false,
  crisp: true,
  // debug: false,
  // touchToMouse: false,
  global: false,
  maxFPS: 120,
  texFilter: "nearest",
  background: window.backgroundBranding ?? "404040",
});

const kaplaymap = new KaplayMap(kp, {});
const eventmappermanager = new EventMapperManager(kaplaymap, mapUi, {
  gameobj: window.gameObjBranding,
});

async function main() {
  const grid = kp.loadSprite(null, "/files/images/grid.png");

  kp.onDraw(() => {
    kp.drawSprite({
      sprite: grid,
      tiled: true,
      opacity: 0.25,
      width: kp.width() + 200,
      height: kp.height() + 200,
      anchor: "center",
      pos: kp.vec2(
        Math.floor(kp.camPos().x / 100) * 100 + 0.5,
        Math.floor(kp.camPos().y / 100) * 100 + 0.5
      ),
    });
  });

  await eventmappermanager.load();
}

main();