From 7dfdf4c11be9c978dd42875601c280b4c936c4dc Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Mon, 6 Jan 2025 20:31:21 -0600 Subject: [PATCH] feat: start of perforamnce --- packages/core/lang/en.json | 7 ++++- packages/core/src/i18n/strings.ts | 8 +++--- packages/core/src/math/formatCompact.ts | 5 ++-- .../website/src/components/Checks/index.tsx | 16 +++++++---- .../src/components/HomePageHotTanks.tsx | 12 ++++----- packages/website/src/components/LinkI18n.tsx | 5 ++-- .../Performance/PerformanceInfo.tsx | 27 ++++++++++++++----- packages/website/src/hooks/useLocale.tsx | 7 +++-- packages/website/src/layouts/BaseLayout.astro | 3 ++- .../[...locale]/tools/performance/_index.tsx | 20 +++++++++----- .../[...locale]/tools/performance/index.astro | 6 +++-- .../tools/tankopedia/[id]/_index.tsx | 13 +++++---- .../[...locale]/tools/tankopedia/_index.tsx | 11 ++++---- 13 files changed, 90 insertions(+), 50 deletions(-) diff --git a/packages/core/lang/en.json b/packages/core/lang/en.json index 8d5244363..c2b47bd14 100644 --- a/packages/core/lang/en.json +++ b/packages/core/lang/en.json @@ -733,7 +733,12 @@ "name": "Performance", "button": "View tanks", "description": "Tank performance statistics", - "seo_description": "Best tanks and their performances in World of Tanks Blitz" + "seo_description": "Best tanks and their performances in World of Tanks Blitz", + "estimation": { + "body": "Estimated stats based on %s1 players. Updated %s2 ago.", + "hours": "%s1 hours", + "minutes": "%s1 minutes" + } }, "gallery": { "name": "Gallery", diff --git a/packages/core/src/i18n/strings.ts b/packages/core/src/i18n/strings.ts index 7a0ec0c32..cddaf653e 100644 --- a/packages/core/src/i18n/strings.ts +++ b/packages/core/src/i18n/strings.ts @@ -1,9 +1,11 @@ import { merge } from 'lodash-es'; import type en from '../../lang/en.json'; -import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '../blitzkit'; +import { assertSecret, DEFAULT_LOCALE, SUPPORTED_LOCALES } from '../blitzkit'; import { TranslationTree } from './translator'; -const DEBUG_MISSING_I18N = import.meta.env.DEBUG_MISSING_I18N; +const PUBLIC_DEBUG_MISSING_I18N = assertSecret( + import.meta.env.PUBLIC_DEBUG_MISSING_I18N, +); const files = import.meta.glob('../../lang/*.json', { eager: true }); export const localizedStrings: Record = {}; @@ -23,7 +25,7 @@ SUPPORTED_LOCALES.forEach((locale) => { const strings = files[`../../lang/${locale}.json`]; const mergedStrings = merge({}, defaultStrings, strings); - if (DEBUG_MISSING_I18N === 'true') nuke(mergedStrings); + if (PUBLIC_DEBUG_MISSING_I18N === 'true') nuke(mergedStrings); localizedStrings[locale] = mergedStrings as typeof en; }); diff --git a/packages/core/src/math/formatCompact.ts b/packages/core/src/math/formatCompact.ts index 9871953fc..cdc771bd4 100644 --- a/packages/core/src/math/formatCompact.ts +++ b/packages/core/src/math/formatCompact.ts @@ -1,5 +1,4 @@ -const numberFormat = Intl.NumberFormat('en', { notation: 'compact' }); - -export function formatCompact(number: number) { +export function formatCompact(locale: string, number: number) { + const numberFormat = Intl.NumberFormat(locale, { notation: 'compact' }); return numberFormat.format(number); } diff --git a/packages/website/src/components/Checks/index.tsx b/packages/website/src/components/Checks/index.tsx index 7288edad3..7cbbfcaeb 100644 --- a/packages/website/src/components/Checks/index.tsx +++ b/packages/website/src/components/Checks/index.tsx @@ -1,7 +1,11 @@ import { assertSecret, idToRegion } from '@blitzkit/core'; import { Button, Flex, Heading, Text } from '@radix-ui/themes'; import { useEffect, useState } from 'react'; -import { useLocale } from '../../hooks/useLocale'; +import { + LocaleProvider, + useLocale, + type LocaleAcceptorProps, +} from '../../hooks/useLocale'; import { App } from '../../stores/app'; import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants'; import { LinkI18n } from '../LinkI18n'; @@ -20,11 +24,13 @@ type Extension = status: 'error'; }; -export function Checks() { +export function Checks({ locale }: LocaleAcceptorProps) { return ( - - - + + + + + ); } diff --git a/packages/website/src/components/HomePageHotTanks.tsx b/packages/website/src/components/HomePageHotTanks.tsx index 2bd8b05d3..939be24b4 100644 --- a/packages/website/src/components/HomePageHotTanks.tsx +++ b/packages/website/src/components/HomePageHotTanks.tsx @@ -4,7 +4,11 @@ import { Box, Flex, Heading, Text } from '@radix-ui/themes'; import { google } from 'googleapis'; import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions'; import { literals } from '../core/i18n/literals'; -import { LocaleProvider, useLocale } from '../hooks/useLocale'; +import { + LocaleProvider, + useLocale, + type LocaleAcceptorProps, +} from '../hooks/useLocale'; import { TankopediaPersistent } from '../stores/tankopediaPersistent'; import { TankCard } from './TankCard'; @@ -65,11 +69,7 @@ const hotTanks = report.data.rows views, })); -interface HomePageHotTanksProps { - locale: string | undefined; -} - -export function HomePageHotTanks({ locale }: HomePageHotTanksProps) { +export function HomePageHotTanks({ locale }: LocaleAcceptorProps) { return ( diff --git a/packages/website/src/components/LinkI18n.tsx b/packages/website/src/components/LinkI18n.tsx index da2cc0d90..ba8e66a50 100644 --- a/packages/website/src/components/LinkI18n.tsx +++ b/packages/website/src/components/LinkI18n.tsx @@ -1,9 +1,8 @@ import { Link, type LinkProps } from '@radix-ui/themes'; import { getBestLocale } from '../core/i18n/getBestLocale'; +import type { LocaleAcceptorProps } from '../hooks/useLocale'; -type LinkI18nProps = LinkProps & { - locale: string | undefined; -}; +type LinkI18nProps = LinkProps & LocaleAcceptorProps; export function LinkI18n({ locale, href, ...props }: LinkI18nProps) { const bestLocale = getBestLocale(); diff --git a/packages/website/src/components/Performance/PerformanceInfo.tsx b/packages/website/src/components/Performance/PerformanceInfo.tsx index 6c5ee8f05..038a104e0 100644 --- a/packages/website/src/components/Performance/PerformanceInfo.tsx +++ b/packages/website/src/components/Performance/PerformanceInfo.tsx @@ -3,8 +3,9 @@ import { InfoCircledIcon } from '@radix-ui/react-icons'; import { Callout, Flex } from '@radix-ui/themes'; import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions'; import { awaitableDiscoveredIdsDefinitions } from '../../core/awaitables/discoveredIdsDefinitions'; +import { literals } from '../../core/i18n/literals'; +import { useLocale } from '../../hooks/useLocale'; import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps'; -import { InlineSkeleton } from '../InlineSkeleton'; const [discoveredIdsDefinitions, averageDefinitions] = await Promise.all([ awaitableDiscoveredIdsDefinitions, @@ -12,14 +13,21 @@ const [discoveredIdsDefinitions, averageDefinitions] = await Promise.all([ ]); export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) { - const samples = formatCompact(Math.round(discoveredIdsDefinitions.count)); + const { strings, locale } = useLocale(); + const samples = formatCompact( + locale, + Math.round(discoveredIdsDefinitions.count), + ); const minutesAgo = Math.floor( (Date.now() - averageDefinitions.time) / (1000 * 60), ); const hoursAgo = Math.floor(minutesAgo / 60); - const timeAgo = `${hoursAgo === 0 ? minutesAgo : hoursAgo} ${ - hoursAgo === 0 ? 'minutes' : 'hours' - }`; + const timeAgo = literals( + strings.website.tools.performance.estimation[ + hoursAgo === 0 ? 'minutes' : 'hours' + ], + [`${hoursAgo === 0 ? minutesAgo : hoursAgo}`], + ); return ( @@ -28,9 +36,14 @@ export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) { - Estimated stats based on{' '} + {/* Estimated stats based on{' '} {skeleton ? : samples} players. - Updated {skeleton ? : timeAgo} ago. + Updated {skeleton ? : timeAgo} ago. */} + + {literals(strings.website.tools.performance.estimation.body, [ + samples, + timeAgo, + ])} diff --git a/packages/website/src/hooks/useLocale.tsx b/packages/website/src/hooks/useLocale.tsx index bc9422029..186dc61c4 100644 --- a/packages/website/src/hooks/useLocale.tsx +++ b/packages/website/src/hooks/useLocale.tsx @@ -7,8 +7,7 @@ const LocaleContext = createContext<{ localeRaw: string | undefined; } | null>(null); -interface LocaleProviderProps { - locale: string | undefined; +interface LocaleProviderProps extends LocaleAcceptorProps { children: ReactNode; } @@ -33,3 +32,7 @@ export function useLocale() { return { locale: context.locale, strings }; } + +export interface LocaleAcceptorProps { + locale: string | undefined; +} diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro index 9704d5d82..061f903d2 100644 --- a/packages/website/src/layouts/BaseLayout.astro +++ b/packages/website/src/layouts/BaseLayout.astro @@ -12,6 +12,7 @@ export interface Props { } const { noFooter } = Astro.props; +const { locale } = Astro.params; const { pathname } = Astro.url; const isRoot = pathname === '/'; --- @@ -57,7 +58,7 @@ const isRoot = pathname === '/'; - + diff --git a/packages/website/src/pages/[...locale]/tools/performance/_index.tsx b/packages/website/src/pages/[...locale]/tools/performance/_index.tsx index 2eff693ad..c2029990f 100644 --- a/packages/website/src/pages/[...locale]/tools/performance/_index.tsx +++ b/packages/website/src/pages/[...locale]/tools/performance/_index.tsx @@ -3,17 +3,25 @@ import { PerformanceInfo } from '../../../../components/Performance/PerformanceI import { PlayerCountControl } from '../../../../components/Performance/PlayerCountControl'; import { TankTable } from '../../../../components/Performance/Table'; import { FilterControl } from '../../../../components/TankSearch/components/FilterControl'; +import { + LocaleProvider, + type LocaleAcceptorProps, +} from '../../../../hooks/useLocale'; import { TankPerformanceEphemeral } from '../../../../stores/tankPerformanceEphemeral'; import { TankPerformanceSort } from '../../../../stores/tankPerformanceSort'; import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps'; -export function Page({ skeleton }: MaybeSkeletonComponentProps) { +type PageProps = MaybeSkeletonComponentProps & LocaleAcceptorProps; + +export function Page({ skeleton, locale }: PageProps) { return ( - - - - - + + + + + + + ); } diff --git a/packages/website/src/pages/[...locale]/tools/performance/index.astro b/packages/website/src/pages/[...locale]/tools/performance/index.astro index ed283ae41..f561bb676 100644 --- a/packages/website/src/pages/[...locale]/tools/performance/index.astro +++ b/packages/website/src/pages/[...locale]/tools/performance/index.astro @@ -5,12 +5,14 @@ import BaseLayout from '../../../../layouts/BaseLayout.astro'; import { Page } from './_index'; export { getStaticPaths } from '../../index.astro'; + +const { locale } = Astro.params; --- - - + + diff --git a/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx b/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx index 61c290a55..d75b97d42 100644 --- a/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx +++ b/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx @@ -12,17 +12,20 @@ import { VideoSection } from '../../../../../components/Tankopedia/VideoSection' import { awaitableModelDefinitions } from '../../../../../core/awaitables/modelDefinitions'; import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions'; import { awaitableTankDefinitions } from '../../../../../core/awaitables/tankDefinitions'; -import { LocaleProvider } from '../../../../../hooks/useLocale'; +import { + LocaleProvider, + type LocaleAcceptorProps, +} from '../../../../../hooks/useLocale'; import { App } from '../../../../../stores/app'; import { Duel } from '../../../../../stores/duel'; import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral'; import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent'; import type { MaybeSkeletonComponentProps } from '../../../../../types/maybeSkeletonComponentProps'; -type PageProps = MaybeSkeletonComponentProps & { - id: number; - locale: string | undefined; -}; +type PageProps = MaybeSkeletonComponentProps & + LocaleAcceptorProps & { + id: number; + }; const [tankDefinitions, provisionDefinitions, modelDefinitions] = await Promise.all([ diff --git a/packages/website/src/pages/[...locale]/tools/tankopedia/_index.tsx b/packages/website/src/pages/[...locale]/tools/tankopedia/_index.tsx index 6dafe221a..9586154a7 100644 --- a/packages/website/src/pages/[...locale]/tools/tankopedia/_index.tsx +++ b/packages/website/src/pages/[...locale]/tools/tankopedia/_index.tsx @@ -1,14 +1,13 @@ import { PageWrapper } from '../../../../components/PageWrapper'; import { TankSearch } from '../../../../components/TankSearch'; -import { LocaleProvider } from '../../../../hooks/useLocale'; +import { + LocaleProvider, + type LocaleAcceptorProps, +} from '../../../../hooks/useLocale'; import { App } from '../../../../stores/app'; import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent'; -interface PageProps { - locale: string | undefined; -} - -export function Page({ locale }: PageProps) { +export function Page({ locale }: LocaleAcceptorProps) { return (