feat: game strings in characteristics

Co-authored-by: Copilot <[email protected]>

packages/website-ue/src/hooks/useCharacteristicRenderer.ts

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import type { CharacteristicOutput } from "../core/tankopedia/characteristics";
+import {
+  characteristicsOrder,
+  type CharacteristicRenderConfig,
+} from "../core/tankopedia/characteristicsOrder";
+import { useGameStrings } from "./useGameStrings";
+
+export function useCharacteristicRenderer() {
+  const groups = useMemo(() => {
+    const groups: string[] = [];
+
+    for (const group of characteristicsOrder) {
+      for (const item of group.order) {
+        if ("strings" in item && item.strings) {
+          groups.push(item.strings);
+        }
+      }
+    }
+
+    return groups;
+  }, []);
+  const tankEntityStrings = useGameStrings(groups);
+
+  function renderCharacteristic(
+    characteristic: CharacteristicOutput,
+    config: CharacteristicRenderConfig,
+  ): string | null {
+    if (characteristic === null) return null;
+
+    if (config.render) return config.render(characteristic);
+
+    if (typeof characteristic === "number") {
+      if (Number.isFinite(characteristic)) {
+        if (config.decimals === undefined) {
+          return characteristic.toString();
+        }
+
+        return characteristic.toFixed(config.decimals);
+      }
+
+      return `${characteristic < 0 ? "-" : ""}∞`;
+    }
+
+    if (typeof characteristic === "string") {
+      if (config.strings) {
+        return tankEntityStrings[characteristic];
+      }
+
+      return characteristic;
+    }
+
+    return characteristic
+      .map((c) => renderCharacteristic(c, config))
+      .join(", ");
+  }
+
+  return renderCharacteristic;
+}

packages/website-ue/src/hooks/useGameStrings.ts

@@ -2,11 +2,24 @@ import { api } from "../core/api/dynamic";
 import { useAwait } from "./useAwait";
 import { useLocale } from "./useLocale";
 
-export function useGameStrings(group: string) {
+export function useGameStrings(groups: string | string[]) {
+  const resolved = typeof groups === "string" ? [groups] : groups;
   const locale = useLocale();
   const strings = useAwait(
-    () => api.groupedGameStrings(locale, group, true),
-    `game-strings-${locale}-${group}`,
+    async () => {
+      const accumulated: Record<string, string> = {};
+
+      await Promise.all(
+        resolved.map(async (group) => {
+          const strings = await api.groupedGameStrings(locale, group, true);
+          Object.assign(accumulated, strings);
+        }),
+      );
+
+      return accumulated;
+    },
+    `game-strings-${locale}-${resolved.sort().join("-")}`,
   );
+
   return strings;
 }