mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +02:00
feat: better compare layout
This commit is contained in:
1 parent
cf68c9812c
commit
9f89903a6e
1 file changed
+59
-30
@@ -178,6 +178,7 @@ export default function Page() {
|
||||
deltaType = 'higherIsBetter',
|
||||
decimals,
|
||||
deltaNominalDisplay,
|
||||
indent,
|
||||
}: {
|
||||
name: string;
|
||||
value:
|
||||
@@ -191,6 +192,7 @@ export default function Page() {
|
||||
deltaType?: 'higherIsBetter' | 'lowerIsBetter';
|
||||
decimals?: number;
|
||||
deltaNominalDisplay?: (delta: number) => string | number;
|
||||
indent?: boolean;
|
||||
}) {
|
||||
const values = stats.map((stat) =>
|
||||
typeof value === 'function' ? value(stat)! : (stat[value] as number),
|
||||
@@ -199,7 +201,11 @@ export default function Page() {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.RowHeaderCell>
|
||||
<Flex align="center" gap="2">
|
||||
<Flex
|
||||
align="center"
|
||||
style={{ whiteSpace: 'nowrap' }}
|
||||
gap={indent ? '6' : '2'}
|
||||
>
|
||||
<IconButton
|
||||
color={sorting?.by === name ? undefined : 'gray'}
|
||||
variant="ghost"
|
||||
@@ -620,7 +626,7 @@ export default function Page() {
|
||||
{members.length > 0 && (
|
||||
<Flex justify="center">
|
||||
<Box maxWidth="100%" position="relative">
|
||||
<Table.Root variant="surface" style={{ maxWidth: '100%' }}>
|
||||
<Table.Root size="1" variant="surface" style={{ maxWidth: '100%' }}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeaderCell
|
||||
@@ -1282,67 +1288,81 @@ export default function Page() {
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Dispersion moving"
|
||||
name="moving"
|
||||
indent
|
||||
value="dispersionMoving"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Dispersion hull traversing"
|
||||
name="hull traversing"
|
||||
indent
|
||||
value="dispersionHullTraversing"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Dispersion turret traversing"
|
||||
name="turret traversing"
|
||||
indent
|
||||
value="dispersionTurretTraversing"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Dispersion shooting"
|
||||
name="shooting"
|
||||
indent
|
||||
value="dispersionShooting"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Dispersion gun damaged"
|
||||
name="gun damaged"
|
||||
indent
|
||||
value="dispersionGunDamaged"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row
|
||||
name="Max dispersion"
|
||||
name="maximum"
|
||||
indent
|
||||
value="maxDispersion"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={3}
|
||||
/>
|
||||
<Row name="Gun depression" value="gunDepression" decimals={1} />
|
||||
<Row name="Gun elevation" value="gunElevation" decimals={1} />
|
||||
<Row
|
||||
name="elevation"
|
||||
indent
|
||||
value="gunElevation"
|
||||
decimals={1}
|
||||
/>
|
||||
</Table.Body>
|
||||
|
||||
<Title>Maneuverability</Title>
|
||||
<Table.Body>
|
||||
<Row name="Speed forwards" value="speedForwards" decimals={0} />
|
||||
<Row
|
||||
name="Speed backwards"
|
||||
name="backwards"
|
||||
indent
|
||||
value="speedBackwards"
|
||||
decimals={0}
|
||||
/>
|
||||
<Row name="Engine power" value="enginePower" decimals={0} />
|
||||
<Row name="Weight" value="weight" decimals={1} />
|
||||
<Row
|
||||
name="Power to weight ratio on hard terrain"
|
||||
name="Power to weight ratio"
|
||||
value="powerToWeightRatioHardTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Power to weight ratio on medium terrain"
|
||||
name="medium terrain"
|
||||
indent
|
||||
value="powerToWeightRatioMediumTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Power to weight ratio on soft terrain"
|
||||
name="soft terrain"
|
||||
indent
|
||||
value="powerToWeightRatioSoftTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
@@ -1352,17 +1372,19 @@ export default function Page() {
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Traverse speed on hard terrain"
|
||||
name="Traverse speed"
|
||||
value="hullTraverseHardTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Traverse speed on medium terrain"
|
||||
name="medium terrain"
|
||||
indent
|
||||
value="hullTraverseMediumTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Traverse speed on soft terrain"
|
||||
name="soft terrain"
|
||||
indent
|
||||
value="hullTraverseSoftTerrain"
|
||||
decimals={1}
|
||||
/>
|
||||
@@ -1380,19 +1402,21 @@ export default function Page() {
|
||||
/>
|
||||
<Row name="View range" value="viewRange" decimals={0} />
|
||||
<Row
|
||||
name="Camouflage still"
|
||||
name="Camouflage"
|
||||
value="camouflageStill"
|
||||
display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
|
||||
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||
/>
|
||||
<Row
|
||||
name="Camouflage moving"
|
||||
name="moving"
|
||||
indent
|
||||
value="camouflageMoving"
|
||||
display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
|
||||
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||
/>
|
||||
<Row
|
||||
name="Camouflage shooting still"
|
||||
name="shooting"
|
||||
indent
|
||||
value="camouflageShootingStill"
|
||||
display={(stats) =>
|
||||
(stats.camouflageShootingStill * 100).toFixed(0)
|
||||
@@ -1400,7 +1424,8 @@ export default function Page() {
|
||||
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||
/>
|
||||
<Row
|
||||
name="Camouflage shooting moving"
|
||||
name="shooting & moving"
|
||||
indent
|
||||
value="camouflageShootingMoving"
|
||||
display={(stats) =>
|
||||
(stats.camouflageShootingMoving * 100).toFixed(0)
|
||||
@@ -1408,7 +1433,8 @@ export default function Page() {
|
||||
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||
/>
|
||||
<Row
|
||||
name="Camouflage caught on fire"
|
||||
name="caught on fire"
|
||||
indent
|
||||
value="camouflageCaughtOnFire"
|
||||
display={(stats) =>
|
||||
(stats.camouflageCaughtOnFire * 100).toFixed(0)
|
||||
@@ -1416,29 +1442,32 @@ export default function Page() {
|
||||
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
|
||||
/>
|
||||
<Row
|
||||
name="Width"
|
||||
name="Volume"
|
||||
value="volume"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="width"
|
||||
indent
|
||||
value="width"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Height"
|
||||
name="height"
|
||||
indent
|
||||
value="height"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Length"
|
||||
name="length"
|
||||
indent
|
||||
value="length"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={1}
|
||||
/>
|
||||
<Row
|
||||
name="Volume"
|
||||
value="volume"
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={1}
|
||||
/>
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
|
||||
Reference in new issue
Block a user