import PartidaBattle from "./PartidaBattle.js";
const canvasMapa = document.getElementById("mapa");
const canvasMiniMapa = document.getElementById("minimapa");


const barcosImg = new Image();
barcosImg.src = "/assets/barcos.png";

barcosImg.onload = function(){
    iniciaJuego();
} 

function getSprites(spriteSheet) {
  const sprites = {
    PORTAAVIONES: [
      { x: 0, y: 0, width: 64, height: 256 },
      { x: 64, y: 192, width: 256, height: 64 },
    ],
    ACORAZADO: [
      { x: 64, y: 0, width: 64, height: 192 },
      { x: 128, y: 128, width: 192, height: 64 },
    ],
    DESTRUCTOR: [
      { x: 128, y: 0, width: 64, height: 128 },
      { x: 192, y: 64, width: 128, height: 64 },
    ],
    FRAGATA: [
      { x: 192, y: 0, width: 64, height: 64 },
      { x: 256, y: 0, width: 64, height: 64 },
    ],

    OCEANO: [
      { x: 320, y: 0, width: 32, height: 32 },
      { x: 384, y: 0, width: 32, height: 32 },
      { x: 416, y: 0, width: 32, height: 32 },
      
      { x: 320, y: 32, width: 32, height: 32 },
      { x: 416, y: 64, width: 32, height: 32 },

      { x: 320, y: 96, width: 32, height: 32 },
      { x: 384, y: 96, width: 32, height: 32 },
      { x: 416, y: 96, width: 32, height: 32 },

    ]



  };

  const spritesObj = {};
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  for (const key in sprites) {
    if (Object.hasOwnProperty.call(sprites, key)) {
      const spriteArray = sprites[key];
      spritesObj[key] = spriteArray.map((sprite) => {
        canvas.width = sprite.width;
        canvas.height = sprite.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(
          spriteSheet,
          sprite.x,
          sprite.y,
          sprite.width,
          sprite.height,
          0,
          0,
          sprite.width,
          sprite.height
        );
        const spriteImage = new Image();
        spriteImage.src = canvas.toDataURL();
        return spriteImage;
      });
    }
  }
  return spritesObj;
}

function iniciaJuego(){
    const canvasMapa = document.getElementById("mapa");
    const canvasMiniMapa = document.getElementById("minimapa");
    const sprites = getSprites(barcosImg);
    const partida = new PartidaBattle(canvasMapa, canvasMiniMapa,sprites);

    gameLoop();

    function gameLoop() {
      partida.draw();
      window.requestAnimationFrame(gameLoop);
    }
}