initial commit

src/pages/Chessboard.container.tsx

@@ -0,0 +1,20 @@
+import { useChessGame } from "#/hooks/useChessGame.ts";
+import Chessboard from "#/pages/Chessboard.tsx";
+
+const ChessboardContainer = () => {
+	const chessGameProps = useChessGame();
+
+	return (
+		<Chessboard
+			gameState={chessGameProps.gameState}
+			handleLoadPgn={chessGameProps.handleLoadPgn}
+			handleClearGame={chessGameProps.handleClearGame}
+			handleSavePgn={chessGameProps.handleSavePgn}
+			handleSavePdf={chessGameProps.handleSavePdf}
+			handleToggleClock={chessGameProps.handleToggleClock}
+			fileInputRef={chessGameProps.fileInputRef}
+		/>
+	);
+};
+
+export default ChessboardContainer;

src/pages/Chessboard.tsx

@@ -0,0 +1,80 @@
+import type { ChangeEvent, RefObject } from "react";
+import LichessButton from "#/components/LichessButton.tsx";
+import PgnViewer from "#/components/PgnViewer.tsx";
+import Section from "#/components/Section.tsx";
+import type { IGameState } from "#/reducers/gameReducer.ts";
+
+interface IProps {
+	gameState: IGameState;
+	handleLoadPgn: (e: ChangeEvent<HTMLInputElement>) => void;
+	handleClearGame: () => void;
+	handleSavePgn: () => void;
+	handleSavePdf: () => void;
+	handleToggleClock: () => void;
+	fileInputRef: RefObject<HTMLInputElement | null>;
+}
+
+const Chessboard = ({
+	gameState,
+	handleLoadPgn,
+	handleClearGame,
+	handleSavePgn,
+	handleSavePdf,
+	handleToggleClock,
+	fileInputRef,
+}: IProps) => {
+	return (
+		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
+			<Section title="Convert PGN to PDF">
+				<LichessButton /> or{" "}
+				<input
+					type="file"
+					id="file-input"
+					ref={fileInputRef}
+					className="file-input max-w-xs"
+					onChange={handleLoadPgn}
+				/>
+			</Section>
+
+			<div className="flex gap-4">
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleClearGame}
+				>
+					Clear Game
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePgn}
+					disabled={!gameState.pgn}
+				>
+					Save PGN
+				</button>
+
+				<button
+					className="cursor-pointer"
+					type="button"
+					onClick={handleSavePdf}
+					disabled={!gameState.pgn}
+				>
+					Save PDF
+				</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>
+	);
+};
+
+export default Chessboard;

src/pages/Contact.tsx

@@ -0,0 +1,3 @@
+const Contact = () => <div>Hello "/contact"!</div>;
+
+export default Contact;

src/pages/index.tsx

@@ -0,0 +1,96 @@
+import { Link } from "@tanstack/react-router";
+import { Image } from "@unpic/react";
+import AccordionItem from "#/components/AccordionItem.tsx";
+import Feature from "#/components/Feature.tsx";
+import Section from "#/components/Section.tsx";
+import examplePdf1 from "@/assets/images/examplepdf1.webp?url";
+import examplePdf2 from "@/assets/images/examplepdf2.webp?url";
+
+const Home = () => (
+	<main className="px-4 pb-8 pt-14">
+		<section
+			id="hero"
+			className="grid max-w-screen-2xl items-center gap-8 p-8 text-center md:grid-cols-2 md:text-left mx-auto"
+		>
+			<div>
+				<h1 className="text-3xl font-bold text-base-content md:text-4xl">
+					Convert your Chess PGN
+				</h1>
+				<h1 className="text-3xl font-bold text-base-content md:text-4xl">
+					into a <span className="text-(--accent)">Publishable PDF.</span>
+				</h1>
+				<h2 className="mb-8 mt-4 text-(--base-content)">
+					Upload and convert your games into a book format, along with variation
+					and annotations.
+				</h2>
+				<Link
+					to="/chessboard"
+					className="rounded-3xl text-xl font-bold btn btn-primary"
+				>
+					Get Started
+				</Link>
+			</div>
+			<div className="example-pdfs">
+				<Image src={examplePdf2} alt="Example PDF 2" width={500} height={500} />
+				<Image
+					src={examplePdf1}
+					alt="Example PDF 1"
+					width={500}
+					height={500}
+					priority
+				/>
+			</div>
+		</section>
+		<Section
+			title="A Unique Chess Publication Service"
+			smallTitle="FEATURES"
+			description="Convert your chess PGN files into a publishable PDF, complete with diagrams of chosen positions."
+		>
+			<Feature title="Fast">
+				Quick PDF generation using a custom TeX Live server.
+			</Feature>
+
+			<Feature title="Easy">
+				Upload a PGN of your game, and choose the diagrams you want in your PDF.
+				Annotations are added automatically.
+			</Feature>
+
+			<Feature title="Reliable">
+				Dedicated servers ensure that downtime is kept to a minimum.
+			</Feature>
+		</Section>
+
+		<Section
+			title="Your Questions Answered"
+			smallTitle="FAQs"
+			description="Below we answer some of the most common questions we get regarding this service."
+		>
+			<div className="hero__accordion-container">
+				<AccordionItem title="Is this service free?" id="accordion-1">
+					Yes. There are no current plans to charge for this service. If in the
+					future there is a payment plan, it will come with a generous free
+					tier.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Will you be adding more features?"
+					id="accordion-2"
+				>
+					We have a lot more features to implement in the near future. If you
+					have a feature that you would like to see implemented, please feel
+					free to send us a message via our contact form.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Do you hold any copyright on the produced materials?"
+					id="accordion-3"
+				>
+					No. We will never implement any terms whereby we have any interest in
+					the materials created with this service.
+				</AccordionItem>
+			</div>
+		</Section>
+	</main>
+);
+
+export default Home;