add annotation tags in the chessboard

src/components/boards/BoardPlay.tsx

@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Alert,
+  Badge,
   Box,
   Group,
   Input,
@@ -20,12 +21,15 @@ import {
   IconPlus,
   IconSwitchVertical,
 } from "@tabler/icons-react";
-import { Chess, PieceSymbol, Square } from "chess.js";
+import { Chess, Move, PieceSymbol, Square } from "chess.js";
 import { DrawShape } from "chessground/draw";
 import { Color } from "chessground/types";
 import { memo, useContext, useMemo, useState } from "react";
 import {
+  Annotation,
+  ANNOTATION_INFO,
   handleMove,
+  moveToCoordinates,
   moveToKey,
   parseKeyboardMove,
   parseUci,
@@ -208,13 +212,13 @@ function BoardPlay({
   let shapes: DrawShape[] =
     showArrows && arrows.length > 0
       ? arrows.map((move, i) => {
-          const { from, to } = parseUci(move);
-          return {
-            orig: from,
-            dest: to,
-            brush: i === 0 ? "paleBlue" : "paleGrey",
-          };
-        })
+        const { from, to } = parseUci(move);
+        return {
+          orig: from,
+          dest: to,
+          brush: i === 0 ? "paleBlue" : "paleGrey",
+        };
+      })
       : [];
 
   if (currentNode.shapes.length > 0) {
@@ -284,6 +288,7 @@ function BoardPlay({
           </Alert>
         )}
         <Box className={chessboard} ref={boardRef} mt={10}>
+          {currentNode.annotation && currentNode.move && <AnnotationHint orientation={orientation} move={currentNode.move} annotation={currentNode.annotation} />}
           <PromotionModal
             pendingMove={pendingMove}
             cancelMove={() => setPendingMove(null)}
@@ -326,14 +331,14 @@ function BoardPlay({
               color: practiceLock
                 ? undefined
                 : editingMode
-                ? "both"
-                : side || turn,
+                  ? "both"
+                  : side || turn,
               dests:
                 editingMode || viewOnly
                   ? undefined
                   : disableVariations && currentNode.children.length > 0
-                  ? undefined
-                  : dests,
+                    ? undefined
+                    : dests,
               showDests,
               events: {
                 after: (orig, dest, metadata) => {
@@ -487,4 +492,25 @@ function ShowMaterial({
   );
 }
 
-export default memo(BoardPlay);
+function AnnotationHint({ move, annotation, orientation }: { move: Move, annotation: Annotation, orientation: Color }) {
+  const { file, rank } = moveToCoordinates(move, orientation)
+  const { color } = ANNOTATION_INFO[annotation];
+
+  return <div style={{
+    position: "absolute",
+    zIndex: 100,
+    width: "12.5%",
+    height: "12.5%",
+    left: `${(file - 1) * 12.5}%`,
+    bottom: `${(rank - 1) * 12.5}%`
+  }
+  }>
+    <Badge style={{
+      transform: "translateY(-40%) translateX(-50%)"
+    }} ml="90%" h={40} w={40} color={color} fz="lg" variant="filled">
+      {annotation}
+    </Badge>
+  </div>
+}
+
+export default memo(BoardPlay);

src/components/boards/PromotionModal.tsx

@@ -3,17 +3,7 @@ import { useClickOutside } from "@mantine/hooks";
 import { BISHOP, KNIGHT, PieceSymbol, QUEEN, ROOK, Square } from "chess.js";
 import { memo } from "react";
 import Piece from "../common/Piece";
-
-const fileToNumber: Record<string, number> = {
-  a: 1,
-  b: 2,
-  c: 3,
-  d: 4,
-  e: 5,
-  f: 6,
-  g: 7,
-  h: 8,
-};
+import { moveToCoordinates } from "@/utils/chess";
 
 const PromotionModal = memo(function PromotionModal({
   pendingMove,
@@ -28,12 +18,7 @@ const PromotionModal = memo(function PromotionModal({
   turn?: "white" | "black";
   orientation: "white" | "black";
 }) {
-  let file = fileToNumber[pendingMove?.to[0] ?? "a"];
-  let rank = parseInt(pendingMove?.to[1] ?? "1");
-  if (orientation === "black") {
-    file = 9 - file;
-    rank = 9 - rank;
-  }
+  const { file, rank } = moveToCoordinates(pendingMove, orientation)
   const ref = useClickOutside(() => cancelMove());
 
   const promotionPieces: PieceSymbol[] = [QUEEN, KNIGHT, ROOK, BISHOP];

src/utils/chess.ts

@@ -266,6 +266,29 @@ export function moveToKey(move: Move | null) {
     return move ? ([move.from, move.to] as Key[]) : [];
 }
 
+
+const fileToNumber: Record<string, number> = {
+    a: 1,
+    b: 2,
+    c: 3,
+    d: 4,
+    e: 5,
+    f: 6,
+    g: 7,
+    h: 8,
+};
+
+
+export function moveToCoordinates(move: { from: string, to: string } | null, orientation: "white" | "black") {
+    let file = fileToNumber[move?.to[0] ?? "a"];
+    let rank = parseInt(move?.to[1] ?? "1");
+    if (orientation === "black") {
+        file = 9 - file;
+        rank = 9 - rank;
+    }
+    return { file, rank }
+}
+
 export function toDests(
     chess: Chess | null,
     forcedEP: boolean