Render the Go board and connect it to the core #42

Merged
savanni merged 5 commits from kifu/render-goban into main 2023-05-16 14:22:20 +00:00
2 changed files with 57 additions and 0 deletions
Showing only changes of commit 343969a898 - Show all commits

View File

@ -22,6 +22,7 @@ export class GoBoard {
constructor({ board, onClick }: GoBoardProps) {
this.board = board;
this.canvas = document.createElement("canvas");
this.canvas.classList.add("board");
this.canvas.width = BOARD_WIDTH;
this.canvas.height = BOARD_HEIGHT;
@ -82,6 +83,7 @@ export class GoBoard {
this.board.size.width,
this.board.size.height
);
this.renderBoard();
}
renderBoard() {
@ -91,6 +93,22 @@ export class GoBoard {
return null;
}
/*
ctx.fillStyle = "rgb(100, 0, 0)";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 25, 0, 2.0 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "rgb(0, 0, 100)";
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.arc(200, 100, 25, 0, 2.0 * Math.PI);
ctx.closePath();
ctx.fill();
*/
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.lineWidth = 2;
@ -123,6 +141,24 @@ export class GoBoard {
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);
}
@ -148,9 +184,11 @@ class Pen {
starPoint(ctx: CanvasRenderingContext2D, addr: Coordinate) {
ctx.fillStyle = "rgba(0, 0, 0, 1.0);";
ctx.beginPath();
const pixel = this.position(addr);
ctx.moveTo(pixel.x, pixel.y);
ctx.arc(pixel.x, pixel.y, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
@ -167,11 +205,26 @@ class Pen {
this.drawStone(ctx, addr);
}
stone(ctx: CanvasRenderingContext2D, addr: Coordinate, color: Color) {
switch (color) {
case Color.White:
ctx.fillStyle = "rgb(230, 230, 230)";
break;
case Color.Black:
ctx.fillStyle = "rgb(0, 0, 0)";
break;
}
this.drawStone(ctx, addr);
}
drawStone(ctx: CanvasRenderingContext2D, addr: Coordinate) {
ctx.beginPath();
const radius = this.hspaceBetween / 2 - 2;
const pixel = this.position(addr);
ctx.moveTo(pixel.x, pixel.y);
ctx.arc(pixel.x, pixel.y, radius, 0, 2.0 * Math.PI);
ctx.closePath();
ctx.fill();
}

View File

@ -16,3 +16,7 @@ body {
canvas {
border: 1px solid black;
}
.board {
background-color: rgb(150, 150, 150);
}