feat: clean url handling

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   Tooltip,
 } from '@radix-ui/themes';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
 import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
@@ -18,6 +19,7 @@ import {
   SHELL_NAMES,
   TIER_ROMAN_NUMERALS,
 } from '../../../../../core/blitzkrieg/tankDefinitions';
+import { updateTankopediaUrl } from '../../../../../core/blitzkrieg/updateTankopediaURL';
 import { mutateDuel, useDuel } from '../../../../../stores/duel';
 import {
   mutateTankopediaTemporary,
@@ -35,6 +37,7 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
   const [tab, setTab] = useState('search');
   const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
     useState(false);
+  const router = useRouter();
 
   if (mode !== 'armor') return null;
 
@@ -259,10 +262,11 @@ export function AntagonistBar({ floating }: AntagonistBarProps) {
                 draft.antagonist,
                 draft.protagonist,
               ];
+              updateTankopediaUrl(draft.antagonist!.tank.id);
             });
           }}
         >
-          <ShuffleIcon /> Swap tanks
+          <ShuffleIcon /> Swap
         </Button>
       </Flex>
     </Card>

src/app/tools/tankopedia/[id]/components/Title.tsx

@@ -2,7 +2,9 @@ import { UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Dialog, Flex, Heading } from '@radix-ui/themes';
 import { useState } from 'react';
 import { TREE_TYPE_ICONS } from '../../../../../components/Tanks';
-import { mutateDuel, useDuel } from '../../../../../stores/duel';
+import { assignDuelMember } from '../../../../../core/blitzkrieg/assignDuelMember';
+import { updateTankopediaUrl } from '../../../../../core/blitzkrieg/updateTankopediaURL';
+import { useDuel } from '../../../../../stores/duel';
 import { TankSearch } from '../../components/TankSearch';
 
 export function Title() {
@@ -62,17 +64,9 @@ export function Title() {
                 <TankSearch
                   compact
                   onSelect={(tank) => {
-                    mutateDuel((draft) => {
+                    assignDuelMember('protagonist', tank.id);
-                      draft.protagonist!.tank = tank;
-                      draft.protagonist!.engine = tank.engines.at(-1)!;
-                      draft.protagonist!.track = tank.tracks.at(-1)!;
-                      draft.protagonist!.turret = tank.turrets.at(-1)!;
-                      draft.protagonist!.gun =
-                        draft.protagonist!.turret.guns.at(-1)!;
-                      draft.protagonist!.shell =
-                        draft.protagonist!.gun.shells[0];
-                    });
                     setChangeTankDialogOpen(false);
+                    updateTankopediaUrl(tank.id);
                   }}
                 />
               </Flex>

src/core/blitzkrieg/updateTankopediaUrl.ts

@@ -0,0 +1,3 @@
+export function updateTankopediaUrl(id: number) {
+  window.history.pushState(null, '', `/tools/tankopedia/${id}`);
+}