refactor: use native event for events

Author: kacperwyczawski

src/board.ts

@@ -19,8 +19,6 @@ export class Board {
 	constructor(
 		HTMLTable: HTMLTableElement,
 		mapName: string,
-		onCellClick: (clickedCell: Cell, x: number, y: number) => void,
-		onCastleClick: (clickedCell: Cell) => void,
 	) {
 		const map = maps
 			.split("\n\n")
@@ -37,13 +35,7 @@ export class Board {
 			const HTMLRow = HTMLBody.insertRow();
 			this.#cells[y] = [];
 			row.split("").forEach((symbol, x) => {
-				const cell = new Cell(HTMLRow.insertCell());
-				cell.onClick = () => {
-					onCellClick(cell, x, y);
-				};
-				cell.onMenu = () => {
-					onCastleClick(cell);
-				};
+				const cell = new Cell(HTMLRow.insertCell(), x, y);
 				this.#cells[y].push(cell);
 
 				if (symbol === ".") {

src/cell.ts

@@ -6,10 +6,8 @@ export class Cell {
 	#piece: Piece | null = null;
 	#HTMLCell: HTMLTableCellElement;
 	#isHighlighted = false;
-
-	onClick: () => void = () => {};
-
-	onMenu: () => void = () => {};
+	#x: number;
+	#y: number;
 
 	get piece() {
 		return this.#piece;
@@ -27,15 +25,25 @@ export class Cell {
 		return this.#isHighlighted;
 	}
 
-	constructor(HTMLCell: HTMLTableCellElement) {
+	get x() {
+		return this.#x;
+	}
+
+	get y() {
+		return this.#y;
+	}
+
+	constructor(HTMLCell: HTMLTableCellElement, x: number, y: number) {
 		this.#HTMLCell = HTMLCell;
+		this.#x = x;
+		this.#y = y;
 		this.#HTMLCell.classList.add("cell");
 		this.#HTMLCell.addEventListener("click", () => {
-			this.onClick();
+			window.dispatchEvent(new CustomEvent("cellclick", { detail: { cell: this } }))
 		});
 		this.#HTMLCell.addEventListener("contextmenu", (event) => {
 			event.preventDefault();
-			this.onMenu();
+			window.dispatchEvent(new CustomEvent("cellmenu", { detail: { cell: this } }))
 		});
 	}
 

src/game.ts

@@ -21,66 +21,69 @@ export class Game {
 		this.#board = new Board(
 			HTMLTable,
 			"canyon",
-			(clickedCell, x, y) => {
-				// place piece
-				if (this.#selectedCell?.piece) {
-					if (!clickedCell.isHighlighted) {
-						this.#deselectAndUnhighlightCells();
-						return;
-					}
-					if (clickedCell.piece) {
-						this.#nextPlayer.handlePieceLoss();
-					}
-					if (clickedCell.building) {
-						this.#currentPlayer.handleBuildingCapture(clickedCell.building);
-						if (clickedCell.owner === this.#nextPlayer.color) {
-							this.#nextPlayer.handleBuildingLoss(clickedCell.building);
-						}
-					}
-					clickedCell.placePiece(this.#selectedCell.piece);
-					this.#selectedCell.removePiece();
+		); // TODO: static func
+
+		window.addEventListener("cellclick", ((e: CustomEvent) => {
+			const clickedCell = e.detail.cell
+			// place piece
+			if (this.#selectedCell?.piece) {
+				if (!clickedCell.isHighlighted) {
 					this.#deselectAndUnhighlightCells();
-					this.#endTurn();
 					return;
 				}
-
-				// grab piece
-				if (
-					clickedCell.piece &&
-					clickedCell.piece.color === this.#currentPlayer.color
-				) {
-					this.#selectedCell = clickedCell;
-					clickedCell.toggleSelected();
-					clickedCell.piece.highlightMoves(this.#board.cells, x, y);
-					return;
+				if (clickedCell.piece) {
+					this.#nextPlayer.handlePieceLoss();
 				}
-			},
-			(clickedCell) => {
-				if (clickedCell.owner !== this.#currentPlayer.color) {
-					return;
+				if (clickedCell.building) {
+					this.#currentPlayer.handleBuildingCapture(clickedCell.building);
+					if (clickedCell.owner === this.#nextPlayer.color) {
+						this.#nextPlayer.handleBuildingLoss(clickedCell.building);
+					}
 				}
-				this.#castleMenu.open(
-					(piece) => {
-						if (!this.#currentPlayer.canBuyPiece()) {
-							alert("You can't buy any more pieces.");
-							return;
-						}
-						this.#currentPlayer.handlePieceBuy(piece);
-						clickedCell.placePiece(piece);
-						this.#endTurn();
-					},
-					(building) => {
-						clickedCell.setBuilding(building);
-						this.#currentPlayer.handleBuildingUpgrade(building);
-						this.#endTurn();
-					},
-					this.#currentPlayer,
-					this.#currentPlayer.gold,
-					clickedCell.building === "factory",
-					clickedCell.piece !== null,
-				);
-			},
-		);
+				clickedCell.placePiece(this.#selectedCell.piece);
+				this.#selectedCell.removePiece();
+				this.#deselectAndUnhighlightCells();
+				this.#endTurn();
+				return;
+			}
+			// grab piece
+			if (
+				clickedCell.piece &&
+				clickedCell.piece.color === this.#currentPlayer.color
+			) {
+				this.#selectedCell = clickedCell;
+				clickedCell.toggleSelected();
+				clickedCell.piece.highlightMoves(this.#board.cells, clickedCell.x, clickedCell.y);
+				return;
+			}
+		}) as EventListener)
+
+		window.addEventListener("cellmenu", ((e: CustomEvent) => {
+			const clickedCell = e.detail.cell
+			if (clickedCell.owner !== this.#currentPlayer.color) {
+				return;
+			}
+			this.#castleMenu.open(
+				(piece) => {
+					if (!this.#currentPlayer.canBuyPiece()) {
+						alert("You can't buy any more pieces.");
+						return;
+					}
+					this.#currentPlayer.handlePieceBuy(piece);
+					clickedCell.placePiece(piece);
+					this.#endTurn();
+				},
+				(building) => {
+					clickedCell.setBuilding(building);
+					this.#currentPlayer.handleBuildingUpgrade(building);
+					this.#endTurn();
+				},
+				this.#currentPlayer,
+				this.#currentPlayer.gold,
+				clickedCell.building === "factory",
+				clickedCell.piece !== null,
+			);
+		}) as EventListener)
 
 		if (this.#isTutorial) {
 			this.#tutorial.activate(this.#players[0]);