mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
fix: search result selection
This commit is contained in:
1 parent
db0c4a1d71
commit
7e1949ccc7
2 files changed
+50
-28
No files matched your search
+48
-26
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user