Merge branch 'master' into 'master'

feat: red highlight in check

See merge request aiursoft/chessserver!66

src/Aiursoft.ChessServer/wwwroot/scripts/chessboard/chessboard.js

@@ -6,6 +6,8 @@ import {
   buildOnSnapEnd,
   WHITE_ABBREVIATION,
   BLACK_ABBREVIATION,
+  WHITE,
+  BLACK,
   findMove,
 } from "./defaultConfig.js";
 
@@ -49,6 +51,9 @@ function AnduinChessBoard(color) {
   this.statusControl = null;
   this.roleControl = null;
   this.lastMovePair = [null, null];
+  this.isWhiteCheck = false;
+  this.isBlackCheck = false;
+  this.statusText = "";
 
   this.config = {
     orientation: this.color === BLACK_ABBREVIATION ? "black" : "white",
@@ -60,6 +65,15 @@ function AnduinChessBoard(color) {
     onSnapEnd: null,
   };
 
+  /**
+   * render some styles, like highlight, red light
+   */
+  this.render = () => {
+    this.renderTrack();
+    this.renderCheck();
+    this.renderStatusText();
+  };
+
   this.renderTrack = () => {
     if (this.lastMovePair[0] !== null && this.lastMovePair[1] !== null) {
       let allSquares = Array.from(
@@ -84,6 +98,37 @@ function AnduinChessBoard(color) {
     }
   };
 
+  this.renderCheck = () => {
+    let checkedPosition = null;
+    if (this.isWhiteCheck) {
+      checkedPosition = this.getKingPosition(WHITE_ABBREVIATION);
+    } else if (this.isBlackCheck) {
+      checkedPosition = this.getKingPosition(BLACK_ABBREVIATION);
+    }
+
+    document.querySelectorAll("#board [data-square]").forEach((p) => {
+      p.style.backgroundImage = "";
+    });
+    if (checkedPosition !== null) {
+      document.querySelector(
+        `#board [data-square=${checkedPosition}]`
+      ).style.backgroundImage = "radial-gradient(circle, red 5%, transparent)";
+    }
+  };
+
+  this.renderStatusText = () => {
+    this.statusControl.innerHTML = this.statusText;
+  };
+
+  this.getKingPosition = (bOrW) => {
+    let pieces = []
+      .concat(...this.game.board())
+      .filter((p) => p !== null && p.type === "k" && p.color === bOrW)
+      .map((p) => p.square);
+
+    return pieces.length > 0 ? pieces[0] : null;
+  };
+
   this.run = (player, gameId) => {
     this.roleControl.innerHTML = `You are ${
       this.color === WHITE_ABBREVIATION
@@ -125,35 +170,44 @@ function AnduinChessBoard(color) {
     if (this.game !== null) {
       let [position1, position2] = findMove(this.game.fen(), newFEN);
       this.lastMovePair = [position1, position2];
-      this.renderTrack();
     }
 
     this.game = new Chess(newFEN);
     this.board.position(newFEN);
     console.log(`Got fen ${newFEN}. refreshing board...`);
 
-    this.updateStatusText();
+    this.updateStatus();
+    this.render();
   };
 
-  this.updateStatusText = () => {
-    let status;
-    let moveColor = "White";
+  this.updateStatus = () => {
+    let moveColor = WHITE;
     if (this.game.turn() === BLACK_ABBREVIATION) {
-      moveColor = "Black";
+      moveColor = BLACK;
     }
+
+    this.isWhiteCheck = null;
+    this.isBlackCheck = null;
+
+    this.statusText = `${moveColor} to move`;
+
+    if (this.game.isCheck()) {
+      this.isWhiteCheck = moveColor === WHITE;
+      this.isBlackCheck = moveColor === BLACK;
+      this.statusText += `, ${moveColor} is in check`;
+    }
+
     if (this.game.isCheckmate()) {
-      status = `Game over, ${moveColor} is in checkmate, and winner is ${
+      this.isWhiteCheck = moveColor === WHITE;
+      this.isBlackCheck = moveColor === BLACK;
+      this.statusText = `Game over, ${moveColor} is in checkmate, and winner is ${
         this.game.turn() === WHITE_ABBREVIATION ? "Black" : "White"
       }`;
-    } else if (this.game.isDraw()) {
-      status = "Game over, drawn position";
-    } else {
-      status = `${moveColor} to move`;
-      if (this.game.isCheck()) {
-        status += `, ${moveColor} is in check`;
-      }
     }
-    this.statusControl.innerHTML = status;
+
+    if (this.game.isDraw()) {
+      this.statusText = "Game over, drawn position";
+    }
   };
 }
 

src/Aiursoft.ChessServer/wwwroot/scripts/chessboard/defaultConfig.js

@@ -1,5 +1,7 @@
 const WHITE_ABBREVIATION = "w";
 const BLACK_ABBREVIATION = "b";
+const WHITE = "White";
+const BLACK = "Black";
 
 const WHITE_SQUARE_GREY = "#a9a9a9";
 const BLACK_SQUARE_GREY = "#696969";
@@ -65,7 +67,7 @@ function buildOnDragStart(globalParams) {
  *
  * # example:
  * ```js
- * let onDrop = onDrop({game, socket, lastMovePair, renderTrack});
+ * let onDrop = onDrop({game, socket, lastMovePair, render});
  * ```
  *
  * @param {{game, socket}} globalParams
@@ -75,7 +77,7 @@ function buildOnDrop(globalParams) {
   const realOnDrop = (source, target) => {
     let game = globalParams.game;
     let socket = globalParams.socket;
-    let renderTrack = globalParams.renderTrack;
+    let render = globalParams.render;
 
     document.querySelectorAll("#board [data-square]").forEach((square) => {
       square.style.backgroundColor = "";
@@ -93,7 +95,7 @@ function buildOnDrop(globalParams) {
 
       if (source !== target) {
         globalParams.lastMovePair = [source, target];
-        renderTrack();
+        render();
       }
 
       const lastMove = game.history({ verbose: true }).pop().san;
@@ -198,5 +200,7 @@ export {
   BLACK_ABBREVIATION,
   WHITE_SQUARE_GREY,
   BLACK_SQUARE_GREY,
+  WHITE,
+  BLACK,
   findMove,
 };