max cons and provs

packages/website/src/components/Button/index.module.css

@@ -16,6 +16,11 @@
 
   cursor: pointer;
 
+  &[data-disabled="true"] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
   &[data-size="minor"] {
     font-size: 0.7em;
     padding: var(--space-2) var(--space-3);

packages/website/src/components/Button/index.tsx

@@ -39,6 +39,7 @@ export function Button({
 
   listChild,
   parentListChild,
+  disabled,
   ...props
 }: ButtonProps) {
   return (
@@ -51,6 +52,8 @@ export function Button({
       data-size={size}
       data-list-child={listChild}
       data-parent-list-child={parentListChild}
+      data-disabled={disabled}
+      disabled={disabled}
       {...props}
     />
   );

packages/website/src/components/TankopediaLoadout/index.tsx

@@ -173,8 +173,15 @@ interface ProvisionEntryProps {
 
 function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
   const isSelected = useProvision("protagonist", id);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const selectedCount = Tankopedia.use(
+    (state) => state.protagonist.provisions.length,
+  );
+
   const unwrap = useUnwrapper();
 
+  const disabled = !isSelected && selectedCount >= tank.max_provisions;
+
   return (
     <Tooltip tooltip={unwrap(provision.name)}>
       <IconButton
@@ -183,11 +190,16 @@ function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
         variant={isSelected ? "surface" : "soft"}
         color={isSelected ? undefined : "gray"}
         className={styles.consumable}
+        disabled={disabled}
         onClick={() => {
           Tankopedia.mutate((draft) => {
             const index = draft.protagonist.provisions.indexOf(id);
 
             if (index === -1) {
+              if (draft.protagonist.provisions.length === tank.max_provisions) {
+                return;
+              }
+
               draft.protagonist.provisions.push(id);
             } else {
               draft.protagonist.provisions.splice(index, 1);
@@ -252,11 +264,18 @@ interface ConsumableProps {
 }
 
 function ConsumableEntry({ id, consumable }: ConsumableProps) {
+  const tank = useDuel("protagonist", DuelModule.Tank);
   const isSelected = Tankopedia.use((state) =>
     state.protagonist.consumables.includes(id),
   );
+  const selectedCount = Tankopedia.use(
+    (state) => state.protagonist.consumables.length,
+  );
+
   const unwrap = useUnwrapper();
 
+  const disabled = !isSelected && selectedCount >= tank.max_consumables;
+
   return (
     <div className={styles["consumable-wrapper"]}>
       <Tooltip tooltip={unwrap(consumable.name)}>
@@ -265,11 +284,18 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) {
           variant={isSelected ? "surface" : "soft"}
           color={isSelected ? undefined : "gray"}
           className={styles.consumable}
+          disabled={disabled}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               const index = draft.protagonist.consumables.indexOf(id);
 
               if (index === -1) {
+                if (
+                  draft.protagonist.consumables.length === tank.max_consumables
+                ) {
+                  return;
+                }
+
                 draft.protagonist.consumables.push(id);
               } else {
                 draft.protagonist.consumables.splice(index, 1);