From de68203a800be8245f5fc196c06d8d448a4bcfd0 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Mon, 1 Jun 2026 15:36:59 +0200
Subject: [PATCH] toggle diagram clock state

---
 src/hooks/useChessGame.ts          |  7 +++++++
 src/pages/Chessboard.container.tsx |  1 +
 src/pages/Chessboard.tsx           | 11 +++++++++++
 src/reducers/gameReducer.ts        |  4 ++--
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useChessGame.ts b/src/hooks/useChessGame.ts
index d52969f..f80e7db 100644
--- a/src/hooks/useChessGame.ts
+++ b/src/hooks/useChessGame.ts
@@ -66,6 +66,12 @@ export const useChessGame = () => {
 		}
 	};
 
+	const handleToggleClock = () => {
+		gameDispatch({
+			type: "TOGGLE_DIAGRAM_CLOCK",
+		});
+	};
+
 	return {
 		gameState,
 		fileInputRef,
@@ -73,5 +79,6 @@ export const useChessGame = () => {
 		handleSavePdf,
 		handleClearGame,
 		handleLoadPgn,
+		handleToggleClock,
 	};
 };
diff --git a/src/pages/Chessboard.container.tsx b/src/pages/Chessboard.container.tsx
index fdb3c15..214f990 100644
--- a/src/pages/Chessboard.container.tsx
+++ b/src/pages/Chessboard.container.tsx
@@ -11,6 +11,7 @@ const ChessboardContainer = () => {
 			handleClearGame={chessGameProps.handleClearGame}
 			handleSavePgn={chessGameProps.handleSavePgn}
 			handleSavePdf={chessGameProps.handleSavePdf}
+			handleToggleClock={chessGameProps.handleToggleClock}
 			fileInputRef={chessGameProps.fileInputRef}
 		/>
 	);
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 88eee44..32882f6 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -10,6 +10,7 @@ interface IProps {
 	handleClearGame: () => void;
 	handleSavePgn: () => void;
 	handleSavePdf: () => void;
+	handleToggleClock: () => void;
 	fileInputRef: RefObject<HTMLInputElement | null>;
 }
 
@@ -19,6 +20,7 @@ const Chessboard = ({
 	handleClearGame,
 	handleSavePgn,
 	handleSavePdf,
+	handleToggleClock,
 	fileInputRef,
 }: IProps) => {
 	return (
@@ -60,6 +62,15 @@ const Chessboard = ({
 				</button>
 			</div>
 			<PgnViewer gamePgn={gameState.pgn || ""} />
+			<label htmlFor="diagram-clock">
+				Render Clock Times
+				<input
+					id="diagram-clock"
+					name="diagram-clock"
+					type="checkbox"
+					onChange={handleToggleClock}
+				/>
+			</label>
 		</main>
 	);
 };
diff --git a/src/reducers/gameReducer.ts b/src/reducers/gameReducer.ts
index 761f12d..12681f8 100644
--- a/src/reducers/gameReducer.ts
+++ b/src/reducers/gameReducer.ts
@@ -33,7 +33,7 @@ type GameAction =
 	| { type: "SET_HEADERS"; payload: IHeader }
 	| { type: "ADD_DIAGRAM"; payload: IDiagrams }
 	| { type: "DELETE_DIAGRAM"; payload: { ply: number } }
-	| { type: "TOGGLE_DIAGRAM_CLOCK"; payload: boolean };
+	| { type: "TOGGLE_DIAGRAM_CLOCK" };
 
 const defaultHeaderFields = {
 	event: "",
@@ -92,7 +92,7 @@ export const gameReducer = (state: IGameState, action: GameAction) => {
 		case "TOGGLE_DIAGRAM_CLOCK":
 			return {
 				...state,
-				diagramClock: action.payload,
+				diagramClock: !state.diagramClock,
 			};
 		default:
 			return state;