Start setting up the basic board
This commit is contained in:
parent
0b0bd1e14b
commit
1e65219401
|
@ -5,18 +5,21 @@ export class GoBoard extends HTMLCanvasElement {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
console.log("Go Board constructor");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
console.log("connected callback");
|
this.setAttribute("width", "500");
|
||||||
|
this.setAttribute("height", "500");
|
||||||
|
this.classList.add("go-board");
|
||||||
const ctx = this.getContext("2d");
|
const ctx = this.getContext("2d");
|
||||||
if (!ctx) {
|
if (!ctx) {
|
||||||
alert("could not get the canvas context");
|
alert("could not get the canvas context");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ctx.fillStyle = "green";
|
ctx.fillStyle = "rgb(128, 128, 128)";
|
||||||
ctx.fillRect(10, 10, 150, 150);
|
ctx.fillRect(10, 10, 50, 50);
|
||||||
|
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
||||||
|
ctx.fillRect(30, 30, 50, 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,3 +13,7 @@ body {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.go-board {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue