From a4828774ca1bf0328a817770faa710fee96bc24a Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:14:34 -0600 Subject: [PATCH] feat: translate compare --- packages/i18n/strings/en.json | 24 +++ .../website/src/components/Compare/Body.tsx | 159 +++--------------- .../src/components/Compare/CompareRow.tsx | 43 +++-- .../src/components/Compare/CompareTable.tsx | 33 +++- .../website/src/stores/compareEphemeral.ts | 2 +- 5 files changed, 100 insertions(+), 161 deletions(-) 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; }; }