Add "Hide Prime" toggle (#279)

Author: ProfessorWeeto

src/components/checklist/CategoryInfo.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { useStore } from "../../hooks/useStore";
-import { foundersItems } from "../../utils/items";
+import { foundersItems, itemIsPrime } from "../../utils/items";
 import { xpFromItem } from "../../utils/mastery-rank";
 import BaseCategoryInfo from "./BaseCategoryInfo";
 
@@ -24,12 +24,14 @@ function CategoryItem({ name }) {
 		itemsMastered,
 		partiallyMasteredItems,
 		categoryItems,
-		hideFounders
+		hideFounders,
+		hidePrime
 	} = useStore(state => ({
 		itemsMastered: state.itemsMastered,
 		partiallyMasteredItems: state.partiallyMasteredItems,
 		categoryItems: state.items[name],
-		hideFounders: state.hideFounders
+		hideFounders: state.hideFounders,
+		hidePrime: state.hidePrime
 	}));
 
 	let masteredCount = 0;
@@ -40,11 +42,12 @@ function CategoryItem({ name }) {
 	let totalXP = 0;
 	Object.entries(categoryItems).forEach(([itemName, item]) => {
 		if (
-			hideFounders &&
-			foundersItems.includes(itemName) &&
-			!itemsMastered.has(itemName)
+			!itemsMastered.has(itemName) &&
+			((hideFounders && foundersItems.includes(itemName)) ||
+				(hidePrime && itemIsPrime(itemName)))
 		)
 			return;
+
 		totalCount++;
 		totalXP += xpFromItem(item, name);
 		if (itemsMastered.has(itemName)) {

src/components/checklist/CategoryItem.jsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useStore } from "../../hooks/useStore";
 import checkmark from "../../icons/checkmark.svg";
 import { SHARED } from "../../utils/checklist-types";
-import { foundersItems, itemShape } from "../../utils/items";
+import { foundersItems, itemShape, itemIsPrime } from "../../utils/items";
 import Button from "../Button";
 import PaginatedTooltip from "../PaginatedTooltip";
 import ItemGeneralInfoTooltip from "./ItemGeneralInfoTooltip";
@@ -30,6 +30,9 @@ function CategoryItem({ name, item }) {
 			(state.hideMastered && state.itemsMastered.has(name)) ||
 			(state.hideFounders &&
 				foundersItems.includes(name) &&
+				!state.itemsMastered.has(name)) ||
+			(state.hidePrime &&
+				itemIsPrime(name) &&
 				!state.itemsMastered.has(name))
 	}));
 	const [rankSelectToggled, setRankSelectToggled] = useState(false);
@@ -116,3 +119,4 @@ CategoryItem.propTypes = {
 };
 
 export default CategoryItem;
+

src/components/checklist/Checklist.jsx

@@ -1,6 +1,6 @@
 import Masonry from "react-masonry-css";
 import { useStore } from "../../hooks/useStore";
-import { foundersItems } from "../../utils/items";
+import { foundersItems, itemIsPrime } from "../../utils/items";
 import Category from "./Category";
 
 function Checklist() {
@@ -11,7 +11,8 @@ function Checklist() {
 				!Object.keys(state.items[category]).every(
 					item =>
 						state.itemsMastered.has(item) ||
-						(state.hideFounders && foundersItems.includes(item))
+						(state.hideFounders && foundersItems.includes(item)) ||
+						(state.hidePrime && itemIsPrime(item))
 				)
 			);
 		})
@@ -36,3 +37,4 @@ function Checklist() {
 }
 
 export default Checklist;
+

src/components/sidebar/Sidebar.jsx

@@ -44,3 +44,4 @@ function Sidebar() {
 }
 
 export default Sidebar;
+

src/components/sidebar/SidebarInputs.jsx

@@ -17,6 +17,8 @@ function SidebarInputs() {
 		setDrifterIntrinsics,
 		hideMastered,
 		setHideMastered,
+		hidePrime,
+		setHidePrime,
 		hideFounders,
 		setHideFounders,
 		displayingNodes,
@@ -31,6 +33,8 @@ function SidebarInputs() {
 		setDrifterIntrinsics: state.setDrifterIntrinsics,
 		hideMastered: state.hideMastered,
 		setHideMastered: state.setHideMastered,
+		hidePrime: state.hidePrime,
+		setHidePrime: state.setHidePrime,
 		hideFounders: state.hideFounders,
 		setHideFounders: state.setHideFounders,
 		displayingNodes: state.displayingNodes,
@@ -86,6 +90,11 @@ function SidebarInputs() {
 				toggled={hideMastered}
 				onToggle={setHideMastered}
 			/>
+			<LabeledToggle
+				label="Hide Prime"
+				toggled={hidePrime}
+				onToggle={setHidePrime}
+			/>
 			{!displayingNodes && (
 				<LabeledToggle
 					label="Hide Founders"

src/hooks/useStore.js

@@ -427,7 +427,7 @@ export const useStore = createWithEqualityFn(
 								needsRounding.set(
 									componentName,
 									(needsRounding.get(componentName) ?? 0) +
-									componentCount
+										componentCount
 								);
 								return;
 							}
@@ -442,7 +442,8 @@ export const useStore = createWithEqualityFn(
 							ingredientId.includes("ArchwingRecipes") ||
 							ingredientId.includes("mechPart") ||
 							componentName.startsWith("Cortege") ||
-							componentName.startsWith("Morgha")) {
+							componentName.startsWith("Morgha")
+						) {
 							return;
 						}
 
@@ -465,7 +466,7 @@ export const useStore = createWithEqualityFn(
 						formaCost += Math.floor(
 							(item.maxLvl -
 								(partiallyMasteredItems[itemName] ?? 30)) /
-							2
+								2
 						);
 					}
 				}
@@ -490,6 +491,8 @@ export const useStore = createWithEqualityFn(
 
 		hideMastered: true,
 		setHideMastered: firestoreFieldSetter("hideMastered"),
+		hidePrime: false,
+		setHidePrime: firestoreFieldSetter("hidePrime"),
 		hideFounders: true,
 		setHideFounders: firestoreFieldSetter("hideFounders"),
 
@@ -638,3 +641,4 @@ function markMasteryChange(draftState, key, id, mastered) {
 		});
 	}
 }
+

src/pages/Login.jsx

@@ -22,3 +22,4 @@ function Login() {
 }
 
 export default Login;
+

src/pages/MasteryChecklist.jsx

@@ -28,6 +28,7 @@ function MasteryChecklist(props) {
 		setRailjackIntrinsics,
 		setDrifterIntrinsics,
 		setHideMastered,
+		setHidePrime,
 		setHideFounders,
 		displayingNodes
 	} = useStore(state => ({
@@ -41,6 +42,7 @@ function MasteryChecklist(props) {
 		setRailjackIntrinsics: state.setRailjackIntrinsics,
 		setDrifterIntrinsics: state.setDrifterIntrinsics,
 		setHideMastered: state.setHideMastered,
+		setHidePrime: state.setHidePrime,
 		setHideFounders: state.setHideFounders,
 		displayingNodes: state.displayingNodes
 	}));
@@ -70,6 +72,7 @@ function MasteryChecklist(props) {
 				setRailjackIntrinsics(data?.intrinsics ?? 0, true);
 				setDrifterIntrinsics(data?.drifterIntrinsics ?? 0, true);
 				setHideMastered(data?.hideMastered ?? false, true);
+				setHidePrime(data?.hidePrime ?? false, true);
 				setHideFounders(data?.hideFounders ?? true, true);
 				setNodesMastered(data?.starChart ?? [], false);
 				setNodesMastered(data?.steelPath ?? [], true);
@@ -117,3 +120,4 @@ MasteryChecklist.propTypes = {
 };
 
 export default MasteryChecklist;
+

src/utils/items.js

@@ -4,8 +4,19 @@ export const SCHEMA_VERSION = 3;
 
 export const foundersItems = ["Excalibur Prime", "Skana Prime", "Lato Prime"];
 
+export function itemIsPrime(name) {
+	return (
+		(name.endsWith(" Prime") || name.startsWith("Prime ")) &&
+		!foundersItems.includes(name)
+	);
+}
+
 export function getComponentImageUrl(id) {
-	return "https://cdn.jsdelivr.net/gh/Aericio/warframe-exports-data/image/" + id.slice(1).replaceAll("/", ".") + ".png";
+	return (
+		"https://cdn.jsdelivr.net/gh/Aericio/warframe-exports-data/image/" +
+		id.slice(1).replaceAll("/", ".") +
+		".png"
+	);
 }
 
 export const relicTiers = ["Lith", "Meso", "Neo", "Axi", "Requiem"];
@@ -27,3 +38,4 @@ export const itemShape = {
 	baro: PropTypes.arrayOf(PropTypes.number),
 	description: PropTypes.string
 };
+