different Profiles should have same backgroundColor

src/Roster.jsx

@@ -1,8 +1,8 @@
 import factionBackground from "./assets/factionBackground.png";
 import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png";
-import meleeIcon from "./assets/meleeIcon.png";
 import rangedIcon from "./assets/rangedIcon.png";
 import { Arrow } from "./assets/icons";
+import { Weapons } from "./Weapons";
 
 export const Roster = ({ roster }) => {
 	if (!roster) {
@@ -230,8 +230,8 @@ const Unit = ({ unit }) => {
 					<div style={{ flex: "1" }}></div>
 					{hasDifferentProfiles && (
 						<table className="weapons-table" style={{ width: "100%" }}>
-							<tr className="emptyRow">
+							<tr className="emptyRow noBorderTop">
-								<td style={{ width: 37 }}>{Arrow}</td>
+								<td style={{ width: 37, borderTop: "none" }}>{Arrow}</td>
 								<td
 									colSpan={7}
 									style={{
@@ -502,132 +502,6 @@ const FancyBox = ({ children }) => {
 	);
 };
 
-const Weapons = ({ title, weapons, modelStats }) => {
-	const isMelee = title === "MELEE WEAPONS";
-	return (
-		<>
-			{weapons.length > 0 && (
-				<thead>
-					<tr
-						style={{
-							backgroundColor: "var(--primary-color)",
-							color: "#fff",
-						}}
-					>
-						<th style={{ width: 37 }}>
-							<div style={{ display: "flex" }}>
-								<img src={isMelee ? meleeIcon : rangedIcon} />
-							</div>
-						</th>
-						<th style={{ textAlign: "left", width: "44%" }}>{title}</th>
-						<th>RANGE</th>
-						<th>A</th>
-						<th>{isMelee ? "WS" : "BS"}</th>
-						<th>S</th>
-						<th>AP</th>
-						<th>D</th>
-					</tr>
-				</thead>
-			)}
-			<tbody>
-				{weapons.map((weapon, index) => (
-					<Weapon
-						key={weapon._name}
-						weapon={weapon}
-						modelStats={modelStats}
-						isMelee={isMelee}
-						index={index}
-					/>
-				))}
-				{weapons.length > 0 && (
-					<tr className="emptyRow">
-						<td colSpan={8}></td>
-					</tr>
-				)}
-			</tbody>
-		</>
-	);
-};
-
-const Weapon = ({ weapon, modelStats, isMelee, index }) => {
-	let { _name, _selectionName, _range, _type, str, _ap, _damage } = weapon;
-	var lastWhiteSpace = _type.lastIndexOf(" ");
-	const type = _type.substring(0, lastWhiteSpace);
-	const attacks = _type.substring(lastWhiteSpace + 1);
-	const bs = modelStats[0]._bs;
-	const ws = modelStats[0]._ws;
-	const strModel = modelStats[0].str;
-	const meleeAttacks = modelStats[0]._attacks;
-
-	if (_name === "Krak grenades") {
-		_name = "Krak grenade";
-	}
-	const differentProfiles =
-		_selectionName !== _name &&
-		!_name.includes("(Shooting)") &&
-		!_name.includes("(Melee)");
-	const interestingType = type && type !== "Melee";
-	if (differentProfiles && _name.endsWith(" grenades")) {
-		_name = _name.replace(" grenades", "");
-	}
-	if (differentProfiles && _name.endsWith(" grenade")) {
-		_name = _name.replace(" grenade", "");
-	}
-	if (differentProfiles && _name.includes(" - ")) {
-		_name = _name.split(" - ")[1];
-	}
-	return (
-		<tr
-			className={
-				(differentProfiles ? "differentProfiles" : "") +
-				" " +
-				(index % 2 ? "rowOtherColor" : "")
-			}
-		>
-			<td style={{ borderBottom: "none", backgroundColor: "#dfe0e2" }}>
-				{differentProfiles && Arrow}
-			</td>
-			<td style={{ textAlign: "left" }}>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						flexWrap: "wrap",
-						gap: "0 4px",
-					}}
-				>
-					{differentProfiles && _selectionName + " - "}
-					{_name}
-					{interestingType && (
-						<span
-							style={{
-								fontSize: ".8em",
-								fontWeight: 700,
-								color: "var(--primary-color)",
-							}}
-						>
-							[{type}]
-						</span>
-					)}
-				</div>
-			</td>
-			<td>{_range}</td>
-			<td>{isMelee ? meleeAttacks : attacks}</td>
-			<td>{isMelee ? ws : bs}</td>
-			<td>{isMelee ? calculateWeaponStrength(strModel, str) : str}</td>
-			<td>{_ap}</td>
-			<td>{_damage}</td>
-		</tr>
-	);
-};
-
-const calculateWeaponStrength = (strModel, strWeapon) => {
-	if (strWeapon.startsWith("User")) return strModel;
-	if (strWeapon.startsWith("x"))
-		return strModel * parseInt(strWeapon.replace("x", ""));
-	return strModel + parseInt(strWeapon, 10);
-};
-
 const Psykers = ({ title, psykers }) => {
 	return (
 		<>
@@ -659,7 +533,8 @@ const Psykers = ({ title, psykers }) => {
 				))}
 				{psykers.length > 0 && (
 					<tr className="emptyRow">
-						<td colSpan={8}></td>
+						<td style={{ width: 37, borderTop: "none" }}></td>
+						<td colSpan={7}></td>
 					</tr>
 				)}
 			</tbody>
@@ -672,7 +547,7 @@ const Psyker = ({ psyker, index }) => {
 
 	return (
 		<tr className={index % 2 ? "rowOtherColor" : ""}>
-			<td style={{ borderBottom: "none", backgroundColor: "#dfe0e2" }}></td>
+			<td style={{ borderTop: "none", backgroundColor: "#dfe0e2" }}></td>
 			<td style={{ textAlign: "left" }}>
 				<div
 					style={{

src/Weapons.jsx

@@ -0,0 +1,144 @@
+import meleeIcon from "./assets/meleeIcon.png";
+import rangedIcon from "./assets/rangedIcon.png";
+import { Arrow } from "./assets/icons";
+
+export const Weapons = ({ title, weapons, modelStats }) => {
+	const isMelee = title === "MELEE WEAPONS";
+	return (
+		<>
+			{weapons.length > 0 && (
+				<thead>
+					<tr
+						style={{
+							backgroundColor: "var(--primary-color)",
+							color: "#fff",
+						}}
+					>
+						<th style={{ width: 37 }}>
+							<div style={{ display: "flex" }}>
+								<img src={isMelee ? meleeIcon : rangedIcon} />
+							</div>
+						</th>
+						<th style={{ textAlign: "left", width: "44%" }}>{title}</th>
+						<th>RANGE</th>
+						<th>A</th>
+						<th>{isMelee ? "WS" : "BS"}</th>
+						<th>S</th>
+						<th>AP</th>
+						<th>D</th>
+					</tr>
+				</thead>
+			)}
+			<tbody>
+				{weapons.map((weapon, index) => (
+					<Weapon
+						key={weapon._name}
+						weapon={weapon}
+						modelStats={modelStats}
+						isMelee={isMelee}
+						className={getWeaponClassNames(weapons, index)}
+						index={index}
+					/>
+				))}
+				{weapons.length > 0 && (
+					<tr className="emptyRow">
+						<td style={{ width: 37, borderTop: "none" }}></td>
+						<td colSpan={7}></td>
+					</tr>
+				)}
+			</tbody>
+		</>
+	);
+};
+
+const Weapon = ({ weapon, modelStats, isMelee, className, index }) => {
+	let { _name, _selectionName, _range, _type, str, _ap, _damage } = weapon;
+	var lastWhiteSpace = _type.lastIndexOf(" ");
+	const type = _type.substring(0, lastWhiteSpace);
+	const attacks = _type.substring(lastWhiteSpace + 1);
+	const bs = modelStats[0]._bs;
+	const ws = modelStats[0]._ws;
+	const strModel = modelStats[0].str;
+	const meleeAttacks = modelStats[0]._attacks;
+
+	if (_name === "Krak grenades") {
+		_name = "Krak grenade";
+	}
+	const differentProfiles =
+		_selectionName !== _name &&
+		!_name.includes("(Shooting)") &&
+		!_name.includes("(Melee)");
+	const interestingType = type && type !== "Melee";
+	if (differentProfiles && _name.endsWith(" grenades")) {
+		_name = _name.replace(" grenades", "");
+	}
+	if (differentProfiles && _name.endsWith(" grenade")) {
+		_name = _name.replace(" grenade", "");
+	}
+	if (differentProfiles && _name.includes(" - ")) {
+		_name = _name.split(" - ")[1];
+	}
+	return (
+		<tr className={className}>
+			<td style={{ borderTop: "none", backgroundColor: "#dfe0e2" }}>
+				{differentProfiles && Arrow}
+			</td>
+			<td style={{ textAlign: "left" }}>
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						flexWrap: "wrap",
+						gap: "0 4px",
+					}}
+				>
+					{differentProfiles && _selectionName + " - "}
+					{_name}
+					{interestingType && (
+						<span
+							style={{
+								fontSize: ".8em",
+								fontWeight: 700,
+								color: "var(--primary-color)",
+							}}
+						>
+							[{type}]
+						</span>
+					)}
+				</div>
+			</td>
+			<td>{_range}</td>
+			<td>{isMelee ? meleeAttacks : attacks}</td>
+			<td>{isMelee ? ws : bs}</td>
+			<td>{isMelee ? calculateWeaponStrength(strModel, str) : str}</td>
+			<td>{_ap}</td>
+			<td>{_damage}</td>
+		</tr>
+	);
+};
+
+const getWeaponClassNames = (weapons, index) => {
+	let differentColor = false;
+	for (let i = 1; i <= index; i++) {
+		let { _selectionName } = weapons[i];
+		if (_selectionName !== weapons[i - 1]._selectionName) {
+			differentColor = !differentColor;
+		}
+	}
+	const classes = [];
+	if (differentColor) classes.push("rowOtherColor");
+	if (index === 0) classes.push("noBorderTop");
+	if (
+		index > 0 &&
+		weapons[index]._selectionName === weapons[index - 1]._selectionName
+	)
+		classes.push("noBorderTop");
+	return classes.join(" ");
+};
+
+const calculateWeaponStrength = (strModel, strWeapon) => {
+	if (strWeapon.startsWith("User")) return strModel;
+	if (strWeapon.startsWith("x"))
+		return strModel * parseInt(strWeapon.replace("x", ""));
+	return strModel + parseInt(strWeapon, 10);
+};

src/index.css

@@ -104,27 +104,23 @@ button:focus-visible {
 
 .weapons-table td {
 	padding: 1px 8px;
-	border-bottom: 1px dotted #9e9fa1;
+	border-top: 1px dotted #9e9fa1;
 	text-align: center;
 	vertical-align: baseline;
 }
 
+.noBorderTop td {
+	border-top: none;
+}
+
 .emptyRow {
 	height: 22.5px;
 }
 
-.emptyRow td {
-	border-bottom: none;
-}
-
 .rowOtherColor {
 	background-color: #d0d1d3;
 }
 
-.differentProfiles + .differentProfiles {
-	border-top: 1px solid #dfe0e2;
-}
-
 @media print {
 	.print-display-none {
 		display: none;