kifu/kifu-pwa/src/components/Board.ts

@@ -5,18 +5,21 @@ export class GoBoard extends HTMLCanvasElement {
 
   constructor() {
     super();
-
-    console.log("Go Board constructor");
   }
 
   connectedCallback() {
-    console.log("connected callback");
+    this.setAttribute("width", "500");
+    this.setAttribute("height", "500");
+    this.classList.add("go-board");
     const ctx = this.getContext("2d");
     if (!ctx) {
       alert("could not get the canvas context");
       return;
     }
-    ctx.fillStyle = "green";
-    ctx.fillRect(10, 10, 150, 150);
+    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);
   }
 }

kifu/kifu-pwa/src/kifu.css

@@ -13,3 +13,7 @@ body {
   display: grid;
 }
 
+.go-board {
+    width: 100%;
+    height: 100%;
+}