sorting

packages/website/src/components/RecentlyViewedTanks/index.tsx

@@ -33,7 +33,7 @@ export function RecentlyViewedTanks() {
   const strings = useStrings();
   const by = TankSort.use((state) => state.by);
 
-  if (recentlyViewed.length === 0 || by !== "meta.none" || hasFilters) {
+  if (recentlyViewed.length === 0 || by !== null || hasFilters) {
     return null;
   }
 

packages/website/src/components/TankCard/index.module.css

@@ -40,4 +40,10 @@
       overflow: hidden;
     }
   }
+
+  .discriminator {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+  }
 }

packages/website/src/components/TankCard/index.tsx

@@ -82,7 +82,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
 
       {props.discriminator && (
         <Text lowContrast align="center">
-          {props.discriminator}
+          <div className={styles.discriminator}>{props.discriminator}</div>
         </Text>
       )}
     </Flex>

packages/website/src/components/TankSearch/components/Card.tsx

@@ -1,145 +0,0 @@
-import {
-  normalizeBoundingBox,
-  resolveDpm,
-  unionBoundingBox,
-} from "@blitzkit/core";
-import type { TankDefinition } from "@blitzkit/protos";
-import { useMemo } from "react";
-import { api } from "../../../api/dynamic";
-import { resolveReload } from "../../../core/blitzkit/resolveReload";
-import { TankSort } from "../../../stores/tankopediaSort";
-import { TankCard } from "../../TankCard";
-
-interface TankSearchCardProps {
-  tank: TankDefinition;
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-const modelDefinitions = await api.models();
-
-export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
-  const by = TankSort.use((state) => state.by);
-  const discriminator = useMemo(() => {
-    if (by.startsWith("meta")) return undefined;
-
-    const turret = tank.turrets.at(-1)!;
-    const gun = turret.guns.at(-1)!;
-    const shell0 = gun.shells[0];
-    const shell1 = gun.shells[1];
-    const shell2 = gun.shells[2];
-    const tracks = tank.tracks.at(-1)!;
-    const engine = tank.engines.at(-1)!;
-    const tankModelDefinition = modelDefinitions.models[tank.id];
-    const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-    const gunModelDefinition = turretModelDefinition.guns[gun.id];
-
-    switch (by) {
-      case "fire.aimTime":
-        return gun.aim_time.toFixed(2);
-      case "fire.caliber":
-        return shell0.caliber.toFixed(0);
-      case "fire.damage":
-        return shell0.armor_damage.toFixed(0);
-      case "fire.moduleDamage":
-        return shell0.module_damage.toFixed(0);
-      case "fire.dispersionMoving":
-        return tracks.dispersion_move.toFixed(3);
-      case "fire.dispersionStill":
-        return gun.dispersion_base.toFixed(3);
-      case "fire.dpm":
-        return resolveDpm(gun, shell0).toFixed(0);
-      case "fire.dpmPremium":
-        return shell1 ? resolveDpm(gun, shell1).toFixed(0) : "--";
-      case "fire.reload":
-        return resolveReload(gun).toFixed(2);
-      case "fire.standardPenetration":
-        return shell0?.penetration!.near.toFixed(0);
-      case "fire.premiumPenetration":
-        return shell1 ? shell1?.penetration!.near.toFixed(0) : "--";
-      case "fire.tertiaryPenetration":
-        return shell1 ? shell2?.penetration!.near.toFixed(0) : "--";
-      case "fire.shellVelocity":
-        return shell0.velocity.toFixed(0);
-      case "fire.shellCapacity":
-        return gun.shell_capacity.toFixed(0);
-      case "fire.shellRange":
-        return shell0.range.toFixed(0);
-      case "fire.gunDepression":
-        return (
-          gunModelDefinition.pitch!.max +
-          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
-        ).toFixed(1);
-      case "fire.gunElevation":
-        return (
-          -gunModelDefinition.pitch!.min -
-          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
-        ).toFixed(1);
-      case "maneuverability.forwardsSpeed":
-        return tank.speed_forwards.toFixed(0);
-      case "maneuverability.backwardsSpeed":
-        return tank.speed_backwards.toFixed(0);
-      case "maneuverability.power":
-        return engine.power.toFixed(0);
-      case "maneuverability.powerToWeight":
-        return (
-          (1000 * engine.power) /
-          (tank.weight +
-            engine.weight +
-            tracks.weight +
-            turret.weight +
-            gun.weight)
-        ).toFixed(1);
-      case "maneuverability.weight":
-        return (
-          (tank.weight +
-            engine.weight +
-            tracks.weight +
-            turret.weight +
-            gun.weight) /
-          1000
-        ).toFixed(1);
-      case "maneuverability.traverseSpeed":
-        return tracks.traverse_speed.toFixed(1);
-      case "survivability.health":
-        return (tank.health + turret.health).toFixed(0);
-      case "survivability.viewRange":
-        return turret.view_range.toFixed(0);
-      case "survivability.camouflageStill":
-        return (tank.camouflage_still * 100).toFixed(0);
-      case "survivability.camouflageMoving":
-        return (tank.camouflage_moving * 100).toFixed(0);
-      case "survivability.camouflageShooting":
-        return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
-      case "survivability.volume": {
-        const dimensions = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
-      }
-
-      case "survivability.length": {
-        const bounds = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
-      }
-    }
-  }, [by]);
-
-  return (
-    <TankCard
-      key={tank.id}
-      onTankSelect={onSelect}
-      tank={tank}
-      discriminator={discriminator}
-    />
-  );
-}

