feat: provisions

src/app/tools/compare/page.tsx

@@ -23,7 +23,9 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { EquipmentManager } from '../../../components/EquipmentManager';
 import PageWrapper from '../../../components/PageWrapper';
+import { ProvisionsManager } from '../../../components/ProvisionsManager';
 import { asset } from '../../../core/blitzkrieg/asset';
+import { availableProvisions } from '../../../core/blitzkrieg/availableProvisions';
 import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
 import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
 import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
@@ -439,9 +441,14 @@ export default function Page() {
                 <Table.Cell />
 
                 {members.map(
-                  ({ equipmentMatrix, tank, key, provisions }, index) => {
+                  ({ equipmentMatrix, tank, key, provisions, gun }, index) => {
                     const equipmentPreset =
                       awaitedEquipmentDefinitions.presets[tank.equipment];
+                    const provisionsList = availableProvisions(
+                      tank,
+                      gun,
+                      awaitedProvisionDefinitions,
+                    );
 
                     return (
                       <Table.Cell key={key}>
@@ -559,6 +566,8 @@ export default function Page() {
                             </Popover.Content>
                           </Popover.Root>
 
+                          <Popover.Root>
+                            <Popover.Trigger>
                               <Button
                                 variant="ghost"
                                 radius="large"
@@ -601,6 +610,26 @@ export default function Page() {
                                   ))}
                                 </Flex>
                               </Button>
+                            </Popover.Trigger>
+
+                            <Popover.Content>
+                              <ProvisionsManager
+                                provisions={provisionsList.map(
+                                  (provision) => provision.id,
+                                )}
+                                selected={provisions}
+                                disabled={
+                                  tank.provisions === provisionsList.length
+                                }
+                                onChange={(provisions) => {
+                                  mutateCompareTemporary((draft) => {
+                                    draft.members[index].provisions =
+                                      provisions;
+                                  });
+                                }}
+                              />
+                            </Popover.Content>
+                          </Popover.Root>
                         </Flex>
                       </Table.Cell>
                     );

src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
-import { ProvisionButton } from '../../../../../../../components/ModuleButtons/ProvisionButton';
+import { ProvisionsManager } from '../../../../../../../components/ProvisionsManager';
 import { availableProvisions } from '../../../../../../../core/blitzkrieg/availableProvisions';
 import { provisionDefinitions } from '../../../../../../../core/blitzkrieg/provisionDefinitions';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
@@ -33,35 +33,16 @@ export function Provisions() {
         </Button>
       </Flex>
 
-      <Flex wrap="wrap">
+      <ProvisionsManager
-        {provisionsList.map((provision, index) => {
+        provisions={provisionsList.map((provision) => provision.id)}
-          const selected = provisions.includes(provision.id);
+        selected={provisions}
-
+        disabled={tank.provisions === provisionsList.length}
-          return (
+        onChange={(provisions) => {
-            <ProvisionButton
-              key={provision.id}
-              first={index === 0}
-              last={index === provisionsList.length - 1}
-              rowChild
-              disabled={tank.provisions === provisions.length && !selected}
-              provision={provision.id}
-              selected={selected}
-              onClick={() => {
           mutateDuel((draft) => {
-                  if (selected) {
+            draft.protagonist!.provisions = provisions;
-                    draft.protagonist!.provisions =
-                      draft.protagonist!.provisions.filter(
-                        (id) => id !== provision.id,
-                      );
-                  } else {
-                    draft.protagonist!.provisions.push(provision.id);
-                  }
           });
         }}
       />
-          );
-        })}
-      </Flex>
     </ConfigurationChildWrapper>
   );
 }

src/components/ProvisionsManager.tsx

@@ -0,0 +1,49 @@
+import { Flex } from '@radix-ui/themes';
+import { ProvisionButton } from './ModuleButtons/ProvisionButton';
+
+interface ProvisionsManagerProps {
+  provisions: number[];
+  selected: number[];
+  disabled?: boolean;
+  onChange?: (provisions: number[]) => void;
+}
+
+export function ProvisionsManager({
+  provisions,
+  selected,
+  onChange,
+  disabled,
+}: ProvisionsManagerProps) {
+  return (
+    <Flex wrap="wrap">
+      {provisions.map((provision, index) => {
+        const isSelected = selected.includes(provision);
+
+        return (
+          <ProvisionButton
+            key={provision}
+            first={index === 0}
+            last={index === provisions.length - 1}
+            rowChild
+            disabled={disabled && !selected}
+            provision={provision}
+            selected={isSelected}
+            onClick={() => {
+              if (!onChange) return;
+
+              const draft = [...selected];
+
+              if (isSelected) {
+                draft.splice(draft.indexOf(provision), 1);
+              } else {
+                draft.push(provision);
+              }
+
+              onChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}