diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx index e51cf258e..42ce1836e 100644 --- a/src/app/tools/compare/page.tsx +++ b/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) => - ({ - ...tankToDuelMember(awaitedTankDefinitions[id]), - crewSkills: {}, - }) satisfies CompareMember, + tankToCompareMember( + awaitedTankDefinitions[id], + ) satisfies CompareMember, ); }); } @@ -103,7 +109,7 @@ export default function Page() { | (( member: Awaited>, ) => number | undefined); - display: ( + display?: ( member: Awaited>, ) => number | string | undefined; deltaType?: 'higherIsBetter' | 'lowerIsBetter'; @@ -152,7 +158,7 @@ export default function Page() { : 'red' } > - {display(stats[index])} + {display ? display(stats[index]) : value} @@ -163,7 +169,20 @@ export default function Page() { return ( - + + + Delta:{' '} + + None + + Percentage + + + Nominal + + + + { mutateCompare((draft) => { - draft.members.push({ - ...tankToDuelMember(tank), - crewSkills: {}, - }); + draft.members.push(tankToCompareMember(tank)); }); setAddTankDialogOpen(false); @@ -278,16 +294,32 @@ export default function Page() { display={(stats) => stats.intraClip?.toFixed(2)} /> )} + + + + + stats.caliber.toFixed(0)} + name="Aim time" + value="aimTime" + display={(stats) => stats.aimTime.toFixed(2)} /> stats.penetration.toFixed(0)} + name="Dispersion" + value="dispersion" + display={(stats) => stats.dispersion.toFixed(3)} /> + + + + + diff --git a/src/core/blitzkrieg/tankToCompareMember.ts b/src/core/blitzkrieg/tankToCompareMember.ts new file mode 100644 index 000000000..97b6a27eb --- /dev/null +++ b/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; +}