From 6c4226ec66cd2dcd941c8534bda27ac6d109b8fd Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Sat, 13 May 2023 22:16:24 -0400 Subject: [PATCH 1/5] Render the Go board with star points --- kifu/pwa/src/components/Board.ts | 126 +++++++++++++++++++++++++++---- kifu/pwa/src/kifu.css | 5 +- kifu/pwa/src/main.ts | 13 +--- 3 files changed, 116 insertions(+), 28 deletions(-) diff --git a/kifu/pwa/src/components/Board.ts b/kifu/pwa/src/components/Board.ts index b7065ed..1bef6a4 100644 --- a/kifu/pwa/src/components/Board.ts +++ b/kifu/pwa/src/components/Board.ts @@ -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, + ]; } } diff --git a/kifu/pwa/src/kifu.css b/kifu/pwa/src/kifu.css index cff95ab..0aeed12 100644 --- a/kifu/pwa/src/kifu.css +++ b/kifu/pwa/src/kifu.css @@ -13,7 +13,6 @@ body { display: grid; } -.go-board { - width: 100%; - height: 100%; +canvas { + border: 1px solid black; } diff --git a/kifu/pwa/src/main.ts b/kifu/pwa/src/main.ts index 26fb1c7..7174fc0 100644 --- a/kifu/pwa/src/main.ts +++ b/kifu/pwa/src/main.ts @@ -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(); -- 2.44.1 From 140ad0f22c85f49fdd8f015b2cf62d00f859ab11 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Mon, 15 May 2023 22:20:40 -0400 Subject: [PATCH 2/5] Render ghost stones --- kifu/core-types/Makefile | 4 +- kifu/core-types/package.json | 3 +- kifu/pwa/src/components/Board.ts | 172 ++++++++++++++++++++----------- package-lock.json | 1 + 4 files changed, 118 insertions(+), 62 deletions(-) diff --git a/kifu/core-types/Makefile b/kifu/core-types/Makefile index d42b5a0..9806904 100644 --- a/kifu/core-types/Makefile +++ b/kifu/core-types/Makefile @@ -1,6 +1,6 @@ SOURCES = $(shell find ../core -name "*.rs") -dist/core.d.ts: $(SOURCES) +dist/index.ts: $(SOURCES) mkdir -p dist - typeshare ../core --lang=typescript --output-file=dist/core.d.ts + typeshare ../core --lang=typescript --output-file=dist/index.ts diff --git a/kifu/core-types/package.json b/kifu/core-types/package.json index 4691e70..19766f8 100644 --- a/kifu/core-types/package.json +++ b/kifu/core-types/package.json @@ -2,7 +2,8 @@ "name": "core-types", "version": "0.0.1", "description": "", - "types": "dist/core.d.ts", + "types": "dist/index.ts", + "main": "dist/index.ts", "scripts": { "build": "make", "test": "echo \"Error: no test specified\" && exit 1" diff --git a/kifu/pwa/src/components/Board.ts b/kifu/pwa/src/components/Board.ts index 1bef6a4..7ddb849 100644 --- a/kifu/pwa/src/components/Board.ts +++ b/kifu/pwa/src/components/Board.ts @@ -1,10 +1,16 @@ import { BoardElement, Color } from "core-types"; +const MARGIN = 20; const BOARD_WIDTH = 800; const BOARD_HEIGHT = 800; +type Pixel = { x: number; y: number }; +type Address = { column: number; row: number }; + export class GoBoard { private board: BoardElement; + private pen: Pen; + private cursorLocation: Address | null; canvas: HTMLCanvasElement; constructor(board: BoardElement) { @@ -12,10 +18,43 @@ export class GoBoard { this.canvas = document.createElement("canvas"); this.canvas.width = BOARD_WIDTH; this.canvas.height = BOARD_HEIGHT; + + this.pen = new Pen( + this.canvas.width, + this.canvas.height, + MARGIN, + this.board.size.width, + this.board.size.height + ); + + this.cursorLocation = null; + + this.canvas.onmousemove = (event) => { + const bounds = this.canvas.getBoundingClientRect(); + const coordinate = { + x: event.clientX - bounds.x, + y: event.clientY - bounds.y, + }; + + let address = this.pen.address(coordinate); + + if (this.cursorLocation != address) { + this.cursorLocation = this.pen.address(coordinate); + this.renderBoard(); + } + }; } setBoard(board: BoardElement) { this.board = board; + + this.pen = new Pen( + this.canvas.width, + this.canvas.height, + MARGIN, + this.board.size.width, + this.board.size.height + ); } renderBoard() { @@ -25,97 +64,112 @@ export class GoBoard { return null; } - let hspaceBetween = (this.canvas.width - 40) / (this.board.size.width - 1); - let vspaceBetween = - (this.canvas.height - 40) / (this.board.size.height - 1); + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 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); + ctx.moveTo(MARGIN + col * this.pen.hspaceBetween, MARGIN); + ctx.lineTo( + MARGIN + col * this.pen.hspaceBetween, + MARGIN + (this.board.size.height - 1) * this.pen.vspaceBetween + ); } 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.moveTo(MARGIN, MARGIN + row * this.pen.vspaceBetween); + ctx.lineTo( + MARGIN + (this.board.size.width - 1) * this.pen.hspaceBetween, + MARGIN + row * this.pen.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); + this.pen.starPoint(ctx, { column: 3, row: 3 }); + this.pen.starPoint(ctx, { column: 3, row: 9 }); + this.pen.starPoint(ctx, { column: 3, row: 15 }); + this.pen.starPoint(ctx, { column: 9, row: 3 }); + this.pen.starPoint(ctx, { column: 9, row: 9 }); + this.pen.starPoint(ctx, { column: 9, row: 15 }); + this.pen.starPoint(ctx, { column: 15, row: 3 }); + this.pen.starPoint(ctx, { column: 15, row: 9 }); + this.pen.starPoint(ctx, { column: 15, row: 15 }); + + if (this.cursorLocation) { + this.pen.ghostStone(ctx, this.cursorLocation, Color.White); + } } } class Pen { - xOffset: number; - yOffset: number; + margin: number; hspaceBetween: number; vspaceBetween: number; constructor( - xOffset: number, - yOffset: number, - hspaceBetween: number, - vspaceBetween: number + width: number, + height: number, + margin: number, + columns: number, + rows: number ) { - this.xOffset = xOffset; - this.yOffset = yOffset; - this.hspaceBetween = hspaceBetween; - this.vspaceBetween = vspaceBetween; + this.margin = margin; + this.hspaceBetween = (width - margin * 2) / (columns - 1); + this.vspaceBetween = (height - margin * 2) / (rows - 1); } - 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 - ); + starPoint(ctx: CanvasRenderingContext2D, addr: Address) { + ctx.fillStyle = "rgba(0, 0, 0, 1.0);"; + const pixel = this.position(addr); + ctx.moveTo(pixel.x, pixel.y); + ctx.arc(pixel.x, pixel.y, 5, 0, 2 * Math.PI); ctx.fill(); } - ghostStone( - ctx: CanvasRenderingContext2D, - row: number, - col: number, - color: Color - ) { + ghostStone(ctx: CanvasRenderingContext2D, addr: Address, color: Color) { switch (color) { - case "White": - ctx.fillStyle = "white"; - case "Black": - ctx.fillStyle = "black"; + case Color.White: + ctx.fillStyle = "rgba(230, 230, 230, 0.5)"; + break; + case Color.Black: + ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; + break; } - this.drawStone(ctx, row, col); + this.drawStone(ctx, addr); } - 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); + drawStone(ctx: CanvasRenderingContext2D, addr: Address) { + 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.fill(); } - stoneLocation(row: number, col: number): [number, number] { - return [ - this.xOffset + col * this.hspaceBetween, - this.yOffset + col * this.vspaceBetween, - ]; + position(addr: Address): Pixel { + return { + x: this.margin + addr.column * this.hspaceBetween, + y: this.margin + addr.row * this.vspaceBetween, + }; + } + + address(pixel: Pixel): Address | null { + if ( + Math.round(pixel.x) < this.margin || + Math.round(pixel.y) < this.margin + ) { + return null; + } else { + return { + column: Math.round( + (Math.round(pixel.x) - this.margin) / this.hspaceBetween + ), + row: Math.round( + (Math.round(pixel.y) - this.margin) / this.vspaceBetween + ), + }; + } } } diff --git a/package-lock.json b/package-lock.json index 753687b..32d874d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ } }, "kifu/pwa": { + "name": "kifu-pwa", "version": "1.0.0", "license": "GPL-3.0-or-later", "dependencies": { -- 2.44.1 From 6c87d2353766abe8bc83d0ad56cec01e4dd5db86 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Mon, 15 May 2023 23:59:41 -0400 Subject: [PATCH 3/5] Start making the UI state really send messages to and recieve response from the core --- kifu/pwa/src/assertNever.ts | 1 + kifu/pwa/src/components/Board.ts | 48 ++++++++++++++++---- kifu/pwa/src/main.ts | 76 ++++++++++++++++++++++++++++++-- 3 files changed, 113 insertions(+), 12 deletions(-) create mode 100644 kifu/pwa/src/assertNever.ts diff --git a/kifu/pwa/src/assertNever.ts b/kifu/pwa/src/assertNever.ts new file mode 100644 index 0000000..6e622d1 --- /dev/null +++ b/kifu/pwa/src/assertNever.ts @@ -0,0 +1 @@ +export const assertNever = (_: never) => {}; diff --git a/kifu/pwa/src/components/Board.ts b/kifu/pwa/src/components/Board.ts index 7ddb849..04bbb28 100644 --- a/kifu/pwa/src/components/Board.ts +++ b/kifu/pwa/src/components/Board.ts @@ -1,19 +1,25 @@ -import { BoardElement, Color } from "core-types"; +import { BoardElement, Color, Size, CoreRequest } from "core-types"; +import { assertNever } from "../assertNever"; const MARGIN = 20; const BOARD_WIDTH = 800; const BOARD_HEIGHT = 800; type Pixel = { x: number; y: number }; -type Address = { column: number; row: number }; +type Coordinate = { column: number; row: number }; + +export interface GoBoardProps { + board: BoardElement; + onClick: (_: CoreRequest) => void; +} export class GoBoard { private board: BoardElement; private pen: Pen; - private cursorLocation: Address | null; + private cursorLocation: Coordinate | null; canvas: HTMLCanvasElement; - constructor(board: BoardElement) { + constructor({ board, onClick }: GoBoardProps) { this.board = board; this.canvas = document.createElement("canvas"); this.canvas.width = BOARD_WIDTH; @@ -43,9 +49,30 @@ export class GoBoard { this.renderBoard(); } }; + + this.canvas.onclick = (_) => { + console.log("clicked on ", this.cursorLocation); + if (this.cursorLocation) { + const intersection = + this.board.spaces[boardAddress(this.board.size, this.cursorLocation)]; + switch (intersection.type) { + case "Unplayable": + break; + case "Empty": + console.log("need to run action: ", intersection.content); + onClick(intersection.content); + break; + case "Filled": + break; + default: + assertNever(intersection); + } + } + }; } setBoard(board: BoardElement) { + console.log("setting an updated board: ", board); this.board = board; this.pen = new Pen( @@ -119,7 +146,7 @@ class Pen { this.vspaceBetween = (height - margin * 2) / (rows - 1); } - starPoint(ctx: CanvasRenderingContext2D, addr: Address) { + starPoint(ctx: CanvasRenderingContext2D, addr: Coordinate) { ctx.fillStyle = "rgba(0, 0, 0, 1.0);"; const pixel = this.position(addr); ctx.moveTo(pixel.x, pixel.y); @@ -127,7 +154,7 @@ class Pen { ctx.fill(); } - ghostStone(ctx: CanvasRenderingContext2D, addr: Address, color: Color) { + ghostStone(ctx: CanvasRenderingContext2D, addr: Coordinate, color: Color) { switch (color) { case Color.White: ctx.fillStyle = "rgba(230, 230, 230, 0.5)"; @@ -140,7 +167,7 @@ class Pen { this.drawStone(ctx, addr); } - drawStone(ctx: CanvasRenderingContext2D, addr: Address) { + drawStone(ctx: CanvasRenderingContext2D, addr: Coordinate) { const radius = this.hspaceBetween / 2 - 2; const pixel = this.position(addr); ctx.moveTo(pixel.x, pixel.y); @@ -148,14 +175,14 @@ class Pen { ctx.fill(); } - position(addr: Address): Pixel { + position(addr: Coordinate): Pixel { return { x: this.margin + addr.column * this.hspaceBetween, y: this.margin + addr.row * this.vspaceBetween, }; } - address(pixel: Pixel): Address | null { + address(pixel: Pixel): Coordinate | null { if ( Math.round(pixel.x) < this.margin || Math.round(pixel.y) < this.margin @@ -173,3 +200,6 @@ class Pen { } } } + +const boardAddress = (size: Size, coordinate: Coordinate): number => + coordinate.column + size.width * coordinate.row; diff --git a/kifu/pwa/src/main.ts b/kifu/pwa/src/main.ts index 7174fc0..20a3a94 100644 --- a/kifu/pwa/src/main.ts +++ b/kifu/pwa/src/main.ts @@ -1,21 +1,91 @@ import { GoBoard } from "./components/Board"; +import { CoreRequest, CoreResponse } from "core-types"; import { CoreApi, initCore } from "./coreApi"; +import { assertNever } from "./assertNever"; + +/* +const processResponse = (response: CoreResponse) => { + const root = document.getElementById("root"); + if (!root) { + return; + } + +}; +*/ + +class UIState { + private currentView: GoBoard | null; + private rootElement: HTMLElement; + coreApi: CoreApi; + + constructor(coreApi: CoreApi, root: HTMLElement) { + this.currentView = null; + this.rootElement = root; + this.coreApi = coreApi; + + if (!root) { + console.log("root element not found"); + return; + } + } + + processResponse(response: CoreResponse) { + switch (response.type) { + case "PlayingFieldView": + if (this.currentView) { + this.currentView.setBoard(response.content.board); + } else { + this.currentView = new GoBoard({ + board: response.content.board, + onClick: async (request: CoreRequest) => { + const response = await this.coreApi.dispatch(request); + this.processResponse(response); + }, + }); + this.rootElement?.appendChild(this.currentView.canvas); + this.currentView.renderBoard(); + } + break; + default: + console.log("impossible branch: ", response); + alert("impossible branch"); + // assertNever(response); + break; + } + } +} const main = async () => { let coreApi = await initCore(); - let response = await coreApi.playingField(); + let response = await coreApi.dispatch({ type: "PlayingField" }); + const root = document.getElementById("root"); + + if (!root) { + console.log("root element not present"); + return; + } + + const uiState = new UIState(coreApi, root); + uiState.processResponse(response); + + /* console.log("playing field response: ", response); - const root = document.getElementById("root"); if (!root) { alert("could not retrieve the app root container"); return; } - const board = new GoBoard(response.board); + const board = new GoBoard({ + board: response.content.board, + onClick: async (request: CoreRequest) => { + const response = await coreApi.dispatch(request); + }, + }); root.appendChild(board.canvas); console.log("constructed board: ", board); board.renderBoard(); + */ }; main(); -- 2.44.1 From 343969a898633d464f287463cde4d46bc2aaa6ba Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Tue, 16 May 2023 10:07:52 -0400 Subject: [PATCH 4/5] Render stones on the board --- kifu/pwa/src/components/Board.ts | 53 ++++++++++++++++++++++++++++++++ kifu/pwa/src/kifu.css | 4 +++ 2 files changed, 57 insertions(+) diff --git a/kifu/pwa/src/components/Board.ts b/kifu/pwa/src/components/Board.ts index 04bbb28..76bdead 100644 --- a/kifu/pwa/src/components/Board.ts +++ b/kifu/pwa/src/components/Board.ts @@ -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(); } diff --git a/kifu/pwa/src/kifu.css b/kifu/pwa/src/kifu.css index 0aeed12..ea92600 100644 --- a/kifu/pwa/src/kifu.css +++ b/kifu/pwa/src/kifu.css @@ -16,3 +16,7 @@ body { canvas { border: 1px solid black; } + +.board { + background-color: rgb(150, 150, 150); +} -- 2.44.1 From a779220173cb7ec471926f1cc21ebe5e51876e67 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Tue, 16 May 2023 10:21:57 -0400 Subject: [PATCH 5/5] Remove dead code --- kifu/pwa/src/components/Board.ts | 19 ------------------- kifu/pwa/src/main.ts | 31 +------------------------------ 2 files changed, 1 insertion(+), 49 deletions(-) diff --git a/kifu/pwa/src/components/Board.ts b/kifu/pwa/src/components/Board.ts index 76bdead..8349c36 100644 --- a/kifu/pwa/src/components/Board.ts +++ b/kifu/pwa/src/components/Board.ts @@ -52,7 +52,6 @@ export class GoBoard { }; this.canvas.onclick = (_) => { - console.log("clicked on ", this.cursorLocation); if (this.cursorLocation) { const intersection = this.board.spaces[boardAddress(this.board.size, this.cursorLocation)]; @@ -60,7 +59,6 @@ export class GoBoard { case "Unplayable": break; case "Empty": - console.log("need to run action: ", intersection.content); onClick(intersection.content); break; case "Filled": @@ -73,7 +71,6 @@ export class GoBoard { } setBoard(board: BoardElement) { - console.log("setting an updated board: ", board); this.board = board; this.pen = new Pen( @@ -93,22 +90,6 @@ 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; diff --git a/kifu/pwa/src/main.ts b/kifu/pwa/src/main.ts index 20a3a94..182eeb6 100644 --- a/kifu/pwa/src/main.ts +++ b/kifu/pwa/src/main.ts @@ -1,17 +1,7 @@ import { GoBoard } from "./components/Board"; import { CoreRequest, CoreResponse } from "core-types"; import { CoreApi, initCore } from "./coreApi"; -import { assertNever } from "./assertNever"; - -/* -const processResponse = (response: CoreResponse) => { - const root = document.getElementById("root"); - if (!root) { - return; - } - -}; -*/ +// import { assertNever } from "./assertNever"; class UIState { private currentView: GoBoard | null; @@ -67,25 +57,6 @@ const main = async () => { const uiState = new UIState(coreApi, root); uiState.processResponse(response); - - /* - console.log("playing field response: ", response); - - if (!root) { - alert("could not retrieve the app root container"); - return; - } - - const board = new GoBoard({ - board: response.content.board, - onClick: async (request: CoreRequest) => { - const response = await coreApi.dispatch(request); - }, - }); - root.appendChild(board.canvas); - console.log("constructed board: ", board); - board.renderBoard(); - */ }; main(); -- 2.44.1