packages/website/src/components/TankSearch/components/Sort.tsx

@@ -1,40 +1,37 @@
 import { CaretDownIcon } from "@radix-ui/react-icons";
+import { characteristicsGroups } from "../../../config/characteristicsGroups";
 import { useStrings } from "../../../hooks/useStrings";
-import type {
-  TankopediaSortBy,
-  TankopediaSortDirection,
-} from "../../../stores/tankopediaPersistent";
+import { TankopediaSortDirection } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../../tankopedia/sortableCharacteristics";
+import type { CharacteristicName } from "../../../types/characteristics";
 import { Button } from "../../Button";
 import { DropdownMenu } from "../../DropdownMenu";
 
 interface ItemProps {
-  by: TankopediaSortBy;
-}
-
-interface ItemProps {
-  by: TankopediaSortBy;
+  by: CharacteristicName;
 }
 
 function Item({ by }: ItemProps) {
   const strings = useStrings();
-  const _by = TankSort.use((state) => state.by);
+  const selectedBy = TankSort.use((state) => state.by);
 
   return (
     <DropdownMenu.CheckboxItem
-      checked={_by === by}
+      checked={selectedBy === by}
       onClick={() => {
         TankSort.mutate((draft) => {
           draft.by = by;
         });
       }}
     >
-      {strings.website.common.tank_search.sort[by]}
+      {strings.tanks.characteristics.items[by]}
     </DropdownMenu.CheckboxItem>
   );
 }
 
 export function Sort() {
+  const by = TankSort.use((state) => state.by);
   const direction = TankSort.use((state) => state.direction);
   const strings = useStrings();
 
@@ -42,103 +39,79 @@ export function Sort() {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button variant="surface" color="gray">
-          {strings.website.common.tank_search.sort_dropdown.label}
+          {strings.website.common.tank_search.sort.label}
           <CaretDownIcon />
         </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content align="end">
         <DropdownMenu.Label>
-          {strings.website.common.tank_search.sort_dropdown.groups.sort.label}
+          {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
 
-        <Item by="meta.none" />
+        <DropdownMenu.CheckboxItem
+          checked={by === null || !sortableCharacteristics.has(by)}
+          onClick={() => {
+            TankSort.mutate((draft) => {
+              draft.by = null;
+            });
+          }}
+        >
+          {strings.website.common.tank_search.sort.none}
+        </DropdownMenu.CheckboxItem>
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {strings.website.common.tank_search.sort_dropdown.groups.sort.fire}
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="fire.dpm" />
-            <Item by="fire.dpmPremium" />
-            <Item by="fire.reload" />
-            <Item by="fire.caliber" />
-            <Item by="fire.standardPenetration" />
-            <Item by="fire.premiumPenetration" />
-            <Item by="fire.tertiaryPenetration" />
-            <Item by="fire.damage" />
-            <Item by="fire.moduleDamage" />
-            <Item by="fire.shellVelocity" />
-            <Item by="fire.shellRange" />
-            <Item by="fire.shellCapacity" />
-            <Item by="fire.aimTime" />
-            <Item by="fire.dispersionStill" />
-            <Item by="fire.dispersionMoving" />
-            <Item by="fire.gunDepression" />
-            <Item by="fire.gunElevation" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+        {characteristicsGroups.map((group) => {
+          const items = group.order.filter(
+            (item) => "name" in item && sortableCharacteristics.has(item.name),
+          );
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .maneuverability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="maneuverability.forwardsSpeed" />
-            <Item by="maneuverability.backwardsSpeed" />
-            <Item by="maneuverability.power" />
-            <Item by="maneuverability.powerToWeight" />
-            <Item by="maneuverability.weight" />
-            <Item by="maneuverability.traverseSpeed" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+          return (
+            <DropdownMenu.Sub key={group.name}>
+              <DropdownMenu.SubTrigger>
+                {
+                  (
+                    strings.tanks.characteristics.titles as Record<
+                      string,
+                      string
+                    >
+                  )[group.name]
+                }
+              </DropdownMenu.SubTrigger>
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .survivability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="survivability.health" />
-            <Item by="survivability.viewRange" />
-            <Item by="survivability.camouflageStill" />
-            <Item by="survivability.camouflageMoving" />
-            <Item by="survivability.camouflageShooting" />
-            <Item by="survivability.volume" />
-            <Item by="survivability.length" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+              <DropdownMenu.SubContent>
+                {items.map((item) => {
+                  if (!("name" in item)) return null;
+
+                  return <Item key={item.name} by={item.name} />;
+                })}
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+          );
+        })}
 
         <DropdownMenu.Label>
-          {
-            strings.website.common.tank_search.sort_dropdown.groups.direction
-              .label
-          }
+          {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
         <DropdownMenu.RadioGroup
           value={direction}
           onValueChange={(value) => {
+            if (
+              value !== TankopediaSortDirection.Ascending &&
+              value !== TankopediaSortDirection.Descending
+            ) {
+              throw new Error(`Unknown tankopedia sort direction: ${value}`);
+            }
+
             TankSort.mutate((draft) => {
-              draft.direction = value as TankopediaSortDirection;
+              draft.direction = value;
             });
           }}
         >
-          <DropdownMenu.RadioItem value="ascending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .ascending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
+            {strings.website.common.tank_search.sort.direction.ascending}
           </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="descending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .descending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
+            {strings.website.common.tank_search.sort.direction.descending}
           </DropdownMenu.RadioItem>
         </DropdownMenu.RadioGroup>
       </DropdownMenu.Content>

packages/website/src/components/TankSearch/components/TierFilter.tsx

@@ -12,7 +12,9 @@ export const TierFilter = memo(() => {
   const search = TankFilters.use((state) => state.search);
   const tiers = TankFilters.use((state) => state.tiers);
 
-  if (by !== "meta.none" || search) return null;
+  if (by !== null || search) {
+    return null;
+  }
 
   return (
     <Flex justify="center">

packages/website/src/components/TankSearch/index.tsx

@@ -1,9 +1,4 @@
-import {
-  metaSortTank,
-  normalizeBoundingBox,
-  SEARCH_KEYS,
-  unionBoundingBox,
-} from "@blitzkit/core";
+import { metaSortTank, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import type { TankDefinition } from "@blitzkit/protos";
 import fuzzysort from "fuzzysort";
@@ -11,16 +6,26 @@ import { uniq } from "lodash-es";
 import { memo, useMemo } from "react";
 import usePromise from "react-promise-suspense";
 import { api } from "../../api/dynamic";
+import { characteristics } from "../../config/characteristics";
+import { characteristicRenderConfigs } from "../../config/characteristicsGroups";
 import { awaitableTankNames } from "../../core/awaitables/tankNames";
 import { filterTanks } from "../../core/blitzkit/filterTanks";
-import { resolveReload } from "../../core/blitzkit/resolveReload";
+import { useCharacteristicRenderer } from "../../hooks/useCharacteristicRenderer";
+import { computeDefaultCharacteristics } from "../../hooks/useCharacteristics";
 import { useLocale } from "../../hooks/useLocale";
 import { useStrings } from "../../hooks/useStrings";
 import { App } from "../../stores/app";
 import { TankFilters } from "../../stores/tankFilters";
-import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
-import { SORT_UNITS } from "../../stores/tankopediaPersistent/constants";
+import {
+  TankopediaPersistent,
+  TankopediaSortDirection,
+} from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../tankopedia/sortableCharacteristics";
+import {
+  CharacteristicType,
+  type ComputedCharacteristics,
+} from "../../types/characteristics";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
@@ -43,390 +48,170 @@ export type TankSearchProps = MaybeSkeletonComponentProps & {
   onSelectAll?: (tanks: TankDefinition[]) => void;
 };
 
-function resolveDpm(a: any, b: any) {
-  return 0;
-}
-
-const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
-  await Promise.all([
-    api.game(),
-    api.models(),
-    api.tanks(),
-    awaitableTankNames,
-  ]);
+const [gameDefinitions, tankDefinitions, tankNames] = await Promise.all([
+  api.game(),
+  api.tanks(),
+  awaitableTankNames,
+]);
+const tankDefinitionsArray = Object.values(tankDefinitions.tanks);
 
 export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, skeleton }) => {
     const strings = useStrings();
     const locale = useLocale();
+
     const wargaming = App.use((state) => state.logins.wargaming);
-    const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
+
     const tankopediaSort = TankSort.use();
     const tankFilters = TankFilters.use();
 
+    const defaultCharacteristics = useMemo(() => {
+      const computed = new Map<number, ComputedCharacteristics>();
+
+      for (const tank of tankDefinitionsArray) {
+        computed.set(tank.id, computeDefaultCharacteristics(tank));
+      }
+
+      return computed;
+    }, []);
+
     const filtered = usePromise(
-      () => {
-        if (tankFilters.search === null) {
-          return filterTanks(
-            tankFilters,
-            awaitedTanksDefinitionsArray,
-            wargaming?.id,
-          );
-        } else {
-          return Promise.resolve(
-            fuzzysort
-              .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
-              .map((result) => tankDefinitions.tanks[result.obj.id]),
+      async () => {
+        let filtered = tankDefinitionsArray;
+
+        console.log("A");
+
+        if (tankopediaSort.by !== null) {
+          console.log("B", filtered.length);
+
+          filtered = filtered.filter((tank) =>
+            defaultCharacteristics.get(tank.id)!.has(tankopediaSort.by!),
           );
+
+          console.log("C", filtered.length);
         }
+
+        if (tankFilters.search === null) {
+          filtered = await filterTanks(tankFilters, filtered, wargaming?.id);
+        } else {
+          filtered = fuzzysort
+            .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
+            .map((result) => tankDefinitions.tanks[result.obj.id]);
+        }
+
+        return filtered;
       },
       // react-promise-suspense has awful type annotations
-      [tankFilters] as any,
+      [tankFilters, tankopediaSort.by] as any,
     );
+
     const sorted = useMemo(() => {
-      if (tankFilters.search === null) {
-        let sorted: TankDefinition[];
+      if (tankFilters.search !== null) return filtered;
 
-        switch (tankopediaSort.by) {
-          case "meta.none":
-            sorted = metaSortTank(filtered, gameDefinitions);
-            break;
+      if (
+        tankopediaSort.by === null ||
+        !sortableCharacteristics.has(tankopediaSort.by)
+      ) {
+        const byMeta = metaSortTank([...filtered], gameDefinitions);
 
-          case "survivability.health": {
-            sorted = filtered.sort((a, b) => {
-              const aHealth = a.health + a.turrets.at(-1)!.health;
-              const bHealth = b.health + b.turrets.at(-1)!.health;
+        return tankopediaSort.direction === TankopediaSortDirection.Ascending
+          ? byMeta
+          : byMeta.reverse();
+      }
+
+      const values = new Map<number, number | undefined>();
+      const by = tankopediaSort.by;
+      const characteristic = characteristics[by];
+
+      for (const tank of filtered) {
+        const computedCharacteristics = defaultCharacteristics.get(tank.id)!;
+        if (!computedCharacteristics.has(by)) {
+          values.set(tank.id, undefined);
+          continue;
+        }
+
+        const value = computedCharacteristics.get(by);
+
+        let sortValue: number | undefined;
+
+        switch (characteristic.type) {
+          case CharacteristicType.Number: {
+            sortValue = value as number;
 
-              return aHealth - bHealth;
-            });
             break;
           }
 
-          case "survivability.viewRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range,
+          case CharacteristicType.NumberList: {
+            const values = value as number[];
+            if (values.length === 0) {
+              sortValue = undefined;
+              break;
+            }
+
+            let sum = 0;
+
+            for (const item of values) {
+              sum += item;
+            }
+
+            sortValue = sum / values.length;
+
+            break;
+          }
+
+          default:
+            throw new Error(
+              `Unsortable characteristic type ${characteristic.type}`,
             );
-            break;
-
-          case "survivability.camouflageStill":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_still - b.camouflage_still,
-            );
-            break;
-
-          case "survivability.camouflageMoving":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_moving - b.camouflage_moving,
-            );
-            break;
-
-          case "survivability.camouflageShooting":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.camouflage_still *
-                  a.turrets.at(-1)!.guns.at(-1)!.camouflage_loss -
-                b.camouflage_still *
-                  b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss,
-            );
-            break;
-
-          case "survivability.volume":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aVolume = aSize.x * aSize.y * aSize.z;
-              const bVolume = bSize.x * bSize.y * bSize.z;
-
-              return aVolume - bVolume;
-            });
-            break;
-
-          case "survivability.length":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aLength = Math.max(aSize.x, aSize.y, aSize.z);
-              const bLength = Math.max(bSize.x, bSize.y, bSize.z);
-
-              return aLength - bLength;
-            });
-            break;
-
-          case "fire.dpm":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveDpm(
-                  a.turrets.at(-1)!.guns.at(-1)!,
-                  a.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ) -
-                resolveDpm(
-                  b.turrets.at(-1)!.guns.at(-1)!,
-                  b.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ),
-            );
-            break;
-
-          case "fire.dpmPremium":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      a.turrets.at(-1)!.guns.at(-1)!,
-                      a.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      b.turrets.at(-1)!.guns.at(-1)!,
-                      b.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0),
-            );
-            break;
-
-          case "fire.reload":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-                resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
-            );
-            break;
-
-          case "fire.caliber":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
-            );
-            break;
-
-          case "fire.standardPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near,
-            );
-            break;
-
-          case "fire.premiumPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.tertiaryPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.damage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage,
-            );
-            break;
-
-          case "fire.moduleDamage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage,
-            );
-            break;
-
-          case "fire.shellVelocity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity,
-            );
-            break;
-
-          case "fire.shellRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].range -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].range,
-            );
-            break;
-
-          case "fire.shellCapacity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shell_capacity -
-                b.turrets.at(-1)!.guns.at(-1)!.shell_capacity,
-            );
-            break;
-
-          case "fire.aimTime":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.aim_time -
-                b.turrets.at(-1)!.guns.at(-1)!.aim_time,
-            );
-            break;
-
-          case "fire.dispersionStill":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.dispersion_base -
-                b.turrets.at(-1)!.guns.at(-1)!.dispersion_base,
-            );
-            break;
-
-          case "fire.dispersionMoving":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.dispersion_move -
-                b.tracks.at(-1)!.dispersion_move,
-            );
-            break;
-
-          case "fire.gunDepression":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max +
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max -
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "fire.gunElevation":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min +
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min -
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "maneuverability.forwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_forwards - b.speed_forwards,
-            );
-            break;
-
-          case "maneuverability.backwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_backwards - b.speed_backwards,
-            );
-            break;
-
-          case "maneuverability.power":
-            sorted = filtered.sort(
-              (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
-            );
-            break;
-
-          case "maneuverability.powerToWeight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.engines.at(-1)!.power /
-                  (a.weight +
-                    a.engines.at(-1)!.weight +
-                    a.tracks.at(-1)!.weight +
-                    a.turrets.at(-1)!.weight +
-                    a.turrets.at(-1)!.guns.at(-1)!.weight) -
-                b.engines.at(-1)!.power /
-                  (b.weight +
-                    b.engines.at(-1)!.weight +
-                    b.tracks.at(-1)!.weight +
-                    b.turrets.at(-1)!.weight +
-                    b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.weight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.weight +
-                a.engines.at(-1)!.weight +
-                a.tracks.at(-1)!.weight +
-                a.turrets.at(-1)!.weight +
-                a.turrets.at(-1)!.guns.at(-1)!.weight -
-                (b.weight +
-                  b.engines.at(-1)!.weight +
-                  b.tracks.at(-1)!.weight +
-                  b.turrets.at(-1)!.weight +
-                  b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.traverseSpeed":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.traverse_speed -
-                b.tracks.at(-1)!.traverse_speed,
-            );
-            break;
         }
 
-        return tankopediaSort.direction === "ascending"
-          ? sorted
-          : sorted.reverse();
-      } else {
-        return filtered;
+        values.set(tank.id, sortValue);
       }
