some units

packages/website-ue/src/components/TankopediaCharacteristics/index.tsx

@@ -37,7 +37,9 @@ interface GroupProps {
 function Group({ group, characteristics }: GroupProps) {
   const strings = useStrings();
   const toys = group.order.filter((item) => "toy" in item).length;
-  const items = group.order.filter((item) => "name" in item).length;
+  const items = group.order.filter(
+    (item) => "name" in item && characteristics[item.name] !== null,
+  ).length;
   const groupSpan = `calc(${toys} * var(--group-span) + ${items} + 2)`;
   const contentSpan = `calc(${toys} * var(--group-span) + ${items})`;
 
@@ -70,13 +72,14 @@ function Group({ group, characteristics }: GroupProps) {
           gridRow: `span ${contentSpan}`,
         }}
       >
-        {group.order.map((item) =>
-          "toy" in item ? (
-            <Toy {...item} />
-          ) : (
-            <Item config={item} value={characteristics[item.name]} />
-          ),
-        )}
+        {group.order.map((item) => (
+          <>
+            {"toy" in item && <Toy {...item} />}
+            {"name" in item && characteristics[item.name] !== null && (
+              <Item config={item} value={characteristics[item.name]} />
+            )}
+          </>
+        ))}
 
         <div className={styles.dead} />
       </div>
@@ -107,7 +110,7 @@ function Item({ config, value }: ItemProps) {
       </div>
 
       <div className={styles.ranking}>
-        <Bar value={Math.random()} />
+        <Bar value={0.5} />
 
         <Text lowContrast size="minor" className={styles.number}>
           1 / 132

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

@@ -6,6 +6,8 @@ import {
 } from "../tankopedia/characteristicsOrder";
 import { useGameStrings } from "./useGameStrings";
 import { useStrings } from "./useStrings";
+import { useLocale } from "./useLocale";
+import { literals } from "@blitzkit/i18n";
 
 export function useCharacteristicRenderer() {
   const groups = useMemo(() => {
@@ -22,6 +24,7 @@ export function useCharacteristicRenderer() {
     return groups;
   }, []);
 
+  const locale = useLocale();
   const strings = useStrings();
   const gameStrings = useGameStrings(groups);
 
@@ -36,11 +39,26 @@ export function useCharacteristicRenderer() {
 
     if (typeof characteristic === "number") {
       if (Number.isFinite(characteristic)) {
-        if (config.decimals === undefined) {
-          return characteristic.toString();
+        let value: string | number = characteristic;
+
+        if (config.decimals !== undefined) {
+          value *= 10 ** config.decimals;
+          value = Math.round(value);
+          value /= 10 ** config.decimals;
         }
 
-        return characteristic.toFixed(config.decimals);
+        if (config.localize) {
+          value = value.toLocaleString(locale);
+        } else {
+          value = value.toFixed(config.decimals);
+        }
+
+        if (config.units !== undefined) {
+          // TODO: render units with lowContrast Text
+          value = literals(strings.units[config.units], { value });
+        }
+
+        return value;
       }
 
       return `${characteristic < 0 ? "-" : ""}∞`;

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

@@ -345,7 +345,7 @@ export const characteristics = {
     );
   },
 
-  camouflage({ attribute, characteristic, attributeSafe, state, tank }) {
+  camouflage({ attribute, attributeSafe, state, tank }) {
     const base = attribute(
       TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL,
     );
@@ -399,8 +399,10 @@ export const characteristics = {
     return -Infinity;
   },
 
-  dispersion_angle() {
-    return -Infinity;
+  dispersion_angle({ characteristic }) {
+    const dispersion = characteristic("dispersion") as number;
+    const angle = Math.atan2(dispersion / 2, 100) * (180 / Math.PI);
+    return angle;
   },
 
   azimuth_left() {

packages/website-ue/src/tankopedia/characteristicsOrder.tsx

@@ -14,7 +14,8 @@ export enum BetterDirection {
 export interface CharacteristicRenderConfig {
   name: CharacteristicName;
   decimals?: number;
-  units?: string;
+  units?: keyof Strings["units"];
+  localize?: boolean;
   strings?: string;
   render?: (data: {
     output: CharacteristicOutput;
@@ -109,11 +110,11 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
           return GunType[output as GunType];
         },
       },
-      { name: "dpm", decimals: 0, units: "hp_min" },
-      { name: "damage", units: "hp" },
-      { name: "module_damage", units: "hp" },
-      { name: "reload", decimals: 2, units: "s" },
-      { name: "reloads", decimals: 2, units: "s" },
+      { name: "dpm", decimals: 0, units: "hp_min", localize: true },
+      { name: "damage", units: "hp", localize: true },
+      { name: "module_damage", units: "hp", localize: true },
+      { name: "reload", decimals: 1, units: "s" },
+      { name: "reloads", decimals: 1, units: "s" },
 
       { toy: "reload" },
     ],
@@ -160,7 +161,7 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
     order: [
       { name: "aim_time", decimals: 1, units: "s" },
       { name: "dispersion", decimals: 3, units: "m" },
-      { name: "dispersion_angle", decimals: 3, units: "m" },
+      { name: "dispersion_angle", decimals: 3, units: "deg" },
       { toy: "aim_time" },
     ],
   },