From 42ef8f20e0ca40809c61d340fac758303bcea702 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 13:49:34 +0200
Subject: [PATCH] add board listeners

---
 TODO                         |  3 +++
 src/components/PgnViewer.tsx | 49 ++++++++++++++++++++++++++++++++++--
 src/hooks/useChessGame.ts    |  5 ++--
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 TODO

diff --git a/TODO b/TODO
new file mode 100644
index 0000000..54ada89
--- /dev/null
+++ b/TODO
@@ -0,0 +1,3 @@
+// ZOD
+FEN string
+Env Vars
\ No newline at end of file
diff --git a/src/components/PgnViewer.tsx b/src/components/PgnViewer.tsx
index 7cf32a4..aeb6a99 100644
--- a/src/components/PgnViewer.tsx
+++ b/src/components/PgnViewer.tsx
@@ -1,5 +1,4 @@
 import LichessPgnViewer from "lichess-pgn-viewer";
-import type PgnViewerType from "lichess-pgn-viewer/pgnViewer";
 import { useEffect, useRef } from "react";
 
 interface IProps {
@@ -8,7 +7,7 @@ interface IProps {
 
 const PgnViewer = ({ gamePgn }: IProps) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
-	const viewerRef = useRef<PgnViewerType | null>(null);
+	const viewerRef = useRef(null);
 
 	useEffect(() => {
 		const element: HTMLElement | null = document.querySelector(".lpv-board");
@@ -19,10 +18,56 @@ 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;
+
+		const clickHandlerDelay = () => {
+			setTimeout(() => handleClick(), 250);
+		};
+
+		const boardEventListener = () => {
+			const variationTags = document.querySelector("variation");
+			const moves = [...document.querySelectorAll("move")].filter((m) => {
+				if (!variationTags) return m.className !== "empty";
+				return (
+					m.parentNode?.querySelector("variation") && m.className !== "empty"
+				);
+			});
+			const ply = moves.findIndex((m) => m.classList.contains("current")) + 1;
+			return { moves, ply };
+		};
+
+		const handleClick = () => {
+			const { ply, moves } = boardEventListener();
+			console.log(ply, moves);
+		};
+
+		boardButtons.forEach((button) => {
+			button.addEventListener("click", handleClick);
+			button.addEventListener("touchstart", handleClick);
+		});
+
+		movesList.forEach((move) => {
+			move.addEventListener("click", clickHandlerDelay);
+			move.addEventListener("touchstart", clickHandlerDelay);
+		});
+
 		return () => {
 			if (containerRef.current) {
 				containerRef.current = null;
 			}
+
+			boardButtons.forEach((button) => {
+				button.removeEventListener("click", handleClick);
+				button.removeEventListener("touchstart", handleClick);
+			});
+
+			movesList.forEach((move) => {
+				move.removeEventListener("click", clickHandlerDelay);
+				move.removeEventListener("touchstart", clickHandlerDelay);
+			});
 		};
 	}, [gamePgn]);
 
diff --git a/src/hooks/useChessGame.ts b/src/hooks/useChessGame.ts
index 85a2ff0..cda0477 100644
--- a/src/hooks/useChessGame.ts
+++ b/src/hooks/useChessGame.ts
@@ -67,14 +67,13 @@ export const useChessGame = () => {
 	};
 
 	const handleToggleClock = () => {
-		console.log("Toggle clock");
 		gameDispatch({
 			type: "TOGGLE_DIAGRAM_CLOCK",
 		});
 	};
 
-	const handleToggleDiagram = () => {
-		console.log("Toggle diagram");
+	const handleToggleDiagram = ({ ply, fen }: { ply: number; fen: string }) => {
+		console.log("Toggle diagram", ply, fen);
 	};
 
 	return {