feat: module swapping

src/app/tools/compare/page.tsx

@@ -24,6 +24,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { ConsumablesManager } from '../../../components/ConsumablesManager';
 import { EquipmentManager } from '../../../components/EquipmentManager';
+import { ModuleManager } from '../../../components/ModuleManager';
 import PageWrapper from '../../../components/PageWrapper';
 import { ProvisionsManager } from '../../../components/ProvisionsManager';
 import { asset } from '../../../core/blitzkrieg/asset';
@@ -462,6 +463,10 @@ export default function Page() {
                       key,
                       provisions,
                       gun,
+                      shell,
+                      turret,
+                      engine,
+                      track,
                       consumables,
                     },
                     index,
@@ -482,6 +487,7 @@ export default function Page() {
                         gun,
                       ),
                     );
+                    const modules = { turret, gun, engine, chassis: track };
 
                     return (
                       <Table.Cell key={key}>
@@ -489,7 +495,7 @@ export default function Page() {
                           align="center"
                           justify="center"
                           direction="column"
-                          gap="3"
+                          gap="2"
                           style={{
                             width: '100%',
                             height: '100%',
@@ -765,22 +771,52 @@ export default function Page() {
                             </Popover.Root>
                           </Flex>
 
-                          <Button variant="ghost">
-                            <Flex align="center">
-                              {['turret', 'gun', 'engine', 'chassis'].map(
-                                (module, index) => (
-                                  <img
-                                    width={24}
-                                    height={24}
-                                    src={asset(`icons/modules/${module}.webp`)}
-                                    style={{
-                                      objectFit: 'contain',
-                                      marginLeft: index > 0 ? -4 : 0,
-                                    }}
-                                  />
-                                ),
-                              )}
-                            </Flex>
+                          <Button variant="ghost" radius="large">
+                            <Popover.Root>
+                              <Popover.Trigger>
+                                <Flex align="center">
+                                  {(
+                                    [
+                                      'turret',
+                                      'gun',
+                                      'engine',
+                                      'chassis',
+                                    ] as const
+                                  ).map((module, index) => (
+                                    <img
+                                      width={24}
+                                      height={24}
+                                      src={asset(
+                                        `icons/modules/${module}.webp`,
+                                      )}
+                                      style={{
+                                        marginLeft: index > 0 ? -8 : 0,
+                                        objectFit: 'contain',
+                                      }}
+                                    />
+                                  ))}
+                                </Flex>
+                              </Popover.Trigger>
+
+                              <Popover.Content>
+                                <ModuleManager
+                                  tank={tank}
+                                  turret={turret}
+                                  gun={gun}
+                                  shell={shell}
+                                  engine={engine}
+                                  track={track}
+                                  onChange={(modules) => {
+                                    mutateCompareTemporary((draft) => {
+                                      draft.members[index] = {
+                                        ...draft.members[index],
+                                        ...modules,
+                                      };
+                                    });
+                                  }}
+                                />
+                              </Popover.Content>
+                            </Popover.Root>
                           </Button>
                         </Flex>
                       </Table.Cell>

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

@@ -1,7 +1,5 @@
-import { Button, DropdownMenu, Flex, Heading } from '@radix-ui/themes';
-import { useState } from 'react';
-import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { Button, Flex, Heading } from '@radix-ui/themes';
+import { ModuleManager } from '../../../../../../../components/ModuleManager';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -13,10 +11,6 @@ export function Modules() {
     protagonist.tank.turrets[0].guns.length > 1 ||
     protagonist.tank.engines.length > 1 ||
     protagonist.tank.tracks.length > 1;
-  const [turretMenuOpen, setTurretMenuOpen] = useState(false);
-  const [gunMenuOpen, setGunMenuOpen] = useState(false);
-  const [engineMenuOpen, setEngineMenuOpen] = useState(false);
-  const [trackMenuOpen, setTrackMenuOpen] = useState(false);
 
   return (
     <ConfigurationChildWrapper>
@@ -64,181 +58,22 @@ export function Modules() {
         )}
       </Flex>
 
-      <Flex gap="1" wrap="wrap">
-        <ModuleButton
-          module="turret"
-          discriminator={TIER_ROMAN_NUMERALS[protagonist.turret.tier]}
-          first
-          last
-          rowChild
-          onClick={() => setTurretMenuOpen(true)}
-        />
-
-        <DropdownMenu.Root
-          open={turretMenuOpen}
-          onOpenChange={setTurretMenuOpen}
-        >
-          <DropdownMenu.Trigger>
-            <div />
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Content>
-            <DropdownMenu.RadioGroup value={`${protagonist.turret.id}`}>
-              {[...protagonist.tank.turrets].reverse().map((turret) => {
-                return (
-                  <DropdownMenu.RadioItem
-                    key={turret.id}
-                    value={`${turret.id}`}
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.turret = turret;
-                        draft.protagonist!.gun = turret.guns.at(-1)!;
-                        draft.protagonist!.shell =
-                          turret.guns.at(-1)!.shells[0];
-                      });
-                      mutateTankopediaTemporary((draft) => {
-                        draft.shot = undefined;
-                      });
-                      setTurretMenuOpen(false);
-                    }}
-                  >
-                    <ModuleButton
-                      variant="ghost"
-                      module="turret"
-                      discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
-                    />{' '}
-                    {turret.name}
-                  </DropdownMenu.RadioItem>
-                );
-              })}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-
-        <ModuleButton
-          module="gun"
-          discriminator={TIER_ROMAN_NUMERALS[protagonist.gun.tier]}
-          first
-          last
-          rowChild
-          onClick={() => setGunMenuOpen(true)}
-        />
-
-        <DropdownMenu.Root open={gunMenuOpen} onOpenChange={setGunMenuOpen}>
-          <DropdownMenu.Trigger>
-            <div />
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Content>
-            <DropdownMenu.RadioGroup value={`${protagonist.gun.id}`}>
-              {[...protagonist.turret.guns].reverse().map((gun) => {
-                return (
-                  <DropdownMenu.RadioItem
-                    key={gun.id}
-                    value={`${gun.id}`}
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.gun = gun;
-                        draft.protagonist!.shell = gun.shells[0];
-                      });
-                    }}
-                  >
-                    <ModuleButton
-                      variant="ghost"
-                      module="gun"
-                      discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
-                    />{' '}
-                    {gun.name}
-                  </DropdownMenu.RadioItem>
-                );
-              })}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-
-        <ModuleButton
-          module="engine"
-          discriminator={TIER_ROMAN_NUMERALS[protagonist.engine.tier]}
-          first
-          last
-          rowChild
-          onClick={() => setEngineMenuOpen(true)}
-        />
-
-        <DropdownMenu.Root
-          open={engineMenuOpen}
-          onOpenChange={setEngineMenuOpen}
-        >
-          <DropdownMenu.Trigger>
-            <div />
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Content>
-            <DropdownMenu.RadioGroup value={`${protagonist.engine.id}`}>
-              {[...protagonist.tank.engines].reverse().map((engine) => {
-                return (
-                  <DropdownMenu.RadioItem
-                    key={engine.id}
-                    value={`${engine.id}`}
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.engine = engine;
-                      });
-                    }}
-                  >
-                    <ModuleButton
-                      variant="ghost"
-                      module="engine"
-                      discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
-                    />{' '}
-                    {engine.name}
-                  </DropdownMenu.RadioItem>
-                );
-              })}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-
-        <ModuleButton
-          module="chassis"
-          discriminator={TIER_ROMAN_NUMERALS[protagonist.track.tier]}
-          first
-          last
-          rowChild
-          onClick={() => setTrackMenuOpen(true)}
-        />
-
-        <DropdownMenu.Root open={trackMenuOpen} onOpenChange={setTrackMenuOpen}>
-          <DropdownMenu.Trigger>
-            <div />
-          </DropdownMenu.Trigger>
-
-          <DropdownMenu.Content>
-            <DropdownMenu.RadioGroup value={`${protagonist.track.id}`}>
-              {[...protagonist.tank.tracks].reverse().map((track) => {
-                return (
-                  <DropdownMenu.RadioItem
-                    key={track.id}
-                    value={`${track.id}`}
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.track = track;
-                      });
-                    }}
-                  >
-                    <ModuleButton
-                      variant="ghost"
-                      module="chassis"
-                      discriminator={TIER_ROMAN_NUMERALS[track.tier]}
-                    />{' '}
-                    {track.name}
-                  </DropdownMenu.RadioItem>
-                );
-              })}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </Flex>
+      <ModuleManager
+        tank={protagonist.tank}
+        turret={protagonist.turret}
+        gun={protagonist.gun}
+        shell={protagonist.shell}
+        engine={protagonist.engine}
+        track={protagonist.track}
+        onChange={(modules) => {
+          mutateDuel((draft) => {
+            draft.protagonist = { ...draft.protagonist!, ...modules };
+          });
+          mutateTankopediaTemporary((draft) => {
+            draft.shot = undefined;
+          });
+        }}
+      />
     </ConfigurationChildWrapper>
   );
 }

