diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index e2b922e71..c8484b19c 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -1013,6 +1013,7 @@
"power_to_weight_ratio": "Power to weight ratio",
"hull_traverse_speed": "Hull traverse speed",
"camouflage": "Camouflage",
+ "reload": "Reload",
"crewCount": "Crew count",
"shellNormalization": "Normalization",
@@ -1111,6 +1112,7 @@
"button": "Compare tanks",
"description": "Compare tank statistics",
"seo_description": "Compare tanks statistics and loadouts in World of Tanks Blitz",
+
"actions": {
"add": {
"button": "Add",
@@ -1124,9 +1126,31 @@
"absolute": "Absolute"
}
},
+
"no_tanks": {
"title": "No tanks selected",
"body": "Press the Add button to get started"
+ },
+
+ "table": {
+ "equipment": {
+ "clear": "Clear",
+ "apply_to_all": "Apply to all"
+ },
+ "skills": {
+ "clear": "Clear",
+ "maximize": "Maximize"
+ },
+ "modules": {
+ "stock": "Stock",
+ "upgrade": "Upgrade"
+ },
+ "provisions": {
+ "clear": "Clear"
+ },
+ "consumables": {
+ "clear": "Clear"
+ }
}
},
"performance": {
diff --git a/packages/website/src/components/Compare/Body.tsx b/packages/website/src/components/Compare/Body.tsx
index 3788536cb..b4c0afd57 100644
--- a/packages/website/src/components/Compare/Body.tsx
+++ b/packages/website/src/components/Compare/Body.tsx
@@ -16,7 +16,7 @@ export function Body({ stats }: BodyProps) {
const hasNonRegularGun = members.some(
({ gun }) => gun.gun_type!.$case !== 'regular',
);
- const { unwrap } = useLocale();
+ const { unwrap, strings } = useLocale();
const mutateCompareEphemeral = CompareEphemeral.useMutation();
return (
@@ -78,10 +78,10 @@ export function Body({ stats }: BodyProps) {
-
+
stats.shellReload ??
@@ -98,90 +98,44 @@ export function Body({ stats }: BodyProps) {
<>
-
+
>
)}
-
-
+
+
{hasNonRegularGun && (
-
+
)}
+
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
Maneuverability
+
+
+
+
+
-
-
-
-
-
+
-
Survivability
-
+
(stats.fireChance * 100).toFixed(0)}
deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
/>
+
- (stats.camouflageStill * 100).toFixed(2)}
deltaNominalDisplay={(delta) => (delta * 100).toFixed(2)}
/>
(stats.camouflageMoving * 100).toFixed(2)}
@@ -381,7 +275,6 @@ export function Body({ stats }: BodyProps) {
/>
(stats.camouflageShootingStill * 100).toFixed(2)}
@@ -389,7 +282,6 @@ export function Body({ stats }: BodyProps) {
/>
(stats.camouflageShootingMoving * 100).toFixed(2)}
@@ -397,7 +289,6 @@ export function Body({ stats }: BodyProps) {
/>
(stats.camouflageCaughtOnFire * 100).toFixed(2)}
@@ -405,14 +296,12 @@ export function Body({ stats }: BodyProps) {
/>
number | undefined);
+type CompareRowProps = {
display?: (
member: Awaited,
) => number | string | undefined;
@@ -23,24 +21,39 @@ interface CompareRowProps {
deltaNominalDisplay?: (delta: number) => string | number;
indent?: boolean;
stats: TankCharacteristics[];
-}
+} & (
+ | {
+ name: string;
+ value: (member: TankCharacteristics) => number | undefined;
+ }
+ | {
+ value: keyof TankCharacteristics;
+ }
+);
export function CompareRow({
- value,
- name,
display,
deltaType = 'higherIsBetter',
decimals,
deltaNominalDisplay,
indent,
stats,
+ ...props
}: CompareRowProps) {
+ const { strings } = useLocale();
const mutateCompareEphemeral = CompareEphemeral.useMutation();
const sorting = CompareEphemeral.use((state) => state.sorting);
const deltaMode = ComparePersistent.use((state) => state.deltaMode);
const values = stats.map((stat) =>
- typeof value === 'function' ? value(stat)! : (stat[value] as number),
+ typeof props.value === 'function'
+ ? props.value(stat)!
+ : (stat[props.value] as number),
);
+ const id = useRef(Math.random());
+ const name =
+ typeof props.value === 'string'
+ ? strings.website.tools.tankopedia.characteristics.values[props.value]
+ : props.name;
return (
@@ -51,7 +64,7 @@ export function CompareRow({
gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
>
{
mutateCompareEphemeral((draft) => {
@@ -62,26 +75,26 @@ export function CompareRow({
const valueB = values[indexB];
return draft.sorting?.direction === 'ascending' &&
- draft.sorting.by === name
+ draft.sorting.by === id.current
? valueA - valueB
: valueB - valueA;
});
draft.sorting = {
- by: name,
+ by: id.current,
direction:
draft.sorting?.direction === 'ascending' &&
- draft.sorting.by === name
+ draft.sorting.by === id.current
? 'descending'
: 'ascending',
};
});
}}
>
- {(sorting === undefined || sorting.by !== name) && (
+ {(sorting === undefined || sorting.by !== id.current) && (
)}
- {sorting?.by === name && (
+ {sorting?.by === id.current && (
<>
{sorting.direction === 'ascending' && }
{sorting.direction === 'descending' && }
diff --git a/packages/website/src/components/Compare/CompareTable.tsx b/packages/website/src/components/Compare/CompareTable.tsx
index f9367e5c0..f92d3ece0 100644
--- a/packages/website/src/components/Compare/CompareTable.tsx
+++ b/packages/website/src/components/Compare/CompareTable.tsx
@@ -44,7 +44,7 @@ export function CompareTable({ stats }: CompareTableProps) {
const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
const members = CompareEphemeral.use((state) => state.members);
const mutateCompareEphemeral = CompareEphemeral.useMutation();
- const { unwrap } = useLocale();
+ const { unwrap, strings } = useLocale();
return (
- Clear
+ {strings.website.tools.compare.table.skills.clear}
@@ -257,7 +257,7 @@ export function CompareTable({ stats }: CompareTableProps) {
});
}}
>
- Stock
+ {strings.website.tools.compare.table.modules.stock}
@@ -357,7 +360,10 @@ export function CompareTable({ stats }: CompareTableProps) {
});
}}
>
- Clear
+ {
+ strings.website.tools.compare.table.provisions
+ .clear
+ }
@@ -441,7 +447,10 @@ export function CompareTable({ stats }: CompareTableProps) {
});
}}
>
- Clear
+ {
+ strings.website.tools.compare.table.equipment
+ .clear
+ }
@@ -539,7 +551,10 @@ export function CompareTable({ stats }: CompareTableProps) {
});
}}
>
- Clear
+ {
+ strings.website.tools.compare.table.consumables
+ .clear
+ }
diff --git a/packages/website/src/stores/compareEphemeral.ts b/packages/website/src/stores/compareEphemeral.ts
index 97d0c4f6e..19f404493 100644
--- a/packages/website/src/stores/compareEphemeral.ts
+++ b/packages/website/src/stores/compareEphemeral.ts
@@ -11,7 +11,7 @@ export interface CompareEphemeral {
members: CompareMember[];
sorting?: {
direction: 'ascending' | 'descending';
- by: string;
+ by: number;
};
}