TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 20:19:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: better shot card alignment

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-08-29 23:24:12 -05:00
1 parent 26f6889012
commit 0546ddefbd
1 file changed
+27 -13
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/Armor/components/ShotDisplayCard.tsx
+27 -13
View File
@@ -37,17 +37,23 @@ function LayerEntry({
const { locale, strings } = useLocale(); const { locale, strings } = useLocale();
return ( return (
<Flex align="center" gap="2"> <tr>
<Text size="1" color="gray" style={{ width: 12 }}> <td>
<Text size="1" color="gray">
{layerIndex} {layerIndex}
</Text> </Text>
<Text size="2" color={shotStatusColor} style={{ width: 48 }}> </td>
<td>
<Text size="2" color={shotStatusColor}>
{layerName} {layerName}
</Text> </Text>
</td>
<td>
{layer.type === null && ( {layer.type === null && (
<> <>
<Text size="2" color={shotStatusColor} style={{ width: 64 }}> <Text size="2" color={shotStatusColor}>
{literals(strings.common.units.mm, [ {literals(strings.common.units.mm, [
Math.round(layer.distance * 1000).toLocaleString(locale), Math.round(layer.distance * 1000).toLocaleString(locale),
])} ])}
@@ -64,17 +70,15 @@ function LayerEntry({
)} )}
{layer.type === ArmorType.External && ( {layer.type === ArmorType.External && (
<Text size="2" color={shotStatusColor} style={{ width: 64 }}> <Text size="2" color={shotStatusColor}>
{literals(strings.common.units.mm, [ {literals(strings.common.units.mm, [
Math.round(layer.thickness).toLocaleString(locale), Math.round(layer.thickness).toLocaleString(locale),
])} ])}
</Text> </Text>
)} )}
{(layer.type === ArmorType.Primary || {(layer.type === ArmorType.Primary ||
layer.type === ArmorType.Spaced) && ( layer.type === ArmorType.Spaced) && (
<> <Text size="2" color={shotStatusColor}>
<Text size="2" color={shotStatusColor} style={{ width: 80 }}>
{literals( {literals(
angle === undefined angle === undefined
? strings.common.units.mm ? strings.common.units.mm
@@ -86,7 +90,12 @@ function LayerEntry({
], ],
)} )}
</Text> </Text>
)}
</td>
{(layer.type === ArmorType.Primary ||
layer.type === ArmorType.Spaced) && (
<td>
<Text size="2" color="gray"> <Text size="2" color="gray">
{literals( {literals(
strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats
@@ -94,9 +103,9 @@ function LayerEntry({
[Math.round(layer.thickness).toLocaleString(locale)], [Math.round(layer.thickness).toLocaleString(locale)],
)} )}
</Text> </Text>
</> </td>
)} )}
</Flex> </tr>
); );
} }
@@ -115,7 +124,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
const inTitleColor = shotStatusColors[shot.in.status]; const inTitleColor = shotStatusColors[shot.in.status];
return ( return (
<Card variant="classic" style={{ width: 300 }} {...props}> <Card variant="classic" {...props}>
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
<Flex direction="column" gap="1"> <Flex direction="column" gap="1">
<Text color={inTitleColor} weight="bold"> <Text color={inTitleColor} weight="bold">
@@ -127,7 +136,12 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
)} )}
</Text> </Text>
<Flex direction="column"> <table
style={{
whiteSpace: 'nowrap',
borderSpacing: 'var(--space-1) 0',
}}
>
{shot.in.layers.map((layer, index) => { {shot.in.layers.map((layer, index) => {
const layerName = const layerName =
strings.website.tools.tankopedia.sandbox.dynamic.shot_card strings.website.tools.tankopedia.sandbox.dynamic.shot_card
@@ -161,7 +175,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
/> />
); );
})} })}
</Flex> </table>
</Flex> </Flex>
{shot.out && shot.out.layers.length > 0 && ( {shot.out && shot.out.layers.length > 0 && (