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
3 changed files with 116 additions and 28 deletions
Showing only changes of commit 6c4226ec66 - Show all commits

View File

@ -1,25 +1,121 @@
export class GoBoard extends HTMLCanvasElement {
static get observedAttributes() {
return [];
import { BoardElement, Color } from "core-types";
const BOARD_WIDTH = 800;
const BOARD_HEIGHT = 800;
export class GoBoard {
private board: BoardElement;
canvas: HTMLCanvasElement;
constructor(board: BoardElement) {
this.board = board;
this.canvas = document.createElement("canvas");
this.canvas.width = BOARD_WIDTH;
this.canvas.height = BOARD_HEIGHT;
}
constructor() {
super();
setBoard(board: BoardElement) {
this.board = board;
}
connectedCallback() {
this.setAttribute("width", "500");
this.setAttribute("height", "500");
this.classList.add("go-board");
const ctx = this.getContext("2d");
renderBoard() {
const ctx = this.canvas.getContext("2d");
if (!ctx) {
alert("could not get the canvas context");
return;
return null;
}
ctx.fillStyle = "rgb(128, 128, 128)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
let hspaceBetween = (this.canvas.width - 40) / (this.board.size.width - 1);
let vspaceBetween =
(this.canvas.height - 40) / (this.board.size.height - 1);
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.beginPath();
for (var col = 0; col < this.board.size.width; col++) {
ctx.moveTo(20 + col * hspaceBetween, 20);
ctx.lineTo(20 + col * hspaceBetween, this.canvas.height - 20);
}
for (var row = 0; row < this.board.size.height; row++) {
ctx.moveTo(20, 20 + row * vspaceBetween);
ctx.lineTo(this.canvas.width - 20, 20 + row * vspaceBetween);
}
ctx.closePath();
ctx.stroke();
const pen = new Pen(20, 20, hspaceBetween, vspaceBetween);
pen.starPoint(ctx, 3, 3);
pen.starPoint(ctx, 3, 9);
pen.starPoint(ctx, 3, 15);
pen.starPoint(ctx, 9, 3);
pen.starPoint(ctx, 9, 9);
pen.starPoint(ctx, 9, 15);
pen.starPoint(ctx, 15, 3);
pen.starPoint(ctx, 15, 9);
pen.starPoint(ctx, 15, 15);
}
}
class Pen {
xOffset: number;
yOffset: number;
hspaceBetween: number;
vspaceBetween: number;
constructor(
xOffset: number,
yOffset: number,
hspaceBetween: number,
vspaceBetween: number
) {
this.xOffset = xOffset;
this.yOffset = yOffset;
this.hspaceBetween = hspaceBetween;
this.vspaceBetween = vspaceBetween;
}
starPoint(ctx: CanvasRenderingContext2D, row: number, col: number) {
ctx.moveTo(
this.xOffset + col * this.hspaceBetween,
this.yOffset + row * this.vspaceBetween
);
ctx.arc(
this.xOffset + col * this.hspaceBetween,
this.yOffset + row * this.vspaceBetween,
5,
0,
2 * Math.PI
);
ctx.fill();
}
ghostStone(
ctx: CanvasRenderingContext2D,
row: number,
col: number,
color: Color
) {
switch (color) {
case "White":
ctx.fillStyle = "white";
case "Black":
ctx.fillStyle = "black";
}
this.drawStone(ctx, row, col);
}
drawStone(ctx: CanvasRenderingContext2D, row: number, col: number) {
let radius = this.hspaceBetween / 2 - 2;
let [xLoc, yLoc] = this.stoneLocation(row, col);
ctx.arc(xLoc, yLoc, radius, 0, 2.0 * Math.PI);
ctx.fill();
}
stoneLocation(row: number, col: number): [number, number] {
return [
this.xOffset + col * this.hspaceBetween,
this.yOffset + col * this.vspaceBetween,
];
}
}

View File

@ -13,7 +13,6 @@ body {
display: grid;
}
.go-board {
width: 100%;
height: 100%;
canvas {
border: 1px solid black;
}

View File

@ -1,14 +1,6 @@
import { GoBoard } from "./components/Board";
import { CoreApi, initCore } from "./coreApi";
window.customElements.define("go-board", GoBoard, { extends: "canvas" });
declare global {
interface HTMLElementTagNameMap {
"go-board": GoBoard;
}
}
const main = async () => {
let coreApi = await initCore();
let response = await coreApi.playingField();
@ -20,9 +12,10 @@ const main = async () => {
return;
}
const board = document.createElement("canvas", { is: "go-board" });
const board = new GoBoard(response.board);
root.appendChild(board.canvas);
console.log("constructed board: ", board);
root.appendChild(board);
board.renderBoard();
};
main();