Try caching the background

kifu/pwa/src/components/Board.ts

@@ -17,10 +17,13 @@ export class GoBoard {
   private board: BoardElement;
   private pen: Pen;
   private cursorLocation: Coordinate | null;
+  private backgroundBoard: HTMLCanvasElement;
+  private currentBoardState: HTMLCanvasElement;
   canvas: HTMLCanvasElement;
 
   constructor({ board, onClick }: GoBoardProps) {
     this.board = board;
+
     this.canvas = document.createElement("canvas");
     this.canvas.classList.add("board");
     this.canvas.width = BOARD_WIDTH;
@@ -34,6 +37,15 @@ export class GoBoard {
       this.board.size.height
     );
 
+    this.backgroundBoard = document.createElement("canvas");
+    this.backgroundBoard.width = BOARD_WIDTH;
+    this.backgroundBoard.height = BOARD_HEIGHT;
+    this.renderBackgroundBoard();
+
+    this.currentBoardState = document.createElement("canvas");
+    this.currentBoardState.width = BOARD_WIDTH;
+    this.currentBoardState.height = BOARD_HEIGHT;
+
     this.cursorLocation = null;
 
     this.canvas.onmousemove = (event) => {
@@ -84,6 +96,9 @@ export class GoBoard {
   }
 
   renderBoard() {
+    // Cache:
+    // - Standard blank board with background
+    // - Current board state without the ghost stone
     const ctx = this.canvas.getContext("2d");
     if (!ctx) {
       alert("could not get the canvas context");
@@ -91,7 +106,37 @@ export class GoBoard {
     }
 
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    ctx.drawImage(this.backgroundBoard, 0, 0);
 
+    let col = 0;
+    let 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);
+    }
+  }
+
+  private renderBackgroundBoard() {
+    const ctx = this.backgroundBoard.getContext("2d");
+    if (!ctx) {
+      alert("could not get the background canvas context");
+      return;
+    }
     ctx.lineWidth = 2;
     ctx.strokeStyle = "black";
     ctx.beginPath();
@@ -121,28 +166,6 @@ export class GoBoard {
     this.pen.starPoint(ctx, { column: 15, row: 3 });
     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);
-    }
   }
 }
 

kifu/pwa/src/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'temperature-converter-v2';
+const CACHE_NAME = 'kifu-pwa-3';
 
 self.addEventListener('install', event => {
     event.waitUntil((async () => {