Add a short summary and two charts

package-lock.json

@@ -8,8 +8,10 @@
 			"name": "fancyscribe",
 			"version": "0.0.0",
 			"dependencies": {
+				"chart.js": "^4.4.8",
 				"jszip": "^3.10.1",
 				"react": "^19.0.0",
+				"react-chartjs-2": "^5.3.0",
 				"react-dom": "^19.0.0"
 			},
 			"devDependencies": {
@@ -742,6 +744,12 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@kurkle/color": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+			"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+			"license": "MIT"
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1058,6 +1066,18 @@
 				}
 			]
 		},
+		"node_modules/chart.js": {
+			"version": "4.4.8",
+			"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+			"integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
+			"license": "MIT",
+			"dependencies": {
+				"@kurkle/color": "^0.3.0"
+			},
+			"engines": {
+				"pnpm": ">=8"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -2063,6 +2083,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-chartjs-2": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+			"integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"chart.js": "^4.1.1",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "19.0.0",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",

package.json

@@ -9,8 +9,10 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"chart.js": "^4.4.8",
 		"jszip": "^3.10.1",
 		"react": "^19.0.0",
+		"react-chartjs-2": "^5.3.0",
 		"react-dom": "^19.0.0"
 	},
 	"devDependencies": {

src/10th/Roster.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, Fragment } from "react";
+import React, { useRef, useState, useEffect, Fragment } from "react";
 import factionBackground from "../assets/factionBackground.png";
 import keywordsBackground from "../assets/keywordsBackground.png";
 import cardBackground from "../assets/cardBackground.png";
@@ -13,8 +13,14 @@ import { Weapons, hasDifferentProfiles } from "./Weapons";
 import { useIndexedDB } from "../helpers/useIndexedDB"; // New hook for IndexedDB
 import { ImgEditor } from "./ImgEditor";
 import { trySettingLocalStorage } from "../helpers/useLocalStorage";
+import { ShortSummaryTable } from "./ShortSummaryTable";
 
-export const Roster = ({ roster, onePerPage, colorUserChoice }) => {
+export const Roster = ({
+	roster,
+	onePerPage,
+	colorUserChoice,
+	primaryColor,
+}) => {
 	if (!roster) {
 		return null;
 	}
@@ -26,7 +32,7 @@ export const Roster = ({ roster, onePerPage, colorUserChoice }) => {
 			}}
 		>
 			<div
-				className="print-display-none"
+				className="print-display-none flex justify-between"
 				style={{
 					backgroundColor: "var(--primary-color)",
 					color: "#fff",
@@ -37,15 +43,19 @@ export const Roster = ({ roster, onePerPage, colorUserChoice }) => {
 					marginBottom: "12px",
 				}}
 			>
-				{name} [{cost.commandPoints} CP, {cost.points} pts]
+				<span>{name}</span>
+				<span>{cost.points} pts</span>
 			</div>
+
 			{forces.map((force, index) => (
+				<React.Fragment key={index}>
+					<ShortSummaryTable force={force} primaryColor={primaryColor} />
 					<Force
-					key={index}
 						force={force}
 						onePerPage={onePerPage}
 						colorUserChoice={colorUserChoice}
 					/>
+				</React.Fragment>
 			))}
 		</div>
 	);

src/10th/ShortSummaryTable.jsx

@@ -0,0 +1,248 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+	Chart as ChartJS,
+	CategoryScale,
+	LinearScale,
+	BarElement,
+	Tooltip,
+	Legend,
+	Title,
+} from "chart.js";
+import cardBackground from "../assets/cardBackground.png";
+
+ChartJS.register(
+	CategoryScale,
+	LinearScale,
+	BarElement,
+	Tooltip,
+	Legend,
+	Title,
+);
+export const ShortSummaryTable = ({ force, primaryColor }) => {
+	const { units, factionRules, rules, catalog } = force;
+
+	const sortedUnits = units.sort((a, b) => {
+		// sort by points cost desc first, then by name
+		if (a.cost.points < b.cost.points) return 1;
+		if (a.cost.points > b.cost.points) return -1;
+		return a.name.localeCompare(b.name);
+	});
+
+	// Prepare data for the bar chart, group by toughness and sum points cost
+	const groupedByToughness = units.reduce((acc, unit) => {
+		const toughness = unit.modelStats?.[0]?.toughness || 0;
+		if (!acc[toughness]) {
+			acc[toughness] = { totalPoints: 0, unitNames: [] };
+		}
+		acc[toughness].totalPoints += unit.cost.points;
+		if (!acc[toughness].unitNames.includes(unit.name)) {
+			acc[toughness].unitNames.push(unit.name);
+		}
+		return acc;
+	}, {});
+
+	const groupedChartDataToughness = Object.entries(groupedByToughness)
+		.map(([toughness, { totalPoints, unitNames }]) => ({
+			toughness: parseInt(toughness, 10),
+			totalPoints,
+			unitNames,
+		}))
+		.sort((a, b) => a.toughness - b.toughness);
+
+	// Prepare data for the bar chart, group by movement and sum points cost
+	const groupedByMovement = units.reduce((acc, unit) => {
+		const movement = unit.modelStats?.[0]?.move || 0;
+		if (!acc[movement]) {
+			acc[movement] = { totalPoints: 0, unitNames: [] };
+		}
+		acc[movement].totalPoints += unit.cost.points;
+		if (!acc[movement].unitNames.includes(unit.name)) {
+			acc[movement].unitNames.push(unit.name);
+		}
+		return acc;
+	}, {});
+
+	const groupedChartDataMovement = Object.entries(groupedByMovement)
+		.map(([movement, { totalPoints, unitNames }]) => ({
+			movement: parseInt(movement, 10),
+			totalPoints,
+			unitNames,
+		}))
+		.sort((a, b) => a.movement - b.movement);
+
+	return (
+		<div
+			className="print-display-none my-4 -mt-4 flex flex-wrap border-2 border-[var(--primary-color)]"
+			style={{
+				background: `url(${cardBackground})`,
+				backgroundSize: "cover",
+			}}
+		>
+			<div className="mt-4 table w-full border-collapse overflow-hidden md:w-[50%] md:flex-1">
+				<div className="table-header-group bg-[var(--primary-color)] font-bold uppercase text-white">
+					<div className="table-row">
+						<div
+							className="table-cell border border-[var(--primary-color)] px-4 py-1"
+							style={{
+								fontSize: "1.1em",
+								color: "#fff",
+								fontWeight: 600,
+							}}
+						>
+							Unit Name
+						</div>
+						<div
+							className="table-cell border border-[var(--primary-color)] px-4 py-1 text-right"
+							style={{
+								fontSize: "1.1em",
+								color: "#fff",
+								fontWeight: 600,
+							}}
+						>
+							Cost (pts)
+						</div>
+					</div>
+				</div>
+				<div className="table-row-group" style={{ lineHeight: 1.05 }}>
+					{sortedUnits.map((unit, index) => {
+						let { name, cost, models } = unit;
+						const count = models?.[0]?.count || 1;
+						return (
+							<div
+								key={name + index}
+								className={`table-row ${index % 2 === 0 ? "" : "bg-[#c4c4c480]"}`}
+							>
+								<div className="table-cell border border-dotted border-[#9e9fa1] px-4 py-1">
+									{count > 1 ? count + "x " : ""}
+									{name}
+								</div>
+								<div className="table-cell border border-dotted border-[#9e9fa1] px-4 py-1 text-right">
+									{cost.points} pts
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+
+			<div className="flex w-full flex-col gap-2.5 border-[var(--primary-color)] p-4 md:w-[50%] md:flex-1 md:border-l-2">
+				<div className="relative w-full" style={{ height: "150px" }}>
+					<Bar
+						data={{
+							labels: groupedChartDataMovement.map(
+								(data) => data.movement + '"',
+							),
+							datasets: [
+								{
+									label: "Total Cost (pts)",
+									data: groupedChartDataMovement.map(
+										(data) => data.totalPoints,
+									),
+									backgroundColor: primaryColor,
+								},
+							],
+						}}
+						options={{
+							responsive: true,
+							maintainAspectRatio: false,
+							scales: {
+								y: {
+									beginAtZero: true,
+								},
+							},
+							plugins: {
+								title: {
+									display: true,
+									text: "MOVEMENT OF YOUR UNITS",
+									font: {
+										size: 14,
+										weight: "bold",
+										family: "Noto Sans",
+									},
+									color: "#000",
+									align: "start",
+								},
+								legend: {
+									display: false,
+								},
+								tooltip: {
+									displayColors: false,
+									callbacks: {
+										title: function (context) {
+											return "";
+										},
+										label: function (context) {
+											const movement = context.label;
+											const unitNames = groupedChartDataMovement.find(
+												(data) => data.movement === parseInt(movement, 10),
+											)?.unitNames;
+											return unitNames;
+										},
+									},
+								},
+							},
+						}}
+					/>
+				</div>
+
+				<div className="relative w-full" style={{ height: "150px" }}>
+					<Bar
+						data={{
+							labels: groupedChartDataToughness.map((data) => data.toughness),
+							datasets: [
+								{
+									label: "Total Cost (pts)",
+									data: groupedChartDataToughness.map(
+										(data) => data.totalPoints,
+									),
+									backgroundColor: primaryColor,
+								},
+							],
+						}}
+						options={{
+							responsive: true,
+							maintainAspectRatio: false,
+							scales: {
+								y: {
+									beginAtZero: true,
+								},
+							},
+							plugins: {
+								title: {
+									display: true,
+									text: "TOUGHNESS OF YOUR UNITS",
+									font: {
+										size: 14,
+										weight: "bold",
+										family: "Noto Sans",
+									},
+									color: "#000",
+									align: "start",
+								},
+								legend: {
+									display: false,
+								},
+								tooltip: {
+									displayColors: false,
+									callbacks: {
+										title: function (context) {
+											return "";
+										},
+										label: function (context) {
+											const toughness = context.label;
+											const unitNames = groupedChartDataToughness.find(
+												(data) => data.toughness === parseInt(toughness, 10),
+											)?.unitNames;
+											return unitNames;
+										},
+									},
+								},
+							},
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};

src/App.jsx

@@ -214,6 +214,7 @@ function App() {
 
 	return (
 		<div
+			id="js_app"
 			className="App"
 			style={{
 				"--primary-color": primaryColor,
@@ -437,6 +438,7 @@ function App() {
 						roster={roster}
 						onePerPage={onePerPage}
 						colorUserChoice={colorUserChoice}
+						primaryColor={primaryColor}
 					/>
 				)}