feat: sort

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';

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);
+}

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;

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<FlexProps, 'onSelect'> & {
   compact?: boolean;
@@ -62,22 +62,7 @@ export const TankSearch = memo<TankSearchProps>(
 
         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': {

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 (
     <TankCardWrapper>
-      {tanks
-        .filter((tank) => filterTank(filters, tank))
-        .map((tank, tileIndex) => (
-          <TierListTile key={tank.id} tank={tank} />
-        ))}
+      {sorted.map((tank) => (
+        <TierListTile key={tank.id} tank={tank} />
+      ))}
     </TankCardWrapper>
   );
 }