Add symbols to opening database view

src/components/boards/MoveCell.tsx

@@ -1,20 +1,15 @@
 import { moveNotationTypeAtom } from "@/state/atoms";
-import { ANNOTATION_INFO, type Annotation } from "@/utils/annotation";
+import {
+  ANNOTATION_INFO,
+  type Annotation,
+  addPieceSymbol,
+} from "@/utils/annotation";
 import { Box, rgba, useMantineTheme } from "@mantine/core";
 import { IconFlag } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { type ForwardedRef, forwardRef } from "react";
 import * as classes from "./MoveCell.css";
 
-const pieceChars = { K: "♔", Q: "♕", R: "♖", B: "♗", N: "♘" };
-
-function addPieceIcon(move: string): string {
-  const pieceChar = pieceChars[move[0] as keyof typeof pieceChars];
-
-  if (typeof pieceChar === "undefined") return move;
-  return pieceChar + move.slice(1);
-}
-
 interface MoveCellProps {
   annotations: Annotation[];
   isStart: boolean;
@@ -71,7 +66,7 @@ const MoveCell = forwardRef(function MoveCell(
       onContextMenu={props.onContextMenu}
     >
       {props.isStart && <IconFlag style={{ marginRight: 5 }} size="0.875rem" />}
-      {moveNotationType === "symbols" ? addPieceIcon(props.move) : props.move}
+      {moveNotationType === "symbols" ? addPieceSymbol(props.move) : props.move}
       {props.annotations.join("")}
     </Box>
   );

src/components/panels/database/OpeningsTable.tsx

@@ -1,7 +1,10 @@
 import { TreeStateContext } from "@/components/common/TreeStateContext";
+import { moveNotationTypeAtom } from "@/state/atoms";
+import { addPieceSymbol } from "@/utils/annotation";
 import type { Opening } from "@/utils/db";
 import { formatNumber } from "@/utils/format";
 import { Group, Progress, Text } from "@mantine/core";
+import { useAtom } from "jotai";
 import { DataTable } from "mantine-datatable";
 import { memo, useContext } from "react";
 import { useStore } from "zustand";
@@ -15,6 +18,7 @@ function OpeningsTable({
 }) {
   const store = useContext(TreeStateContext)!;
   const makeMove = useStore(store, (s) => s.makeMove);
+  const [moveNotationType] = useAtom(moveNotationTypeAtom);
 
   const whiteTotal = openings?.reduce((acc, curr) => acc + curr.white, 0);
   const blackTotal = openings?.reduce((acc, curr) => acc + curr.black, 0);
@@ -60,7 +64,11 @@ function OpeningsTable({
                   Game end
                 </Text>
               );
-            return <Text fz="sm">{move}</Text>;
+            return (
+              <Text fz="sm">
+                {moveNotationType === "symbols" ? addPieceSymbol(move) : move}
+              </Text>
+            );
           },
         },
         {

src/utils/annotation.ts

@@ -1,5 +1,14 @@
 import type { MantineColor } from "@mantine/core";
 
+const pieceChars = { K: "♔", Q: "♕", R: "♖", B: "♗", N: "♘" };
+
+export function addPieceSymbol(move: string): string {
+  const pieceChar = pieceChars[move[0] as keyof typeof pieceChars];
+
+  if (typeof pieceChar === "undefined") return move;
+  return pieceChar + move.slice(1);
+}
+
 export type Annotation =
   | ""
   | "!"