diff --git a/src/pages/bundles.tsx b/src/pages/bundles.tsx index fb3881a..c547545 100644 --- a/src/pages/bundles.tsx +++ b/src/pages/bundles.tsx @@ -102,15 +102,15 @@ function AccordionSection(props: AccordionSectionProps): JSX.Element { } function BundleAccordion(props: BundleAccordionProps): JSX.Element { - const isDesktop = useMediaQuery("(min-width: 768px)"); + const isDesktop = useMediaQuery("only screen and (min-width: 768px)"); const { bundle, bundleStatus } = props.bundleWithStatus; - const bundleCompleted = BundleCompleted(props.bundleWithStatus); const totalItems = bundle.items.length; const requiredItems = bundle.itemsRequired === -1 ? totalItems : bundle.itemsRequired; const completedItems = bundleStatus.filter(Boolean).length; const remainingCount = requiredItems - completedItems; + const bundleCompleted = completedItems >= requiredItems; const bundleName = props.bundleWithStatus.bundle.localizedName; @@ -129,63 +129,75 @@ function BundleAccordion(props: BundleAccordionProps): JSX.Element { )} > - -
- {bundleName} Bundle - {props.alternateOptions && props.alternateOptions.length > 0 && ( - - - - - - - - - -

Change Bundle

-
-
-
- - - Remix Bundles - - { - setSelectedBundleName(newBundleName); - const selectedBundle = props.alternateOptions?.find( - (bundle) => bundle.name === newBundleName, - ); - if (props.onChangeBundle && selectedBundle) { - props.onChangeBundle( - selectedBundle, - props.bundleWithStatus, - ); - } - }} - > - {props.alternateOptions.map((newBundle) => ( - +
+
+ {bundleName} Bundle + {props.alternateOptions && + props.alternateOptions.length > 0 && ( + + + + + + + + + +

Change Bundle

+
+
+
+ + + Remix Bundles + + { + setSelectedBundleName(newBundleName); + const selectedBundle = props.alternateOptions?.find( + (bundle) => bundle.name === newBundleName, + ); + if (props.onChangeBundle && selectedBundle) { + props.onChangeBundle( + selectedBundle, + props.bundleWithStatus, + ); + } + }} > - {newBundle.localizedName} - - ))} - - -
- )} + {props.alternateOptions.map((newBundle) => ( + + {newBundle.localizedName} + + ))} + + + + )} +
- + {!bundleCompleted && ( +
+ + + {requiredItems - remainingCount} / {requiredItems} + +
+ )} @@ -446,7 +458,6 @@ export default function Bundles() { // See note in bundlesheet.tsx // @ts-ignore await patchPlayer(patch); - setBundles(GetActiveBundles(activePlayer)); } }