feat: move shell selector to firepower header

This commit is contained in:
TrèsAbhi committed 2024-06-29 11:49:55 -05:00
1 parent 1eddb33380
commit cf68c9812c
1 file changed
+56 -44
+56 -44
View File
@@ -1160,49 +1160,6 @@ export default function Page() {
</Popover.Content>
</Popover.Root>
</Flex>
<Flex mt="1">
{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={() => {
mutateCompareTemporary((draft) => {
draft.members[index].shell = thisShell;
});
}}
>
<img
alt={thisShell.name}
width={16}
height={16}
src={asset(
`icons/shells/${thisShell.icon}.webp`,
)}
/>
</IconButton>
))}
</Flex>
</Flex>
</Table.Cell>
);
@@ -1211,7 +1168,62 @@ export default function Page() {
</Table.Row>
</Table.Body>
<Title>Firepower</Title>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
<Flex height="100%" align="center">
<Heading size="4">Firepower</Heading>
</Flex>
</Table.ColumnHeaderCell>
{members.map(({ gun, shell, key }, index) => (
<Table.ColumnHeaderCell key={key}>
<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={() => {
mutateCompareTemporary((draft) => {
draft.members[index].shell = thisShell;
});
}}
>
<img
alt={thisShell.name}
width={16}
height={16}
src={asset(
`icons/shells/${thisShell.icon}.webp`,
)}
/>
</IconButton>
))}
</Flex>
</Flex>
</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
<Row name="DPM" value="dpm" decimals={0} />
<Row