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

feat: some button functionality

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-04 16:14:01 -05:00
1 parent 753804b8cf
commit d25da724e1
2 files changed
+185 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/page.tsx
+132 -18
View File
@@ -1,10 +1,26 @@
'use client';
import { PlusIcon } from '@radix-ui/react-icons';
import { Button, Dialog, Flex, Table, Text } from '@radix-ui/themes';
import {
CaretLeftIcon,
CaretRightIcon,
PlusIcon,
ShuffleIcon,
TrashIcon,
} from '@radix-ui/react-icons';
import {
Button,
Dialog,
Flex,
IconButton,
Table,
Text,
} from '@radix-ui/themes';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import PageWrapper from '../../../components/PageWrapper';
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
import { tankCharacteristics } from '../../../core/blitzkrieg/tankCharacteristics';
import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions';
import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
@@ -22,22 +38,29 @@ export default function Page() {
const searchParams = useSearchParams();
const tanks = useCompare((state) => state.tanks);
const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
const statsPromise = useMemo(
const awaitedModelDefinitions = use(modelDefinitions);
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const awaitedProvisionDefinitions = use(provisionDefinitions);
const stats = useMemo(
() =>
Promise.all(
tanks.map((item) =>
tankCharacteristics({
tanks.map((item) =>
tankCharacteristics(
{
...item,
stockEngine: item.tank.engines[0],
stockGun: item.tank.turrets[0].guns[0],
stockTrack: item.tank.tracks[0],
stockTurret: item.tank.turrets[0],
}),
},
{
equipmentDefinitions: awaitedEquipmentDefinitions,
modelDefinitions: awaitedModelDefinitions,
provisionDefinitions: awaitedProvisionDefinitions,
},
),
),
[tanks],
);
const stats = use(statsPromise);
const createQueryString = useCallback(
(name: string, value: string) => {
const params = new URLSearchParams(searchParams.toString());
@@ -50,6 +73,13 @@ export default function Page() {
const hasNonRegularGun = tanks.some(({ gun }) => gun.type !== 'regular');
useEffect(() => {
router.push(
pathname +
'?' +
createQueryString('tanks', tanks.map(({ tank }) => tank.id).join(',')),
);
}, [tanks]);
useEffect(() => {
const tanksParam = searchParams.get('tanks');
@@ -164,15 +194,6 @@ export default function Page() {
...tankToDuelMember(tank),
crewSkills: {},
});
router.push(
pathname +
'?' +
createQueryString(
'tanks',
draft.tanks.map(({ tank }) => tank.id).join(','),
),
);
});
setAddTankDialogOpen(false);
@@ -192,6 +213,93 @@ export default function Page() {
maxWidth: '100%',
}}
>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{tanks.map(({ tank }, index) => {
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.tanks[index];
draft.tanks.splice(index, 1);
draft.tanks.splice(index - 1, 0, item);
});
}}
>
<CaretLeftIcon />
</IconButton>
)}
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
draft.tanks.splice(index, 1);
});
}}
>
<TrashIcon />
</IconButton>
<Dialog.Root
open={addTankDialogOpen}
onOpenChange={setAddTankDialogOpen}
>
<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.tanks[index] = {
...tankToDuelMember(tank),
crewSkills: {},
};
});
setAddTankDialogOpen(false);
}}
/>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
{index !== tanks.length - 1 && (
<IconButton
variant="ghost"
onClick={() => {
mutateCompare((draft) => {
const item = draft.tanks[index];
draft.tanks.splice(index, 1);
draft.tanks.splice(index + 1, 0, item);
});
}}
>
<CaretRightIcon />
</IconButton>
)}
</Flex>
</Table.ColumnHeaderCell>
);
})}
</Table.Row>
</Table.Header>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
@@ -199,7 +307,13 @@ export default function Page() {
{tanks.map(({ tank }) => {
return (
<Table.ColumnHeaderCell width="0" key={tank.id}>
<Flex direction="column" align="center">
<Flex
direction="column"
align="center"
justify="between"
gap="2"
style={{ height: '100%' }}
>
<img
src={tankIcon(tank.id)}
width={64}