Add checkbox for one datacard per page

src/App.jsx

@@ -8,6 +8,7 @@ import Demo1 from "./assets/Demo1.png";
 function App() {
 	const [error, setError] = useState();
 	const [roster, setRoster] = useState();
+	const [onePerPage, setOnePerPage] = useState(false);
 	const uploadRef = useRef();
 	async function handleFileSelect(event) {
 		const files = event?.target?.files;
@@ -129,10 +130,22 @@ function App() {
 						Print roster
 					</button>
 				</div>
+				<div
+					className="print-display-none"
+					style={{ display: roster ? "" : "none", width: "100%" }}
+				>
+					<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
+						<input
+							type="checkbox"
+							onChange={(e) => setOnePerPage(e.target.checked)}
+						/>
+						One Datacard per Page when printing
+					</label>
+				</div>
 				<div className="print-display-none" style={{ color: "red" }}>
 					{error}
 				</div>
-				<Roster roster={roster} />
+				<Roster roster={roster} onePerPage={onePerPage} />
 				<button
 					className="print-display-none"
 					style={{ display: roster ? "none" : "" }}

src/Roster.jsx

@@ -4,7 +4,7 @@ import rangedIcon from "./assets/rangedIcon.png";
 import { Arrow, wavyLine } from "./assets/icons";
 import { Weapons } from "./Weapons";
 
-export const Roster = ({ roster }) => {
+export const Roster = ({ roster, onePerPage }) => {
 	if (!roster) {
 		return null;
 	}
@@ -21,6 +21,7 @@ export const Roster = ({ roster }) => {
 			}}
 		>
 			<div
+				className="print-display-none"
 				style={{
 					backgroundColor: "var(--primary-color)",
 					color: "#fff",
@@ -34,7 +35,7 @@ export const Roster = ({ roster }) => {
 				{name} [{cost.commandPoints} CP]
 			</div>
 			{forces.map((force, index) => (
-				<Force key={index} force={force} />
+				<Force key={index} force={force} onePerPage={onePerPage} />
 			))}
 		</div>
 	);
@@ -87,7 +88,7 @@ const getPrimaryColor = (catalog) => {
 	}
 };
 
-const Force = ({ force }) => {
+const Force = ({ force, onePerPage }) => {
 	const { units, rules, catalog } = force;
 
 	return (
@@ -97,14 +98,19 @@ const Force = ({ force }) => {
 			}}
 		>
 			{units.map((unit, index) => (
-				<Unit key={index} unit={unit} catalog={catalog} />
+				<Unit
+					key={index}
+					unit={unit}
+					catalog={catalog}
+					onePerPage={onePerPage}
+				/>
 			))}
-			<ForceRules rules={rules} />
+			<ForceRules rules={rules} onePerPage={onePerPage} />
 		</div>
 	);
 };
 
-const Unit = ({ unit, catalog }) => {
+const Unit = ({ unit, catalog, onePerPage }) => {
 	let {
 		name,
 		weapons,
@@ -145,7 +151,7 @@ const Unit = ({ unit, catalog }) => {
 
 	return (
 		<div
-			className="avoid-page-break"
+			className={"avoid-page-break " + (onePerPage ? "page-break" : "")}
 			style={{
 				fontWeight: 500,
 				border: "2px solid var(--primary-color)",
@@ -773,10 +779,10 @@ const getSpellClassNames = (spells, index) => {
 	return classes.join(" ");
 };
 
-const ForceRules = ({ rules }) => {
+const ForceRules = ({ rules, onePerPage }) => {
 	return (
 		<div
-			className="avoid-page-break"
+			className={"avoid-page-break " + (onePerPage ? "page-break" : "")}
 			style={{
 				display: "flex",
 				flexDirection: "column",

src/index.css

@@ -153,16 +153,20 @@ button:focus-visible {
 	background-color: #d0d1d3;
 }
 
+.avoid-page-break {
+	break-inside: avoid;
+}
+
+.page-break {
+	break-before: page;
+}
+
 @media print {
 	.print-display-none,
 	.print-display-none > * {
 		display: none;
 	}
 
-	.avoid-page-break {
-		break-inside: avoid;
-	}
-
 	#root {
 		min-width: 1000px;
 	}