TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 12:09:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove tooltips in tank filters

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-10-24 15:34:02 -05:00
1 parent 2c0965f437
commit f6cf4a87f9
1 file changed
+232 -308
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/TankSearch/components/FilterControl.tsx
+232 -308
View File
@@ -6,10 +6,9 @@ import {
TIER_ROMAN_NUMERALS, TIER_ROMAN_NUMERALS,
type Tier, type Tier,
} from '@blitzkit/core'; } from '@blitzkit/core';
import strings from '@blitzkit/core/lang/en-US.json';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons'; import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes'; import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash-es'; import { times } from 'lodash-es';
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters'; import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
import { classIcons } from '../../ClassIcon'; import { classIcons } from '../../ClassIcon';
@@ -40,30 +39,25 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.tiers?.includes(tier); const selected = tankFilters.tiers?.includes(tier);
return ( return (
<Tooltip key={tier} content={`Tier ${tier}`}> <IconButton
<IconButton key={tier}
key={tier} variant={selected ? 'solid' : 'soft'}
variant={selected ? 'solid' : 'soft'} radius="none"
radius="none" color={selected ? undefined : 'gray'}
color={selected ? undefined : 'gray'} highContrast
highContrast onClick={() => {
onClick={() => { if (tankFilters.tiers.includes(tier)) {
if (tankFilters.tiers.includes(tier)) { $tankFilters.setKey(
$tankFilters.setKey( 'tiers',
'tiers', tankFilters.tiers.filter((t) => t !== tier),
tankFilters.tiers.filter((t) => t !== tier), );
); } else {
} else { $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
$tankFilters.setKey('tiers', [ }
...tankFilters.tiers, }}
tier, >
]); <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
} </IconButton>
}}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
); );
})} })}
</Flex> </Flex>
@@ -73,30 +67,25 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.tiers?.includes(tier); const selected = tankFilters.tiers?.includes(tier);
return ( return (
<Tooltip key={tier} content={`Tier ${tier}`}> <IconButton
<IconButton key={tier}
key={tier} variant={selected ? 'solid' : 'soft'}
variant={selected ? 'solid' : 'soft'} radius="none"
radius="none" color={selected ? undefined : 'gray'}
color={selected ? undefined : 'gray'} highContrast
highContrast onClick={() => {
onClick={() => { if (tankFilters.tiers.includes(tier)) {
if (tankFilters.tiers.includes(tier)) { $tankFilters.setKey(
$tankFilters.setKey( 'tiers',
'tiers', tankFilters.tiers.filter((t) => t !== tier),
tankFilters.tiers.filter((t) => t !== tier), );
); } else {
} else { $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
$tankFilters.setKey('tiers', [ }
...tankFilters.tiers, }}
tier, >
]); <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
} </IconButton>
}}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
</Tooltip>
); );
})} })}
</Flex> </Flex>
@@ -114,50 +103,31 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.nations?.includes(nation); const selected = tankFilters.nations?.includes(nation);
return ( return (
<Tooltip <IconButton
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation} key={nation}
> variant={selected ? 'solid' : 'soft'}
<IconButton color={selected ? undefined : 'gray'}
variant={selected ? 'solid' : 'soft'} highContrast
color={selected ? undefined : 'gray'} radius="none"
highContrast onClick={() => {
radius="none" if (tankFilters.nations.includes(nation)) {
onClick={() => $tankFilters.setKey(
// mutateTankFilters((draft) => { 'nations',
// if (draft.nations?.includes(nation)) { tankFilters.nations.filter((n) => n !== nation),
// draft.nations = draft.nations?.filter( );
// (n) => n !== nation, } else {
// ); $tankFilters.setKey('nations', [
// } else { ...tankFilters.nations,
// draft.nations = [...(draft.nations ?? []), nation]; nation,
// } ]);
// })
{
if (tankFilters.nations.includes(nation)) {
$tankFilters.setKey(
'nations',
tankFilters.nations.filter((n) => n !== nation),
);
} else {
$tankFilters.setKey('nations', [
...tankFilters.nations,
nation,
]);
}
}
} }
> }}
<img >
style={{ width: '1em', height: '1em' }} <img
src={asset(`flags/circle/${nation}.webp`)} style={{ width: '1em', height: '1em' }}
/> src={asset(`flags/circle/${nation}.webp`)}
</IconButton> />
</Tooltip> </IconButton>
); );
})} })}
</Flex> </Flex>
@@ -168,52 +138,32 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.nations?.includes(nation); const selected = tankFilters.nations?.includes(nation);
return ( return (
<Tooltip <IconButton
content={
strings.common.nations[
nation as keyof typeof strings.common.nations
]
}
key={nation} key={nation}
> style={{ flex: 1 }}
<IconButton variant={selected ? 'solid' : 'soft'}
key={nation} color={selected ? undefined : 'gray'}
style={{ flex: 1 }} highContrast
variant={selected ? 'solid' : 'soft'} radius="none"
color={selected ? undefined : 'gray'} onClick={() => {
highContrast if (tankFilters.nations.includes(nation)) {
radius="none" $tankFilters.setKey(
onClick={() => 'nations',
// mutateTankFilters((draft) => { tankFilters.nations.filter((n) => n !== nation),
// if (draft.nations?.includes(nation)) { );
// draft.nations = draft.nations?.filter( } else {
// (n) => n !== nation, $tankFilters.setKey('nations', [
// ); ...tankFilters.nations,
// } else { nation,
// draft.nations = [...(draft.nations ?? []), nation]; ]);
// }
// })
{
if (tankFilters.nations.includes(nation)) {
$tankFilters.setKey(
'nations',
tankFilters.nations.filter((n) => n !== nation),
);
} else {
$tankFilters.setKey('nations', [
...tankFilters.nations,
nation,
]);
}
}
} }
> }}
<img >
style={{ width: '1em', height: '1em' }} <img
src={asset(`flags/circle/${nation}.webp`)} style={{ width: '1em', height: '1em' }}
/> src={asset(`flags/circle/${nation}.webp`)}
</IconButton> />
</Tooltip> </IconButton>
); );
})} })}
</Flex> </Flex>
@@ -229,32 +179,28 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.classes?.includes(tankClass); const selected = tankFilters.classes?.includes(tankClass);
return ( return (
<Tooltip <IconButton
content={strings.common.tank_class_medium[tankClass]}
key={tankClass} key={tankClass}
variant={selected ? 'solid' : 'soft'}
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() => {
if (tankFilters.classes.includes(tankClass)) {
$tankFilters.setKey(
'classes',
tankFilters.classes.filter((c) => c !== tankClass),
);
} else {
$tankFilters.setKey('classes', [
...tankFilters.classes,
tankClass,
]);
}
}}
> >
<IconButton <Icon style={{ width: '1em', height: '1em' }} />
variant={selected ? 'solid' : 'soft'} </IconButton>
radius="none"
color={selected ? undefined : 'gray'}
highContrast
onClick={() => {
if (tankFilters.classes.includes(tankClass)) {
$tankFilters.setKey(
'classes',
tankFilters.classes.filter((c) => c !== tankClass),
);
} else {
$tankFilters.setKey('classes', [
...tankFilters.classes,
tankClass,
]);
}
}}
>
<Icon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
); );
})} })}
</Flex> </Flex>
@@ -264,109 +210,103 @@ export function FilterControl({ compact }: FilterControlProps) {
style={{ borderRadius: 'var(--radius-full)' }} style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }} direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
> >
<Tooltip content="Researchable"> <IconButton
<IconButton variant={
variant={ tankFilters.types?.includes(TankType.RESEARCHABLE)
tankFilters.types?.includes(TankType.RESEARCHABLE) ? 'solid'
? 'solid' : 'soft'
: 'soft' }
radius="none"
color={
tankFilters.types?.includes(TankType.RESEARCHABLE)
? undefined
: 'gray'
}
highContrast
onClick={() => {
if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.RESEARCHABLE),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.RESEARCHABLE,
]);
} }
radius="none" }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton>
<IconButton
variant={
tankFilters.types?.includes(TankType.PREMIUM) ? 'solid' : 'soft'
}
radius="none"
color={
tankFilters.types?.includes(TankType.PREMIUM) ? 'amber' : 'gray'
}
highContrast
onClick={() => {
if (tankFilters.types.includes(TankType.PREMIUM)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.PREMIUM),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.PREMIUM,
]);
}
}}
>
<Text
color={ color={
tankFilters.types?.includes(TankType.RESEARCHABLE) tankFilters.types?.includes(TankType.PREMIUM)
? undefined ? undefined
: 'gray' : 'amber'
} }
highContrast style={{ display: 'flex', justifyContent: 'center' }}
onClick={() => {
if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.RESEARCHABLE),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.RESEARCHABLE,
]);
}
}}
> >
<ResearchedIcon style={{ width: '1em', height: '1em' }} /> <ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton> </Text>
</Tooltip> </IconButton>
<Tooltip content="Premium"> <IconButton
<IconButton variant={
variant={ tankFilters.types?.includes(TankType.COLLECTOR) ? 'solid' : 'soft'
tankFilters.types?.includes(TankType.PREMIUM) ? 'solid' : 'soft' }
radius="none"
color={
tankFilters.types?.includes(TankType.COLLECTOR) ? 'blue' : 'gray'
}
highContrast
onClick={() => {
if (tankFilters.types.includes(TankType.COLLECTOR)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.COLLECTOR,
]);
} }
radius="none" }}
>
<Text
color={ color={
tankFilters.types?.includes(TankType.PREMIUM) ? 'amber' : 'gray' tankFilters.types?.includes(TankType.COLLECTOR)
? undefined
: 'blue'
} }
highContrast style={{ display: 'flex', justifyContent: 'center' }}
onClick={() => {
if (tankFilters.types.includes(TankType.PREMIUM)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.PREMIUM),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.PREMIUM,
]);
}
}}
> >
<Text <ResearchedIcon style={{ width: '1em', height: '1em' }} />
color={ </Text>
tankFilters.types?.includes(TankType.PREMIUM) </IconButton>
? undefined
: 'amber'
}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
<Tooltip content="Collector">
<IconButton
variant={
tankFilters.types?.includes(TankType.COLLECTOR) ? 'solid' : 'soft'
}
radius="none"
color={
tankFilters.types?.includes(TankType.COLLECTOR) ? 'blue' : 'gray'
}
highContrast
onClick={() => {
if (tankFilters.types.includes(TankType.COLLECTOR)) {
$tankFilters.setKey(
'types',
tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
);
} else {
$tankFilters.setKey('types', [
...tankFilters.types,
TankType.COLLECTOR,
]);
}
}}
>
<Text
color={
tankFilters.types?.includes(TankType.COLLECTOR)
? undefined
: 'blue'
}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
</Flex> </Flex>
<Flex <Flex
@@ -374,61 +314,45 @@ export function FilterControl({ compact }: FilterControlProps) {
style={{ borderRadius: 'var(--radius-full)' }} style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }} direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
> >
<Tooltip content="Include test tank"> <IconButton
<IconButton variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
variant={tankFilters.testing === 'include' ? 'solid' : 'soft'} radius="none"
radius="none" color={tankFilters.testing === 'include' ? undefined : 'gray'}
color={tankFilters.testing === 'include' ? undefined : 'gray'} highContrast
highContrast onClick={() => {
onClick={() => { $tankFilters.setKey('testing', 'include');
$tankFilters.setKey('testing', 'include'); }}
}} >
> <ExperimentIcon
<ExperimentIcon style={{ width: '1em', height: '1em', color: 'currentColor' }}
style={{ width: '1em', height: '1em', color: 'currentColor' }} />
/> </IconButton>
</IconButton> <IconButton
</Tooltip> variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
<Tooltip content="Exclude test tank"> radius="none"
<IconButton color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'} highContrast
radius="none" onClick={() => {
color={tankFilters.testing === 'exclude' ? undefined : 'gray'} $tankFilters.setKey('testing', 'exclude');
highContrast }}
onClick={() => >
// mutateTankFilters((draft) => { <ScienceOffIcon
// draft.testing = 'exclude'; style={{ width: '1em', height: '1em', color: 'currentColor' }}
// }) />
{ </IconButton>
$tankFilters.setKey('testing', 'exclude'); <IconButton
} variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
} radius="none"
> color={tankFilters.testing === 'only' ? undefined : 'gray'}
<ScienceOffIcon highContrast
style={{ width: '1em', height: '1em', color: 'currentColor' }} onClick={() => {
/> $tankFilters.setKey('testing', 'only');
</IconButton> }}
</Tooltip> >
<Tooltip content="Only test tank"> <ScienceIcon
<IconButton style={{ width: '1em', height: '1em', color: 'currentColor' }}
variant={tankFilters.testing === 'only' ? 'solid' : 'soft'} />
radius="none" </IconButton>
color={tankFilters.testing === 'only' ? undefined : 'gray'}
highContrast
onClick={() =>
// mutateTankFilters((draft) => {
// draft.testing = 'only';
// })
{
$tankFilters.setKey('testing', 'only');
}
}
>
<ScienceIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
</Flex> </Flex>
<Box> <Box>