diff --git a/packages/core/src/blitzkit/index.ts b/packages/core/src/blitzkit/index.ts index 955b6d924..19d872e55 100644 --- a/packages/core/src/blitzkit/index.ts +++ b/packages/core/src/blitzkit/index.ts @@ -43,5 +43,6 @@ export * from './uniqueGuns'; export * from './unwrapBlitzkitResponse'; export * from './votes'; // export * from './withCORSProxy'; +export * from './metaSortTank'; export * from './romanize'; export * from './youtubers'; diff --git a/packages/core/src/blitzkit/metaSortTank.ts b/packages/core/src/blitzkit/metaSortTank.ts new file mode 100644 index 000000000..758feda4b --- /dev/null +++ b/packages/core/src/blitzkit/metaSortTank.ts @@ -0,0 +1,28 @@ +import { TANK_CLASSES } from '../blitz/constants'; +import { GameDefinitions, TankDefinition, TankType } from '../protos'; + +const treeTypeOrder = [ + TankType.RESEARCHABLE, + TankType.PREMIUM, + TankType.COLLECTOR, +]; + +export function metaSortTank( + tanks: TankDefinition[], + gameDefinitions: GameDefinitions, +) { + return tanks + .sort((a, b) => b.tier - a.tier) + .sort( + (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type), + ) + .sort( + (a, b) => TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class), + ) + .sort( + (a, b) => + gameDefinitions.nations.indexOf(b.nation) - + gameDefinitions.nations.indexOf(a.nation), + ) + .sort((a, b) => a.tier - b.tier); +} diff --git a/packages/website/src/components/TankSearch/constants.tsx b/packages/website/src/components/TankSearch/constants.tsx index 5dbcbb450..0c0b0233e 100644 --- a/packages/website/src/components/TankSearch/constants.tsx +++ b/packages/website/src/components/TankSearch/constants.tsx @@ -1,9 +1 @@ -import { TankType } from '@blitzkit/core'; - -export const treeTypeOrder = [ - TankType.RESEARCHABLE, - TankType.PREMIUM, - TankType.COLLECTOR, -]; - export const MAX_RECENTLY_VIEWED = 9; diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index a6f43a125..2f15093d9 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -1,9 +1,9 @@ import { - TANK_CLASSES, fetchGameDefinitions, fetchModelDefinitions, fetchTankDefinitions, fetchTankNames, + metaSortTank, normalizeBoundingBox, resolveDpm, unionBoundingBox, @@ -31,7 +31,7 @@ import { RecentlyViewed } from './components/RecentlyViewed'; import { SearchBar } from './components/SearchBar'; import { SkeletonTankCard } from './components/SkeletonTankCard'; import { TankCardWrapper } from './components/TankCardWrapper'; -import { MAX_RECENTLY_VIEWED, treeTypeOrder } from './constants'; +import { MAX_RECENTLY_VIEWED } from './constants'; type TankSearchProps = Omit & { compact?: boolean; @@ -62,22 +62,7 @@ export const TankSearch = memo( switch (tankopediaSort.by) { case 'meta.none': - sorted = filtered - .sort((a, b) => b.tier - a.tier) - .sort( - (a, b) => - treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type), - ) - .sort( - (a, b) => - TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class), - ) - .sort( - (a, b) => - gameDefinitions.nations.indexOf(b.nation) - - gameDefinitions.nations.indexOf(a.nation), - ) - .sort((a, b) => a.tier - b.tier); + sorted = metaSortTank(filtered, gameDefinitions); break; case 'survivability.health': { diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx index d766e9ef1..349198130 100644 --- a/packages/website/src/components/TierList/Tiles.tsx +++ b/packages/website/src/components/TierList/Tiles.tsx @@ -1,23 +1,35 @@ -import { fetchTankDefinitions } from '@blitzkit/core'; +import { + fetchGameDefinitions, + fetchTankDefinitions, + metaSortTank, +} from '@blitzkit/core'; import { useStore } from '@nanostores/react'; +import { useMemo } from 'react'; import { filterTank } from '../../core/blitzkit/filterTank'; import { $tankFilters } from '../../stores/tankFilters'; import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper'; import { TierListTile } from './Tile'; const tankDefinitions = await fetchTankDefinitions(); +const gameDefinitions = await fetchGameDefinitions(); const tanks = Object.values(tankDefinitions.tanks); export function TierListTiles() { const filters = useStore($tankFilters); + const sorted = useMemo( + () => + metaSortTank( + tanks.filter((tank) => filterTank(filters, tank)), + gameDefinitions, + ).reverse(), + [filters], + ); return ( - {tanks - .filter((tank) => filterTank(filters, tank)) - .map((tank, tileIndex) => ( - - ))} + {sorted.map((tank) => ( + + ))} ); }