toggle diagram clock state

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,
 	};
 };

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}
 		/>
 	);

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>
 	);
 };

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;