diff --git a/src/app/tools/tankopedia/[id]/components/VersusBar.tsx b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx similarity index 85% rename from src/app/tools/tankopedia/[id]/components/VersusBar.tsx rename to src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx index 87e7565da..09bbd553c 100644 --- a/src/app/tools/tankopedia/[id]/components/VersusBar.tsx +++ b/src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx @@ -2,6 +2,7 @@ import { CaretRightIcon, Cross1Icon, MagnifyingGlassIcon, + ShuffleIcon, } from '@radix-ui/react-icons'; import { Button, @@ -16,6 +17,7 @@ import { } from '@radix-ui/themes'; import { go } from 'fuzzysort'; import { debounce } from 'lodash'; +import { useRouter } from 'next/navigation'; import { use, useRef, useState } from 'react'; import { ModuleButton } from '../../../../../components/ModuleButton'; import { SmallTankIcon } from '../../../../../components/SmallTankIcon'; @@ -28,25 +30,46 @@ import mutateTankopedia, { useTankopedia, } from '../../../../../stores/tankopedia'; -export function VersusBar() { +export function AntagonistBar() { + const router = useRouter(); const awaitedTankDefinitions = use(tankDefinitions); const mode = useTankopedia((state) => state.mode); const awaitedTankNamesDiacritics = use(tankNamesDiacritics); - const [versusTankTab, setVersusTankTab] = useState('search'); - const versusTankSearchInput = useRef(null); + const [tab, setTab] = useState('search'); + const searchInput = useRef(null); const antagonist = useTankopedia((state) => { if (!state.areTanksAssigned) return; return state.antagonist; }); - const [versusTankSearchResults, setVersusTankSearchResults] = useState< - number[] - >([]); + const [searchResults, setSearchResults] = useState([]); if (!antagonist || mode !== 'armor') return null; return ( + + {antagonist.gun.shells.map((shell, index) => { + return ( + { + mutateTankopedia((draft) => { + if (!draft.areTanksAssigned) return; + draft.antagonist.shell = shell; + }); + }} + /> + ); + })} + + Versus @@ -63,8 +86,8 @@ export function VersusBar() { @@ -94,12 +117,12 @@ export function VersusBar() { { - setVersusTankSearchResults( + setSearchResults( go( - versusTankSearchInput.current!.value, + searchInput.current!.value, awaitedTankNamesDiacritics, { key: 'combined', limit: 8 }, ).map((item) => item.obj.id), @@ -109,10 +132,10 @@ export function VersusBar() { - {(versusTankSearchResults.length > 0 || - versusTankSearchInput.current?.value) && ( + {(searchResults.length > 0 || + searchInput.current?.value) && ( - {versusTankSearchResults + {searchResults .map((id) => awaitedTankDefinitions[id]) .map((tank) => ( ))} - {versusTankSearchResults.length === 0 && - (versusTankSearchInput.current - ? versusTankSearchInput.current.value.length > 0 + {searchResults.length === 0 && + (searchInput.current + ? searchInput.current.value.length > 0 : false) && ( - - */} - + ); diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index cb427b6d2..1e4092517 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -12,8 +12,8 @@ import { tankDefinitions, } from '../../../../core/blitzkrieg/tankDefinitions'; import mutateTankopedia, { useTankopedia } from '../../../../stores/tankopedia'; +import { AntagonistBar } from './components/AntagonistBar'; import { TankDisplay } from './components/Model/TankDisplay'; -import { VersusBar } from './components/VersusBar'; export default function Page({ params }: { params: { id: string } }) { const id = parseInt(params.id); @@ -33,10 +33,8 @@ export default function Page({ params }: { params: { id: string } }) { draft.protagonist.tank = awaitedTankDefinitions[id]; draft.protagonist.turret = draft.protagonist.tank.turrets.at(-1)!; draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!; - draft.antagonist = { - ...draft.protagonist, - shell: draft.protagonist.gun.shells[0], - }; + draft.protagonist.shell = draft.protagonist.gun.shells[0]; + draft.antagonist = draft.protagonist; }); function handleKeyDown(event: KeyboardEvent) { @@ -101,7 +99,7 @@ export default function Page({ params }: { params: { id: string } }) { - + diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index ff28a2009..63441ffce 100644 --- a/src/stores/tankopedia.ts +++ b/src/stores/tankopedia.ts @@ -42,6 +42,7 @@ type Tankopedia = { tank: TankDefinition; turret: TurretDefinition; gun: GunDefinition; + shell: ShellDefinition; }; antagonist: { tank: TankDefinition;