const BOX_SIDE = 80;
const INDEX_MARGIN = BOX_SIDE / 2;
const INDEX_LETTERS = 'abcdefgh';

function createCanvas() {
  let canvas = document.createElement('canvas');
  let boardSide = BOX_SIDE * 8 + INDEX_MARGIN;
  canvas.width = boardSide;
  canvas.height = boardSide;
  document.body.appendChild(canvas);
  return canvas
}

function drawChessBoard(canvas) {
  let ctx = canvas.getContext('2d');

  // Draw squares
  ctx.fillStyle = '#c0c0c0';
  for (let r = 0; r < 8; r++) {
    for (let c = 0; c < 8; c++) {
      if ((r + c) % 2) ctx.fillRect(c*BOX_SIDE + INDEX_MARGIN,
                                    r*BOX_SIDE + INDEX_MARGIN,
                                    BOX_SIDE, BOX_SIDE);
    }
  }

  // Draw letters
  ctx.fillStyle = 'black';
  let fontsize = INDEX_MARGIN / 2;
  ctx.font = `${fontsize}px Monospace`;
  for (let idx = 0; idx < 8; idx++) {
    ctx.fillText(INDEX_LETTERS[idx],
                 BOX_SIDE*idx + BOX_SIDE/2 + INDEX_MARGIN - fontsize / 4,
                 INDEX_MARGIN / 2);
    ctx.fillText((8-idx).toString(),
                 INDEX_MARGIN / 2 - fontsize / 4,
                 BOX_SIDE*idx + BOX_SIDE/2 + INDEX_MARGIN + fontsize / 4);
  }
}

function drawPiece(canvas, piece, field) {
  let canvasRect = canvas.getBoundingClientRect();
  let rc = boardIndexToRowCol(field);

  let im = new Image(BOX_SIDE, BOX_SIDE);
  im.src = `./icons/${piece}.svg`;
  im.onload = () => {
    let topPx = canvasRect.top + INDEX_MARGIN + rc[0]*BOX_SIDE + window.pageYOffset;
    let leftPx = canvasRect.left + INDEX_MARGIN + rc[1]*BOX_SIDE + window.pageXOffset;
    im.style.position = 'absolute';
    im.style.top = `${topPx}px`;
    im.style.left = `${leftPx}px`;
  };
  document.body.appendChild(im);
}

function _setupBoard(canvas) {
  drawPiece(_canvas, 'rook_black', 'a8');
  drawPiece(_canvas, 'rook_black', 'h8');
  drawPiece(_canvas, 'knight_black', 'b8');
  drawPiece(_canvas, 'knight_black', 'g8');
  drawPiece(_canvas, 'bishop_black', 'c8');
  drawPiece(_canvas, 'bishop_black', 'f8');
  drawPiece(_canvas, 'queen_black', 'd8');
  drawPiece(_canvas, 'king_black', 'e8');

  for (let colLetter of INDEX_LETTERS) {
    drawPiece(canvas, 'pawn_black', `${colLetter}7`);
    drawPiece(canvas, 'pawn_white', `${colLetter}2`);
  }

  drawPiece(_canvas, 'rook_white', 'a1');
  drawPiece(_canvas, 'rook_white', 'h1');
  drawPiece(_canvas, 'knight_white', 'b1');
  drawPiece(_canvas, 'knight_white', 'g1');
  drawPiece(_canvas, 'bishop_white', 'c1');
  drawPiece(_canvas, 'bishop_white', 'f1');
  drawPiece(_canvas, 'queen_white', 'd1');
  drawPiece(_canvas, 'king_white', 'e1');
}

function boardIndexToRowCol(boardIndex) {
  let colLetter = boardIndex[0];
  let rowDigit = boardIndex[1];
  let row = 8 - parseInt(rowDigit);
  let col = INDEX_LETTERS.indexOf(colLetter);
  return [row, col];
}

var _canvas = createCanvas();
drawChessBoard(_canvas);
_setupBoard(_canvas);