Try caching the background

This commit is contained in:
Savanni D'Gerinel 2023-05-16 22:15:10 -04:00
parent a779220173
commit 7dd3574beb
2 changed files with 46 additions and 23 deletions

View File

@ -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);
}
}
}

View File

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