From 4cd7b0199ea2ab7315205b94546dd3781914ce55 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Tue, 2 Jun 2026 22:46:24 +0200
Subject: [PATCH] update header fields on typing

---
 src/components/CustomHeaders.tsx | 32 +++++++++--
 src/components/FormField.tsx     |  7 +--
 src/components/HeaderFields.tsx  | 99 ++++++++++++++++++++++++++------
 src/hooks/useChessGame.ts        |  1 +
 src/pages/Chessboard.tsx         | 11 +++-
 src/styles/_input.css            |  1 +
 6 files changed, 123 insertions(+), 28 deletions(-)

diff --git a/src/components/CustomHeaders.tsx b/src/components/CustomHeaders.tsx
index c206297..f509372 100644
--- a/src/components/CustomHeaders.tsx
+++ b/src/components/CustomHeaders.tsx
@@ -1,11 +1,13 @@
+import type { ChangeEvent } from "react";
 import FormField from "#/components/FormField.tsx";
 import type { IHeader } from "#/interfaces.ts";
 
 interface IProps {
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const CustomHeaders = ({ headers }: IProps) => {
+const CustomHeaders = ({ headers, updateHeaders }: IProps) => {
 	return (
 		<div className="my-4 w-full">
 			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
@@ -18,10 +20,30 @@ const CustomHeaders = ({ headers }: IProps) => {
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="title" type="text" headers={headers} />
-						<FormField fieldName="subtitle" type="text" headers={headers} />
-						<FormField fieldName="date" type="text" headers={headers} />
-						<FormField fieldName="author" type="text" headers={headers} />
+						<FormField
+							fieldName="title"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="subtitle"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="date"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="author"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
 					</form>
 				</div>
 			</details>
diff --git a/src/components/FormField.tsx b/src/components/FormField.tsx
index 0f5fdc1..7427e0d 100644
--- a/src/components/FormField.tsx
+++ b/src/components/FormField.tsx
@@ -1,15 +1,14 @@
-import { useChessGame } from "#/hooks/useChessGame.ts";
+import type { ChangeEvent } from "react";
 import type { IHeader } from "#/interfaces.ts";
 
 export interface IFormField {
 	fieldName: string;
 	type: string;
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const FormField = ({ fieldName, type, headers }: IFormField) => {
-	const { updateHeaders } = useChessGame();
-
+const FormField = ({ fieldName, type, headers, updateHeaders }: IFormField) => {
 	return (
 		<div className="flex flex-col gap-2">
 			<label htmlFor={fieldName} className="text-sm capitalize">
diff --git a/src/components/HeaderFields.tsx b/src/components/HeaderFields.tsx
index 069c7af..a7cb1b4 100644
--- a/src/components/HeaderFields.tsx
+++ b/src/components/HeaderFields.tsx
@@ -1,35 +1,100 @@
+import type { ChangeEvent } from "react";
 import FormField from "#/components/FormField.tsx";
 import type { IHeader } from "#/interfaces.ts";
 
 interface IProps {
 	headers: IHeader;
+	updateHeaders: (e: ChangeEvent<HTMLInputElement>, fieldName: string) => void;
 }
 
-const HeaderFields = ({ headers }: IProps) => {
-	console.log(headers);
-
+const HeaderFields = ({ headers, updateHeaders }: IProps) => {
 	return (
 		<div className="my-4 w-full">
-			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
+			<details className="bg-(--neutral-content)/15 p-4 rounded-lg">
 				<summary>
 					Headers
 					<p className="text-sm font-normal">Edit the game PGN headers</p>
 				</summary>
 				<div>
 					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
-						<FormField fieldName="event" type="text" headers={headers} />
-						<FormField fieldName="site" type="text" headers={headers} />
-						<FormField fieldName="date" type="text" headers={headers} />
-						<FormField fieldName="round" type="text" headers={headers} />
-						<FormField fieldName="white" type="text" headers={headers} />
-						<FormField fieldName="black" type="text" headers={headers} />
-						<FormField fieldName="result" type="text" headers={headers} />
-						<FormField fieldName="eco" type="text" headers={headers} />
-						<FormField fieldName="whiteElo" type="text" headers={headers} />
-						<FormField fieldName="blackElo" type="text" headers={headers} />
-						<FormField fieldName="plyCount" type="text" headers={headers} />
-						<FormField fieldName="eventDate" type="text" headers={headers} />
-						<FormField fieldName="source" type="text" headers={headers} />
+						<FormField
+							fieldName="event"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="site"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="date"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="round"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="white"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="black"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="result"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="eco"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="whiteElo"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="blackElo"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="plyCount"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="eventDate"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
+						<FormField
+							fieldName="source"
+							type="text"
+							headers={headers}
+							updateHeaders={updateHeaders}
+						/>
 					</form>
 				</div>
 			</details>
diff --git a/src/hooks/useChessGame.ts b/src/hooks/useChessGame.ts
index 75d4232..0b4b8c8 100644
--- a/src/hooks/useChessGame.ts
+++ b/src/hooks/useChessGame.ts
@@ -118,6 +118,7 @@ export const useChessGame = () => {
 						...getHeaders(pgnString),
 						title: "",
 						subtitle: "",
+						author: "",
 					};
 					gameDispatch({
 						type: "SET_GAME",
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index c94c23f..9cc8d7c 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -18,6 +18,7 @@ const Chessboard = () => {
 		handleToggleClock,
 		handleToggleDiagram,
 		handlePlyChange,
+		updateHeaders,
 	} = useChessGame();
 
 	return (
@@ -101,8 +102,14 @@ const Chessboard = () => {
 						</button>
 					</div>
 
-					<HeaderFields headers={gameState.headers} />
-					<CustomHeaders headers={gameState.headers} />
+					<HeaderFields
+						headers={gameState.headers}
+						updateHeaders={updateHeaders}
+					/>
+					<CustomHeaders
+						headers={gameState.headers}
+						updateHeaders={updateHeaders}
+					/>
 				</div>
 			</div>
 		</main>
diff --git a/src/styles/_input.css b/src/styles/_input.css
index 39f978a..527fa19 100644
--- a/src/styles/_input.css
+++ b/src/styles/_input.css
@@ -9,6 +9,7 @@
 	&:focus {
 		outline: none;
 		border-color: var(--accent);
+		background-color: var(--header-bg);
 	}
 }