owenrees/chess-scribe-website
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/chess-scribe-website.git synced 2026-07-23 01:46:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

update header fields on typing

Browse Source
This commit is contained in:
Owen Rees
2026-06-02 22:46:24 +02:00
parent 5ed83a20d8
commit 4cd7b0199e
6 changed files with 123 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CustomHeaders.tsx
+27 -5
View File
@@ -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>
src/components/FormField.tsx
+3 -4
View File
@@ -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">
src/components/HeaderFields.tsx
+82 -17
View File
@@ -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>
src/hooks/useChessGame.ts
+1
View File
@@ -118,6 +118,7 @@ export const useChessGame = () => {
...getHeaders(pgnString),
title: "",
subtitle: "",
author: "",
};
gameDispatch({
type: "SET_GAME",
src/pages/Chessboard.tsx
+9 -2
View File
@@ -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>
src/styles/_input.css
+1
View File
@@ -9,6 +9,7 @@
&:focus {
outline: none;
border-color: var(--accent);
background-color: var(--header-bg);
}
}