Render stones on the board

This commit is contained in:
Savanni D'Gerinel 2023-05-16 10:07:52 -04:00
parent 6c87d23537
commit 343969a898
2 changed files with 57 additions and 0 deletions

View File

@ -22,6 +22,7 @@ export class GoBoard {
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.width = BOARD_WIDTH; this.canvas.width = BOARD_WIDTH;
this.canvas.height = BOARD_HEIGHT; this.canvas.height = BOARD_HEIGHT;
@ -82,6 +83,7 @@ export class GoBoard {
this.board.size.width, this.board.size.width,
this.board.size.height this.board.size.height
); );
this.renderBoard();
} }
renderBoard() { renderBoard() {
@ -91,6 +93,22 @@ export class GoBoard {
return null; 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.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.lineWidth = 2; 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: 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) { if (this.cursorLocation) {
this.pen.ghostStone(ctx, this.cursorLocation, Color.White); this.pen.ghostStone(ctx, this.cursorLocation, Color.White);
} }
@ -148,9 +184,11 @@ class Pen {
starPoint(ctx: CanvasRenderingContext2D, addr: Coordinate) { starPoint(ctx: CanvasRenderingContext2D, addr: Coordinate) {
ctx.fillStyle = "rgba(0, 0, 0, 1.0);"; ctx.fillStyle = "rgba(0, 0, 0, 1.0);";
ctx.beginPath();
const pixel = this.position(addr); const pixel = this.position(addr);
ctx.moveTo(pixel.x, pixel.y); ctx.moveTo(pixel.x, pixel.y);
ctx.arc(pixel.x, pixel.y, 5, 0, 2 * Math.PI); ctx.arc(pixel.x, pixel.y, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill(); ctx.fill();
} }
@ -167,11 +205,26 @@ class Pen {
this.drawStone(ctx, addr); 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) { drawStone(ctx: CanvasRenderingContext2D, addr: Coordinate) {
ctx.beginPath();
const radius = this.hspaceBetween / 2 - 2; const radius = this.hspaceBetween / 2 - 2;
const pixel = this.position(addr); const pixel = this.position(addr);
ctx.moveTo(pixel.x, pixel.y); ctx.moveTo(pixel.x, pixel.y);
ctx.arc(pixel.x, pixel.y, radius, 0, 2.0 * Math.PI); ctx.arc(pixel.x, pixel.y, radius, 0, 2.0 * Math.PI);
ctx.closePath();
ctx.fill(); ctx.fill();
} }

View File

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