unit rendering

packages/i18n/strings/en.json

@@ -82,7 +82,6 @@
   },
 
   "units": {
-    "hp_min": "{value}hp/min",
     "s": "{value}s",
     "hp": "{value}hp",
     "mm": "{value}mm",

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 {

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}>

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;

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" },