Merge pull request #30 from eeoooue/refactoring

Refactoring & README changes
eeoooue · Jun 8, 2023 · 5fd7d6f · 5fd7d6f
2 parents c8afb96 + cd9e7d0
commit 5fd7d6f
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,4 @@
 
 A plain implementation of Chess in TypeScript, based on the [chess.com](http://chess.com) UI, using [Cburnett's chess pieces](https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces).
 
-![Chess Board](chessboard.png)
+[![Chess Board](chessboard.png)](https://eeoooue.github.io/chessboard/)
diff --git a/docs/board_element.js b/docs/board_element.js
@@ -1,3 +1,4 @@
+import { BoardPosition } from "./board_position.js";
 import { EmptyPiece } from "./pieces/empty_piece.js";
 import { King } from "./pieces/king.js";
 export class BoardElement {
@@ -7,7 +8,7 @@ export class BoardElement {
         this.boardContainer = boardContainer;
         this.game = game;
         this.paintTiles();
-        this.paintPieces(this.game.getPieces());
+        this.repaint();
     }
     repaint() {
         this.clearPreviousBoard();
@@ -19,16 +20,6 @@ export class BoardElement {
         document.querySelectorAll(".markerdot").forEach(el => el.remove());
         document.querySelectorAll(".markercircle").forEach(el => el.remove());
     }
-    addDot(i, j) {
-        const dot = document.createElement("div");
-        dot.classList.add("markerdot");
-        this.grid[i][j].appendChild(dot);
-    }
-    addCircle(i, j) {
-        const circle = document.createElement("div");
-        circle.classList.add("markercircle");
-        this.grid[i][j].appendChild(circle);
-    }
     paintPieces(pieces) {
         pieces.forEach((piece) => {
             this.paintPiece(piece);
@@ -73,7 +64,8 @@ export class BoardElement {
     paintTile(list, i, j, paint) {
         const tile = this.createTile(paint);
         tile.addEventListener("click", () => {
-            this.parent.processMove(i, j);
+            const position = new BoardPosition(i, j);
+            this.parent.processSelection(position);
         });
         list.push(tile);
         this.boardContainer.appendChild(tile);
@@ -84,6 +76,11 @@ export class BoardElement {
         tile.classList.add(paint);
         return tile;
     }
+    highlightActivePiece(piece) {
+        const tile = this.grid[piece.i][piece.j];
+        tile.classList.add("highlighted");
+        this.paintMoveOptions(piece.possibleMoves);
+    }
     paintMoveOptions(options) {
         options.forEach((position) => {
             this.illustrateMoveOption(position);
@@ -98,4 +95,14 @@ export class BoardElement {
             this.addCircle(position.i, position.j);
         }
     }
+    addDot(i, j) {
+        const dot = document.createElement("div");
+        dot.classList.add("markerdot");
+        this.grid[i][j].appendChild(dot);
+    }
+    addCircle(i, j) {
+        const circle = document.createElement("div");
+        circle.classList.add("markercircle");
+        this.grid[i][j].appendChild(circle);
+    }
 }
diff --git a/docs/chess_game.js b/docs/chess_game.js
@@ -77,6 +77,7 @@ export class ChessGame {
     }
     submitSelection(move) {
         this.moveTracker.interpretSelection(move);
+        return this.boardState[move.i][move.j];
     }
     getTurnPlayer() {
         return (this.turncount % 2 == 0) ? "w" : "b";
@@ -111,11 +112,9 @@ export class ChessGame {
         this.boardState[i][j] = new EmptyPiece(this, i, j);
     }
     removePiece(i, j) {
-        if (this.validCoordinates(i, j)) {
-            const piece = this.boardState[i][j];
-            this.detach(piece);
-            this.clearSquare(i, j);
-        }
+        const piece = this.boardState[i][j];
+        this.detach(piece);
+        this.clearSquare(i, j);
     }
     legalPosition(i, j, colour) {
         if (this.validCoordinates(i, j)) {

diff --git a/docs/index.html b/docs/index.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <title>chessboard</title>
 </head>
+
 <body>
 
-    <div class="main-container">
-        <div class="board-container">
-        </div>
-    </div>
+    <div class="board-container"></div>
 
     <script type="module" src="./main.js"></script>
 </body>
+
 </html>
diff --git a/docs/main.js b/docs/main.js
@@ -1,6 +1,5 @@
 import { WebChessGame } from './web_chess_game.js';
 const boardContainer = document.querySelector(".board-container");
-const mainContainer = document.querySelector(".main-container");
-if (mainContainer && boardContainer) {
-    new WebChessGame(mainContainer, boardContainer);
+if (boardContainer) {
+    new WebChessGame(boardContainer);
 }
diff --git a/docs/style.css b/docs/style.css
@@ -21,7 +21,6 @@ body {
     text-align: center;
 }
 
-
 .board-container{
     height: min(80vh, 100vw);
     width: min(80vh, 100vw);

diff --git a/docs/web_chess_game.js b/docs/web_chess_game.js
@@ -1,11 +1,9 @@
 import { ChessGame } from "./chess_game.js";
-import { BoardPosition } from "./board_position.js";
 import { BoardElement } from "./board_element.js";
 import { EndCard } from "./end_card.js";
 import { PromotionCard } from "./promotion_card.js";
 export class WebChessGame {
-    constructor(mainContainer, boardContainer) {
-        this.mainContainer = mainContainer;
+    constructor(boardContainer) {
         this.boardContainer = boardContainer;
         this.game = new ChessGame();
         this.boardElement = new BoardElement(this, this.boardContainer, this.game);
@@ -15,16 +13,11 @@ export class WebChessGame {
         this.game = new ChessGame();
         this.boardElement = new BoardElement(this, this.boardContainer, this.game);
     }
-    processMove(i, j) {
-        const move = new BoardPosition(i, j);
-        this.game.submitSelection(move);
+    processSelection(position) {
+        const piece = this.game.submitSelection(position);
         this.refresh();
         if (this.game.moveTracker.active) {
-            const piece = this.game.boardState[move.i][move.j];
-            const tile = this.boardElement.grid[move.i][move.j];
-            tile.classList.add("highlighted");
-            const options = piece.possibleMoves;
-            this.boardElement.paintMoveOptions(options);
+            this.boardElement.highlightActivePiece(piece);
         }
     }
     refresh() {

diff --git a/src/board_element.ts b/src/board_element.ts
@@ -5,7 +5,6 @@ import { BoardPosition } from "./board_position.js";
 import { Piece } from "./piece.js";
 import { EmptyPiece } from "./pieces/empty_piece.js";
 import { King } from "./pieces/king.js";
-import { Subject } from "./subject.js";
 
 export class BoardElement {
 
@@ -19,9 +18,8 @@ export class BoardElement {
         this.parent = parent;
         this.boardContainer = boardContainer;
         this.game = game;
-
-        this.paintTiles()
-        this.paintPieces(this.game.getPieces())
+        this.paintTiles();
+        this.repaint();
     }
 
     repaint(): void {
@@ -38,20 +36,6 @@ export class BoardElement {
         document.querySelectorAll(".markercircle").forEach(el => el.remove())
     }
 
-    addDot(i: number, j: number) {
-
-        const dot = document.createElement("div")
-        dot.classList.add("markerdot")
-        this.grid[i][j].appendChild(dot)
-    }
-
-    addCircle(i: number, j: number) {
-
-        const circle = document.createElement("div")
-        circle.classList.add("markercircle")
-        this.grid[i][j].appendChild(circle)
-    }
-
     paintPieces(pieces: Piece[]) {
 
         pieces.forEach((piece) => {
@@ -113,7 +97,8 @@ export class BoardElement {
 
         const tile = this.createTile(paint);
         tile.addEventListener("click", () => {
-            this.parent.processMove(i, j);
+            const position = new BoardPosition(i, j);
+            this.parent.processSelection(position);
         })
 
         list.push(tile)
@@ -129,6 +114,13 @@ export class BoardElement {
         return tile;
     }
 
+    highlightActivePiece(piece: Piece){
+
+        const tile = this.grid[piece.i][piece.j]
+        tile.classList.add("highlighted")
+        this.paintMoveOptions(piece.possibleMoves);
+    }
+
     paintMoveOptions(options: BoardPosition[]) {
 
         options.forEach((position) => {
@@ -145,4 +137,18 @@ export class BoardElement {
             this.addCircle(position.i, position.j)
         }
     }
+
+    addDot(i: number, j: number) {
+
+        const dot = document.createElement("div")
+        dot.classList.add("markerdot")
+        this.grid[i][j].appendChild(dot)
+    }
+
+    addCircle(i: number, j: number) {
+
+        const circle = document.createElement("div")
+        circle.classList.add("markercircle")
+        this.grid[i][j].appendChild(circle)
+    }
 }
diff --git a/src/chess_game.ts b/src/chess_game.ts
@@ -27,7 +27,7 @@ export class ChessGame implements Subject {
         this.updateState();
     }
 
-    submitPromotionChoice(choice: string) {
+    submitPromotionChoice(choice: string) : void {
 
         const pawn: Pawn = this.getPromotingPawn();
         pawn.promoteTo(choice);
@@ -78,7 +78,7 @@ export class ChessGame implements Subject {
         return new EmptyPiece(this, 0, 0);
     }
 
-    resetThreats() {
+    resetThreats() : void {
 
         const pieces = this.getPieces();
         pieces.forEach((piece) => {
@@ -110,9 +110,10 @@ export class ChessGame implements Subject {
         })
     }
 
-    submitSelection(move: BoardPosition){
+    submitSelection(move: BoardPosition) : Piece {
 
         this.moveTracker.interpretSelection(move);
+        return this.boardState[move.i][move.j];
     }
 
     getTurnPlayer(): string {
@@ -162,11 +163,9 @@ export class ChessGame implements Subject {
 
     removePiece(i: number, j: number) {
 
-        if (this.validCoordinates(i, j)) {
-            const piece: Piece = this.boardState[i][j];
-            this.detach(piece);
-            this.clearSquare(i, j);
-        }
+        const piece: Piece = this.boardState[i][j];
+        this.detach(piece);
+        this.clearSquare(i, j);
     }
 
     legalPosition(i: number, j: number, colour: string): boolean {

diff --git a/src/main.ts b/src/main.ts
@@ -2,8 +2,7 @@
 import { WebChessGame } from './web_chess_game.js';
 
 const boardContainer: HTMLElement | null = document.querySelector(".board-container")
-const mainContainer: HTMLElement | null = document.querySelector(".main-container")
 
-if (mainContainer && boardContainer){
-    new WebChessGame(mainContainer, boardContainer);
+if (boardContainer){
+    new WebChessGame(boardContainer);
 }
diff --git a/src/web_chess_game.ts b/src/web_chess_game.ts
@@ -8,17 +8,14 @@ import { PromotionCard } from "./promotion_card.js";
 
 export class WebChessGame {
 
-    public mainContainer: HTMLElement;
     public boardContainer: HTMLElement;
     public game: ChessGame;
     public boardElement: BoardElement;
 
-    constructor(mainContainer: HTMLElement, boardContainer: HTMLElement) {
+    constructor(boardContainer: HTMLElement) {
 
-        this.mainContainer = mainContainer;
         this.boardContainer = boardContainer;
         this.game = new ChessGame();
-
         this.boardElement = new BoardElement(this, this.boardContainer, this.game);
     }
 
@@ -29,19 +26,13 @@ export class WebChessGame {
         this.boardElement = new BoardElement(this, this.boardContainer, this.game);
     }
 
-    public processMove(i: number, j: number) : void {
-
-        const move: BoardPosition = new BoardPosition(i, j);
+    public processSelection(position: BoardPosition) : void {
 
-        this.game.submitSelection(move);
+        const piece: Piece = this.game.submitSelection(position);
         this.refresh();
 
         if (this.game.moveTracker.active){
-            const piece : Piece = this.game.boardState[move.i][move.j]
-            const tile = this.boardElement.grid[move.i][move.j]
-            tile.classList.add("highlighted")
-            const options: BoardPosition[] = piece.possibleMoves;
-            this.boardElement.paintMoveOptions(options);                
+            this.boardElement.highlightActivePiece(piece);
         }
     }