From cf68c9812c78fa6d634e50f28ff19b79165d97e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 29 Jun 2024 11:49:55 -0500
Subject: [PATCH] feat: move shell selector to firepower header

---
 src/app/tools/compare/page.tsx | 100 ++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 44 deletions(-)

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 3e511e3a0..df9b80141 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -1160,49 +1160,6 @@ export default function Page() {
                                 </Popover.Content>
                               </Popover.Root>
                             </Flex>
-
-                            <Flex mt="1">
-                              {gun.shells.map((thisShell, shellIndex) => (
-                                <IconButton
-                                  color={
-                                    thisShell.id === shell.id
-                                      ? undefined
-                                      : 'gray'
-                                  }
-                                  variant="soft"
-                                  key={thisShell.id}
-                                  style={{
-                                    borderTopLeftRadius:
-                                      shellIndex === 0 ? undefined : 0,
-                                    borderBottomLeftRadius:
-                                      shellIndex === 0 ? undefined : 0,
-                                    borderTopRightRadius:
-                                      shellIndex === gun.shells.length - 1
-                                        ? undefined
-                                        : 0,
-                                    borderBottomRightRadius:
-                                      shellIndex === gun.shells.length - 1
-                                        ? undefined
-                                        : 0,
-                                    marginLeft: shellIndex === 0 ? 0 : -1,
-                                  }}
-                                  onClick={() => {
-                                    mutateCompareTemporary((draft) => {
-                                      draft.members[index].shell = thisShell;
-                                    });
-                                  }}
-                                >
-                                  <img
-                                    alt={thisShell.name}
-                                    width={16}
-                                    height={16}
-                                    src={asset(
-                                      `icons/shells/${thisShell.icon}.webp`,
-                                    )}
-                                  />
-                                </IconButton>
-                              ))}
-                            </Flex>
                           </Flex>
                         </Table.Cell>
                       );
@@ -1211,7 +1168,62 @@ export default function Page() {
                 </Table.Row>
               </Table.Body>
 
-              <Title>Firepower</Title>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeaderCell>
+                    <Flex height="100%" align="center">
+                      <Heading size="4">Firepower</Heading>
+                    </Flex>
+                  </Table.ColumnHeaderCell>
+
+                  {members.map(({ gun, shell, key }, index) => (
+                    <Table.ColumnHeaderCell key={key}>
+                      <Flex justify="center">
+                        <Flex>
+                          {gun.shells.map((thisShell, shellIndex) => (
+                            <IconButton
+                              color={
+                                thisShell.id === shell.id ? undefined : 'gray'
+                              }
+                              variant="soft"
+                              key={thisShell.id}
+                              style={{
+                                borderTopLeftRadius:
+                                  shellIndex === 0 ? undefined : 0,
+                                borderBottomLeftRadius:
+                                  shellIndex === 0 ? undefined : 0,
+                                borderTopRightRadius:
+                                  shellIndex === gun.shells.length - 1
+                                    ? undefined
+                                    : 0,
+                                borderBottomRightRadius:
+                                  shellIndex === gun.shells.length - 1
+                                    ? undefined
+                                    : 0,
+                                marginLeft: shellIndex === 0 ? 0 : -1,
+                              }}
+                              onClick={() => {
+                                mutateCompareTemporary((draft) => {
+                                  draft.members[index].shell = thisShell;
+                                });
+                              }}
+                            >
+                              <img
+                                alt={thisShell.name}
+                                width={16}
+                                height={16}
+                                src={asset(
+                                  `icons/shells/${thisShell.icon}.webp`,
+                                )}
+                              />
+                            </IconButton>
+                          ))}
+                        </Flex>
+                      </Flex>
+                    </Table.ColumnHeaderCell>
+                  ))}
+                </Table.Row>
+              </Table.Header>
               <Table.Body>
                 <Row name="DPM" value="dpm" decimals={0} />
                 <Row