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

fix: search result selection

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-16 14:07:29 -06:00
1 parent db0c4a1d71
commit 7e1949ccc7
2 files changed
+50 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/AntagonistBar/components/SearchResults.tsx
+48 -26
View File
@@ -1,16 +1,19 @@
import { Button, Flex, Text } from '@radix-ui/themes'; import { Button, Dialog, Flex, Text } from '@radix-ui/themes';
import { use } from 'react'; import { produce } from 'immer';
import { Dispatch, SetStateAction, use } from 'react';
import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon'; import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
import { import {
TIER_ROMAN_NUMERALS, TIER_ROMAN_NUMERALS,
tankDefinitions, tankDefinitions,
} from '../../../../../../../core/blitzkrieg/tankDefinitions'; } from '../../../../../../../core/blitzkrieg/tankDefinitions';
import { Duel } from '../../../page';
interface SearchResultsProps { interface SearchResultsProps {
ids: number[]; ids: number[];
setDuel: Dispatch<SetStateAction<Duel>>;
} }
export function SearchResults({ ids }: SearchResultsProps) { export function SearchResults({ ids, setDuel }: SearchResultsProps) {
const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankDefinitions = use(tankDefinitions);
return ( return (
@@ -20,31 +23,50 @@ export function SearchResults({ ids }: SearchResultsProps) {
const tank = awaitedTankDefinitions[id]; const tank = awaitedTankDefinitions[id];
return ( return (
<Button key={id} variant="ghost" style={{ width: '100%' }}> <Dialog.Close>
<Flex gap="2" align="start" style={{ width: '100%' }}> <Button
<Text align="right" color="gray" style={{ width: 24 }}> key={id}
{TIER_ROMAN_NUMERALS[tank.tier]} variant="ghost"
</Text> style={{ width: '100%' }}
onClick={() => {
setDuel(
produce<Duel>((draft) => {
draft.antagonist.tank = tank;
draft.antagonist.turret = tank.turrets.at(-1)!;
draft.antagonist.gun =
draft.antagonist.turret.guns.at(-1)!;
draft.antagonist.shell = draft.antagonist.gun.shells[0];
}),
);
}}
>
<Flex gap="2" align="start" style={{ width: '100%' }}>
<Text align="right" color="gray" style={{ width: 24 }}>
{TIER_ROMAN_NUMERALS[tank.tier]}
</Text>
<Text color={tank.tree_type === 'collector' ? 'blue' : 'amber'}> <Text
<Flex gap="2" align="center"> color={tank.tree_type === 'collector' ? 'blue' : 'amber'}
<SmallTankIcon id={tank.id} size={16} /> >
<Flex gap="2" align="center">
<SmallTankIcon id={tank.id} size={16} />
<div <div
style={{ style={{
display: 'block', display: 'block',
color: color:
tank.tree_type === 'researchable' tank.tree_type === 'researchable'
? 'white' ? 'white'
: undefined, : undefined,
}} }}
> >
{tank.name} {tank.name}
</div> </div>
</Flex> </Flex>
</Text> </Text>
</Flex> </Flex>
</Button> </Button>
</Dialog.Close>
); );
})} })}
</Flex> </Flex>
src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx
+2 -2
View File
@@ -143,9 +143,9 @@ export function AntagonistBar({
justifyContent: 'space-around', justifyContent: 'space-around',
}} }}
> >
<SearchResults ids={firstChunk} /> <SearchResults ids={firstChunk} setDuel={setDuel} />
{secondChunk.length > 0 && ( {secondChunk.length > 0 && (
<SearchResults ids={secondChunk} /> <SearchResults ids={secondChunk} setDuel={setDuel} />
)} )}
</div> </div>
</Flex> </Flex>