feat: generalize render chars

packages/website-ue/src/core/tankopedia/characteristics.ts

@@ -84,7 +84,7 @@ export const characteristics = {
     );
   },
 
-  reloads({ characteristic, attribute, parameters }) {
+  reloads({ characteristic, parameters }) {
     const gunType = characteristic("gun_type")!;
 
     if (gunType !== GunType.AutoReloader) return null;

packages/website-ue/src/core/tankopedia/characteristicsOrder.ts

@@ -5,14 +5,16 @@ export enum BetterDirection {
   Lower,
 }
 
+export interface CharacteristicRenderConfig {
+  name: CharacteristicName;
+  decimals?: number;
+  units?: string;
+}
+
 type CharacteristicsOrder = {
   group: string;
   order: (
-    | {
-        name: CharacteristicName;
-        decimals?: number;
-        units?: string;
-      }
+    | CharacteristicRenderConfig
     | {
         toy: string;
       }
@@ -25,11 +27,12 @@ export const characteristicsOrder: CharacteristicsOrder = [
     order: [
       { name: "gun_type" },
       { name: "dpm", decimals: 0, units: "hp_min" },
+      { name: "reload", decimals: 2, units: "s" },
+      { name: "reloads", decimals: 2, units: "s" },
       { name: "damage", units: "hp" },
       { name: "module_damage", units: "hp" },
       { name: "penetration", units: "mm" },
       { name: "clip_size" },
-      { name: "reload", decimals: 2, units: "s" },
       { name: "intra_clip", decimals: 2, units: "s" },
 
       { toy: "reload" },

packages/website-ue/src/core/tankopedia/renderCharacteristic.ts

@@ -0,0 +1,23 @@
+import type { CharacteristicOutput } from "./characteristics";
+import type { CharacteristicRenderConfig } from "./characteristicsOrder";
+
+export function renderCharacteristic(
+  characteristic: CharacteristicOutput,
+  config: CharacteristicRenderConfig
+): string | null {
+  if (characteristic === null) return null;
+
+  if (typeof characteristic === "number") {
+    if (Number.isFinite(characteristic)) {
+      if (config.decimals === undefined) {
+        return characteristic.toString();
+      }
+
+      return characteristic.toFixed(config.decimals);
+    }
+
+    return `${characteristic < 0 ? "-" : ""}∞`;
+  }
+
+  return characteristic.map((c) => renderCharacteristic(c, config)).join(", ");
+}

packages/website-ue/src/pages/tanks/[slug]/_index.tsx

@@ -3,6 +3,7 @@ import { Suspense, useMemo } from "react";
 import { api } from "../../../core/api/dynamic";
 import { characteristicsOrder } from "../../../core/tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../core/tankopedia/computeCharacteristics";
+import { renderCharacteristic } from "../../../core/tankopedia/renderCharacteristic";
 import { useAwait } from "../../../hooks/useAwait";
 import { Tankopedia } from "../../../stores/tankopedia";
 
@@ -66,41 +67,19 @@ function Content({ id }: { id: string }) {
         <>
           <h2 key={group}>{group}</h2>
 
-          {order.map((entry) => {
-            if ("toy" in entry) {
-              return <p key={`toy-${entry.toy}`}>toy: {entry.toy}</p>;
+          {order.map((config) => {
+            if ("toy" in config) {
+              return <p key={`toy-${config.toy}`}>toy: {config.toy}</p>;
             } else {
-              const characteristic = characteristics[entry.name];
+              const characteristic = characteristics[config.name];
 
               if (characteristic === null) return null;
 
-              let rendered: string | number;
-
-              if (Number.isFinite(characteristic)) {
-                if (entry.decimals === undefined) {
-                  if (typeof characteristic === "number") {
-                    rendered = characteristic;
-                  } else {
-                    rendered = characteristic.join(", ");
-                  }
-                } else {
-                  if (typeof characteristic === "number") {
-                    rendered = characteristic.toFixed(entry.decimals);
-                  } else {
-                    rendered = characteristic
-                      .map((c) => c.toFixed(entry.decimals))
-                      .join(", ");
-                  }
-                }
-              } else {
-                rendered = `${
-                  Math.sign(characteristic as number) === -1 ? "-" : ""
-                }∞`;
-              }
+              const rendered = renderCharacteristic(characteristic, config);
 
               return (
-                <p key={`characteristic-${entry.name}`}>
-                  {entry.name}: {rendered} {entry.units && `${entry.units}`}
+                <p key={`characteristic-${config.name}`}>
+                  {config.name}: {rendered} {config.units && `${config.units}`}
                 </p>
               );
             }