diff --git a/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx b/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx index e11c03709..a20d53cb0 100644 --- a/packages/website-ue/src/components/TankopediaCharacteristics/index.tsx +++ b/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 ? ( - - ) : ( - - ), - )} + {group.order.map((item) => ( + <> + {"toy" in item && } + {"name" in item && characteristics[item.name] !== null && ( + + )} + + ))}
@@ -107,7 +110,7 @@ function Item({ config, value }: ItemProps) {
- + 1 / 132 diff --git a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts b/packages/website-ue/src/hooks/useCharacteristicRenderer.ts index 2de76505f..eadb4fd3e 100644 --- a/packages/website-ue/src/hooks/useCharacteristicRenderer.ts +++ b/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 ? "-" : ""}∞`; diff --git a/packages/website-ue/src/tankopedia/characteristics.ts b/packages/website-ue/src/tankopedia/characteristics.ts index 6be501d51..aacb89711 100644 --- a/packages/website-ue/src/tankopedia/characteristics.ts +++ b/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() { diff --git a/packages/website-ue/src/tankopedia/characteristicsOrder.tsx b/packages/website-ue/src/tankopedia/characteristicsOrder.tsx index 0dfb23862..1c3db32ab 100644 --- a/packages/website-ue/src/tankopedia/characteristicsOrder.tsx +++ b/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" }, ], },