allow color override even for demon factions

src/10th/Roster.jsx

@@ -5,7 +5,7 @@ import { Arrow, wavyLine } from "../assets/icons";
 import { Weapons, hasDifferentProfiles } from "./Weapons";
 import { useLocalStorage } from "../helpers/useLocalStorage";
 
-export const Roster = ({ roster, onePerPage }) => {
+export const Roster = ({ roster, onePerPage, colorUserChoice }) => {
 	if (!roster) {
 		return null;
 	}
@@ -31,13 +31,18 @@ export const Roster = ({ roster, onePerPage }) => {
 				{name} [{cost.commandPoints} CP, {cost.points} pts]
 			</div>
 			{forces.map((force, index) => (
-				<Force key={index} force={force} onePerPage={onePerPage} />
+				<Force
+					key={index}
+					force={force}
+					onePerPage={onePerPage}
+					colorUserChoice={colorUserChoice}
+				/>
 			))}
 		</div>
 	);
 };
 
-const Force = ({ force, onePerPage }) => {
+const Force = ({ force, onePerPage, colorUserChoice }) => {
 	const { units, factionRules, rules, catalog } = force;
 	var mergedRules = new Map([...factionRules, ...rules]);
 	return (
@@ -54,6 +59,7 @@ const Force = ({ force, onePerPage }) => {
 					catalog={catalog}
 					onePerPage={onePerPage}
 					forceRules={rules}
+					colorUserChoice={colorUserChoice}
 				/>
 			))}
 			<ForceRules rules={mergedRules} onePerPage={onePerPage} />
@@ -61,7 +67,14 @@ const Force = ({ force, onePerPage }) => {
 	);
 };
 
-const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
+const Unit = ({
+	unit,
+	index,
+	catalog,
+	onePerPage,
+	forceRules,
+	colorUserChoice,
+}) => {
 	const [hide, setHide] = useState(false);
 	const uploadRef = useRef();
 	let {
@@ -105,7 +118,9 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => {
 		);
 	});
 
-	const overridePrimary = getOverridePrimary(factions, keywords);
+	const overridePrimary = colorUserChoice
+		? ""
+		: getOverridePrimary(factions, keywords);
 
 	useEffect(() => {
 		// Check if the browser is Safari, and if so, remove the accept attribute

src/App.jsx

@@ -18,6 +18,7 @@ function App() {
 	const [edition, setEdition] = useState(10); // [9, 10]
 	const [onePerPage, setOnePerPage] = useState(false);
 	const [primaryColor, setPrimaryColor] = useState("#536766");
+	const [colorUserChoice, setColorUserChoice] = useState(false);
 	const uploadRef = useRef();
 	async function handleFileSelect(event) {
 		const files = event?.target?.files;
@@ -155,6 +156,7 @@ function App() {
 	useEffect(() => {
 		if (roster) {
 			setPrimaryColor(getPrimaryColor(roster.forces[0].catalog));
+			setColorUserChoice(false);
 		}
 	}, [roster]);
 
@@ -328,6 +330,7 @@ function App() {
 								value={primaryColor}
 								onChange={(e) => {
 									setPrimaryColor(e.target.value);
+									setColorUserChoice(true);
 								}}
 							></input>
 							<span> Custom Color</span>
@@ -336,9 +339,10 @@ function App() {
 						{roster &&
 							primaryColor !== getPrimaryColor(roster.forces[0].catalog) && (
 								<button
-									onClick={() =>
-										setPrimaryColor(getPrimaryColor(roster.forces[0].catalog))
-									}
+									onClick={() => {
+										setPrimaryColor(getPrimaryColor(roster.forces[0].catalog));
+										setColorUserChoice(false);
+									}}
 									style={{
 										padding: "2px 4px",
 										borderRadius: 4,
@@ -355,7 +359,11 @@ function App() {
 				</div>
 				{edition === 9 && <Roster roster={roster} onePerPage={onePerPage} />}
 				{edition === 10 && (
-					<Roster10th roster={roster} onePerPage={onePerPage} />
+					<Roster10th
+						roster={roster}
+						onePerPage={onePerPage}
+						colorUserChoice={colorUserChoice}
+					/>
 				)}
 
 				<div