Render stones on the board

kifu/pwa/src/components/Board.ts

@@ -22,6 +22,7 @@ export class GoBoard {
   constructor({ board, onClick }: GoBoardProps) {
     this.board = board;
     this.canvas = document.createElement("canvas");
+    this.canvas.classList.add("board");
     this.canvas.width = BOARD_WIDTH;
     this.canvas.height = BOARD_HEIGHT;
 
@@ -82,6 +83,7 @@ export class GoBoard {
       this.board.size.width,
       this.board.size.height
     );
+    this.renderBoard();
   }
 
   renderBoard() {
@@ -91,6 +93,22 @@ export class GoBoard {
       return null;
     }
 
+    /*
+    ctx.fillStyle = "rgb(100, 0, 0)";
+    ctx.beginPath();
+    ctx.moveTo(100, 100);
+    ctx.arc(100, 100, 25, 0, 2.0 * Math.PI);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.fillStyle = "rgb(0, 0, 100)";
+    ctx.beginPath();
+    ctx.moveTo(200, 100);
+    ctx.arc(200, 100, 25, 0, 2.0 * Math.PI);
+    ctx.closePath();
+    ctx.fill();
+    */
+
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
     ctx.lineWidth = 2;
@@ -123,6 +141,24 @@ export class GoBoard {
     this.pen.starPoint(ctx, { column: 15, row: 9 });
     this.pen.starPoint(ctx, { column: 15, row: 15 });
 
+    col = 0;
+    row = 0;
+    for (let idx = 0; idx < this.board.spaces.length; idx++) {
+      const space = this.board.spaces[idx];
+      switch (space.type) {
+        case "Filled":
+          this.pen.stone(ctx, { column: col, row: row }, space.content.color);
+          break;
+        default:
+          break;
+      }
+      col = col + 1;
+      if (col == this.board.size.width) {
+        col = 0;
+        row = row + 1;
+      }
+    }
+
     if (this.cursorLocation) {
       this.pen.ghostStone(ctx, this.cursorLocation, Color.White);
     }
@@ -148,9 +184,11 @@ class Pen {
 
   starPoint(ctx: CanvasRenderingContext2D, addr: Coordinate) {
     ctx.fillStyle = "rgba(0, 0, 0, 1.0);";
+    ctx.beginPath();
     const pixel = this.position(addr);
     ctx.moveTo(pixel.x, pixel.y);
     ctx.arc(pixel.x, pixel.y, 5, 0, 2 * Math.PI);
+    ctx.closePath();
     ctx.fill();
   }
 
@@ -167,11 +205,26 @@ class Pen {
     this.drawStone(ctx, addr);
   }
 
+  stone(ctx: CanvasRenderingContext2D, addr: Coordinate, color: Color) {
+    switch (color) {
+      case Color.White:
+        ctx.fillStyle = "rgb(230, 230, 230)";
+        break;
+      case Color.Black:
+        ctx.fillStyle = "rgb(0, 0, 0)";
+        break;
+    }
+
+    this.drawStone(ctx, addr);
+  }
+
   drawStone(ctx: CanvasRenderingContext2D, addr: Coordinate) {
+    ctx.beginPath();
     const radius = this.hspaceBetween / 2 - 2;
     const pixel = this.position(addr);
     ctx.moveTo(pixel.x, pixel.y);
     ctx.arc(pixel.x, pixel.y, radius, 0, 2.0 * Math.PI);
+    ctx.closePath();
     ctx.fill();
   }
 

kifu/pwa/src/kifu.css

@@ -16,3 +16,7 @@ body {
 canvas {
     border: 1px solid black;
 }
+
+.board {
+    background-color: rgb(150, 150, 150);
+}