Render the Go board with star points

kifu/pwa/src/components/Board.ts

@@ -1,25 +1,121 @@
-export class GoBoard extends HTMLCanvasElement {
-  static get observedAttributes() {
-    return [];
+import { BoardElement, Color } from "core-types";
+
+const BOARD_WIDTH = 800;
+const BOARD_HEIGHT = 800;
+
+export class GoBoard {
+  private board: BoardElement;
+  canvas: HTMLCanvasElement;
+
+  constructor(board: BoardElement) {
+    this.board = board;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = BOARD_WIDTH;
+    this.canvas.height = BOARD_HEIGHT;
   }
 
-  constructor() {
-    super();
+  setBoard(board: BoardElement) {
+    this.board = board;
   }
 
-  connectedCallback() {
-    this.setAttribute("width", "500");
-    this.setAttribute("height", "500");
-    this.classList.add("go-board");
-    const ctx = this.getContext("2d");
+  renderBoard() {
+    const ctx = this.canvas.getContext("2d");
     if (!ctx) {
       alert("could not get the canvas context");
-      return;
+      return null;
     }
-    ctx.fillStyle = "rgb(128, 128, 128)";
-    ctx.fillRect(10, 10, 50, 50);
 
-    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-    ctx.fillRect(30, 30, 50, 50);
+    let hspaceBetween = (this.canvas.width - 40) / (this.board.size.width - 1);
+    let vspaceBetween =
+      (this.canvas.height - 40) / (this.board.size.height - 1);
+
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "black";
+    ctx.beginPath();
+    for (var col = 0; col < this.board.size.width; col++) {
+      ctx.moveTo(20 + col * hspaceBetween, 20);
+      ctx.lineTo(20 + col * hspaceBetween, this.canvas.height - 20);
+    }
+    for (var row = 0; row < this.board.size.height; row++) {
+      ctx.moveTo(20, 20 + row * vspaceBetween);
+      ctx.lineTo(this.canvas.width - 20, 20 + row * vspaceBetween);
+    }
+    ctx.closePath();
+    ctx.stroke();
+
+    const pen = new Pen(20, 20, hspaceBetween, vspaceBetween);
+    pen.starPoint(ctx, 3, 3);
+    pen.starPoint(ctx, 3, 9);
+    pen.starPoint(ctx, 3, 15);
+    pen.starPoint(ctx, 9, 3);
+    pen.starPoint(ctx, 9, 9);
+    pen.starPoint(ctx, 9, 15);
+    pen.starPoint(ctx, 15, 3);
+    pen.starPoint(ctx, 15, 9);
+    pen.starPoint(ctx, 15, 15);
+  }
+}
+
+class Pen {
+  xOffset: number;
+  yOffset: number;
+  hspaceBetween: number;
+  vspaceBetween: number;
+
+  constructor(
+    xOffset: number,
+    yOffset: number,
+    hspaceBetween: number,
+    vspaceBetween: number
+  ) {
+    this.xOffset = xOffset;
+    this.yOffset = yOffset;
+    this.hspaceBetween = hspaceBetween;
+    this.vspaceBetween = vspaceBetween;
+  }
+
+  starPoint(ctx: CanvasRenderingContext2D, row: number, col: number) {
+    ctx.moveTo(
+      this.xOffset + col * this.hspaceBetween,
+      this.yOffset + row * this.vspaceBetween
+    );
+    ctx.arc(
+      this.xOffset + col * this.hspaceBetween,
+      this.yOffset + row * this.vspaceBetween,
+      5,
+      0,
+      2 * Math.PI
+    );
+    ctx.fill();
+  }
+
+  ghostStone(
+    ctx: CanvasRenderingContext2D,
+    row: number,
+    col: number,
+    color: Color
+  ) {
+    switch (color) {
+      case "White":
+        ctx.fillStyle = "white";
+      case "Black":
+        ctx.fillStyle = "black";
+    }
+
+    this.drawStone(ctx, row, col);
+  }
+
+  drawStone(ctx: CanvasRenderingContext2D, row: number, col: number) {
+    let radius = this.hspaceBetween / 2 - 2;
+    let [xLoc, yLoc] = this.stoneLocation(row, col);
+    ctx.arc(xLoc, yLoc, radius, 0, 2.0 * Math.PI);
+    ctx.fill();
+  }
+
+  stoneLocation(row: number, col: number): [number, number] {
+    return [
+      this.xOffset + col * this.hspaceBetween,
+      this.yOffset + col * this.vspaceBetween,
+    ];
   }
 }

kifu/pwa/src/kifu.css

@@ -13,7 +13,6 @@ body {
   display: grid;
 }
 
-.go-board {
-    width: 100%;
-    height: 100%;
+canvas {
+    border: 1px solid black;
 }

kifu/pwa/src/main.ts

@@ -1,14 +1,6 @@
 import { GoBoard } from "./components/Board";
 import { CoreApi, initCore } from "./coreApi";
 
-window.customElements.define("go-board", GoBoard, { extends: "canvas" });
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "go-board": GoBoard;
-  }
-}
-
 const main = async () => {
   let coreApi = await initCore();
   let response = await coreApi.playingField();
@@ -20,9 +12,10 @@ const main = async () => {
     return;
   }
 
-  const board = document.createElement("canvas", { is: "go-board" });
+  const board = new GoBoard(response.board);
+  root.appendChild(board.canvas);
   console.log("constructed board: ", board);
-  root.appendChild(board);
+  board.renderBoard();
 };
 
 main();