diff --git a/src/10th/Roster.jsx b/src/10th/Roster.jsx index 63af7fa..908be67 100644 --- a/src/10th/Roster.jsx +++ b/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] {forces.map((force, index) => ( - + ))} ); }; -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} /> ))} @@ -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 diff --git a/src/App.jsx b/src/App.jsx index a98857f..99d75d7 100644 --- a/src/App.jsx +++ b/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); }} > Custom Color @@ -336,9 +339,10 @@ function App() { {roster && primaryColor !== getPrimaryColor(roster.forces[0].catalog) && (