TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-28 21:19:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: colored search results

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-07 19:41:37 -06:00
1 parent 88a6ab2d95
commit 5a25f335cd
2 files changed
+76 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/VersusBar.tsx
+69 -29
View File
@@ -1,4 +1,8 @@
import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons'; import {
CaretRightIcon,
Cross1Icon,
MagnifyingGlassIcon,
} from '@radix-ui/react-icons';
import { import {
Button, Button,
Card, Card,
@@ -17,6 +21,7 @@ import { use, useRef, useState } from 'react';
import { ModuleButtons } from '../../../../../components/ModuleButton'; import { ModuleButtons } from '../../../../../components/ModuleButton';
import { asset } from '../../../../../core/blitzkrieg/asset'; import { asset } from '../../../../../core/blitzkrieg/asset';
import { import {
SHELL_NAMES,
tankDefinitions, tankDefinitions,
tankNamesDiacritics, tankNamesDiacritics,
} from '../../../../../core/blitzkrieg/tankDefinitions'; } from '../../../../../core/blitzkrieg/tankDefinitions';
@@ -31,7 +36,6 @@ export function VersusBar() {
const [versusTankTab, setVersusTankTab] = useState('search'); const [versusTankTab, setVersusTankTab] = useState('search');
const versusTankSearchInput = useRef<HTMLInputElement>(null); const versusTankSearchInput = useRef<HTMLInputElement>(null);
const antagonist = useTankopedia((state) => { const antagonist = useTankopedia((state) => {
// goofy ahh typescript discriminator hack
if (!state.areTanksAssigned) return; if (!state.areTanksAssigned) return;
return state.antagonist; return state.antagonist;
}); });
@@ -56,7 +60,20 @@ export function VersusBar() {
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Content> <Dialog.Content>
<Tabs.Root value={versusTankTab} onValueChange={setVersusTankTab}> <Tabs.Root
value={versusTankTab}
onValueChange={setVersusTankTab}
style={{ position: 'relative' }}
>
<Dialog.Close>
<Button
variant="ghost"
style={{ position: 'absolute', right: 0, top: 8 }}
>
<Cross1Icon />
</Button>
</Dialog.Close>
<Flex gap="4" direction="column"> <Flex gap="4" direction="column">
<Tabs.List> <Tabs.List>
<Tabs.Trigger value="search">Search</Tabs.Trigger> <Tabs.Trigger value="search">Search</Tabs.Trigger>
@@ -93,30 +110,37 @@ export function VersusBar() {
{(versusTankSearchResults.length > 0 || {(versusTankSearchResults.length > 0 ||
versusTankSearchInput.current?.value) && ( versusTankSearchInput.current?.value) && (
<Flex direction="column" gap="2"> <Flex direction="column" gap="2">
{versusTankSearchResults.map((id) => ( {versusTankSearchResults
<Button .map((id) => awaitedTankDefinitions[id])
key={id} .map((tank) => (
variant="ghost" <Button
onClick={() => { color={
const thisTank = awaitedTankDefinitions[id]; tank.tree_type === 'researchable'
? 'gray'
: tank.tree_type === 'premium'
? 'amber'
: 'blue'
}
key={tank.id}
variant="ghost"
onClick={() => {
mutateTankopedia((draft) => {
if (!draft.areTanksAssigned) return;
mutateTankopedia((draft) => { draft.antagonist.tank = tank;
if (!draft.areTanksAssigned) return; draft.antagonist.turret =
tank.turrets.at(-1)!;
draft.antagonist.tank = thisTank; draft.antagonist.gun =
draft.antagonist.turret = draft.antagonist.turret.guns.at(-1)!;
thisTank.turrets.at(-1)!; });
draft.antagonist.gun = setVersusTankSearchResults([]);
draft.antagonist.turret.guns.at(-1)!; versusTankSearchInput.current!.value = '';
}); setVersusTankTab('configure');
setVersusTankSearchResults([]); }}
versusTankSearchInput.current!.value = ''; >
setVersusTankTab('configure'); {tank.name}
}} </Button>
> ))}
{awaitedTankDefinitions[id].name}
</Button>
))}
{versusTankSearchResults.length === 0 && {versusTankSearchResults.length === 0 &&
(versusTankSearchInput.current (versusTankSearchInput.current
@@ -135,7 +159,9 @@ export function VersusBar() {
<Tabs.Content value="configure"> <Tabs.Content value="configure">
<Flex direction="column" gap="4"> <Flex direction="column" gap="4">
<Flex direction="column" gap="2" style={{ flex: 1 }}> <Flex direction="column" gap="2" style={{ flex: 1 }}>
<Heading size="4">Configuration</Heading> <Heading size="4">
{antagonist.tank.name} modules
</Heading>
<Flex gap="2" wrap="wrap"> <Flex gap="2" wrap="wrap">
<Flex> <Flex>
@@ -213,11 +239,25 @@ export function VersusBar() {
</Flex> </Flex>
</Flex> </Flex>
<Flex direction="column" gap="2" style={{ flex: 1 }}> <Flex direction="column" style={{ flex: 1 }}>
<Heading size="4">Properties</Heading> <Heading size="4">Properties</Heading>
<ul> <ul>
<li>Penetration</li> <li>
Turret: <b>{antagonist.turret.name}</b>
</li>
<li>
Gun: <b>{antagonist.gun.name}</b>
</li>
<li>Shells:</li>
<ul>
{antagonist.gun.shells.map((shell) => (
<li key={shell.id}>
{SHELL_NAMES[shell.type]}:{' '}
<b>{shell.damage.armor} HP</b>
</li>
))}
</ul>
</ul> </ul>
</Flex> </Flex>
</Flex> </Flex>
src/core/blitzkrieg/tankDefinitions.ts
+7
View File
@@ -4,6 +4,13 @@ import { asset } from './asset';
export type ShellType = 'ap' | 'ap_cr' | 'hc' | 'he'; export type ShellType = 'ap' | 'ap_cr' | 'hc' | 'he';
export const SHELL_NAMES: Record<ShellType, string> = {
ap: 'AP',
ap_cr: 'APCR',
hc: 'HEAT',
he: 'HE',
};
export type TankDefinitions = Record<number, TankDefinition>; export type TankDefinitions = Record<number, TankDefinition>;
export interface TankDefinition { export interface TankDefinition {
id: number; id: number;