From 401ac760cf4bf0f4cedbaf79cfcabfd282db5934 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 13:11:13 +0200
Subject: [PATCH] style render move times toggle

---
 src/hooks/useChessGame.ts          |  6 ++++
 src/pages/Chessboard.container.tsx |  1 +
 src/pages/Chessboard.tsx           | 35 +++++++++++++-----
 src/styles.css                     |  1 +
 src/styles/_input.css              | 57 ++++++++++++++++++++++++++++++
 5 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 src/styles/_input.css

diff --git a/src/hooks/useChessGame.ts b/src/hooks/useChessGame.ts
index f80e7db..85a2ff0 100644
--- a/src/hooks/useChessGame.ts
+++ b/src/hooks/useChessGame.ts
@@ -67,11 +67,16 @@ export const useChessGame = () => {
 	};
 
 	const handleToggleClock = () => {
+		console.log("Toggle clock");
 		gameDispatch({
 			type: "TOGGLE_DIAGRAM_CLOCK",
 		});
 	};
 
+	const handleToggleDiagram = () => {
+		console.log("Toggle diagram");
+	};
+
 	return {
 		gameState,
 		fileInputRef,
@@ -80,5 +85,6 @@ export const useChessGame = () => {
 		handleClearGame,
 		handleLoadPgn,
 		handleToggleClock,
+		handleToggleDiagram,
 	};
 };
diff --git a/src/pages/Chessboard.container.tsx b/src/pages/Chessboard.container.tsx
index 214f990..f19c96d 100644
--- a/src/pages/Chessboard.container.tsx
+++ b/src/pages/Chessboard.container.tsx
@@ -12,6 +12,7 @@ const ChessboardContainer = () => {
 			handleSavePgn={chessGameProps.handleSavePgn}
 			handleSavePdf={chessGameProps.handleSavePdf}
 			handleToggleClock={chessGameProps.handleToggleClock}
+			handleToggleDiagram={chessGameProps.handleToggleDiagram}
 			fileInputRef={chessGameProps.fileInputRef}
 		/>
 	);
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index 01efe71..6813e7b 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -11,6 +11,7 @@ interface IProps {
 	handleSavePgn: () => void;
 	handleSavePdf: () => void;
 	handleToggleClock: () => void;
+	handleToggleDiagram: () => void;
 	fileInputRef: RefObject<HTMLInputElement | null>;
 }
 
@@ -21,6 +22,7 @@ const Chessboard = ({
 	handleSavePgn,
 	handleSavePdf,
 	handleToggleClock,
+	handleToggleDiagram,
 	fileInputRef,
 }: IProps) => {
 	return (
@@ -64,15 +66,30 @@ 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>
+			<div className="flex justify-between max-w-150">
+				<div className="flex gap-2">
+					<label htmlFor="diagram-add">Select Diagram</label>
+					<input
+						id="diagram-add"
+						name="diagram-add"
+						type="checkbox"
+						className="cursor-pointer"
+						onChange={handleToggleDiagram}
+					/>
+				</div>
+
+				<label className="toggle">
+					Render move times
+					<input
+						id="render-times"
+						name="render-times"
+						type="checkbox"
+						checked={gameState.diagramClock}
+						onChange={handleToggleClock}
+					/>
+					<span className="slider round" />
+				</label>
+			</div>
 		</main>
 	);
 };
diff --git a/src/styles.css b/src/styles.css
index bddc0a2..4b42a90 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "styles/_accordion.css";
+@import "./styles/_input.css";
 @import "./styles/_file-input.css";
 @import './styles/_pgn-viewer.css';
 
diff --git a/src/styles/_input.css b/src/styles/_input.css
new file mode 100644
index 0000000..b45a2f9
--- /dev/null
+++ b/src/styles/_input.css
@@ -0,0 +1,57 @@
+.toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+}
+
+.toggle input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: relative;
+	cursor: pointer;
+	width: 36px;
+	height: 20px;
+	background-color: #ccc;
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+	flex-shrink: 0;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 14px;
+	width: 14px;
+	left: 3px;
+	bottom: 3px;
+	background-color: white;
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
+
+input:checked + .slider {
+	background-color: var(--accent);
+}
+
+input:focus + .slider {
+	box-shadow: 0 0 1px var(--accent);
+}
+
+input:checked + .slider:before {
+	-webkit-transform: translateX(16px);
+	-ms-transform: translateX(16px);
+	transform: translateX(16px);
+}
+
+.slider.round {
+	border-radius: 12px;
+}
+
+.slider.round:before {
+	border-radius: 50%;
+}