mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: optimized tank comapre
This commit is contained in:
TrèsAbhi committed
1 parent
faabea9c06
commit
7c097d4dd8
11 files changed
+1489
-1377
No files matched your search
@@ -0,0 +1,400 @@
|
|||||||
|
import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
|
||||||
|
import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
|
||||||
|
import { asset } from '../../../../core/blitzkit/asset';
|
||||||
|
import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
import { CompareRow } from './CompareRow';
|
||||||
|
import { CompareSectionTitle } from './CompareSectionTitle';
|
||||||
|
|
||||||
|
interface BodyProps {
|
||||||
|
stats: TankCharacteristics[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Body({ stats }: BodyProps) {
|
||||||
|
const members = CompareEphemeral.use((state) => state.members);
|
||||||
|
const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
|
||||||
|
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<StickyColumnHeaderCell top={137} style={{ left: 0, zIndex: 2 }}>
|
||||||
|
<Flex height="100%" align="center">
|
||||||
|
<Heading size="4">Firepower</Heading>
|
||||||
|
</Flex>
|
||||||
|
</StickyColumnHeaderCell>
|
||||||
|
|
||||||
|
{members.map(({ gun, shell, key }, index) => (
|
||||||
|
<StickyColumnHeaderCell key={key} top={137}>
|
||||||
|
<Flex justify="center">
|
||||||
|
<Flex>
|
||||||
|
{gun.shells.map((thisShell, shellIndex) => (
|
||||||
|
<IconButton
|
||||||
|
color={thisShell.id === shell.id ? undefined : 'gray'}
|
||||||
|
variant="soft"
|
||||||
|
key={thisShell.id}
|
||||||
|
style={{
|
||||||
|
borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
|
||||||
|
borderBottomLeftRadius:
|
||||||
|
shellIndex === 0 ? undefined : 0,
|
||||||
|
borderTopRightRadius:
|
||||||
|
shellIndex === gun.shells.length - 1 ? undefined : 0,
|
||||||
|
borderBottomRightRadius:
|
||||||
|
shellIndex === gun.shells.length - 1 ? undefined : 0,
|
||||||
|
marginLeft: shellIndex === 0 ? 0 : -1,
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].shell = thisShell;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt={thisShell.name}
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
src={asset(`icons/shells/${thisShell.icon}.webp`)}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</StickyColumnHeaderCell>
|
||||||
|
))}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
<Table.Body>
|
||||||
|
<CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
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 && (
|
||||||
|
<>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Intra-clip"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
value="intraClip"
|
||||||
|
decimals={2}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Shells"
|
||||||
|
value="shells"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Penetration"
|
||||||
|
value="penetration"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow stats={stats} name="Damage" value="damage" decimals={0} />
|
||||||
|
{hasNonRegularGun && (
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="clipping potential"
|
||||||
|
indent
|
||||||
|
value="clipDamage"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Module damage"
|
||||||
|
value="moduleDamage"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow stats={stats} name="Caliber" value="caliber" decimals={0} />
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Normalization"
|
||||||
|
value="shellNormalization"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Ricochet"
|
||||||
|
value="shellRicochet"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Shell velocity"
|
||||||
|
value="shellVelocity"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Aim time"
|
||||||
|
value="aimTime"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={2}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Dispersion"
|
||||||
|
value="dispersion"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="moving"
|
||||||
|
indent
|
||||||
|
value="dispersionMoving"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="hull traversing"
|
||||||
|
indent
|
||||||
|
value="dispersionHullTraversing"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="turret traversing"
|
||||||
|
indent
|
||||||
|
value="dispersionTurretTraversing"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="shooting"
|
||||||
|
indent
|
||||||
|
value="dispersionShooting"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="gun damaged"
|
||||||
|
indent
|
||||||
|
value="dispersionGunDamaged"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="maximum"
|
||||||
|
indent
|
||||||
|
value="maxDispersion"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={3}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Gun depression"
|
||||||
|
value="gunDepression"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="elevation"
|
||||||
|
indent
|
||||||
|
value="gunElevation"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
</Table.Body>
|
||||||
|
|
||||||
|
<CompareSectionTitle>Maneuverability</CompareSectionTitle>
|
||||||
|
<Table.Body>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Speed forwards"
|
||||||
|
value="speedForwards"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="backwards"
|
||||||
|
indent
|
||||||
|
value="speedBackwards"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Engine power"
|
||||||
|
value="enginePower"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow stats={stats} name="Weight" value="weight" decimals={1} />
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Terrain coefficient"
|
||||||
|
value="hardTerrainCoefficient"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="medium terrain"
|
||||||
|
indent
|
||||||
|
value="mediumTerrainCoefficient"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="soft terrain"
|
||||||
|
indent
|
||||||
|
value="softTerrainCoefficient"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Power to weight ratio"
|
||||||
|
value="powerToWeightRatioHardTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="medium terrain"
|
||||||
|
indent
|
||||||
|
value="powerToWeightRatioMediumTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="soft terrain"
|
||||||
|
indent
|
||||||
|
value="powerToWeightRatioSoftTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Turret traverse speed"
|
||||||
|
value="turretTraverseSpeed"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Traverse speed"
|
||||||
|
value="hullTraverseHardTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="medium terrain"
|
||||||
|
indent
|
||||||
|
value="hullTraverseMediumTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="soft terrain"
|
||||||
|
indent
|
||||||
|
value="hullTraverseSoftTerrain"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
</Table.Body>
|
||||||
|
|
||||||
|
<CompareSectionTitle>Survivability</CompareSectionTitle>
|
||||||
|
<Table.Body>
|
||||||
|
<CompareRow stats={stats} name="Health" value="health" decimals={0} />
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Fire chance"
|
||||||
|
value="fireChance"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
display={(stats) => (stats.fireChance * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="View range"
|
||||||
|
value="viewRange"
|
||||||
|
decimals={0}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Camouflage"
|
||||||
|
value="camouflageStill"
|
||||||
|
display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="moving"
|
||||||
|
indent
|
||||||
|
value="camouflageMoving"
|
||||||
|
display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="shooting"
|
||||||
|
indent
|
||||||
|
value="camouflageShootingStill"
|
||||||
|
display={(stats) => (stats.camouflageShootingStill * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="shooting & moving"
|
||||||
|
indent
|
||||||
|
value="camouflageShootingMoving"
|
||||||
|
display={(stats) => (stats.camouflageShootingMoving * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="caught on fire"
|
||||||
|
indent
|
||||||
|
value="camouflageCaughtOnFire"
|
||||||
|
display={(stats) => (stats.camouflageCaughtOnFire * 100).toFixed(0)}
|
||||||
|
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="Volume"
|
||||||
|
value="volume"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="width"
|
||||||
|
indent
|
||||||
|
value="width"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="height"
|
||||||
|
indent
|
||||||
|
value="height"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
<CompareRow
|
||||||
|
stats={stats}
|
||||||
|
name="length"
|
||||||
|
indent
|
||||||
|
value="length"
|
||||||
|
deltaType="lowerIsBetter"
|
||||||
|
decimals={1}
|
||||||
|
/>
|
||||||
|
</Table.Body>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
import {
|
||||||
|
CaretLeftIcon,
|
||||||
|
CaretRightIcon,
|
||||||
|
CaretSortIcon,
|
||||||
|
} from '@radix-ui/react-icons';
|
||||||
|
import { Flex, IconButton, Table, Text } from '@radix-ui/themes';
|
||||||
|
import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell';
|
||||||
|
import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
|
||||||
|
import { theme } from '../../../../stitches.config';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
import * as ComparePersistent from '../../../../stores/comparePersistent';
|
||||||
|
|
||||||
|
interface CompareRowProps {
|
||||||
|
name: string;
|
||||||
|
value:
|
||||||
|
| keyof Awaited<TankCharacteristics>
|
||||||
|
| ((member: Awaited<TankCharacteristics>) => number | undefined);
|
||||||
|
display?: (
|
||||||
|
member: Awaited<TankCharacteristics>,
|
||||||
|
) => number | string | undefined;
|
||||||
|
deltaType?: 'higherIsBetter' | 'lowerIsBetter';
|
||||||
|
decimals?: number;
|
||||||
|
deltaNominalDisplay?: (delta: number) => string | number;
|
||||||
|
indent?: boolean;
|
||||||
|
stats: TankCharacteristics[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompareRow({
|
||||||
|
value,
|
||||||
|
name,
|
||||||
|
display,
|
||||||
|
deltaType = 'higherIsBetter',
|
||||||
|
decimals,
|
||||||
|
deltaNominalDisplay,
|
||||||
|
indent,
|
||||||
|
stats,
|
||||||
|
}: CompareRowProps) {
|
||||||
|
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||||
|
const sorting = CompareEphemeral.use((state) => state.sorting);
|
||||||
|
const deltaMode = ComparePersistent.use((state) => state.deltaMode);
|
||||||
|
|
||||||
|
const values = stats.map((stat) =>
|
||||||
|
typeof value === 'function' ? value(stat)! : (stat[value] as number),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table.Row>
|
||||||
|
<StickyRowHeaderCell>
|
||||||
|
<Flex
|
||||||
|
align="center"
|
||||||
|
style={{ whiteSpace: 'nowrap' }}
|
||||||
|
gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
color={sorting?.by === name ? undefined : 'gray'}
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((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>
|
||||||
|
|
||||||
|
<Text size={{ initial: '1', sm: '2' }}>{name}</Text>
|
||||||
|
</Flex>
|
||||||
|
</StickyRowHeaderCell>
|
||||||
|
|
||||||
|
{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),
|
||||||
|
);
|
||||||
|
const resolvedDisplayValue = display
|
||||||
|
? display(stats[index])
|
||||||
|
: decimals === undefined
|
||||||
|
? value
|
||||||
|
: value?.toFixed(decimals);
|
||||||
|
|
||||||
|
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">
|
||||||
|
{resolvedDisplayValue}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{delta !== 0 &&
|
||||||
|
resolvedDisplayValue !== undefined &&
|
||||||
|
values[0] !== undefined && (
|
||||||
|
<>
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { Heading, Table } from '@radix-ui/themes';
|
||||||
|
import { times } from 'lodash';
|
||||||
|
import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
|
||||||
|
export function CompareSectionTitle({ children }: { children: string }) {
|
||||||
|
const memberCount = CompareEphemeral.use((state) => state.members.length);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table.Header style={{ height: 48 }}>
|
||||||
|
<Table.Row align="center">
|
||||||
|
<StickyColumnHeaderCell top={137} style={{ left: 0, zIndex: 2 }}>
|
||||||
|
<Heading size="4">{children}</Heading>
|
||||||
|
</StickyColumnHeaderCell>
|
||||||
|
|
||||||
|
{times(memberCount, (index) => (
|
||||||
|
<StickyColumnHeaderCell key={index} top={137} />
|
||||||
|
))}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,546 @@
|
|||||||
|
import { ComponentPlaceholderIcon } from '@radix-ui/react-icons';
|
||||||
|
import { Button, Flex, Popover, Table } from '@radix-ui/themes';
|
||||||
|
import { times } from 'lodash';
|
||||||
|
import { use } from 'react';
|
||||||
|
import { ConsumablesManager } from '../../../../components/ConsumablesManager';
|
||||||
|
import { CrewSkillManager } from '../../../../components/CrewSkillManager';
|
||||||
|
import { EquipmentManager } from '../../../../components/EquipmentManager';
|
||||||
|
import { ModuleManager } from '../../../../components/ModuleManager';
|
||||||
|
import { ProvisionsManager } from '../../../../components/ProvisionsManager';
|
||||||
|
import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
|
||||||
|
import { StickyTableRoot } from '../../../../components/StickyTableRoot';
|
||||||
|
import { asset } from '../../../../core/blitzkit/asset';
|
||||||
|
import { availableProvisions } from '../../../../core/blitzkit/availableProvisions';
|
||||||
|
import { checkConsumableProvisionInclusivity } from '../../../../core/blitzkit/checkConsumableProvisionInclusivity';
|
||||||
|
import { consumableDefinitions } from '../../../../core/blitzkit/consumableDefinitions';
|
||||||
|
import { equipmentDefinitions } from '../../../../core/blitzkit/equipmentDefinitions';
|
||||||
|
import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
|
||||||
|
import { skillDefinitions } from '../../../../core/blitzkit/skillDefinitions';
|
||||||
|
import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
|
||||||
|
import { BlitzkitButtonWatermark } from '../../../../icons/BlitzkitButtonWatermark';
|
||||||
|
import { theme } from '../../../../stitches.config';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
import { EquipmentMatrix } from '../../../../stores/duel';
|
||||||
|
import { permanentSkills } from '../../tankopedia/[id]/components/Characteristics/components/Skills/constants';
|
||||||
|
import { Body } from './Body';
|
||||||
|
import { InsertionMarker } from './IntersectionMarker';
|
||||||
|
import { TankCard } from './TankCard';
|
||||||
|
|
||||||
|
interface CompareTableProps {
|
||||||
|
stats: TankCharacteristics[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompareTable({ stats }: CompareTableProps) {
|
||||||
|
const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
|
||||||
|
const members = CompareEphemeral.use((state) => state.members);
|
||||||
|
const awaitedSkillDefinitions = use(skillDefinitions);
|
||||||
|
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||||
|
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
|
||||||
|
const awaitedConsumableDefinitions = use(consumableDefinitions);
|
||||||
|
const awaitedProvisionDefinitions = use(provisionDefinitions);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StickyTableRoot
|
||||||
|
size="1"
|
||||||
|
variant="surface"
|
||||||
|
style={{ maxWidth: '100%', height: 'calc(100vh - 128px)' }}
|
||||||
|
>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<StickyColumnHeaderCell width="0" style={{ height: '100%' }}>
|
||||||
|
<Flex
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
>
|
||||||
|
<BlitzkitButtonWatermark width={64} height={64} />
|
||||||
|
<InsertionMarker index={0} />
|
||||||
|
</Flex>
|
||||||
|
</StickyColumnHeaderCell>
|
||||||
|
|
||||||
|
{members.map(({ tank, key }, index) => {
|
||||||
|
return <TankCard index={index} key={key} tank={tank} />;
|
||||||
|
})}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
|
<Table.Body>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell style={{ height: '100%' }}>
|
||||||
|
<Flex
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
}}
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
>
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button variant="ghost" radius="large">
|
||||||
|
<Flex
|
||||||
|
direction="column"
|
||||||
|
style={{
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Object.entries(awaitedSkillDefinitions.classes).map(
|
||||||
|
([tankClass, skills]) => (
|
||||||
|
<Flex key={tankClass} style={{ gap: 2 }}>
|
||||||
|
{skills.map((skill) => (
|
||||||
|
<div
|
||||||
|
key={skill}
|
||||||
|
style={{
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 2,
|
||||||
|
backgroundColor:
|
||||||
|
crewSkills[skill] === 0
|
||||||
|
? theme.colors.textLowContrast
|
||||||
|
: permanentSkills.includes(skill)
|
||||||
|
? theme.colors.textLowContrast_crimson
|
||||||
|
: theme.colors.textLowContrast_amber,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content>
|
||||||
|
<CrewSkillManager
|
||||||
|
skillLevels={crewSkills}
|
||||||
|
onChange={(skills) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.crewSkills = skills;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex justify="end" mt="4" gap="4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
Object.keys(draft.crewSkills).forEach((skill) => {
|
||||||
|
draft.crewSkills[skill] = 0;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
Object.keys(draft.crewSkills).forEach((skill) => {
|
||||||
|
draft.crewSkills[skill] = 7;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Maximize
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
</Flex>
|
||||||
|
</Table.Cell>
|
||||||
|
|
||||||
|
{members.map(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
equipmentMatrix,
|
||||||
|
tank,
|
||||||
|
key,
|
||||||
|
provisions,
|
||||||
|
gun,
|
||||||
|
shell,
|
||||||
|
turret,
|
||||||
|
engine,
|
||||||
|
track,
|
||||||
|
consumables,
|
||||||
|
},
|
||||||
|
index,
|
||||||
|
) => {
|
||||||
|
const equipmentPreset =
|
||||||
|
awaitedEquipmentDefinitions.presets[tank.equipment];
|
||||||
|
const provisionsList = availableProvisions(
|
||||||
|
tank,
|
||||||
|
gun,
|
||||||
|
awaitedProvisionDefinitions,
|
||||||
|
);
|
||||||
|
const consumablesList = Object.values(
|
||||||
|
awaitedConsumableDefinitions,
|
||||||
|
).filter((consumable) =>
|
||||||
|
checkConsumableProvisionInclusivity(consumable, tank, gun),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table.Cell key={key}>
|
||||||
|
<Flex
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
direction="column"
|
||||||
|
gap="2"
|
||||||
|
>
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button variant="ghost">
|
||||||
|
<Flex align="center">
|
||||||
|
{(
|
||||||
|
['turret', 'gun', 'engine', 'chassis'] as const
|
||||||
|
).map((module, index) => (
|
||||||
|
<img
|
||||||
|
alt={module}
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
src={asset(`icons/modules/${module}.webp`)}
|
||||||
|
style={{
|
||||||
|
marginLeft: index > 0 ? -8 : 0,
|
||||||
|
objectFit: 'contain',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content>
|
||||||
|
<ModuleManager
|
||||||
|
tank={tank}
|
||||||
|
turret={turret}
|
||||||
|
gun={gun}
|
||||||
|
shell={shell}
|
||||||
|
engine={engine}
|
||||||
|
track={track}
|
||||||
|
onChange={(modules) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index] = {
|
||||||
|
...draft.members[index],
|
||||||
|
...modules,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex justify="end" mt="4" gap="4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
const member = draft.members[index];
|
||||||
|
|
||||||
|
member.turret = member.tank.turrets[0];
|
||||||
|
member.gun = member.turret.guns[0];
|
||||||
|
member.shell = member.gun.shells[0];
|
||||||
|
member.engine = member.tank.engines[0];
|
||||||
|
member.track = member.tank.tracks[0];
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Stock
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
const member = draft.members[index];
|
||||||
|
|
||||||
|
member.turret = member.tank.turrets.at(-1)!;
|
||||||
|
member.gun = member.turret.guns.at(-1)!;
|
||||||
|
member.shell = member.gun.shells[0];
|
||||||
|
member.engine = member.tank.engines.at(-1)!;
|
||||||
|
member.track = member.tank.tracks.at(-1)!;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Upgrade
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
|
||||||
|
<Flex align="center" justify="center" gap="3">
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
radius="large"
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
width: 12,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex direction="column" justify="center">
|
||||||
|
{provisions.map((provision, index) => (
|
||||||
|
<img
|
||||||
|
alt={
|
||||||
|
awaitedProvisionDefinitions[provision].name
|
||||||
|
}
|
||||||
|
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',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{provisions.length === 0 && (
|
||||||
|
<ComponentPlaceholderIcon />
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content>
|
||||||
|
<ProvisionsManager
|
||||||
|
provisions={provisionsList.map(
|
||||||
|
(provision) => provision.id,
|
||||||
|
)}
|
||||||
|
selected={provisions}
|
||||||
|
disabled={tank.provisions === provisions.length}
|
||||||
|
onChange={(provisions) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].provisions = provisions;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex justify="end" mt="4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].provisions = [];
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button variant="ghost" radius="large">
|
||||||
|
<Flex gap="1" direction="column">
|
||||||
|
{times(3, (y) => (
|
||||||
|
<Flex
|
||||||
|
key={y}
|
||||||
|
style={{
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{times(3, (x) => {
|
||||||
|
const equipment = equipmentMatrix[y][x];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
key={x}
|
||||||
|
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>
|
||||||
|
<EquipmentManager
|
||||||
|
matrix={equipmentMatrix}
|
||||||
|
preset={equipmentPreset}
|
||||||
|
onChange={(matrix) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].equipmentMatrix = matrix;
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex justify="end" gap="4" mt="4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
color="red"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].equipmentMatrix = times(
|
||||||
|
3,
|
||||||
|
() => times(3, () => 0),
|
||||||
|
) as EquipmentMatrix;
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members.forEach((member) => {
|
||||||
|
member.equipmentMatrix =
|
||||||
|
draft.members[index].equipmentMatrix;
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply to all
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
radius="large"
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
width: 12,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex direction="column" justify="center">
|
||||||
|
{consumables.map((consumable, index) => (
|
||||||
|
<img
|
||||||
|
alt={
|
||||||
|
awaitedConsumableDefinitions[consumable]
|
||||||
|
.name
|
||||||
|
}
|
||||||
|
key={consumable}
|
||||||
|
src={asset(
|
||||||
|
`/icons/consumables/${consumable}.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 + ${
|
||||||
|
consumables.length === 1
|
||||||
|
? 0.5
|
||||||
|
: index / (consumables.length - 1)
|
||||||
|
} * (100% - 24px))`,
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
position: 'absolute',
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
objectFit: 'contain',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{consumables.length === 0 && (
|
||||||
|
<ComponentPlaceholderIcon />
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content>
|
||||||
|
<ConsumablesManager
|
||||||
|
consumables={consumablesList}
|
||||||
|
selected={consumables}
|
||||||
|
onChange={(consumables) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].consumables = consumables;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
disabled={tank.consumables === consumables.length}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex justify="end" mt="4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members[index].consumables = [];
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Table.Cell>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Body>
|
||||||
|
|
||||||
|
<Body stats={stats} />
|
||||||
|
</StickyTableRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import { PlusIcon, TrashIcon } from '@radix-ui/react-icons';
|
||||||
|
import { Button, Dialog, Flex, SegmentedControl } from '@radix-ui/themes';
|
||||||
|
import { use } from 'react';
|
||||||
|
import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
|
||||||
|
import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
import * as ComparePersistent from '../../../../stores/comparePersistent';
|
||||||
|
import { TankSearch } from '../../tankopedia/components/TankSearch';
|
||||||
|
|
||||||
|
interface ControlsProps {
|
||||||
|
addTankDialogOpen: boolean;
|
||||||
|
onAddTankDialogOpenChange: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Controls({
|
||||||
|
addTankDialogOpen,
|
||||||
|
onAddTankDialogOpenChange,
|
||||||
|
}: ControlsProps) {
|
||||||
|
const deltaMode = ComparePersistent.use((state) => state.deltaMode);
|
||||||
|
const awaitedProvisionDefinitions = use(provisionDefinitions);
|
||||||
|
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||||
|
const mutateComparePersistent = ComparePersistent.useMutation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex gap="2" wrap="wrap" justify="center">
|
||||||
|
<Dialog.Root
|
||||||
|
open={addTankDialogOpen}
|
||||||
|
onOpenChange={onAddTankDialogOpenChange}
|
||||||
|
>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button variant="soft">
|
||||||
|
<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) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members.push(
|
||||||
|
tankToCompareMember(tank, awaitedProvisionDefinitions),
|
||||||
|
);
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
onAddTankDialogOpenChange(false);
|
||||||
|
}}
|
||||||
|
onSelectAll={(tanks) => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members.push(
|
||||||
|
...tanks.map((tank) =>
|
||||||
|
tankToCompareMember(tank, awaitedProvisionDefinitions),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
onAddTankDialogOpenChange(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="soft"
|
||||||
|
color="red"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
draft.members = [];
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TrashIcon /> Clear
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<SegmentedControl.Root
|
||||||
|
value={deltaMode}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
mutateComparePersistent((draft) => {
|
||||||
|
draft.deltaMode = value as ComparePersistent.DeltaMode;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SegmentedControl.Item
|
||||||
|
value={'none' satisfies ComparePersistent.DeltaMode}
|
||||||
|
>
|
||||||
|
No deltas
|
||||||
|
</SegmentedControl.Item>
|
||||||
|
<SegmentedControl.Item
|
||||||
|
value={'percentage' satisfies ComparePersistent.DeltaMode}
|
||||||
|
>
|
||||||
|
Percentage
|
||||||
|
</SegmentedControl.Item>
|
||||||
|
<SegmentedControl.Item
|
||||||
|
value={'absolute' satisfies ComparePersistent.DeltaMode}
|
||||||
|
>
|
||||||
|
Absolute
|
||||||
|
</SegmentedControl.Item>
|
||||||
|
</SegmentedControl.Root>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { InfoCircledIcon } from '@radix-ui/react-icons';
|
||||||
|
import { Callout } from '@radix-ui/themes';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
|
||||||
|
export function DamageWarning() {
|
||||||
|
const members = CompareEphemeral.use((state) => state.members);
|
||||||
|
const hasReactive = members.some((member) => member.consumables.includes(33));
|
||||||
|
const haDynamicArmor = members.some((member) =>
|
||||||
|
member.consumables.includes(73),
|
||||||
|
);
|
||||||
|
const hasSpallLiner = members.some((member) =>
|
||||||
|
member.provisions.includes(101),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!hasReactive && !haDynamicArmor && !hasSpallLiner) return null;
|
||||||
|
|
||||||
|
{
|
||||||
|
<Callout.Root>
|
||||||
|
<Callout.Icon>
|
||||||
|
<InfoCircledIcon />
|
||||||
|
</Callout.Icon>
|
||||||
|
<Callout.Text>
|
||||||
|
Consumables like Reactive Armor and Dynamic Armor System and provisions
|
||||||
|
like Spall Liner may reduce other tanks' damage.
|
||||||
|
</Callout.Text>
|
||||||
|
</Callout.Root>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export const insertionMarkers: { element: HTMLDivElement; index: number }[] =
|
||||||
|
[];
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { theme } from '../../../../../stitches.config';
|
||||||
|
import { insertionMarkers } from './constants';
|
||||||
|
|
||||||
|
export function InsertionMarker({ index }: { index: number }) {
|
||||||
|
const marker = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
insertionMarkers.push({
|
||||||
|
element: marker.current!,
|
||||||
|
index,
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
insertionMarkers.splice(
|
||||||
|
insertionMarkers.findIndex(
|
||||||
|
(insertionMarker) => insertionMarker.element === marker.current!,
|
||||||
|
),
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={marker}
|
||||||
|
style={{
|
||||||
|
height: '75%',
|
||||||
|
width: 2,
|
||||||
|
borderRadius: 1,
|
||||||
|
backgroundColor: theme.colors.textLowContrast_crimson,
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
import { Flex, Text } from '@radix-ui/themes';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { Vector2 } from 'three';
|
||||||
|
import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
|
||||||
|
import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
|
||||||
|
import { tankIcon } from '../../../../core/blitzkit/tankIcon';
|
||||||
|
import * as CompareEphemeral from '../../../../stores/compareEphemeral';
|
||||||
|
import { InsertionMarker } from './IntersectionMarker';
|
||||||
|
import { insertionMarkers } from './IntersectionMarker/constants';
|
||||||
|
import { TankControl } from './TankControl';
|
||||||
|
|
||||||
|
interface TankCardProps {
|
||||||
|
index: number;
|
||||||
|
tank: TankDefinition;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TankCard({ index, tank }: TankCardProps) {
|
||||||
|
const draggable = useRef<HTMLDivElement>(null);
|
||||||
|
const mutateCompareEphemeral = CompareEphemeral.useMutation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const initial = new Vector2();
|
||||||
|
const current = new Vector2();
|
||||||
|
const delta = new Vector2();
|
||||||
|
const marker = new Vector2();
|
||||||
|
let initialRect = draggable.current!.getBoundingClientRect();
|
||||||
|
let dropIndex = -1;
|
||||||
|
|
||||||
|
function handlePointerDown(event: PointerEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
initialRect = draggable.current!.getBoundingClientRect();
|
||||||
|
|
||||||
|
delta.set(0, 0);
|
||||||
|
current.copy(initial.set(event.clientX, event.clientY));
|
||||||
|
window.addEventListener('pointermove', handlePointerMove);
|
||||||
|
window.addEventListener('pointerup', handlePointerUp);
|
||||||
|
}
|
||||||
|
function handlePointerMove(event: PointerEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
current.set(event.clientX, event.clientY);
|
||||||
|
delta.copy(current).sub(initial);
|
||||||
|
insertionMarkers.forEach(({ element }) => {
|
||||||
|
element.style.opacity = '0';
|
||||||
|
});
|
||||||
|
|
||||||
|
const distances = insertionMarkers.map((insertionMarker) => {
|
||||||
|
const markerBounds = insertionMarker.element.getBoundingClientRect();
|
||||||
|
marker.set(markerBounds.left, markerBounds.top);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...insertionMarker,
|
||||||
|
distance: marker.distanceTo(current),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const closest = distances.reduce((a, b) =>
|
||||||
|
a.distance < b.distance ? a : b,
|
||||||
|
);
|
||||||
|
|
||||||
|
dropIndex = closest.index;
|
||||||
|
closest.element.style.opacity = '1';
|
||||||
|
draggable.current!.style.position = 'fixed';
|
||||||
|
draggable.current!.style.cursor = 'grabbing';
|
||||||
|
draggable.current!.style.zIndex = '1';
|
||||||
|
draggable.current!.style.left = `${initialRect.left + delta.x}px`;
|
||||||
|
draggable.current!.style.top = `${initialRect.top + delta.y}px`;
|
||||||
|
}
|
||||||
|
function handlePointerUp(event: PointerEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
draggable.current!.style.position = 'static';
|
||||||
|
draggable.current!.style.zIndex = 'unset';
|
||||||
|
draggable.current!.style.cursor = 'grab';
|
||||||
|
|
||||||
|
insertionMarkers.forEach(({ element }) => {
|
||||||
|
element.style.opacity = '0';
|
||||||
|
});
|
||||||
|
|
||||||
|
window.removeEventListener('pointermove', handlePointerMove);
|
||||||
|
window.removeEventListener('pointerup', handlePointerUp);
|
||||||
|
|
||||||
|
if (dropIndex === -1) return;
|
||||||
|
|
||||||
|
mutateCompareEphemeral((draft) => {
|
||||||
|
const fromIndex = index;
|
||||||
|
const toIndex = dropIndex > index ? dropIndex - 1 : dropIndex;
|
||||||
|
|
||||||
|
const member = draft.members[fromIndex];
|
||||||
|
draft.members.splice(fromIndex, 1);
|
||||||
|
draft.members.splice(toIndex, 0, member);
|
||||||
|
});
|
||||||
|
|
||||||
|
dropIndex = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
draggable.current?.addEventListener('pointerdown', handlePointerDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
draggable.current?.removeEventListener('pointerdown', handlePointerDown);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StickyColumnHeaderCell>
|
||||||
|
<Flex direction="column" align="center" justify="between" gap="2">
|
||||||
|
<TankControl index={index} key={tank.id} id={tank.id} />
|
||||||
|
|
||||||
|
<Flex
|
||||||
|
ref={draggable}
|
||||||
|
direction="column"
|
||||||
|
align="center"
|
||||||
|
justify="between"
|
||||||
|
gap="2"
|
||||||
|
style={{
|
||||||
|
userSelect: 'none',
|
||||||
|
touchAction: 'none',
|
||||||
|
cursor: 'grab',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt={tank.name}
|
||||||
|
src={tankIcon(tank.id)}
|
||||||
|
width={64}
|
||||||
|
height={64}
|
||||||
|
draggable={false}
|
||||||
|
style={{
|
||||||
|
objectFit: 'contain',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
maxWidth: 128,
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tank.name}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<InsertionMarker index={index + 1} />
|
||||||
|
</StickyColumnHeaderCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
+14
-1377
File diff suppressed because it is too large.
Load diff
@@ -21,6 +21,8 @@ import {
|
|||||||
} from './tankDefinitions';
|
} from './tankDefinitions';
|
||||||
import { unionBoundingBox } from './unionBoundingBox';
|
import { unionBoundingBox } from './unionBoundingBox';
|
||||||
|
|
||||||
|
export type TankCharacteristics = ReturnType<typeof tankCharacteristics>;
|
||||||
|
|
||||||
export function tankCharacteristics(
|
export function tankCharacteristics(
|
||||||
{
|
{
|
||||||
tank,
|
tank,
|
||||||
|
|||||||
Reference in new issue
Block a user