import CanvasWindow from "./canvas-windows";
import LevelLoader from "./level-loader";
import overworldLevel from "./levels/overworld.json";

const canvasWindow = new CanvasWindow({
  canvas: document.querySelector("canvas"),
  maxMultiplier: 5,
  windowPercentage: 0.9,
});

let debug = true;
const GAME_TILE = 16;
const ROWS = canvasWindow.nativeHeight / GAME_TILE;
const COLUMNS = canvasWindow.nativeWidth / GAME_TILE;

function drawLevel(ctx, level) {
  const levelCols = level.image.width / GAME_TILE;
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLUMNS; col++) {
      const tile = level.layer[row * COLUMNS + col];
      if (tile !== 0) {
        ctx.drawImage(
          level.image,
          ((tile - 1) * GAME_TILE) % level.image.width,
          Math.floor((tile - 1) / levelCols) * GAME_TILE,
          GAME_TILE,
          GAME_TILE,
          col * GAME_TILE,
          row * GAME_TILE,
          GAME_TILE,
          GAME_TILE
        );
      }

      debug &&
        ctx.strokeRect(col * GAME_TILE, row * GAME_TILE, GAME_TILE, GAME_TILE);
    }
  }
}

(async () => {
  await canvasWindow.load();
  const { canvas } = canvasWindow;
  const ctx = canvas.getContext("2d");

  const [overworld] = await Promise.all([overworldLevel].map(LevelLoader.load));
  drawLevel(ctx, overworld);

  document.getElementById("debug").addEventListener("click", () => {
    debug = !debug;
    drawLevel(ctx, overworld);
  });
})();