Render the Goban in the web application #44

Merged
savanni merged 1 commits from kifu/render-goban into main 2023-05-25 13:10:07 +00:00
2 changed files with 46 additions and 23 deletions

View File

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