show force disposition

src/10th/Roster.jsx

@@ -22,6 +22,25 @@ import { ImgEditor } from "./ImgEditor";
 import { trySettingLocalStorage } from "../helpers/useLocalStorage";
 import { ShortSummaryTable } from "./ShortSummaryTable";
 
+const getShortSummarySubtitle = (force) => {
+	const details = [];
+	if (force.forceDisposition) {
+		details.push(force.forceDisposition);
+	}
+	if (force.detachments?.length) {
+		details.push(
+			force.detachments
+				.map(
+					(detachment) =>
+						`${detachment.name} (${detachment.detachmentPoints} DP)`,
+				)
+				.join(", "),
+		);
+	}
+
+	return details.join(" - ");
+};
+
 export const Roster = ({
 	roster,
 	onePerPage,
@@ -43,6 +62,7 @@ export const Roster = ({
 					<ShortSummaryTable
 						force={force}
 						name={name}
+						subtitle={getShortSummarySubtitle(force)}
 						points={cost.points}
 						primaryColor={primaryColor}
 					/>

src/10th/ShortSummaryTable.jsx

@@ -118,7 +118,7 @@ const getUnitTotalOc = (unit) =>
 		0,
 	) || 0;
 
-export const ShortSummaryTable = ({ force, primaryColor, name, points }) => {
+export const ShortSummaryTable = ({ force, primaryColor, name, subtitle, points }) => {
 	const [hide, setHide] = useState(false);
 	const { units, factionRules, rules, catalog } = force;
 
@@ -230,7 +230,23 @@ export const ShortSummaryTable = ({ force, primaryColor, name, points }) => {
 						textTransform: "uppercase",
 					}}
 				>
-					<span>{name}</span>
+					{subtitle ? (
+						<span className="flex flex-col leading-none">
+							<span>{name}</span>
+							<span
+								style={{
+									fontSize: ".55em",
+									fontWeight: 700,
+									lineHeight: 1.15,
+									marginTop: 2,
+								}}
+							>
+								{subtitle}
+							</span>
+						</span>
+					) : (
+						<span>{name}</span>
+					)}
 					<span>{points} pts</span>
 				</div>
 				<div
@@ -386,7 +402,7 @@ export const ShortSummaryTable = ({ force, primaryColor, name, points }) => {
 						</div>
 					</div>
 
-					<div className="flex w-full flex-col gap-2.5 border-[var(--primary-color)] p-4 pb-2 pt-3.5 md:w-[50%] md:flex-1 md:border-l-2 print:w-[100%]">
+					<div className="flex w-full self-stretch flex-col gap-2.5 border-[var(--primary-color)] p-4 pb-2 pt-3.5 md:w-[50%] md:flex-1 md:border-l-2 print:w-[100%]">
 						<ChartComponent
 							data={{
 								labels: groupedChartDataMovement.map(

src/roster40k-11th.js

@@ -345,6 +345,8 @@ export class Unit extends BaseNotes {
 export class Force extends BaseNotes {
 	catalog = "";
 	faction = "Unknown";
+	forceDisposition = "";
+	detachments = [];
 	factionRules = new Map();
 	configurations = [];
 	rules = new Map();
@@ -515,8 +517,20 @@ function ParseConfiguration(selection, force) {
 	const details = [];
 	let costs = GetSelectionCosts(selection);
 	for (const sel of subSelections) {
-		details.push(sel.getAttribute("name"));
-		costs.add(GetSelectionCosts(sel));
+		const detailName = sel.getAttribute("name");
+		details.push(detailName);
+		const selectionCosts = GetSelectionCosts(sel);
+		if (name === "Force Disposition" && detailName) {
+			force.forceDisposition = detailName;
+		}
+		if (name === "Detachment" && detailName) {
+			force.detachments.push({
+				name: detailName,
+				detachmentPoints:
+					selectionCosts.freeformValues?.["Detachment Points"] || 0,
+			});
+		}
+		costs.add(selectionCosts);
 	}
 
 	let configuration =