Add button to hide the base game

Gobluebro · Sep 15, 2024 · 695ec1a · 695ec1a
1 parent ec23e6f
commit 695ec1a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/components/checkboxContainer.tsx b/components/checkboxContainer.tsx
@@ -7,6 +7,7 @@ import ToggleButtonIcon from "./toggleButtonIcon";
 interface Props {
   list: ListType;
   showCompleted: boolean;
+  showBaseGame: boolean;
   showDLC: boolean;
   accordionState: KeyBooleanValuePair;
   setAccordionState: Dispatch<SetStateAction<Object>>;
@@ -16,8 +17,14 @@ const checkboxInputStyles =
   "rounded text-elden-ring-dark-blue focus:border-elden-ring-green-300 focus:ring focus:ring-offset-0 focus:ring-elden-ring-green-200 focus:ring-opacity-50";
 
 const CheckboxContainer = (props: Props) => {
-  const { list, showCompleted, accordionState, setAccordionState, showDLC } =
-    props;
+  const {
+    list,
+    showCompleted,
+    accordionState,
+    setAccordionState,
+    showBaseGame,
+    showDLC,
+  } = props;
   const [isAllTrue, setIsAllTrue] = useState<boolean>(false);
   const [numberOfCompletedEntries, setNumberOfCompletedEntries] =
     useState<number>(0);
@@ -32,6 +39,8 @@ const CheckboxContainer = (props: Props) => {
     {}
   );
 
+  const hasDLCRequirements = list.requirements.some((item) => !!item.isDLC);
+
   const totalEntries = Object.keys(defaultValuesHash).length;
 
   const [checkedState, setCheckedState] = useLocalStorage(
@@ -83,7 +92,9 @@ const CheckboxContainer = (props: Props) => {
   return (
     <fieldset
       className={`my-4 ${
-        (isAllTrue && !showCompleted) || (!!list.isDLC && !showDLC)
+        (isAllTrue && !showCompleted) ||
+        (!showDLC && !!list.isDLC) ||
+        (!showBaseGame && !list.isDLC && !hasDLCRequirements)
           ? "hidden"
           : "block"
       }`}
@@ -157,7 +168,9 @@ const CheckboxContainer = (props: Props) => {
             key={id}
             className={`py-1
               ${
-                (!!isDLC && !showDLC) || (!showCompleted && checkedState[id])
+                (!!isDLC && !showDLC) ||
+                (!isDLC && !showBaseGame) ||
+                (!showCompleted && checkedState[id])
                   ? "hidden"
                   : "block"
               }

diff --git a/components/completeList.tsx b/components/completeList.tsx
@@ -19,6 +19,7 @@ const CompleteList = (props: Props) => {
     "showCompleted",
     true
   );
+  const [showBaseGame, setShowBaseGame] = useLocalStorage("showBaseGame", true);
   const [showDLC, setShowDLC] = useLocalStorage("showDLC", false);
   const [accordionState, setAccordionState] = useState({});
 
@@ -55,7 +56,14 @@ const CompleteList = (props: Props) => {
               label="Completed"
             />
           </div>
-          <div className="mx-2">
+          <div className="ml-2 mr-1">
+            <FilterButton
+              onClick={() => setShowBaseGame(!showBaseGame)}
+              showValue={showBaseGame}
+              label="Base Game"
+            />
+          </div>
+          <div className="ml-1 mr-2">
             <FilterButton
               onClick={() => setShowDLC(!showDLC)}
               showValue={showDLC}
@@ -74,6 +82,7 @@ const CompleteList = (props: Props) => {
           key={item.id}
           list={item}
           showCompleted={showCompleted}
+          showBaseGame={showBaseGame}
           showDLC={showDLC}
           accordionState={accordionState}
           setAccordionState={setAccordionState}