From 1a9d26a6ea8bd2d22536f9cb92518a31f778d671 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 14:52:23 +0200
Subject: [PATCH] wire diagram toggle checkbox state

---
 src/pages/Chessboard.container.tsx | 3 +--
 src/pages/Chessboard.tsx           | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Chessboard.container.tsx b/src/pages/Chessboard.container.tsx
index 061441a..049053c 100644
--- a/src/pages/Chessboard.container.tsx
+++ b/src/pages/Chessboard.container.tsx
@@ -4,8 +4,6 @@ import Chessboard from "#/pages/Chessboard.tsx";
 const ChessboardContainer = () => {
 	const chessGameProps = useChessGame();
 
-	console.log(chessGameProps.currentPosition);
-
 	return (
 		<Chessboard
 			gameState={chessGameProps.gameState}
@@ -17,6 +15,7 @@ const ChessboardContainer = () => {
 			handleToggleDiagram={chessGameProps.handleToggleDiagram}
 			handlePlyChange={chessGameProps.handlePlyChange}
 			fileInputRef={chessGameProps.fileInputRef}
+			currentPosition={chessGameProps.currentPosition}
 		/>
 	);
 };
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 5a821d8..4b9dd43 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -14,6 +14,7 @@ interface IProps {
 	handleToggleDiagram: () => void;
 	handlePlyChange: ({ ply, fen }: { ply: number; fen: string }) => void;
 	fileInputRef: RefObject<HTMLInputElement | null>;
+	currentPosition: { ply: number; fen: string };
 }
 
 const Chessboard = ({
@@ -26,6 +27,7 @@ const Chessboard = ({
 	handleToggleDiagram,
 	handlePlyChange,
 	fileInputRef,
+	currentPosition,
 }: IProps) => {
 	return (
 		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
@@ -84,6 +86,9 @@ const Chessboard = ({
 						name="diagram-toggle"
 						type="checkbox"
 						className="checkbox-accent"
+						checked={gameState.diagrams.some(
+							(d) => d.ply === currentPosition.ply,
+						)}
 						onChange={handleToggleDiagram}
 					/>
 				</div>