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

feat: game filter parity

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-02-03 16:44:10 -06:00
1 parent 273ab97d3f
commit 559fb30da9
2 files changed
+65 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx
+64 -70
View File
@@ -107,7 +107,7 @@ export function Options() {
))} ))}
</Flex> </Flex>
<Flex style={{ flex: 1 }}> <Flex style={{ flex: 1 }}>
{[...TANK_TYPES].reverse().map((type, index) => ( {[...TANK_TYPES].map((type, index) => (
<Button <Button
key={type} key={type}
color={filters.types.includes(type) ? undefined : 'gray'} color={filters.types.includes(type) ? undefined : 'gray'}
@@ -147,76 +147,70 @@ export function Options() {
style={{ width: '100%' }} style={{ width: '100%' }}
> >
<Flex> <Flex>
{[...TIERS] {[...TIERS].slice(0, 5).map((tier, index) => (
.reverse() <Button
.slice(0, 5) key={tier}
.map((tier, index) => ( color={filters.tiers.includes(tier) ? undefined : 'gray'}
<Button variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
key={tier} style={{
color={filters.tiers.includes(tier) ? undefined : 'gray'} flex: 1,
variant={filters.tiers.includes(tier) ? 'surface' : 'soft'} margin: -0.5,
style={{ borderTopLeftRadius: index === 0 ? 16 : 0,
flex: 1, borderBottomLeftRadius: 0,
margin: -0.5, borderTopRightRadius:
borderTopLeftRadius: index === 0 ? 16 : 0, index === TIERS.length - Math.round(TIERS.length / 2) - 1
borderBottomLeftRadius: 0, ? 16
borderTopRightRadius: : 0,
index === TIERS.length - Math.round(TIERS.length / 2) - 1 borderBottomRightRadius: 0,
? 16 }}
: 0, onClick={() =>
borderBottomRightRadius: 0, mutateTankopediaPersistent((draft) => {
}} if (draft.filters.tiers.includes(tier)) {
onClick={() => draft.filters.tiers = draft.filters.tiers.filter(
mutateTankopediaPersistent((draft) => { (preexistingTier) => preexistingTier !== tier,
if (draft.filters.tiers.includes(tier)) { );
draft.filters.tiers = draft.filters.tiers.filter( } else {
(preexistingTier) => preexistingTier !== tier, draft.filters.tiers.push(tier);
); }
} else { })
draft.filters.tiers.push(tier); }
} >
}) {TIER_ROMAN_NUMERALS[tier]}
} </Button>
> ))}
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex> </Flex>
<Flex> <Flex>
{[...TIERS] {[...TIERS].slice(5).map((tier, index) => (
.reverse() <Button
.slice(5) key={tier}
.map((tier, index) => ( color={filters.tiers.includes(tier) ? undefined : 'gray'}
<Button variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
key={tier} style={{
color={filters.tiers.includes(tier) ? undefined : 'gray'} flex: 1,
variant={filters.tiers.includes(tier) ? 'surface' : 'soft'} margin: -0.5,
style={{ borderTopLeftRadius: 0,
flex: 1, borderBottomLeftRadius: index === 0 ? 16 : 0,
margin: -0.5, borderTopRightRadius: 0,
borderTopLeftRadius: 0, borderBottomRightRadius:
borderBottomLeftRadius: index === 0 ? 16 : 0, index === TIERS.length - Math.round(TIERS.length / 2) - 1
borderTopRightRadius: 0, ? 16
borderBottomRightRadius: : 0,
index === TIERS.length - Math.round(TIERS.length / 2) - 1 }}
? 16 onClick={() =>
: 0, mutateTankopediaPersistent((draft) => {
}} if (draft.filters.tiers.includes(tier)) {
onClick={() => draft.filters.tiers = draft.filters.tiers.filter(
mutateTankopediaPersistent((draft) => { (preexistingTier) => preexistingTier !== tier,
if (draft.filters.tiers.includes(tier)) { );
draft.filters.tiers = draft.filters.tiers.filter( } else {
(preexistingTier) => preexistingTier !== tier, draft.filters.tiers.push(tier);
); }
} else { })
draft.filters.tiers.push(tier); }
} >
}) {TIER_ROMAN_NUMERALS[tier]}
} </Button>
> ))}
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex> </Flex>
</Flex> </Flex>
<Flex <Flex
@@ -299,7 +293,7 @@ export function Options() {
<Flex gap="2" style={{ flex: 1 }} wrap="wrap"> <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
<Flex className={styles.oneLineFilters} style={{ flex: 1 }}> <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
{[...TIERS].reverse().map((tier, index) => ( {[...TIERS].map((tier, index) => (
<Button <Button
key={tier} key={tier}
color={filters.tiers.includes(tier) ? undefined : 'gray'} color={filters.tiers.includes(tier) ? undefined : 'gray'}
src/components/Tanks/components/Item.tsx
+1 -1
View File
@@ -6,10 +6,10 @@ import {
import { theme } from '../../../stitches.config'; import { theme } from '../../../stitches.config';
export const TANK_TYPES = [ export const TANK_TYPES = [
'tankDestroyer',
'light', 'light',
'medium', 'medium',
'heavy', 'heavy',
'tankDestroyer',
] as const; ] as const;
// TODO: remove hyphen for underscore // TODO: remove hyphen for underscore