feat: better titles

src/app/tools/compare/components/TankControl.tsx

@@ -4,7 +4,7 @@ import {
   ShuffleIcon,
   TrashIcon,
 } from '@radix-ui/react-icons';
-import { Dialog, Flex, IconButton, Table } from '@radix-ui/themes';
+import { Dialog, Flex, IconButton } from '@radix-ui/themes';
 import { useState } from 'react';
 import { TankDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
 import { tankToDuelMember } from '../../../../core/blitzkrieg/tankToDuelMember';
@@ -21,81 +21,79 @@ export function TankControl({ index, tank, members }: TankControlProps) {
   const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
 
   return (
-    <Table.ColumnHeaderCell width="0" key={tank.id}>
+    <Flex gap="4" style={{ padding: '0 4px' }}>
-      <Flex gap="4" style={{ padding: '0 4px' }}>
+      {index !== 0 && (
-        {index !== 0 && (
-          <IconButton
-            variant="ghost"
-            onClick={() => {
-              mutateCompare((draft) => {
-                const item = draft.members[index];
-                draft.members.splice(index, 1);
-                draft.members.splice(index - 1, 0, item);
-              });
-            }}
-          >
-            <CaretLeftIcon />
-          </IconButton>
-        )}
         <IconButton
           variant="ghost"
           onClick={() => {
             mutateCompare((draft) => {
+              const item = draft.members[index];
               draft.members.splice(index, 1);
+              draft.members.splice(index - 1, 0, item);
             });
           }}
         >
-          <TrashIcon />
+          <CaretLeftIcon />
         </IconButton>
-        <Dialog.Root
+      )}
-          open={switchTankDialogOpen}
+      <IconButton
-          onOpenChange={setSwitchTankDialogOpen}
+        variant="ghost"
-        >
+        onClick={() => {
-          <Dialog.Trigger>
+          mutateCompare((draft) => {
-            <IconButton variant="ghost">
+            draft.members.splice(index, 1);
-              <ShuffleIcon />
+          });
-            </IconButton>
+        }}
-          </Dialog.Trigger>
+      >
-
+        <TrashIcon />
-          <Dialog.Content>
+      </IconButton>
-            <Flex gap="4" direction="column">
+      <Dialog.Root
-              <Flex
+        open={switchTankDialogOpen}
-                direction="column"
+        onOpenChange={setSwitchTankDialogOpen}
-                gap="4"
+      >
-                style={{ flex: 1 }}
+        <Dialog.Trigger>
-                justify="center"
+          <IconButton variant="ghost">
-              >
+            <ShuffleIcon />
-                <TankSearch
-                  compact
-                  onSelect={(tank) => {
-                    mutateCompare((draft) => {
-                      draft.members[index] = {
-                        ...tankToDuelMember(tank),
-                        crewSkills: {},
-                      };
-                    });
-                    setSwitchTankDialogOpen(false);
-                  }}
-                />
-              </Flex>
-            </Flex>
-          </Dialog.Content>
-        </Dialog.Root>
-        {index !== members.length - 1 && (
-          <IconButton
-            variant="ghost"
-            onClick={() => {
-              mutateCompare((draft) => {
-                const item = draft.members[index];
-                draft.members.splice(index, 1);
-                draft.members.splice(index + 1, 0, item);
-              });
-            }}
-          >
-            <CaretRightIcon />
           </IconButton>
-        )}
+        </Dialog.Trigger>
-      </Flex>
+
-    </Table.ColumnHeaderCell>
+        <Dialog.Content>
+          <Flex gap="4" direction="column">
+            <Flex
+              direction="column"
+              gap="4"
+              style={{ flex: 1 }}
+              justify="center"
+            >
+              <TankSearch
+                compact
+                onSelect={(tank) => {
+                  mutateCompare((draft) => {
+                    draft.members[index] = {
+                      ...tankToDuelMember(tank),
+                      crewSkills: {},
+                    };
+                  });
+                  setSwitchTankDialogOpen(false);
+                }}
+              />
+            </Flex>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Root>
+      {index !== members.length - 1 && (
+        <IconButton
+          variant="ghost"
+          onClick={() => {
+            mutateCompare((draft) => {
+              const item = draft.members[index];
+              draft.members.splice(index, 1);
+              draft.members.splice(index + 1, 0, item);
+            });
+          }}
+        >
+          <CaretRightIcon />
+        </IconButton>
+      )}
+    </Flex>
   );
 }

src/app/tools/compare/page.tsx

@@ -189,15 +189,17 @@ export default function Page() {
 
   function Title({ children }: { children: string }) {
     return (
-      <Table.Row>
+      <Table.Header>
-        <Table.RowHeaderCell>
+        <Table.Row>
-          <Heading>{children}</Heading>
+          <Table.ColumnHeaderCell>
-        </Table.RowHeaderCell>
+            <Heading size="4">{children}</Heading>
+          </Table.ColumnHeaderCell>
 
-        {members.map(() => (
+          {members.map(() => (
-          <Table.Cell />
+            <Table.ColumnHeaderCell />
-        ))}
+          ))}
-      </Table.Row>
+        </Table.Row>
+      </Table.Header>
     );
   }
 
@@ -260,22 +262,7 @@ export default function Page() {
               <Table.Row>
                 <Table.ColumnHeaderCell />
 
-                {members.map(({ tank }, index) => (
+                {members.map(({ tank }, index) => {
-                  <TankControl
-                    index={index}
-                    key={tank.id}
-                    tank={tank}
-                    members={members}
-                  />
-                ))}
-              </Table.Row>
-            </Table.Header>
-
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeaderCell />
-
-                {members.map(({ tank }) => {
                   return (
                     <Table.ColumnHeaderCell width="0" key={tank.id}>
                       <Flex
@@ -285,6 +272,12 @@ export default function Page() {
                         gap="2"
                         style={{ height: '100%' }}
                       >
+                        <TankControl
+                          index={index}
+                          key={tank.id}
+                          tank={tank}
+                          members={members}
+                        />
                         <img
                           src={tankIcon(tank.id)}
                           width={64}
@@ -301,8 +294,8 @@ export default function Page() {
               </Table.Row>
             </Table.Header>
 
+            <Title>Fire</Title>
             <Table.Body>
-              <Title>Fire</Title>
               <Row name="DPM" value="dpm" decimals={0} />
               <Row
                 name="Reload"
@@ -376,8 +369,10 @@ export default function Page() {
               />
               <Row name="Gun depression" value="gunDepression" decimals={1} />
               <Row name="Gun elevation" value="gunElevation" decimals={1} />
+            </Table.Body>
 
-              <Title>Maneuverability</Title>
+            <Title>Maneuverability</Title>
+            <Table.Body>
               <Row name="Speed forwards" value="speedForwards" decimals={0} />
               <Row name="Speed backwards" value="speedBackwards" decimals={0} />
               <Row name="Engine power" value="enginePower" decimals={0} />
@@ -396,8 +391,10 @@ export default function Page() {
                 value="powerToWeightRatioSoftTerrain"
                 decimals={1}
               />
+            </Table.Body>
 
-              <Title>Survivability</Title>
+            <Title>Survivability</Title>
+            <Table.Body>
               <Row name="Health" value="health" decimals={0} />
               <Row
                 name="Fire chance"