add example for people without rosz ready

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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);
+				setError("");
-        renderer.render(rosterTitle, rosterList, forceUnits); */
 			}
 		} 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 {