src/components/ModuleManager.tsx

@@ -0,0 +1,213 @@
+import { DropdownMenu, Flex } from '@radix-ui/themes';
+import { useState } from 'react';
+import {
+  EngineDefinition,
+  GunDefinition,
+  ShellDefinition,
+  TankDefinition,
+  TrackDefinition,
+  TurretDefinition,
+} from '../core/blitzkrieg/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkrieg/tankDefinitions/constants';
+import { ModuleButton } from './ModuleButtons/ModuleButton';
+
+interface ModuleManagerProps {
+  tank: TankDefinition;
+  turret: TurretDefinition;
+  gun: GunDefinition;
+  shell: ShellDefinition;
+  engine: EngineDefinition;
+  track: TrackDefinition;
+  onChange?: (modules: {
+    turret: TurretDefinition;
+    gun: GunDefinition;
+    engine: EngineDefinition;
+    track: TrackDefinition;
+  }) => void;
+}
+
+export function ModuleManager({
+  tank,
+  onChange,
+  ...modules
+}: ModuleManagerProps) {
+  const [turretMenuOpen, setTurretMenuOpen] = useState(false);
+  const [gunMenuOpen, setGunMenuOpen] = useState(false);
+  const [engineMenuOpen, setEngineMenuOpen] = useState(false);
+  const [trackMenuOpen, setTrackMenuOpen] = useState(false);
+
+  return (
+    <Flex gap="1" wrap="wrap">
+      <ModuleButton
+        module="turret"
+        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        first
+        last
+        rowChild
+        onClick={() => setTurretMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={turretMenuOpen} onOpenChange={setTurretMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.turret.id}`}>
+            {[...tank.turrets].reverse().map((turret) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={turret.id}
+                  value={`${turret.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.turret = turret;
+                    draft.gun = draft.turret.guns.at(-1)!;
+                    draft.shell = draft.gun.shells.at(-1)!;
+
+                    onChange?.(draft);
+                    setTurretMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="turret"
+                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                  />{' '}
+                  {turret.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="gun"
+        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        first
+        last
+        rowChild
+        onClick={() => setGunMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={gunMenuOpen} onOpenChange={setGunMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.gun.id}`}>
+            {[...modules.turret.guns].reverse().map((gun) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={gun.id}
+                  value={`${gun.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.gun = gun;
+                    draft.shell = draft.gun.shells.at(-1)!;
+
+                    onChange?.(draft);
+                    setGunMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="gun"
+                    discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+                  />{' '}
+                  {gun.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="engine"
+        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        first
+        last
+        rowChild
+        onClick={() => setEngineMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={engineMenuOpen} onOpenChange={setEngineMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.engine.id}`}>
+            {[...tank.engines].reverse().map((engine) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={engine.id}
+                  value={`${engine.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.engine = engine;
+
+                    onChange?.(draft);
+                    setEngineMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="engine"
+                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                  />{' '}
+                  {engine.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="chassis"
+        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        first
+        last
+        rowChild
+        onClick={() => setTrackMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={trackMenuOpen} onOpenChange={setTrackMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.track.id}`}>
+            {[...tank.tracks].reverse().map((track) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={track.id}
+                  value={`${track.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.track = track;
+
+                    onChange?.(draft);
+                    setTrackMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="chassis"
+                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                  />{' '}
+                  {track.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Flex>
+  );
+}