Merge pull request #25 from eeoooue/promotion

Implemented Promotion

docs/BoardElement.js

@@ -17,12 +17,6 @@ export class BoardElement {
         this.clearHighlights();
     }
     //#endregion
-    setValidMove(i, j) {
-        const tile = this.grid[i][j];
-        if (!tile.classList.contains("validmove")) {
-            this.grid[i][j].classList.add("validmove");
-        }
-    }
     findClickedCell() {
         for (let i = 0; i < 8; i++) {
             for (let j = 0; j < 8; j++) {
@@ -39,20 +33,17 @@ export class BoardElement {
     }
     clearHighlights() {
         document.querySelectorAll(".highlighted").forEach(el => el.classList.remove("highlighted"));
-        document.querySelectorAll(".validmove").forEach(el => el.classList.remove("validmove"));
         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.setValidMove(i, j);
         this.grid[i][j].appendChild(dot);
     }
     addCircle(i, j) {
         const circle = document.createElement("div");
         circle.classList.add("markercircle");
-        this.setValidMove(i, j);
         this.grid[i][j].appendChild(circle);
     }
     paintPieces() {

docs/PromotionCard.js

@@ -0,0 +1,44 @@
+export class PromotionCard {
+    constructor(parent, game) {
+        this.game = game;
+        this.parent = parent;
+        this.element = this.deriveEndCard(this.game);
+    }
+    deriveEndCard(game) {
+        const position = this.game.getPromotingPawnPosition();
+        const piece = this.game.boardState[position.i][position.j];
+        const colour = (piece.colour == "b") ? "black" : "white";
+        const bigText = `Promoting ${colour} pawn.`;
+        const subText = "Which piece should your pawn become?";
+        return this.createEndCard(bigText, subText);
+    }
+    createEndCard(bigText, subText) {
+        const card = document.createElement("div");
+        card.classList.add("end-card");
+        const header1 = document.createElement("h2");
+        header1.innerText = bigText;
+        card.appendChild(header1);
+        const header2 = document.createElement("h3");
+        header2.innerText = subText;
+        card.appendChild(header2);
+        const options = [];
+        options.push("Bishop");
+        options.push("Knight");
+        options.push("Rook");
+        options.push("Queen");
+        for (let i = 0; i < 4; i++) {
+            const optionText = options[i];
+            const optionBtn = document.createElement("button");
+            optionBtn.innerText = optionText;
+            optionBtn.addEventListener("click", () => {
+                this.submitChoice(optionText);
+            });
+            card.appendChild(optionBtn);
+        }
+        return card;
+    }
+    submitChoice(text) {
+        this.game.submitPromotionChoice(text);
+        this.element.remove();
+    }
+}

docs/chessgame.js

@@ -19,6 +19,44 @@ export class ChessGame {
         this.state = "ongoing";
         this.notify();
     }
+    submitPromotionChoice(choice) {
+        if (this.state != "promotion") {
+            return;
+        }
+        const position = this.getPromotingPawnPosition();
+        this.removePiece(position.i, position.j);
+        const colour = (this.getTurnPlayer() == "b") ? "w" : "b";
+        var newPiece;
+        switch (choice) {
+            case "Bishop":
+                newPiece = new Bishop(this, colour, position.i, position.j);
+                break;
+            case "Knight":
+                newPiece = new Knight(this, colour, position.i, position.j);
+                break;
+            case "Rook":
+                newPiece = new Rook(this, colour, position.i, position.j);
+                break;
+            case "Queen":
+                newPiece = new Queen(this, colour, position.i, position.j);
+                break;
+        }
+        if (newPiece) {
+            this.boardState[position.i][position.j] = newPiece;
+        }
+        this.state = "ongoing";
+        this.notify();
+    }
+    getPromotingPawnPosition() {
+        const i = (this.getTurnPlayer() == "b") ? 0 : 7;
+        for (let j = 0; j < 8; j++) {
+            const piece = this.boardState[i][j];
+            if (piece instanceof Pawn) {
+                return new BoardPosition(i, j);
+            }
+        }
+        return new BoardPosition(-1, -1);
+    }
     getKingOfColour(colour) {
         for (let i = 0; i < 8; i++) {
             for (let j = 0; j < 8; j++) {
@@ -163,16 +201,13 @@ export class ChessGame {
         this.checkGameOver();
     }
     checkGameOver() {
-        console.log(`there are ${this.possibleMoves} move(s) available`);
         if (this.possibleMoves == 0) {
             const loser = this.getTurnPlayer();
             const king = this.getKingOfColour(loser);
             if (king.threatened) {
-                console.log("that's checkmate!");
                 this.state = "checkmate";
             }
             else {
-                console.log("it's a stalemate.");
                 this.state = "stalemate";
             }
         }
@@ -186,6 +221,11 @@ export class ChessGame {
         targetPiece.moveTo(start);
         movingPiece.moveTo(end);
         this.concludeTurn();
+        if (movingPiece instanceof Pawn) {
+            if (end.i == 0 || end.i == 7) {
+                this.state = "promotion";
+            }
+        }
     }
     clearSquare(i, j) {
         this.boardState[i][j] = new EmptyPiece(this, i, j);

docs/index.html

@@ -14,9 +14,6 @@
         </div>
     </div>
 
-
-
     <script type="module" src="./main.js"></script>
-
 </body>
 </html>

docs/webchessgame.js

@@ -1,6 +1,7 @@
 import { ChessGame } from "./chessgame.js";
 import { BoardElement } from "./BoardElement.js";
 import { EndCard } from "./EndCard.js";
+import { PromotionCard } from "./PromotionCard.js";
 export class WebChessGame {
     constructor(mainContainer, boardContainer) {
         this.mainContainer = mainContainer;
@@ -29,11 +30,18 @@ export class WebChessGame {
                 const options = piece.getMoveOptions();
                 this.boardElement.paintMoveOptions(options);
             }
-            if (this.game.state != "ongoing") {
+            if (this.game.state == "checkmate" || this.game.state == "stalemate") {
                 this.showEndCard();
             }
+            if (this.game.state == "promotion") {
+                this.askPromotionOption();
+            }
         }
     }
+    askPromotionOption() {
+        const promotionCard = new PromotionCard(this, this.game);
+        this.boardContainer.appendChild(promotionCard.element);
+    }
     showEndCard() {
         const endCard = new EndCard(this, this.game);
         this.boardContainer.appendChild(endCard.element);

src/BoardElement.ts

@@ -37,14 +37,6 @@ export class BoardElement implements Observer {
 
     //#endregion
 
-    setValidMove(i: number, j: number): void {
-
-        const tile = this.grid[i][j];
-        if (!tile.classList.contains("validmove")) {
-            this.grid[i][j].classList.add("validmove")
-        }
-    }
-
     findClickedCell(): BoardPosition | null {
 
         for (let i = 0; i < 8; i++) {
@@ -65,7 +57,6 @@ export class BoardElement implements Observer {
     clearHighlights() {
 
         document.querySelectorAll(".highlighted").forEach(el => el.classList.remove("highlighted"))
-        document.querySelectorAll(".validmove").forEach(el => el.classList.remove("validmove"))
         document.querySelectorAll(".markerdot").forEach(el => el.remove())
         document.querySelectorAll(".markercircle").forEach(el => el.remove())
     }
@@ -74,15 +65,13 @@ export class BoardElement implements Observer {
 
         const dot = document.createElement("div")
         dot.classList.add("markerdot")
-        this.setValidMove(i, j)
         this.grid[i][j].appendChild(dot)
     }
 
     addCircle(i: number, j: number) {
 
         const circle = document.createElement("div")
         circle.classList.add("markercircle")
-        this.setValidMove(i, j)
         this.grid[i][j].appendChild(circle)
     }
 

src/PromotionCard.ts

@@ -0,0 +1,74 @@
+
+import { WebChessGame } from "./webchessgame.js";
+import { ChessGame } from "./chessgame.js";
+import { BoardPosition } from "./BoardPosition.js";
+import { Piece } from "./piece.js";
+
+export class PromotionCard {
+
+    public parent: WebChessGame;
+    public game: ChessGame;
+    public element: HTMLDivElement;
+
+    constructor(parent: WebChessGame, game: ChessGame) {
+
+        this.game = game;
+        this.parent = parent;
+        this.element = this.deriveEndCard(this.game);
+    }
+
+    deriveEndCard(game: ChessGame): HTMLDivElement {
+
+        const position: BoardPosition = this.game.getPromotingPawnPosition();
+
+        const piece: Piece = this.game.boardState[position.i][position.j];
+
+        const colour: string = (piece.colour == "b") ? "black" : "white";
+
+        const bigText = `Promoting ${colour} pawn.`
+        const subText = "Which piece should your pawn become?"
+
+        return this.createEndCard(bigText, subText);
+    }
+
+    createEndCard(bigText: string, subText: string): HTMLDivElement {
+
+        const card = document.createElement("div");
+        card.classList.add("end-card");
+
+        const header1 = document.createElement("h2");
+        header1.innerText = bigText;
+        card.appendChild(header1);
+
+        const header2 = document.createElement("h3");
+        header2.innerText = subText;
+        card.appendChild(header2);
+
+        const options: string[] = [];
+        options.push("Bishop");
+        options.push("Knight");
+        options.push("Rook");
+        options.push("Queen");
+
+        for(let i = 0; i<4; i++){
+
+            const optionText = options[i];
+            const optionBtn = document.createElement("button");
+            optionBtn.innerText = optionText;
+
+            optionBtn.addEventListener("click", () => {
+                this.submitChoice(optionText);
+            })
+
+            card.appendChild(optionBtn);
+        }
+
+        return card;
+    }
+
+    submitChoice(text: string){
+
+        this.game.submitPromotionChoice(text);
+        this.element.remove();
+    }
+}