add example for people without rosz ready

src/App.jsx

@@ -8,7 +8,7 @@ import Demo1 from "./assets/Demo1.png";
 function App() {
 	const [error, setError] = useState();
 	const [roster, setRoster] = useState();
-	function handleFileSelect(event) {
+	async function handleFileSelect(event) {
 		const files = event?.target?.files;
 
 		if (files) {
@@ -23,11 +23,19 @@ function App() {
 				parseXML(xmldata);
 			};
 			reader.readAsBinaryString(files[0]);
+		} else {
+			// load example
+			const example = await fetch("Ultramarines Example.rosz");
+			const arrayBuffer = await example.arrayBuffer();
+			// Create a new Blob object from the zip file contents
+			const zipBlob = new Blob([arrayBuffer], { type: "application/zip" });
+			const xmldata = await unzip(zipBlob);
+			parseXML(xmldata);
 		}
 	}
 
 	const unzip = async (file) => {
-		if (file.charAt(0) !== "P") {
+		if (file?.charAt && file.charAt(0) !== "P") {
 			return file;
 		} else {
 			const jszip = new JSZip();
@@ -59,8 +67,7 @@ function App() {
 			console.log(roster);
 			if (roster && roster.forces.length > 0) {
 				setRoster(roster);
-				/* const renderer = new Renderer40k(roster);
-        renderer.render(rosterTitle, rosterList, forceUnits); */
+				setError("");
 			}
 		} else {
 			setError("No support for game type '" + gameType + "'.");
@@ -100,6 +107,13 @@ function App() {
 				<div style={{ color: "red" }}>{error}</div>
 
 				<Roster roster={roster} />
+				<button
+					className="print-display-none"
+					style={{ display: roster ? "none" : "" }}
+					onClick={handleFileSelect}
+				>
+					Load Ultramarines example
+				</button>
 				<div
 					className="print-display-none"
 					style={{ display: roster ? "none" : "" }}

src/Roster.jsx

@@ -97,14 +97,14 @@ const Force = ({ force }) => {
 			}}
 		>
 			{units.map((unit, index) => (
-				<Unit key={index} unit={unit} />
+				<Unit key={index} unit={unit} catalog={catalog} />
 			))}
 			<ForceRules rules={rules} />
 		</div>
 	);
 };
 
-const Unit = ({ unit }) => {
+const Unit = ({ unit, catalog }) => {
 	let {
 		name,
 		weapons,
@@ -314,7 +314,7 @@ const Unit = ({ unit }) => {
 					<Rules rules={rules} />
 					<Abilities abilities={abilities.Abilities} />
 					<Factions factions={factions} />
-					<FactionIcon />
+					<FactionIcon catalog={catalog} />
 				</div>
 			</div>
 		</div>
@@ -364,7 +364,8 @@ const ModelStats = ({ modelStats, index, showName, modelList }) => {
 	);
 };
 
-const FactionIcon = () => {
+const FactionIcon = ({ catalog }) => {
+	console.log(catalog);
 	return (
 		<div
 			style={{
@@ -383,7 +384,9 @@ const FactionIcon = () => {
 		>
 			<div
 				style={{
-					background: `url(${adeptusAstartesIcon})`,
+					background: catalog.includes("Imperium")
+						? `url(${adeptusAstartesIcon})`
+						: "#bcbcbe",
 					backgroundPosition: "center",
 					minHeight: "75px",
 					minWidth: "76px",

src/Weapons.jsx

@@ -53,8 +53,9 @@ export const Weapons = ({ title, weapons, modelStats }) => {
 const Weapon = ({ weapon, modelStats, isMelee, className }) => {
 	let { name, selectionName, range, type, str, ap, damage, abilities } = weapon;
 	var lastWhiteSpace = type.lastIndexOf(" ");
-	type = type.substring(0, lastWhiteSpace);
 	const attacks = type.substring(lastWhiteSpace + 1);
+	type = type.substring(0, lastWhiteSpace);
+
 	const bs = modelStats[0].bs;
 	const ws = modelStats[0].ws;
 	const strModel = modelStats[0].str;

src/index.css

@@ -16,14 +16,6 @@
 	-webkit-text-size-adjust: 100%;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-	}
-	a:hover {
-		color: #747bff;
-	}
-}
-
 * {
 	box-sizing: border-box;
 	print-color-adjust: exact;
@@ -52,17 +44,16 @@ h1 {
 
 button {
 	border-radius: 8px;
-	border: 1px solid transparent;
+	border: 2px solid #999;
 	padding: 0.6em 1.2em;
 	font-size: 1em;
 	font-weight: 500;
 	font-family: inherit;
-	background-color: #1a1a1a;
 	cursor: pointer;
 	transition: border-color 0.25s;
 }
 button:hover {
-	border-color: #646cff;
+	border-color: #536766;
 }
 button:focus,
 button:focus-visible {