From 3448427de051a312443e777096e08c4df527235e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:35:27 -0500 Subject: [PATCH] feat: reintroduced links --- src/app/tools/compare/page.tsx | 92 +++++++++++++++++-------- src/core/blitzkrieg/tankToDuelMember.ts | 22 ++++++ 2 files changed, 85 insertions(+), 29 deletions(-) create mode 100644 src/core/blitzkrieg/tankToDuelMember.ts diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx index e74f2111c..ce26b6f8a 100644 --- a/src/app/tools/compare/page.tsx +++ b/src/app/tools/compare/page.tsx @@ -2,32 +2,70 @@ import { PlusIcon } from '@radix-ui/react-icons'; import { Button, Dialog, Flex, Table, Text } from '@radix-ui/themes'; -import { useSearchParams } from 'next/navigation'; -import { use, useState } from 'react'; +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; +import { use, useCallback, useEffect, useMemo, useState } from 'react'; import PageWrapper from '../../../components/PageWrapper'; import { tankCharacteristics } from '../../../core/blitzkrieg/tankCharacteristics'; +import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions'; import { tankIcon } from '../../../core/blitzkrieg/tankIcon'; -import mutateCompare, { useCompare } from '../../../stores/compare'; -import { genericDefaultEquipmentMatrix } from '../../../stores/duel/constants'; +import { tankToDuelMember } from '../../../core/blitzkrieg/tankToDuelMember'; +import mutateCompare, { + CompareMember, + useCompare, +} from '../../../stores/compare'; import { TankSearch } from '../tankopedia/components/TankSearch'; export default function Page() { + const pathname = usePathname(); + const router = useRouter(); + const awaitedTankDefinitions = use(tankDefinitions); const searchParams = useSearchParams(); const tanks = useCompare((state) => state.tanks); const [addTankDialogOpen, setAddTankDialogOpen] = useState(false); - const stats = use( - Promise.all( - 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], - }), + const statsPromise = useMemo( + () => + Promise.all( + 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], + }), + ), ), - ), + [tanks], ); + const stats = use(statsPromise); + const createQueryString = useCallback( + (name: string, value: string) => { + const params = new URLSearchParams(searchParams.toString()); + params.set(name, value); + + return params.toString(); + }, + [searchParams], + ); + + useEffect(() => { + const tanksParam = searchParams.get('tanks'); + + if (tanksParam) { + mutateCompare((draft) => { + draft.tanks = tanksParam + .split(',') + .map(Number) + .map( + (id) => + ({ + ...tankToDuelMember(awaitedTankDefinitions[id]), + crewSkills: {}, + }) satisfies CompareMember, + ); + }); + } + }, []); function Row({ value, @@ -85,22 +123,18 @@ export default function Page() { onSelect={(tank) => { mutateCompare((draft) => { draft.tanks.push({ - camouflage: true, - consumables: [], - equipmentMatrix: genericDefaultEquipmentMatrix, - cooldownBooster: 0, - crewMastery: 1, - provisions: [], - engine: tank.engines.at(-1)!, - gun: tank.turrets.at(-1)!.guns.at(-1)!, - shell: tank.turrets.at(-1)!.guns.at(-1)!.shells[0], - tank, - track: tank.tracks.at(-1)!, - yaw: 0, - pitch: 0, - turret: tank.turrets.at(-1)!, + ...tankToDuelMember(tank), crewSkills: {}, }); + + router.push( + pathname + + '?' + + createQueryString( + 'tanks', + draft.tanks.map(({ tank }) => tank.id).join(','), + ), + ); }); setAddTankDialogOpen(false); diff --git a/src/core/blitzkrieg/tankToDuelMember.ts b/src/core/blitzkrieg/tankToDuelMember.ts new file mode 100644 index 000000000..6062cce30 --- /dev/null +++ b/src/core/blitzkrieg/tankToDuelMember.ts @@ -0,0 +1,22 @@ +import { DuelMember } from '../../stores/duel'; +import { genericDefaultEquipmentMatrix } from '../../stores/duel/constants'; +import { TankDefinition } from './tankDefinitions'; + +export function tankToDuelMember(tank: TankDefinition) { + return { + camouflage: true, + consumables: [], + equipmentMatrix: genericDefaultEquipmentMatrix, + cooldownBooster: 0, + crewMastery: 1, + provisions: [], + engine: tank.engines.at(-1)!, + gun: tank.turrets.at(-1)!.guns.at(-1)!, + shell: tank.turrets.at(-1)!.guns.at(-1)!.shells[0], + tank, + track: tank.tracks.at(-1)!, + yaw: 0, + pitch: 0, + turret: tank.turrets.at(-1)!, + } satisfies DuelMember; +}