feat: start of perforamnce

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",

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<string, typeof en> = {};
 
@@ -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;
 });

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);
 }

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 (
-    <App.Provider>
-      <Content />
-    </App.Provider>
+    <LocaleProvider locale={locale}>
+      <App.Provider>
+        <Content />
+      </App.Provider>
+    </LocaleProvider>
   );
 }
 

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 (
     <LocaleProvider locale={locale}>
       <TankopediaPersistent.Provider>

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();

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 (
     <Flex justify="center">
@@ -28,9 +36,14 @@ export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Estimated stats based on{' '}
+          {/* Estimated stats based on{' '}
           {skeleton ? <InlineSkeleton width="2rem" /> : samples} players.
-          Updated {skeleton ? <InlineSkeleton width="3rem" /> : timeAgo} ago.
+          Updated {skeleton ? <InlineSkeleton width="3rem" /> : timeAgo} ago. */}
+
+          {literals(strings.website.tools.performance.estimation.body, [
+            samples,
+            timeAgo,
+          ])}
         </Callout.Text>
       </Callout.Root>
     </Flex>

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;
+}

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 === '/';
       <Flex direction="column" minHeight="100vh">
         <Navbar />
 
-        <Checks client:only="react" />
+        <Checks {locale} client:only="react" />
 
         <slot />
 

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 (
-    <TankPerformanceSort.Provider>
-      <TankPerformanceEphemeral.Provider>
-        <Content skeleton={skeleton} />
-      </TankPerformanceEphemeral.Provider>
-    </TankPerformanceSort.Provider>
+    <LocaleProvider locale={locale}>
+      <TankPerformanceSort.Provider>
+        <TankPerformanceEphemeral.Provider>
+          <Content skeleton={skeleton} />
+        </TankPerformanceEphemeral.Provider>
+      </TankPerformanceSort.Provider>
+    </LocaleProvider>
   );
 }
 

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;
 ---
 
 <ToolOpenGraph tool={performanceTool} />
 
 <BaseLayout noFooter>
-  <Page client:only="react">
-    <Page skeleton slot="fallback" />
+  <Page client:only="react" {locale}>
+    <Page skeleton slot="fallback" {locale} />
   </Page>
 </BaseLayout>

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([

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 (
     <LocaleProvider locale={locale}>
       <PageWrapper color="purple" maxWidth="80rem">