Implement king square highlights for end game states

ui/lib/css/theme/board/_chessground.scss

@@ -1,5 +1,21 @@
 @import 'board-2d';
 
+@keyframes pulse {
+  0% {
+    background-size: 0%;
+    top: -1%;
+    left: 11%;
+    opacity: 0.2;
+  }
+  100% {
+    background-size: 45%;
+    top: -2.8%;
+    left: 9.8%;
+    opacity: 0.98;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
+  }
+}
+
 cg-board {
   @extend %box-shadow, %abs-100;
   @include prevent-select;
@@ -118,6 +134,37 @@ square {
   &.bh1 piece {
     opacity: 0.98;
   }
+
+  &.king-win {
+    background-image: url(../images/icons/victory.svg);
+  }
+
+  &.king-draw {
+    background-image: url(../images/icons/stalemate.svg);
+  }
+
+  &.king-lose-checkmate {
+    background-image: url(../images/icons/checkmate.svg);
+  }
+
+  &.king-lose-resign {
+    background-image: url(../images/icons/resign.svg);
+  }
+
+  &.king-lose-timeout {
+    background-image: url(../images/icons/timeout.svg);
+  }
+
+  &.king-win,
+  &.king-draw,
+  &.king-lose-checkmate,
+  &.king-lose-resign,
+  &.king-lose-timeout {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    z-index: 5;
+    animation: pulse 0.4s ease-out 1 forwards;
+  }
 }
 
 piece {

ui/round/src/ctrl.ts

@@ -609,6 +609,7 @@ export default class RoundController implements MoveRootCtrl {
     ) {
       notify(viewStatus(this.data));
     }
+    if (!this.replaying()) groundReload(this);
   };
 
   challengeRematch = async (): Promise<void> => {

ui/round/src/ground.ts

@@ -9,12 +9,47 @@ import { uciToMove } from '@lichess-org/chessground/util';
 import { ShowResizeHandle, Coords, MoveEvent } from 'lib/prefs';
 import { storage } from 'lib/storage';
 import { Chessground as makeChessground } from '@lichess-org/chessground';
+import { finished, status } from 'lib/game/status';
 
 export function makeConfig(ctrl: RoundController): CgConfig {
   const data = ctrl.data,
     hooks = ctrl.makeCgHooks(),
     step = plyStep(data, ctrl.ply),
-    playing = ctrl.isPlaying();
+    playing = ctrl.isPlaying(),
+    gameFinished = finished(data),
+    customHighlights = new Map<Key, string>();
+  if (gameFinished && data.game.variant.key == 'standard') {
+    const gameStatus = data.game.status.id;
+    const winner = data.game.winner,
+      loser = winner === 'white' ? 'black' : winner === 'black' ? 'white' : undefined;
+    if (winner) {
+      const winningKingSquare = util.findKingSquare(step.fen, winner);
+      if (winningKingSquare) {
+        customHighlights.set(winningKingSquare as Key, 'king-win');
+      }
+    }
+    if (loser) {
+      const losingKingSquare = util.findKingSquare(step.fen, loser);
+      if (losingKingSquare) {
+        if (gameStatus === status.mate) {
+          customHighlights.set(losingKingSquare as Key, 'king-lose-checkmate');
+        } else if (gameStatus === status.outoftime || gameStatus === status.timeout) {
+          customHighlights.set(losingKingSquare as Key, 'king-lose-timeout');
+        } else if (gameStatus === status.resign) {
+          customHighlights.set(losingKingSquare as Key, 'king-lose-resign');
+        }
+      }
+    } else if (
+      gameStatus === status.draw ||
+      gameStatus === status.stalemate ||
+      gameStatus === status.timeout
+    ) {
+      const white_king = util.findKingSquare(step.fen, 'white');
+      const black_king = util.findKingSquare(step.fen, 'black');
+      customHighlights.set(white_king as Key, 'king-draw');
+      customHighlights.set(black_king as Key, 'king-draw');
+    }
+  }
   return {
     fen: step.fen,
     orientation: boardOrientation(data, ctrl.flip),
@@ -28,6 +63,7 @@ export function makeConfig(ctrl: RoundController): CgConfig {
     highlight: {
       lastMove: data.pref.highlight,
       check: data.pref.highlight,
+      custom: customHighlights,
     },
     events: {
       move: hooks.onMove,

ui/round/src/util.ts

@@ -16,6 +16,29 @@ export function parsePossibleMoves(dests?: EncodedDests): Dests {
   return dec;
 }
 
+export function findKingSquare(fen: string, color: Color): string | null {
+  const rows = fen.split(' ')[0].split('/');
+  const kingChar = color === 'white' ? 'K' : 'k';
+
+  let rank = 8;
+  for (const row of rows) {
+    let fileIndex = 0;
+    for (const ch of row) {
+      if (/\d/.test(ch)) {
+        fileIndex += parseInt(ch, 10);
+      } else {
+        const file = 'abcdefgh'[fileIndex];
+        if (ch === kingChar) {
+          return `${file}${rank}`;
+        }
+        fileIndex++;
+      }
+    }
+    rank--;
+  }
+  return null;
+}
+
 export const firstPly = (d: RoundData): number => d.steps[0].ply;
 
 export const lastPly = (d: RoundData): number => lastStep(d).ply;