fix: search result selection

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

No files matched your search

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