Add board index

frontend/main.js

@@ -1,15 +1,35 @@
-var _canvas = document.getElementById("chessBoard");
+var _canvas = document.getElementById('chessBoard');
 
 function drawChessBoard(canvas) {
-  let ctx = canvas.getContext("2d");
+  let ctx = canvas.getContext('2d');
-  let w = canvas.width;
+
-  let h = canvas.height;
+  let indexMargin = (canvas.width + canvas.height) / 2 / 16;
+  let w = canvas.width - indexMargin;
+  let h = canvas.height - indexMargin;
+  let bw = w / 8;
+  let bh = h / 8;
+
+  // 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(w/8*r, h/8*c, w/8, h/8);
+      if ((r + c) % 2) ctx.fillRect(bw*c+indexMargin, bh*r+indexMargin, bw, bh);
     }
   }
+
+  // Draw letters
+  let indexLetters = 'abcdefgh';
+  ctx.fillStyle = 'black';
+  let fontsize = indexMargin / 2;
+  ctx.font = fontsize.toString() + 'px Monospace';
+  for (let idx = 0; idx < 8; idx++) {
+    ctx.fillText(indexLetters[idx],
+                 bw*idx + bw/2 + indexMargin - fontsize / 4,
+                 indexMargin / 2);
+    ctx.fillText((8-idx).toString(),
+                 indexMargin / 2 - fontsize / 4,
+                 bh*idx + bh/2 + indexMargin + fontsize / 4);
+  }
 }
 
 drawChessBoard(_canvas);