From 84a1af8100a14a7bfa4cf3b64180e6c0f71112e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Wed, 6 Dec 2023 12:40:43 -0600 Subject: [PATCH] feat: cleaner filters --- .../components/Options/index.css.ts | 17 + .../{Options.tsx => Options/index.tsx} | 365 ++++++++++++------ src/app/tools/tankopedia/page.tsx | 121 ++++-- src/stores/session.ts | 36 +- src/stores/tankopedia.ts | 34 +- 5 files changed, 388 insertions(+), 185 deletions(-) create mode 100644 src/app/tools/tankopedia/components/Options/index.css.ts rename src/app/tools/tankopedia/components/{Options.tsx => Options/index.tsx} (53%) diff --git a/src/app/tools/tankopedia/components/Options/index.css.ts b/src/app/tools/tankopedia/components/Options/index.css.ts new file mode 100644 index 000000000..ffc473783 --- /dev/null +++ b/src/app/tools/tankopedia/components/Options/index.css.ts @@ -0,0 +1,17 @@ +import { style } from '@vanilla-extract/css'; + +export const splitFilters = style({ + '@media': { + 'screen and (min-width: 513px)': { + display: 'none', + }, + }, +}); + +export const oneLineFilters = style({ + '@media': { + 'screen and (max-width: 512px)': { + display: 'none', + }, + }, +}); diff --git a/src/app/tools/tankopedia/components/Options.tsx b/src/app/tools/tankopedia/components/Options/index.tsx similarity index 53% rename from src/app/tools/tankopedia/components/Options.tsx rename to src/app/tools/tankopedia/components/Options/index.tsx index 4cd4d5690..79fc47221 100644 --- a/src/app/tools/tankopedia/components/Options.tsx +++ b/src/app/tools/tankopedia/components/Options/index.tsx @@ -9,19 +9,18 @@ import { TREE_TYPE_ICONS, TREE_TYPE_IMAGES, TreeTypeEnum, -} from '../../../../components/Tanks'; -import { asset } from '../../../../core/blitzkrieg/asset'; +} from '../../../../../components/Tanks'; +import { asset } from '../../../../../core/blitzkrieg/asset'; import { NATIONS, TIERS, TIER_ROMAN_NUMERALS, -} from '../../../../core/blitzkrieg/definitions/tanks'; +} from '../../../../../core/blitzkrieg/definitions/tanks'; import mutateTankopedia, { - TankopediaSortBy, - TankopediaSortDirection, TankopediaTestTankDisplay, useTankopedia, -} from '../../../../stores/tankopedia'; +} from '../../../../../stores/tankopedia'; +import * as styles from './index.css'; export function Options() { const nations = use(NATIONS); @@ -29,55 +28,22 @@ export function Options() { return ( - - - - - - - - mutateTankopedia((draft) => { - draft.sort.by = value as TankopediaSortBy; - }) - } - > - Tier - Name - - - - - - - - - - - mutateTankopedia((draft) => { - draft.sort.direction = value as TankopediaSortDirection; - }) - } - > - - Ascending - - - Descending - - - - - + @@ -106,39 +72,46 @@ export function Options() { - - {[...TIERS].reverse().map((tier, index) => ( + + {TREE_TYPES.map((type, index) => ( ))} - + {[...TANK_TYPES].reverse().map((type, index) => ( + ))} + + + {nations.map((nation, index) => ( - ))} + style={{ + flex: 1, + margin: -0.5, + borderTopLeftRadius: index === 0 ? undefined : 0, + borderBottomLeftRadius: 0, + borderTopRightRadius: + index === TIERS.length - 6 ? undefined : 0, + borderBottomRightRadius: 0, + }} + onClick={() => + mutateTankopedia((draft) => { + if (draft.filters.tiers.includes(tier)) { + draft.filters.tiers = draft.filters.tiers.filter( + (preexistingTier) => preexistingTier !== tier, + ); + } else { + draft.filters.tiers.push(tier); + } + }) + } + > + {TIER_ROMAN_NUMERALS[tier]} + + ))} + + + + {[...TIERS] + .reverse() + .slice(5, 10) + .map((tier, index) => ( + + ))} + - + + {nations.slice(0, 5).map((nation, index) => ( + + ))} + + + + {nations.slice(5, 10).map((nation, index) => ( + + ))} + + ); } diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx index 748832ea7..d5d9e206a 100644 --- a/src/app/tools/tankopedia/page.tsx +++ b/src/app/tools/tankopedia/page.tsx @@ -1,8 +1,16 @@ 'use client'; import { slateDark } from '@radix-ui/colors'; -import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; -import { Card, Flex, Inset, Text, TextField } from '@radix-ui/themes'; +import { CaretDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons'; +import { + Button, + Card, + DropdownMenu, + Flex, + Inset, + Text, + TextField, +} from '@radix-ui/themes'; import { go } from 'fuzzysort'; import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react'; import PageWrapper from '../../../components/PageWrapper'; @@ -17,7 +25,12 @@ import { } from '../../../core/blitzkrieg/definitions/tanks'; import { tankIcon } from '../../../core/blitzkrieg/tankIcon'; import { theme } from '../../../stitches.config'; -import { useTankopedia } from '../../../stores/tankopedia'; +import mutateTankopedia, { + TankopediaSortBy, + TankopediaSortDirection, + TankopediaTestTankDisplay, + useTankopedia, +} from '../../../stores/tankopedia'; import { Options } from './components/Options'; import { PageTurner } from './components/PageTurner'; import * as styles from './page.css'; @@ -90,30 +103,79 @@ export default function Page() { Loading...}> - - - - - { - if (event.target.value.length === 0) { - setSearchedList(searchableTanks); - } else { - setSearchedList( - go(event.target.value, searchableTanks, { - keys: [ - 'name', - 'name_short', - 'id', - ] satisfies (keyof TankDefinition)[], - }).map(({ obj }) => obj), - ); - } - }} - /> - + + + + + + { + if (event.target.value.length === 0) { + setSearchedList(searchableTanks); + } else { + setSearchedList( + go(event.target.value, searchableTanks, { + keys: [ + 'name', + 'name_short', + 'id', + ] satisfies (keyof TankDefinition)[], + }).map(({ obj }) => obj), + ); + } + }} + /> + + + + + + + + By + + mutateTankopedia((draft) => { + draft.sort.by = value as TankopediaSortBy; + }) + } + > + + Tier + + + Name + + + + + + Direction + + mutateTankopedia((draft) => { + draft.sort.direction = value as TankopediaSortDirection; + }) + } + > + + Ascending + + + Descending + + + + + + @@ -222,6 +284,11 @@ export default function Page() { tank.tree_type === 'researchable' ? slateDark.slate12 : undefined, + whiteSpace: 'nowrap', + maxWidth: 160, + display: 'block', + textOverflow: 'ellipsis', + overflow: 'hidden', }} > {tank.name_short ?? diff --git a/src/stores/session.ts b/src/stores/session.ts index 4612ba8d2..4419a7dd0 100644 --- a/src/stores/session.ts +++ b/src/stores/session.ts @@ -1,6 +1,6 @@ import { produce } from 'immer'; import { create } from 'zustand'; -import { devtools, persist } from 'zustand/middleware'; +import { persist } from 'zustand/middleware'; import { CustomColumnDisplay } from '../app/tools/session/components/CustomColumn'; import { AccentColor, GrayColor } from '../constants/radixColors'; import { Region } from '../constants/regions'; @@ -65,25 +65,23 @@ export function resetSession() { } export const useSession = create()( - devtools( - persist( - (set) => ({ - isTracking: false, - resetPrompt: true, - showTotal: true, - showCareer: true, - embedPrompt: true, + persist( + (set) => ({ + isTracking: false, + resetPrompt: true, + showTotal: true, + showCareer: true, + embedPrompt: true, - customColumns: [ - { display: 'battles', showDelta: false }, - { display: 'winrate', showDelta: true }, - { display: 'wn8', showDelta: false }, - { display: 'damage', showDelta: true }, - ], - color: 'slate', - }), - { name: 'session' }, - ), + customColumns: [ + { display: 'battles', showDelta: false }, + { display: 'winrate', showDelta: true }, + { display: 'wn8', showDelta: false }, + { display: 'damage', showDelta: true }, + ], + color: 'slate', + }), + { name: 'session' }, ), ); diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index a2dbb6a4f..447edf4bd 100644 --- a/src/stores/tankopedia.ts +++ b/src/stores/tankopedia.ts @@ -1,6 +1,5 @@ import { produce } from 'immer'; import { create } from 'zustand'; -import { devtools, persist } from 'zustand/middleware'; import { TankType, TreeTypeString } from '../components/Tanks'; import { Tier } from '../core/blitzkrieg/definitions/tanks'; @@ -22,26 +21,19 @@ type Tankopedia = { }; }; -export const useTankopedia = create()( - devtools( - persist( - (set) => ({ - sort: { - by: 'tier', - direction: 'descending', - }, - filters: { - tiers: [], - types: [], - treeTypes: [], - nations: [], - test: 'include', - }, - }), - { name: 'tankopedia' }, - ), - ), -); +export const useTankopedia = create()(() => ({ + sort: { + by: 'tier', + direction: 'descending', + }, + filters: { + tiers: [], + types: [], + treeTypes: [], + nations: [], + test: 'include', + }, +})); export default function mutateTankopedia(recipe: (draft: Tankopedia) => void) { useTankopedia.setState(produce(recipe));