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%',

src/core/blitzkrieg/tankToCompareMember.ts

@@ -1,3 +1,4 @@
+import { uniqueId } from 'lodash';
 import { CompareMember } from '../../stores/compare';
 import { createDefaultSkills } from './createDefaultSkills';
 import { SkillDefinitions } from './skillDefinitions';
@@ -11,5 +12,6 @@ export function tankToCompareMember(
   return {
     ...tankToDuelMember(tank),
     crewSkills: createDefaultSkills(skillDefinitions),
+    key: uniqueId(),
   } satisfies CompareMember;
 }

src/stores/compare.ts

@@ -5,6 +5,7 @@ import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { DuelMember } from './duel';
 
 export interface CompareMember extends DuelMember {
+  key: string;
   crewSkills: Record<string, number>;
 }
 
@@ -26,7 +27,10 @@ export const useComparePersistent = create<ComparePersistent>()(
     subscribeWithSelector<ComparePersistent>(() => ({
       deltaMode: 'none',
     })),
-    { name: 'compare', merge: (a, b) => merge(b, a) },
+    {
+      name: 'compare',
+      merge: (a, b) => merge(b, a),
+    },
   ),
 );