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

feat: better titles

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-05 13:40:18 -05:00
1 parent 8565d75747
commit cf419a9ebb
2 files changed
+89 -94
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/components/TankControl.tsx
+65 -67
View File
@@ -4,7 +4,7 @@ import {
ShuffleIcon,
TrashIcon,
} from '@radix-ui/react-icons';
import { Dialog, Flex, IconButton, Table } from '@radix-ui/themes';
import { Dialog, Flex, IconButton } from '@radix-ui/themes';
import { useState } from 'react';
import { TankDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
import { tankToDuelMember } from '../../../../core/blitzkrieg/tankToDuelMember';
@@ -21,81 +21,79 @@ export function TankControl({ index, tank, members }: TankControlProps) {
const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
return (
<Table.ColumnHeaderCell width="0" key={tank.id}>
<Flex gap="4" style={{ padding: '0 4px' }}>
{index !== 0 && (
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
const item = draft.members[index];
draft.members.splice(index, 1);
draft.members.splice(index - 1, 0, item);
});
}}
>
<CaretLeftIcon />
</IconButton>
)}
<Flex gap="4" style={{ padding: '0 4px' }}>
{index !== 0 && (
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
const item = draft.members[index];
draft.members.splice(index, 1);
draft.members.splice(index - 1, 0, item);
});
}}
>
<TrashIcon />
<CaretLeftIcon />
</IconButton>
<Dialog.Root
open={switchTankDialogOpen}
onOpenChange={setSwitchTankDialogOpen}
>
<Dialog.Trigger>
<IconButton variant="ghost">
<ShuffleIcon />
</IconButton>
</Dialog.Trigger>
<Dialog.Content>
<Flex gap="4" direction="column">
<Flex
direction="column"
gap="4"
style={{ flex: 1 }}
justify="center"
>
<TankSearch
compact
onSelect={(tank) => {
mutateCompare((draft) => {
draft.members[index] = {
...tankToDuelMember(tank),
crewSkills: {},
};
});
setSwitchTankDialogOpen(false);
}}
/>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
{index !== members.length - 1 && (
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
const item = draft.members[index];
draft.members.splice(index, 1);
draft.members.splice(index + 1, 0, item);
});
}}
>
<CaretRightIcon />
)}
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
draft.members.splice(index, 1);
});
}}
>
<TrashIcon />
</IconButton>
<Dialog.Root
open={switchTankDialogOpen}
onOpenChange={setSwitchTankDialogOpen}
>
<Dialog.Trigger>
<IconButton variant="ghost">
<ShuffleIcon />
</IconButton>
)}
</Flex>
</Table.ColumnHeaderCell>
</Dialog.Trigger>
<Dialog.Content>
<Flex gap="4" direction="column">
<Flex
direction="column"
gap="4"
style={{ flex: 1 }}
justify="center"
>
<TankSearch
compact
onSelect={(tank) => {
mutateCompare((draft) => {
draft.members[index] = {
...tankToDuelMember(tank),
crewSkills: {},
};
});
setSwitchTankDialogOpen(false);
}}
/>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
{index !== members.length - 1 && (
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
const item = draft.members[index];
draft.members.splice(index, 1);
draft.members.splice(index + 1, 0, item);
});
}}
>
<CaretRightIcon />
</IconButton>
)}
</Flex>
);
}
src/app/tools/compare/page.tsx
+24 -27
View File
@@ -189,15 +189,17 @@ export default function Page() {
function Title({ children }: { children: string }) {
return (
<Table.Row>
<Table.RowHeaderCell>
<Heading>{children}</Heading>
</Table.RowHeaderCell>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
<Heading size="4">{children}</Heading>
</Table.ColumnHeaderCell>
{members.map(() => (
<Table.Cell />
))}
</Table.Row>
{members.map(() => (
<Table.ColumnHeaderCell />
))}
</Table.Row>
</Table.Header>
);
}
@@ -260,22 +262,7 @@ export default function Page() {
<Table.Row>
<Table.ColumnHeaderCell />
{members.map(({ tank }, index) => (
<TankControl
index={index}
key={tank.id}
tank={tank}
members={members}
/>
))}
</Table.Row>
</Table.Header>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{members.map(({ tank }) => {
{members.map(({ tank }, index) => {
return (
<Table.ColumnHeaderCell width="0" key={tank.id}>
<Flex
@@ -285,6 +272,12 @@ export default function Page() {
gap="2"
style={{ height: '100%' }}
>
<TankControl
index={index}
key={tank.id}
tank={tank}
members={members}
/>
<img
src={tankIcon(tank.id)}
width={64}
@@ -301,8 +294,8 @@ export default function Page() {
</Table.Row>
</Table.Header>
<Title>Fire</Title>
<Table.Body>
<Title>Fire</Title>
<Row name="DPM" value="dpm" decimals={0} />
<Row
name="Reload"
@@ -376,8 +369,10 @@ export default function Page() {
/>
<Row name="Gun depression" value="gunDepression" decimals={1} />
<Row name="Gun elevation" value="gunElevation" decimals={1} />
</Table.Body>
<Title>Maneuverability</Title>
<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} />
@@ -396,8 +391,10 @@ export default function Page() {
value="powerToWeightRatioSoftTerrain"
decimals={1}
/>
</Table.Body>
<Title>Survivability</Title>
<Title>Survivability</Title>
<Table.Body>
<Row name="Health" value="health" decimals={0} />
<Row
name="Fire chance"