feat: proper keying

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

@@ -5,9 +5,10 @@ import {
   TrashIcon,
 } from '@radix-ui/react-icons';
 import { Dialog, Flex, IconButton } from '@radix-ui/themes';
-import { useState } from 'react';
+import { use, useState } from 'react';
+import { skillDefinitions } from '../../../../core/blitzkrieg/skillDefinitions';
 import { TankDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
-import { tankToDuelMember } from '../../../../core/blitzkrieg/tankToDuelMember';
+import { tankToCompareMember } from '../../../../core/blitzkrieg/tankToCompareMember';
 import {
   CompareMember,
   mutateCompareTemporary,
@@ -21,6 +22,7 @@ interface TankControlProps {
 }
 
 export function TankControl({ index, tank, members }: TankControlProps) {
+  const awaitedSkillDefinitions = use(skillDefinitions);
   const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
 
   return (
@@ -71,10 +73,10 @@ export function TankControl({ index, tank, members }: TankControlProps) {
                 compact
                 onSelect={(tank) => {
                   mutateCompareTemporary((draft) => {
-                    draft.members[index] = {
-                      ...tankToDuelMember(tank),
-                      crewSkills: {},
-                    };
+                    draft.members[index] = tankToCompareMember(
+                      tank,
+                      awaitedSkillDefinitions,
+                    );
                   });
                   setSwitchTankDialogOpen(false);
                 }}

src/app/tools/compare/page.tsx

@@ -234,8 +234,8 @@ export default function Page() {
             <Heading size="4">{children}</Heading>
           </Table.ColumnHeaderCell>
 
-          {members.map((_, index) => (
-            <Table.ColumnHeaderCell key={index} />
+          {members.map(({ key }) => (
+            <Table.ColumnHeaderCell key={key} />
           ))}
         </Table.Row>
       </Table.Header>
@@ -310,9 +310,9 @@ export default function Page() {
               <Table.Row>
                 <Table.ColumnHeaderCell />
 
-                {members.map(({ tank }, index) => {
+                {members.map(({ tank, key }, index) => {
                   return (
-                    <Table.ColumnHeaderCell width="0" key={tank.id}>
+                    <Table.ColumnHeaderCell width="0" key={key}>
                       <Flex
                         direction="column"
                         align="center"
@@ -346,15 +346,15 @@ export default function Page() {
               <Table.Row>
                 <Table.Cell />
 
-                {members.map(({ equipmentMatrix, tank }, index) => {
+                {members.map(({ equipmentMatrix, tank, key }, index) => {
                   const equipmentPreset =
                     awaitedEquipmentDefinitions.presets[tank.equipment];
 
                   return (
-                    <Table.Cell>
+                    <Table.Cell key={key}>
                       <Flex
                         align="center"
-                        justify="between"
+                        justify="center"
                         style={{
                           width: '100%',
                           height: '100%',