mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
833 lines
31 KiB
TypeScript
833 lines
31 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
CaretLeftIcon,
|
|
CaretRightIcon,
|
|
CaretSortIcon,
|
|
PlusIcon,
|
|
TrashIcon,
|
|
} from '@radix-ui/react-icons';
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
Flex,
|
|
Heading,
|
|
IconButton,
|
|
Popover,
|
|
SegmentedControl,
|
|
Table,
|
|
Text,
|
|
} from '@radix-ui/themes';
|
|
import { times } from 'lodash';
|
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
|
import { use, useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { EquipmentManager } from '../../../components/EquipmentManager';
|
|
import PageWrapper from '../../../components/PageWrapper';
|
|
import { ProvisionsManager } from '../../../components/ProvisionsManager';
|
|
import { asset } from '../../../core/blitzkrieg/asset';
|
|
import { availableProvisions } from '../../../core/blitzkrieg/availableProvisions';
|
|
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
|
|
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
|
|
import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
|
|
import { skillDefinitions } from '../../../core/blitzkrieg/skillDefinitions';
|
|
import { tankCharacteristics } from '../../../core/blitzkrieg/tankCharacteristics';
|
|
import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions';
|
|
import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
|
|
import { tankToCompareMember } from '../../../core/blitzkrieg/tankToCompareMember';
|
|
import { theme } from '../../../stitches.config';
|
|
import {
|
|
DeltaMode,
|
|
mutateComparePersistent,
|
|
mutateCompareTemporary,
|
|
useComparePersistent,
|
|
useCompareTemporary,
|
|
} from '../../../stores/compare';
|
|
import { EquipmentMatrix } from '../../../stores/duel';
|
|
import { TankSearch } from '../tankopedia/components/TankSearch';
|
|
import { TankControl } from './components/TankControl';
|
|
|
|
export default function Page() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const awaitedTankDefinitions = use(tankDefinitions);
|
|
const awaitedSkillDefinitions = use(skillDefinitions);
|
|
const searchParams = useSearchParams();
|
|
const members = useCompareTemporary((state) => state.members);
|
|
const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
|
|
const sorting = useCompareTemporary((state) => state.sorting);
|
|
const awaitedModelDefinitions = use(modelDefinitions);
|
|
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
|
|
const awaitedProvisionDefinitions = use(provisionDefinitions);
|
|
const deltaMode = useComparePersistent((state) => state.deltaMode);
|
|
const stats = useMemo(
|
|
() =>
|
|
members.map((item) =>
|
|
tankCharacteristics(
|
|
{
|
|
...item,
|
|
stockEngine: item.tank.engines[0],
|
|
stockGun: item.tank.turrets[0].guns[0],
|
|
stockTrack: item.tank.tracks[0],
|
|
stockTurret: item.tank.turrets[0],
|
|
},
|
|
{
|
|
equipmentDefinitions: awaitedEquipmentDefinitions,
|
|
modelDefinitions: awaitedModelDefinitions,
|
|
provisionDefinitions: awaitedProvisionDefinitions,
|
|
},
|
|
),
|
|
),
|
|
[members],
|
|
);
|
|
const createQueryString = useCallback(
|
|
(name: string, value: string) => {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
params.set(name, value);
|
|
|
|
return params.toString();
|
|
},
|
|
[searchParams],
|
|
);
|
|
|
|
const test = Object.keys(awaitedProvisionDefinitions).slice(0, 1);
|
|
const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
|
|
|
|
useEffect(() => {
|
|
router.push(
|
|
pathname +
|
|
'?' +
|
|
createQueryString(
|
|
'tanks',
|
|
members.map(({ tank }) => tank.id).join(','),
|
|
),
|
|
);
|
|
}, [members]);
|
|
|
|
useEffect(() => {
|
|
const tanksParam = searchParams.get('tanks');
|
|
|
|
if (tanksParam) {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members = tanksParam
|
|
.split(',')
|
|
.map(Number)
|
|
.map((id) =>
|
|
tankToCompareMember(
|
|
awaitedTankDefinitions[id],
|
|
awaitedProvisionDefinitions,
|
|
awaitedSkillDefinitions,
|
|
),
|
|
);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
function Row({
|
|
value,
|
|
name,
|
|
display,
|
|
deltaType = 'higherIsBetter',
|
|
decimals,
|
|
deltaNominalDisplay,
|
|
}: {
|
|
name: string;
|
|
value:
|
|
| keyof Awaited<ReturnType<typeof tankCharacteristics>>
|
|
| ((
|
|
member: Awaited<ReturnType<typeof tankCharacteristics>>,
|
|
) => number | undefined);
|
|
display?: (
|
|
member: Awaited<ReturnType<typeof tankCharacteristics>>,
|
|
) => number | string | undefined;
|
|
deltaType?: 'higherIsBetter' | 'lowerIsBetter';
|
|
decimals?: number;
|
|
deltaNominalDisplay?: (delta: number) => string | number;
|
|
}) {
|
|
const values = stats.map((stat) =>
|
|
typeof value === 'function' ? value(stat)! : (stat[value] as number),
|
|
);
|
|
|
|
return (
|
|
<Table.Row>
|
|
<Table.RowHeaderCell>
|
|
<Flex
|
|
align="center"
|
|
gap="2"
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<IconButton
|
|
color={sorting?.by === name ? undefined : 'gray'}
|
|
variant="ghost"
|
|
onClick={() => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members.sort((memberA, memberB) => {
|
|
const indexA = draft.members.indexOf(memberA);
|
|
const indexB = draft.members.indexOf(memberB);
|
|
const valueA = values[indexA];
|
|
const valueB = values[indexB];
|
|
|
|
return draft.sorting?.direction === 'ascending' &&
|
|
draft.sorting.by === name
|
|
? valueA - valueB
|
|
: valueB - valueA;
|
|
});
|
|
|
|
draft.sorting = {
|
|
by: name,
|
|
direction:
|
|
draft.sorting?.direction === 'ascending' &&
|
|
draft.sorting.by === name
|
|
? 'descending'
|
|
: 'ascending',
|
|
};
|
|
});
|
|
}}
|
|
>
|
|
{(sorting === undefined || sorting.by !== name) && (
|
|
<CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
|
|
)}
|
|
{sorting?.by === name && (
|
|
<>
|
|
{sorting.direction === 'ascending' && <CaretRightIcon />}
|
|
{sorting.direction === 'descending' && <CaretLeftIcon />}
|
|
</>
|
|
)}
|
|
</IconButton>
|
|
|
|
{name}
|
|
</Flex>
|
|
</Table.RowHeaderCell>
|
|
|
|
{values.map((value, index) => {
|
|
const delta = value - values[0];
|
|
const deltaPercentage = value / values[0] - 1;
|
|
const normalizedDeltaPercentage = Math.round(
|
|
Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25),
|
|
);
|
|
|
|
return (
|
|
<Table.Cell
|
|
key={index}
|
|
style={{
|
|
backgroundColor:
|
|
index === 0 ||
|
|
value === undefined ||
|
|
values[0] === undefined ||
|
|
value === values[0]
|
|
? undefined
|
|
: (
|
|
deltaType === 'higherIsBetter'
|
|
? value > values[0]
|
|
: value < values[0]
|
|
)
|
|
? `color-mix(in srgb, ${theme.colors.componentCallToActionInteractive_green} ${normalizedDeltaPercentage}%, ${theme.colors.componentCallToActionInteractive_green}00)`
|
|
: `color-mix(in srgb, ${theme.colors.componentCallToActionInteractive_red} ${normalizedDeltaPercentage}%, ${theme.colors.componentCallToActionInteractive_red}00)`,
|
|
}}
|
|
>
|
|
<Flex
|
|
align="center"
|
|
justify="center"
|
|
gap="2"
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<Text style={{ textAlign: 'center' }} wrap="nowrap">
|
|
{display
|
|
? display(stats[index])
|
|
: decimals === undefined
|
|
? value
|
|
: value?.toFixed(decimals)}
|
|
</Text>
|
|
|
|
{delta !== 0 && (
|
|
<>
|
|
{deltaMode === 'absolute' && (
|
|
<Text color="gray">
|
|
(
|
|
{`${delta > 0 ? '+' : ''}${
|
|
deltaNominalDisplay
|
|
? deltaNominalDisplay(delta)
|
|
: decimals === undefined
|
|
? delta
|
|
: delta.toFixed(decimals)
|
|
}`}
|
|
)
|
|
</Text>
|
|
)}
|
|
|
|
{deltaMode === 'percentage' && (
|
|
<Text color="gray">
|
|
(
|
|
{`${deltaPercentage > 0 ? '+' : ''}${Math.round(
|
|
deltaPercentage * 100,
|
|
)}%`}
|
|
)
|
|
</Text>
|
|
)}
|
|
</>
|
|
)}
|
|
</Flex>
|
|
</Table.Cell>
|
|
);
|
|
})}
|
|
</Table.Row>
|
|
);
|
|
}
|
|
|
|
function Title({ children }: { children: string }) {
|
|
return (
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.ColumnHeaderCell>
|
|
<Heading size="4">{children}</Heading>
|
|
</Table.ColumnHeaderCell>
|
|
|
|
{members.map(({ key }) => (
|
|
<Table.ColumnHeaderCell key={key} />
|
|
))}
|
|
</Table.Row>
|
|
</Table.Header>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PageWrapper color="crimson" size="100%">
|
|
<Flex justify="center" gap="2" align="center" mt="4" direction="column">
|
|
<Flex gap="2">
|
|
<Dialog.Root
|
|
open={addTankDialogOpen}
|
|
onOpenChange={setAddTankDialogOpen}
|
|
>
|
|
<Dialog.Trigger>
|
|
<Button>
|
|
<PlusIcon /> Add
|
|
</Button>
|
|
</Dialog.Trigger>
|
|
|
|
<Dialog.Content>
|
|
<Flex gap="4" direction="column">
|
|
<Flex
|
|
direction="column"
|
|
gap="4"
|
|
style={{ flex: 1 }}
|
|
justify="center"
|
|
>
|
|
<TankSearch
|
|
compact
|
|
onSelect={(tank) => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members.push(
|
|
tankToCompareMember(
|
|
tank,
|
|
awaitedProvisionDefinitions,
|
|
awaitedSkillDefinitions,
|
|
),
|
|
);
|
|
draft.sorting = undefined;
|
|
});
|
|
setAddTankDialogOpen(false);
|
|
}}
|
|
onSelectAll={(tanks) => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members.push(
|
|
...tanks.map((tank) =>
|
|
tankToCompareMember(
|
|
tank,
|
|
awaitedProvisionDefinitions,
|
|
awaitedSkillDefinitions,
|
|
),
|
|
),
|
|
);
|
|
draft.sorting = undefined;
|
|
});
|
|
setAddTankDialogOpen(false);
|
|
}}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|
|
|
|
<Button
|
|
variant="soft"
|
|
color="red"
|
|
onClick={() => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members = [];
|
|
draft.sorting = undefined;
|
|
});
|
|
}}
|
|
>
|
|
<TrashIcon /> Clear
|
|
</Button>
|
|
</Flex>
|
|
|
|
<SegmentedControl.Root
|
|
value={deltaMode}
|
|
onValueChange={(value) => {
|
|
mutateComparePersistent((draft) => {
|
|
draft.deltaMode = value as DeltaMode;
|
|
});
|
|
}}
|
|
>
|
|
<SegmentedControl.Item value={'none' satisfies DeltaMode}>
|
|
No deltas
|
|
</SegmentedControl.Item>
|
|
<SegmentedControl.Item value={'percentage' satisfies DeltaMode}>
|
|
Percentage
|
|
</SegmentedControl.Item>
|
|
<SegmentedControl.Item value={'absolute' satisfies DeltaMode}>
|
|
Absolute
|
|
</SegmentedControl.Item>
|
|
</SegmentedControl.Root>
|
|
</Flex>
|
|
|
|
{members.length > 0 && (
|
|
<Flex justify="center">
|
|
<Table.Root variant="surface" style={{ maxWidth: '100%' }}>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.ColumnHeaderCell />
|
|
|
|
{members.map(({ tank, key }, index) => {
|
|
return (
|
|
<Table.ColumnHeaderCell width="0" key={key}>
|
|
<Flex
|
|
direction="column"
|
|
align="center"
|
|
justify="between"
|
|
gap="2"
|
|
style={{ height: '100%' }}
|
|
>
|
|
<TankControl
|
|
index={index}
|
|
key={tank.id}
|
|
tank={tank}
|
|
members={members}
|
|
/>
|
|
<img
|
|
src={tankIcon(tank.id)}
|
|
width={64}
|
|
height={64}
|
|
style={{
|
|
objectFit: 'contain',
|
|
}}
|
|
/>
|
|
|
|
<Text
|
|
style={{
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: 128,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{tank.name}
|
|
</Text>
|
|
</Flex>
|
|
</Table.ColumnHeaderCell>
|
|
);
|
|
})}
|
|
</Table.Row>
|
|
</Table.Header>
|
|
|
|
<Table.Body>
|
|
<Table.Row>
|
|
<Table.Cell />
|
|
|
|
{members.map(
|
|
({ equipmentMatrix, tank, key, provisions, gun }, index) => {
|
|
const equipmentPreset =
|
|
awaitedEquipmentDefinitions.presets[tank.equipment];
|
|
const provisionsList = availableProvisions(
|
|
tank,
|
|
gun,
|
|
awaitedProvisionDefinitions,
|
|
);
|
|
|
|
return (
|
|
<Table.Cell key={key}>
|
|
<Flex
|
|
align="center"
|
|
justify="center"
|
|
gap="4"
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<Popover.Root>
|
|
<Popover.Trigger>
|
|
<Button variant="ghost" radius="large">
|
|
<Flex gap="1" direction="column">
|
|
{times(3, (y) => (
|
|
<Flex
|
|
style={{
|
|
gap: 6,
|
|
}}
|
|
>
|
|
{times(3, (x) => {
|
|
const equipment = equipmentMatrix[y][x];
|
|
|
|
return (
|
|
<Flex
|
|
style={{
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 4,
|
|
height: 8,
|
|
backgroundColor:
|
|
equipment === -1
|
|
? theme.colors
|
|
.textLowContrast_crimson
|
|
: theme.colors
|
|
.textLowContrast,
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
width: 4,
|
|
height: 8,
|
|
backgroundColor:
|
|
equipment === 1
|
|
? theme.colors
|
|
.textLowContrast_crimson
|
|
: theme.colors
|
|
.textLowContrast,
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
</Flex>
|
|
);
|
|
})}
|
|
</Flex>
|
|
))}
|
|
</Flex>
|
|
</Button>
|
|
</Popover.Trigger>
|
|
|
|
<Popover.Content>
|
|
<Flex direction="column" gap="4">
|
|
<EquipmentManager
|
|
matrix={equipmentMatrix}
|
|
preset={equipmentPreset}
|
|
onChange={(matrix) => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members[index].equipmentMatrix =
|
|
matrix;
|
|
draft.sorting = undefined;
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<Flex justify="end" gap="4">
|
|
<Button
|
|
variant="ghost"
|
|
color="red"
|
|
onClick={() => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members[index].equipmentMatrix =
|
|
times(3, () =>
|
|
times(3, () => 0),
|
|
) as EquipmentMatrix;
|
|
draft.sorting = undefined;
|
|
});
|
|
}}
|
|
>
|
|
Clear
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members.forEach((member) => {
|
|
member.equipmentMatrix =
|
|
draft.members[
|
|
index
|
|
].equipmentMatrix;
|
|
draft.sorting = undefined;
|
|
});
|
|
});
|
|
}}
|
|
>
|
|
Apply to all
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</Popover.Content>
|
|
</Popover.Root>
|
|
|
|
<Popover.Root>
|
|
<Popover.Trigger>
|
|
<Button
|
|
variant="ghost"
|
|
radius="large"
|
|
style={{
|
|
height: '100%',
|
|
width: 16,
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<Flex direction="column">
|
|
{provisions.map((provision, index) => (
|
|
<img
|
|
key={provision}
|
|
src={asset(
|
|
`/icons/provisions/${provision}.webp`,
|
|
)}
|
|
style={{
|
|
left: '50%',
|
|
/**
|
|
* max = 100% - 16px - 4px
|
|
* min = 4px
|
|
* diff = max - min
|
|
* = 100% - 16px - 4px - 4px
|
|
* = 100% - 24px
|
|
* coefficient = index / length - 1
|
|
* position = min + coefficient * diff
|
|
*/
|
|
top: `calc(4px + ${
|
|
provisions.length === 1
|
|
? 0.5
|
|
: index / (provisions.length - 1)
|
|
} * (100% - 24px))`,
|
|
transform: 'translateX(-50%)',
|
|
position: 'absolute',
|
|
width: 16,
|
|
height: 16,
|
|
objectFit: 'contain',
|
|
}}
|
|
/>
|
|
))}
|
|
</Flex>
|
|
</Button>
|
|
</Popover.Trigger>
|
|
|
|
<Popover.Content>
|
|
<ProvisionsManager
|
|
provisions={provisionsList.map(
|
|
(provision) => provision.id,
|
|
)}
|
|
selected={provisions}
|
|
disabled={
|
|
tank.provisions === provisionsList.length
|
|
}
|
|
onChange={(provisions) => {
|
|
mutateCompareTemporary((draft) => {
|
|
draft.members[index].provisions =
|
|
provisions;
|
|
});
|
|
}}
|
|
/>
|
|
</Popover.Content>
|
|
</Popover.Root>
|
|
</Flex>
|
|
</Table.Cell>
|
|
);
|
|
},
|
|
)}
|
|
</Table.Row>
|
|
</Table.Body>
|
|
|
|
<Title>Fire</Title>
|
|
<Table.Body>
|
|
<Row name="DPM" value="dpm" decimals={0} />
|
|
<Row
|
|
name="Reload"
|
|
deltaType="lowerIsBetter"
|
|
value={(stats) =>
|
|
stats.shellReload ??
|
|
stats.shellReloads!.reduce((a, b) => a + b, 0) /
|
|
stats.shellReloads!.length
|
|
}
|
|
display={(stats) =>
|
|
stats.shellReload?.toFixed(2) ??
|
|
stats
|
|
.shellReloads!.map((reload) => reload.toFixed(2))
|
|
.join(', ')
|
|
}
|
|
deltaNominalDisplay={(delta) => delta.toFixed(2)}
|
|
/>
|
|
{hasNonRegularGun && (
|
|
<Row
|
|
name="Intra-clip"
|
|
deltaType="lowerIsBetter"
|
|
value={(stat) => stat.intraClip}
|
|
decimals={2}
|
|
/>
|
|
)}
|
|
<Row name="Caliber" value="caliber" decimals={0} />
|
|
<Row name="Penetration" value="penetration" decimals={0} />
|
|
<Row name="Damage" value="damage" />
|
|
<Row name="Module damage" value="moduleDamage" />
|
|
<Row name="Shell velocity" value="shellVelocity" />
|
|
<Row
|
|
name="Aim time"
|
|
value="aimTime"
|
|
deltaType="lowerIsBetter"
|
|
decimals={2}
|
|
/>
|
|
<Row
|
|
name="Dispersion"
|
|
value="dispersion"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row
|
|
name="Dispersion moving"
|
|
value="dispersionMoving"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row
|
|
name="Dispersion hull traversing"
|
|
value="dispersionHullTraversing"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row
|
|
name="Dispersion turret traversing"
|
|
value="dispersionTurretTraversing"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row
|
|
name="Dispersion shooting"
|
|
value="dispersionShooting"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row
|
|
name="Dispersion gun damaged"
|
|
value="dispersionGunDamaged"
|
|
deltaType="lowerIsBetter"
|
|
decimals={3}
|
|
/>
|
|
<Row name="Gun depression" value="gunDepression" decimals={1} />
|
|
<Row name="Gun elevation" value="gunElevation" decimals={1} />
|
|
</Table.Body>
|
|
|
|
<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} />
|
|
<Row
|
|
name="Power to weight ratio hard terrain"
|
|
value="powerToWeightRatioHardTerrain"
|
|
decimals={1}
|
|
/>
|
|
<Row
|
|
name="Power to weight ratio medium terrain"
|
|
value="powerToWeightRatioMediumTerrain"
|
|
decimals={1}
|
|
/>
|
|
<Row
|
|
name="Power to weight ratio soft terrain"
|
|
value="powerToWeightRatioSoftTerrain"
|
|
decimals={1}
|
|
/>
|
|
</Table.Body>
|
|
|
|
<Title>Survivability</Title>
|
|
<Table.Body>
|
|
<Row name="Health" value="health" decimals={0} />
|
|
<Row
|
|
name="Fire chance"
|
|
value="fireChance"
|
|
deltaType="lowerIsBetter"
|
|
display={(stats) => (stats.fireChance * 100).toFixed(0)}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row name="View range" value="viewRange" decimals={0} />
|
|
<Row
|
|
name="Camouflage still"
|
|
value="camouflageStill"
|
|
display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row
|
|
name="Camouflage moving"
|
|
value="camouflageMoving"
|
|
display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row
|
|
name="Camouflage shooting still"
|
|
value="camouflageShootingStill"
|
|
display={(stats) =>
|
|
(stats.camouflageShootingStill * 100).toFixed(0)
|
|
}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row
|
|
name="Camouflage shooting moving"
|
|
value="camouflageShootingMoving"
|
|
display={(stats) =>
|
|
(stats.camouflageShootingMoving * 100).toFixed(0)
|
|
}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row
|
|
name="Camouflage caught on fire"
|
|
value="camouflageCaughtOnFire"
|
|
display={(stats) =>
|
|
(stats.camouflageCaughtOnFire * 100).toFixed(0)
|
|
}
|
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
|
/>
|
|
<Row
|
|
name="Width"
|
|
value="width"
|
|
deltaType="lowerIsBetter"
|
|
decimals={1}
|
|
/>
|
|
<Row
|
|
name="Height"
|
|
value="height"
|
|
deltaType="lowerIsBetter"
|
|
decimals={1}
|
|
/>
|
|
<Row
|
|
name="Length"
|
|
value="length"
|
|
deltaType="lowerIsBetter"
|
|
decimals={1}
|
|
/>
|
|
<Row
|
|
name="Volume"
|
|
value="volume"
|
|
deltaType="lowerIsBetter"
|
|
decimals={1}
|
|
/>
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Flex>
|
|
)}
|
|
|
|
{members.length === 0 && (
|
|
<Flex
|
|
align="center"
|
|
justify="center"
|
|
direction="column"
|
|
style={{ flex: 1 }}
|
|
>
|
|
<Heading color="gray">No tanks selected</Heading>
|
|
<Text color="gray">
|
|
Press the <PlusIcon /> Add button to get started
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
</PageWrapper>
|
|
);
|
|
}
|