+
+      const direction =
+        tankopediaSort.direction === TankopediaSortDirection.Ascending ? 1 : -1;
+
+      return [...filtered].sort((a, b) => {
+        const aValue = values.get(a.id);
+        const bValue = values.get(b.id);
+
+        if (aValue === undefined) return bValue === undefined ? 0 : 1;
+        if (bValue === undefined) return -1;
+
+        if (aValue === bValue) return 0;
+
+        return (aValue < bValue ? -1 : 1) * direction;
+      });
     }, [tankFilters, tankopediaSort]);
 
-    const data = sorted.map((tank) => ({
-      key: `${tank.id}`,
-      tank,
-      onTankSelect: onSelect,
-    }));
+    console.log("V", sorted.length);
+
+    const sortConfig =
+      tankopediaSort.by !== null &&
+      sortableCharacteristics.has(tankopediaSort.by)
+        ? tankopediaSort.by
+        : undefined;
+
+    const renderCharacteristic = useCharacteristicRenderer();
+
+    const data = sorted.map((tank) => {
+      const tankDefaultCharacteristics = defaultCharacteristics.get(tank.id)!;
+      const shouldRenderDiscriminator =
+        tankopediaSort.by !== null &&
+        tankDefaultCharacteristics.has(tankopediaSort.by);
+
+      return {
+        key: `${tank.id}`,
+        tank,
+        discriminator: shouldRenderDiscriminator
+          ? renderCharacteristic(
+              tankDefaultCharacteristics.get(tankopediaSort.by!)!,
+              characteristicRenderConfigs.get(tankopediaSort.by!)!,
+            )
+          : null,
+        onTankSelect: onSelect,
+      };
+    });
 
     return (
       <Flex className={styles.container} column gap="4">
@@ -473,16 +258,16 @@ export const TankSearch = memo<TankSearchProps>(
               )}
             </div>
 
-            {tankopediaSort.by !== "meta.none" && (
+            {sortConfig && (
               <Text color="gray">
                 {literals(strings.website.common.tank_search.sorting_by, {
-                  name: strings.website.common.tank_search.sort[
-                    tankopediaSort.by
-                  ],
+                  name: (
+                    strings.tanks.characteristics.items as Record<
+                      string,
+                      string
+                    >
+                  )[sortConfig],
                 })}
-                {SORT_UNITS[tankopediaSort.by] === undefined
-                  ? ""
-                  : ` (${SORT_UNITS[tankopediaSort.by]})`}
                 , {tankopediaSort.direction}
               </Text>
             )}