From bb0b932d26182e64acb44086d4bcbf7ecca78981 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 3 Jun 2026 12:56:30 -0500
Subject: [PATCH] unit rendering

---
 packages/i18n/strings/en.json                        |  1 -
 .../TankopediaCharacteristics/index.module.css       |  6 ++++++
 .../components/TankopediaCharacteristics/index.tsx   |  8 +++++++-
 ...sticRenderer.ts => useCharacteristicRenderer.tsx} | 12 +++++++-----
 .../src/tankopedia/characteristicsOrder.tsx          |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)
 rename packages/website-ue/src/hooks/{useCharacteristicRenderer.ts => useCharacteristicRenderer.tsx} (88%)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index f8c3d25c2..e1ca671f5 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -82,7 +82,6 @@
   },
 
   "units": {
-    "hp_min": "{value}hp/min",
     "s": "{value}s",
     "hp": "{value}hp",
     "mm": "{value}mm",
diff --git a/packages/website-ue/src/components/TankopediaCharacteristics/index.module.css b/packages/website-ue/src/components/TankopediaCharacteristics/index.module.css
index b53e4eb43..6bcd5ea62 100644
--- a/packages/website-ue/src/components/TankopediaCharacteristics/index.module.css
+++ b/packages/website-ue/src/components/TankopediaCharacteristics/index.module.css
@@ -79,6 +79,12 @@
           .value {
             display: flex;
             justify-content: space-between;
+
+            .units {
+              display: flex;
+              align-items: end;
+              gap: var(--space-2);
+            }
           }
 
           .ranking {
diff --git a/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx b/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx
index a20d53cb0..90444791b 100644
--- a/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx
+++ b/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx
@@ -95,6 +95,7 @@ interface ItemProps {
 function Item({ config, value }: ItemProps) {
   const strings = useStrings();
   const renderCharacteristic = useCharacteristicRenderer();
+  const hasUnits = config.units !== undefined;
 
   return (
     <span className={styles.item}>
@@ -106,7 +107,12 @@ function Item({ config, value }: ItemProps) {
             ]
           }
         </Text>
-        <Text>{renderCharacteristic(value, config)}</Text>
+
+        <Text lowContrast={hasUnits} size={hasUnits ? "minor" : undefined}>
+          <div className={styles.units}>
+            {renderCharacteristic(value, config)}
+          </div>
+        </Text>
       </div>
 
       <div className={styles.ranking}>
diff --git a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts b/packages/website-ue/src/hooks/useCharacteristicRenderer.tsx
similarity index 88%
rename from packages/website-ue/src/hooks/useCharacteristicRenderer.ts
rename to packages/website-ue/src/hooks/useCharacteristicRenderer.tsx
index eadb4fd3e..180882ea8 100644
--- a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts
+++ b/packages/website-ue/src/hooks/useCharacteristicRenderer.tsx
@@ -1,13 +1,14 @@
+import { literalsArray } from "@blitzkit/i18n";
 import { useMemo, type ReactNode } from "react";
+import { Text } from "../components/Text";
 import type { CharacteristicOutput } from "../tankopedia/characteristics";
 import {
   characteristicsOrder,
   type CharacteristicRenderConfig,
 } from "../tankopedia/characteristicsOrder";
 import { useGameStrings } from "./useGameStrings";
-import { useStrings } from "./useStrings";
 import { useLocale } from "./useLocale";
-import { literals } from "@blitzkit/i18n";
+import { useStrings } from "./useStrings";
 
 export function useCharacteristicRenderer() {
   const groups = useMemo(() => {
@@ -39,7 +40,7 @@ export function useCharacteristicRenderer() {
 
     if (typeof characteristic === "number") {
       if (Number.isFinite(characteristic)) {
-        let value: string | number = characteristic;
+        let value: ReactNode = characteristic;
 
         if (config.decimals !== undefined) {
           value *= 10 ** config.decimals;
@@ -54,8 +55,9 @@ export function useCharacteristicRenderer() {
         }
 
         if (config.units !== undefined) {
-          // TODO: render units with lowContrast Text
-          value = literals(strings.units[config.units], { value });
+          value = literalsArray(strings.units[config.units], {
+            value: <Text>{value}</Text>,
+          });
         }
 
         return value;
diff --git a/packages/website-ue/src/tankopedia/characteristicsOrder.tsx b/packages/website-ue/src/tankopedia/characteristicsOrder.tsx
index e658cf83a..312d1461f 100644
--- a/packages/website-ue/src/tankopedia/characteristicsOrder.tsx
+++ b/packages/website-ue/src/tankopedia/characteristicsOrder.tsx
@@ -110,7 +110,7 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
           return GunType[output as GunType];
         },
       },
-      { name: "dpm", decimals: 0, units: "hp_min", localize: true },
+      { name: "dpm", decimals: 0, units: "hp", localize: true },
       { name: "damage", units: "hp", localize: true },
       { name: "module_damage", units: "hp", localize: true },
       { name: "reload", decimals: 1, units: "s" },