remove dependency on react chessground

package.json

@@ -52,7 +52,6 @@
     "prosemirror-transform": "^1.7.3",
     "prosemirror-view": "^1.31.4",
     "react": "^18.2.0",
-    "react-chessground": "^1.5.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-helmet": "^6.1.0",

src/App.tsx

@@ -32,8 +32,8 @@ import { useAtomValue } from "jotai";
 import { pieceSetAtom, primaryColorAtom } from "./atoms/atoms";
 
 import "react-virtualized/styles.css";
-import "./styles/chessgroundBaseOverride.css";
-import "./styles/chessgroundColorsOverride.css";
+import "@/styles/chessgroundBaseOverride.css";
+import "@/styles/chessgroundColorsOverride.css";
 
 const router = createBrowserRouter(
   createRoutesFromElements(

src/chessground/Chessground.tsx

@@ -0,0 +1,38 @@
+import { Chessground as NativeChessground } from "chessground";
+import { Api } from "chessground/api";
+import { Config } from "chessground/config";
+import { useEffect, useRef, useState } from "react";
+
+interface ChessgroundProps extends Config {
+  height?: string | number;
+  width?: string | number;
+}
+
+export function Chessground(props: ChessgroundProps) {
+  const [api, setApi] = useState<Api | null>(null);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref && ref.current && !api) {
+      const chessgroundApi = NativeChessground(ref.current, props);
+      setApi(chessgroundApi);
+    } else if (ref && ref.current && api) {
+      api.set(props);
+    }
+  }, [api, props, ref]);
+
+  useEffect(() => {
+    api?.set(props);
+  }, [api, props]);
+
+  return (
+    <div
+      style={{
+        height: props.height,
+        width: props.width,
+      }}
+      ref={ref}
+    />
+  );
+}

src/components/boards/BoardPlay.tsx

@@ -24,7 +24,6 @@ import { Chess, PieceSymbol, Square } from "chess.js";
 import { DrawShape } from "chessground/draw";
 import { Color } from "chessground/types";
 import { memo, useContext, useMemo, useState } from "react";
-import Chessground from "react-chessground";
 import {
   getMaterialDiff,
   handleMove,
@@ -57,6 +56,7 @@ import {
 import PromotionModal from "./PromotionModal";
 import { updateCardPerformance } from "../files/opening";
 import { chessboard } from "@/styles/Chessboard.css";
+import { Chessground } from "@/chessground/Chessground";
 
 interface ChessboardProps {
   dirty: boolean;

src/components/databases/GamePreview.tsx

@@ -1,7 +1,7 @@
 import { AspectRatio, Group, Stack } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 import { useContext, useEffect } from "react";
-import Chessground from "react-chessground";
+import { Chessground } from "@/chessground/Chessground";
 import MoveControls from "../common/MoveControls";
 import { useSetAtom } from "jotai";
 import { activeTabAtom } from "@/atoms/atoms";
@@ -86,7 +86,6 @@ function PreviewBoard() {
   return (
     <Chessground
       coordinates={false}
-      style={{ justifyContent: "start" }}
       width={"100%"}
       height={"100%"}
       viewOnly={true}

src/components/panels/database/SearchPanel.tsx

@@ -8,8 +8,8 @@ import { ScrollArea, Stack, Group, Button, Box } from "@mantine/core";
 import { invoke } from "@tauri-apps/api";
 import { useAtomValue } from "jotai";
 import { useRef, useContext, useState } from "react";
-import Chessground from "react-chessground";
 import GamesTable from "./GamesTable";
+import { Chessground } from "@/chessground/Chessground";
 
 async function similarStructure(fen: string) {
   return await invoke<string>("similar_structure", { fen });

src/components/puzzles/PuzzleBoard.tsx

@@ -1,13 +1,13 @@
 import { Box, Stack } from "@mantine/core";
 import { Chess, Move, Square } from "chess.js";
 import { useState } from "react";
-import Chessground from "react-chessground";
 import { handleMove, moveToKey, parseUci, toDests } from "@/utils/chess";
 import { formatMove } from "@/utils/format";
 import { getBoardSize } from "@/utils/misc";
 import { Completion, Puzzle } from "@/utils/puzzles";
 import PromotionModal from "../boards/PromotionModal";
 import { chessboard } from "@/styles/Chessboard.css";
+import { Chessground } from "@/chessground/Chessground";
 
 function PuzzleBoard({
   puzzles,
@@ -86,7 +86,6 @@ function PuzzleBoard({
           animation={{
             enabled: true,
           }}
-          style={{ justifyContent: "start" }}
           width={boardSize}
           height={boardSize}
           orientation={orientation}