Add pieces to the board

frontend/main.js

@@ -35,4 +35,54 @@ function drawChessBoard(canvas) {
   }
 }
 
+function drawPiece(canvas, piece, field) {
+  let canvasRect = canvas.getBoundingClientRect();
+  let rc = boardIndexToRowCol(field);
+
+  let im = new Image(BOX_WIDTH, BOX_HEIGHT);
+  im.src = `./icons/${piece}.svg`;
+  im.onload = () => {
+    let topPx = canvasRect.top + INDEX_MARGIN + rc[0]*BOX_HEIGHT + window.pageYOffset;
+    let leftPx = canvasRect.left + INDEX_MARGIN + rc[1]*BOX_WIDTH + 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];
+}
+
 drawChessBoard(_canvas);
+_setupBoard(_canvas);