feat: named sorting

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -35,6 +35,7 @@ import { tankIcon } from '../../../../../core/blitzkrieg/tankIcon';
 import { unionBoundingBox } from '../../../../../core/blitzkrieg/unionBoundingBox';
 import { theme } from '../../../../../stitches.config';
 import mutateTankopediaPersistent, {
+  SORT_NAMES,
   TankopediaSortDirection,
   useTankopediaPersistent,
 } from '../../../../../stores/tankopedia';
@@ -756,10 +757,15 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
         <Options />
       </Flex>
 
+      <Flex justify="center">
+        <Text color="gray">
+          Sorting: {SORT_NAMES[sort.by]}, {sort.direction}
+        </Text>
+      </Flex>
+
       {!compact && (
         <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
-
       <Flex wrap="wrap" gap="2" justify={compact ? 'between' : 'center'}>
         {!compact &&
           searchResultsPageSlice.map((tank) => (
@@ -884,7 +890,6 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
           <CompactSearchResultRow tanks={secondChunk} onSelect={onSelect} />
         )}
       </Flex>
-
       <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
     </>
   );

src/stores/tankopedia.ts

@@ -15,33 +15,7 @@ import {
   TurretDefinition,
 } from '../core/blitzkrieg/tankDefinitions';
 
-export type TankopediaSortBy =
+export type TankopediaSortBy = keyof typeof SORT_NAMES;
-  | 'meta.tier'
-  | 'meta.name'
-  | 'survivability.health'
-  | 'survivability.viewRange'
-  | 'survivability.camouflageStill'
-  | 'survivability.camouflageMoving'
-  | 'survivability.camouflageShooting'
-  | 'survivability.size'
-  | 'fire.dpm'
-  | 'fire.reload'
-  | 'fire.caliber'
-  | 'fire.standardPenetration'
-  | 'fire.premiumPenetration'
-  | 'fire.damage'
-  | 'fire.shellVelocity'
-  | 'fire.aimTime'
-  | 'fire.dispersionStill'
-  | 'fire.dispersionMoving'
-  | 'fire.gunDepression'
-  | 'fire.gunElevation'
-  | 'maneuverability.forwardsSpeed'
-  | 'maneuverability.backwardsSpeed'
-  | 'maneuverability.power'
-  | 'maneuverability.powerToWeight'
-  | 'maneuverability.weight'
-  | 'maneuverability.traverseSpeed';
 export type TankopediaSortDirection = 'ascending' | 'descending';
 export type TankopediaTestTankDisplay = 'include' | 'exclude' | 'only';
 export type TankopediaMode = 'model' | 'armor';
@@ -125,6 +99,35 @@ export type ArmorPiercingLayer =
       gap: number;
     };
 
+export const SORT_NAMES = {
+  'meta.tier': 'tier',
+  'meta.name': 'name',
+  'survivability.health': 'health',
+  'survivability.viewRange': 'view range',
+  'survivability.camouflageStill': 'camouflage still',
+  'survivability.camouflageMoving': 'camouflage moving',
+  'survivability.camouflageShooting': 'camouflage shooting',
+  'survivability.size': 'size',
+  'fire.dpm': 'DPM',
+  'fire.reload': 'reload',
+  'fire.caliber': 'caliber',
+  'fire.standardPenetration': 'standard penetration',
+  'fire.premiumPenetration': 'premium penetration',
+  'fire.damage': 'damage',
+  'fire.shellVelocity': 'shell velocity',
+  'fire.aimTime': 'aim time',
+  'fire.dispersionStill': 'dispersion still',
+  'fire.dispersionMoving': 'dispersion moving',
+  'fire.gunDepression': 'gun depression',
+  'fire.gunElevation': 'gun elevation',
+  'maneuverability.forwardsSpeed': 'forwards speed',
+  'maneuverability.backwardsSpeed': 'backwards speed',
+  'maneuverability.power': 'power',
+  'maneuverability.powerToWeight': 'power to weight',
+  'maneuverability.weight': 'weight',
+  'maneuverability.traverseSpeed': 'traverse speed',
+} as const;
+
 export const useTankopediaPersistent = create<TankopediaPersistent>()(
   persist(
     subscribeWithSelector<TankopediaPersistent>(() => ({