Feature: Switch all shells in Compare

packages/i18n/strings/en.json

@@ -742,7 +742,8 @@
             "none": "No deltas",
             "percentage": "Percentage",
             "absolute": "Absolute"
-          }
+          },
+          "sync_shells": "Sync shells"
         },
 
         "no_tanks": {

packages/website/src/components/Compare/Body.tsx

@@ -2,7 +2,7 @@ import { alias } from "@blitzkit/core";
 import { Flex, Heading, IconButton, Table } from "@radix-ui/themes";
 import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
 import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { CompareEphemeral, syncShellSlot } from "../../stores/compareEphemeral";
 import { CompareCellDirection } from "../CompareCell";
 import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 import { CompareRow } from "./CompareRow";
@@ -50,7 +50,11 @@ export function Body({ stats }: BodyProps) {
                       }}
                       onClick={() => {
                         CompareEphemeral.mutate((draft) => {
-                          draft.members[index].shell = thisShell;
+                          if (draft.syncShells) {
+                            syncShellSlot(draft.members, shellIndex);
+                          } else {
+                            draft.members[index].shell = thisShell;
+                          }
                         });
                       }}
                     >

packages/website/src/components/Compare/Controls.tsx

@@ -1,9 +1,16 @@
 import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
-import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  Flex,
+  SegmentedControl,
+  Text,
+} from "@radix-ui/themes";
 import { api } from "../../core/blitzkit/api";
 import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
 import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { CompareEphemeral, syncShellSlot } from "../../stores/compareEphemeral";
 import {
   ComparePersistent,
   type DeltaMode,
@@ -22,6 +29,7 @@ export function Controls({
   onAddTankDialogOpenChange,
 }: ControlsProps) {
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
+  const syncShells = CompareEphemeral.use((state) => state.syncShells);
   const { strings } = useLocale();
 
   return (
@@ -111,6 +119,31 @@ export function Controls({
           {strings.website.tools.compare.actions.deltas.absolute}
         </SegmentedControl.Item>
       </SegmentedControl.Root>
+
+      <Flex
+        align="center"
+        gap="2"
+        style={{ cursor: "pointer" }}
+        onClick={() => {
+          CompareEphemeral.mutate((draft) => {
+            draft.syncShells = !draft.syncShells;
+
+            if (!draft.syncShells || draft.members.length === 0) return;
+
+            const [first] = draft.members;
+
+            syncShellSlot(
+              draft.members,
+              first.gun.shells.findIndex(({ id }) => id === first.shell.id),
+            );
+          });
+        }}
+      >
+        <Checkbox variant="classic" checked={syncShells} />
+        <Text size="2">
+          {strings.website.tools.compare.actions.sync_shells}
+        </Text>
+      </Flex>
     </Flex>
   );
 }

packages/website/src/stores/compareEphemeral.ts

@@ -8,6 +8,7 @@ export interface CompareMember extends DuelMember {
 export interface CompareEphemeral {
   crewSkills: Record<string, number>;
   equalize: boolean;
+  syncShells: boolean;
   members: CompareMember[];
   sorting?: {
     direction: "ascending" | "descending";
@@ -21,5 +22,14 @@ export const CompareEphemeral = new Varuna<
 >((crewSkills) => ({
   crewSkills,
   equalize: false,
+  syncShells: false,
   members: [],
 }));
+
+export function syncShellSlot(members: CompareMember[], slot: number) {
+  for (const member of members) {
+    const shell = member.gun.shells[slot];
+
+    if (shell) member.shell = shell;
+  }
+}