feat: more stats

src/app/tools/compare/page.tsx

@@ -1,7 +1,14 @@
 'use client';
 
 import { PlusIcon } from '@radix-ui/react-icons';
-import { Button, Dialog, Flex, Table, Text } from '@radix-ui/themes';
+import {
+  Button,
+  Dialog,
+  Flex,
+  SegmentedControl,
+  Table,
+  Text,
+} from '@radix-ui/themes';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
@@ -11,7 +18,7 @@ import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefiniti
 import { tankCharacteristics } from '../../../core/blitzkrieg/tankCharacteristics';
 import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions';
 import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
-import { tankToDuelMember } from '../../../core/blitzkrieg/tankToDuelMember';
+import { tankToCompareMember } from '../../../core/blitzkrieg/tankToCompareMember';
 import mutateCompare, {
   CompareMember,
   useCompare,
@@ -82,10 +89,9 @@ export default function Page() {
           .map(Number)
           .map(
             (id) =>
-              ({
+              tankToCompareMember(
-                ...tankToDuelMember(awaitedTankDefinitions[id]),
+                awaitedTankDefinitions[id],
-                crewSkills: {},
+              ) satisfies CompareMember,
-              }) satisfies CompareMember,
           );
       });
     }
@@ -103,7 +109,7 @@ export default function Page() {
       | ((
           member: Awaited<ReturnType<typeof tankCharacteristics>>,
         ) => number | undefined);
-    display: (
+    display?: (
       member: Awaited<ReturnType<typeof tankCharacteristics>>,
     ) => number | string | undefined;
     deltaType?: 'higherIsBetter' | 'lowerIsBetter';
@@ -152,7 +158,7 @@ export default function Page() {
                       : 'red'
                 }
               >
-                {display(stats[index])}
+                {display ? display(stats[index]) : value}
               </Text>
             </Flex>
           </Table.Cell>
@@ -163,7 +169,20 @@ export default function Page() {
 
   return (
     <PageWrapper color="crimson" size="100%">
-      <Flex justify="center">
+      <Flex justify="center" gap="6" align="center">
+        <Flex justify="center" gap="2" align="center">
+          Delta:{' '}
+          <SegmentedControl.Root defaultValue="none">
+            <SegmentedControl.Item value="none">None</SegmentedControl.Item>
+            <SegmentedControl.Item value="percentage">
+              Percentage
+            </SegmentedControl.Item>
+            <SegmentedControl.Item value="nominal">
+              Nominal
+            </SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </Flex>
+
         <Dialog.Root
           open={addTankDialogOpen}
           onOpenChange={setAddTankDialogOpen}
@@ -186,10 +205,7 @@ export default function Page() {
                   compact
                   onSelect={(tank) => {
                     mutateCompare((draft) => {
-                      draft.members.push({
+                      draft.members.push(tankToCompareMember(tank));
-                        ...tankToDuelMember(tank),
-                        crewSkills: {},
-                      });
                     });
 
                     setAddTankDialogOpen(false);
@@ -278,16 +294,32 @@ export default function Page() {
                   display={(stats) => stats.intraClip?.toFixed(2)}
                 />
               )}
+              <Row name="Caliber" value="caliber" />
+              <Row name="Penetration" value="penetration" />
+              <Row name="Damage" value="damage" />
+              <Row name="Module damage" value="moduleDamage" />
+              <Row name="Shell velocity" value="shellVelocity" />
               <Row
-                name="Caliber"
+                name="Aim time"
-                value="caliber"
+                value="aimTime"
-                display={(stats) => stats.caliber.toFixed(0)}
+                display={(stats) => stats.aimTime.toFixed(2)}
               />
               <Row
-                name="Penetration"
+                name="Dispersion"
-                value="penetration"
+                value="dispersion"
-                display={(stats) => stats.penetration.toFixed(0)}
+                display={(stats) => stats.dispersion.toFixed(3)}
               />
+              <Row name="Dispersion moving" value="dispersionMoving" />
+              <Row
+                name="Dispersion hull traversing"
+                value="dispersionHullTraversing"
+              />
+              <Row
+                name="Dispersion turret traversing"
+                value="dispersionTurretTraversing"
+              />
+              <Row name="Dispersion shooting" value="dispersionShooting" />
+              <Row name="Dispersion gun damaged" value="dispersionGunDamaged" />
             </Table.Body>
           </Table.Root>
         </Flex>

src/core/blitzkrieg/tankToCompareMember.ts

@@ -0,0 +1,12 @@
+import { CompareMember } from '../../stores/compare';
+import { TankDefinition } from './tankDefinitions';
+import { tankToDuelMember } from './tankToDuelMember';
+
+export function tankToCompareMember(tank: TankDefinition) {
+  const member = {
+    ...tankToDuelMember(tank),
+    crewSkills: {},
+  } satisfies CompareMember;
+
+  return member;
+}