pass ply change to callback

src/components/PgnViewer.tsx

@@ -3,9 +3,10 @@ import { useEffect, useRef } from "react";
 
 interface IProps {
 	gamePgn: string;
+	handlePlyChange: ({ ply, fen }: { ply: number; fen: string }) => void;
 }
 
-const PgnViewer = ({ gamePgn }: IProps) => {
+const PgnViewer = ({ gamePgn, handlePlyChange }: IProps) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const viewerRef = useRef(null);
 
@@ -18,7 +19,6 @@ const PgnViewer = ({ gamePgn }: IProps) => {
 			scrollToMove: false,
 		});
 
-		// BOARD EVENT LISTENERS - MOVE INTO HOOK?
 		const boardButtons = document.querySelectorAll(".lpv__controls");
 		const movesList = document.querySelectorAll(".lpv__moves");
 		if (!boardButtons || !movesList) return;
@@ -27,6 +27,7 @@ const PgnViewer = ({ gamePgn }: IProps) => {
 			setTimeout(() => handleClick(), 250);
 		};
 
+		// Hack using DOM manipulation
 		const boardEventListener = () => {
 			const variationTags = document.querySelector("variation");
 			const moves = [...document.querySelectorAll("move")].filter((m) => {
@@ -40,8 +41,9 @@ const PgnViewer = ({ gamePgn }: IProps) => {
 		};
 
 		const handleClick = () => {
-			const { ply, moves } = boardEventListener();
-			console.log(ply, moves);
+			const { ply } = boardEventListener();
+			const fen = viewerRef.current?.curData().fen;
+			handlePlyChange({ ply, fen });
 		};
 
 		boardButtons.forEach((button) => {
@@ -69,7 +71,7 @@ const PgnViewer = ({ gamePgn }: IProps) => {
 				move.removeEventListener("touchstart", clickHandlerDelay);
 			});
 		};
-	}, [gamePgn]);
+	}, [gamePgn, handlePlyChange]);
 
 	return <div ref={containerRef} className="lpv-board" />;
 };

src/hooks/useChessGame.ts

@@ -7,6 +7,11 @@ export const useChessGame = () => {
 	const [gameState, gameDispatch] = useReducer(gameReducer, initialGameState);
 	const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+	const handlePlyChange = ({ ply, fen }: { ply: number; fen: string }) => {
+		console.log("Ply change", ply, fen);
+		return;
+	};
+
 	const handleSavePgn = () => {
 		const pgnString = buildPgnString(gameState);
 		downloadString(pgnString, "game.pgn");
@@ -84,6 +89,7 @@ export const useChessGame = () => {
 		handleClearGame,
 		handleLoadPgn,
 		handleToggleClock,
+		handlePlyChange,
 		handleToggleDiagram,
 	};
 };

src/pages/Chessboard.container.tsx

@@ -13,6 +13,7 @@ const ChessboardContainer = () => {
 			handleSavePdf={chessGameProps.handleSavePdf}
 			handleToggleClock={chessGameProps.handleToggleClock}
 			handleToggleDiagram={chessGameProps.handleToggleDiagram}
+			handlePlyChange={chessGameProps.handlePlyChange}
 			fileInputRef={chessGameProps.fileInputRef}
 		/>
 	);

src/pages/Chessboard.tsx

@@ -12,6 +12,7 @@ interface IProps {
 	handleSavePdf: () => void;
 	handleToggleClock: () => void;
 	handleToggleDiagram: () => void;
+	handlePlyChange: ({ ply, fen }: { ply: number; fen: string }) => void;
 	fileInputRef: RefObject<HTMLInputElement | null>;
 }
 
@@ -23,6 +24,7 @@ const Chessboard = ({
 	handleSavePdf,
 	handleToggleClock,
 	handleToggleDiagram,
+	handlePlyChange,
 	fileInputRef,
 }: IProps) => {
 	return (
@@ -65,7 +67,10 @@ const Chessboard = ({
 					Save PDF
 				</button>
 			</div>
-			<PgnViewer gamePgn={gameState.pgn || ""} />
+			<PgnViewer
+				gamePgn={gameState.pgn || ""}
+				handlePlyChange={handlePlyChange}
+			/>
 			<div className="flex justify-between max-w-150 mt-2">
 				<div className="flex gap-2 items-center">
 					<label
@@ -75,8 +80,8 @@ const Chessboard = ({
 						Select Diagram
 					</label>
 					<input
-						id="diagram-add"
-						name="diagram-add"
+						id="diagram-toggle"
+						name="diagram-toggle"
 						type="checkbox"
 						className="checkbox-accent"
 						onChange={handleToggleDiagram}