feat: some of meta section

packages/i18n/strings/en.json

@@ -6,6 +6,18 @@
   },
 
   "common": {
+    "tiers": {
+      "0": "Unknown tier",
+      "1": "I",
+      "2": "II",
+      "3": "III",
+      "4": "IV",
+      "5": "V",
+      "6": "VI",
+      "7": "VII",
+      "8": "Vintage"
+    },
+
     "units": {
       "m": "%s1m",
       "mm": "%s1mm",
@@ -86,15 +98,44 @@
     },
 
     "nations": {
-      "ussr": "U.S.S.R.",
+      "0": "Unknown nation",
-      "germany": "Germany",
+      "1": "U.S.S.R.",
-      "usa": "U.S.A.",
+      "2": "Germany",
-      "china": "China",
+      "3": "U.S.A.",
-      "uk": "U.K.",
+      "4": "China",
-      "france": "France",
+      "5": "France",
-      "japan": "Japan",
+      "6": "U.K.",
-      "european": "European Nation",
+      "7": "Japan",
-      "other": "Hybrid Nation"
+      "8": "Europe",
+      "9": "Poland",
+      "10": "Australia",
+      "11": "Canada",
+      "12": "Italy",
+      "13": "Finland",
+      "14": "Czech",
+      "15": "Hybrid Nation",
+      "16": "GDR",
+      "17": "Ireland",
+      "18": "Scotland",
+      "19": "Sweden",
+      "20": "Argo Coalition",
+      "21": "Titan Lab",
+      "22": "Defender",
+      "23": "Progresston",
+      "24": "Wasteland",
+      "25": "Hunters Moon",
+      "26": "Cold Front",
+      "27": "The Explorer",
+      "28": "Fablegear",
+      "29": "Outlaws",
+      "30": "GUP",
+      "31": "Dune",
+      "32": "Terminator",
+      "33": "Warhammer",
+      "34": "Valkirya Chronicles",
+      "35": "Mecha",
+      "36": "TMNT",
+      "37": "Star Trek"
     },
 
     "nations_adjectives": {
@@ -109,6 +150,14 @@
       "other": "Hybrid"
     },
 
+    "tank_class": {
+      "0": "Unknown Class",
+      "1": "Heavy",
+      "2": "Light",
+      "3": "Medium",
+      "4": "Tank destroyer"
+    },
+
     "tank_class_short": {
       "-1": "unrecognized",
       "0": "Light",
@@ -133,10 +182,10 @@
     },
 
     "tree_type": {
-      "-1": "unrecognized",
+      "0": "Unknown tree type",
-      "0": "Tech tree",
+      "1": "Common",
-      "1": "Premium",
+      "2": "Premium",
-      "2": "Collector"
+      "3": "Collector"
     },
 
     "regions": {

packages/website/src/components/HomeHero.astro

@@ -3,11 +3,16 @@ import { Code, Flex, Heading, Text } from '@radix-ui/themes';
 import { resolveBranchName } from '../core/blitzkit/branches';
 import { getStrings } from '../core/i18n/getStrings';
 import { literals } from '@blitzkit/i18n/src/literals';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 
-const { locale } = Astro.params;
+interface Props {
+  locale: string;
+  strings: BlitzKitStrings;
+}
+
+const { strings, locale } = Astro.props;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
-const strings = getStrings(locale);
 ---
 
 <style>

packages/website/src/components/LinkI18n.tsx

@@ -1,12 +1,12 @@
 import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 import { Link, type LinkProps } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../hooks/useLocale';
 
-type LinkI18nProps = LinkProps & LocaleAcceptorProps;
+type LinkI18nProps = LinkProps & {
+  locale: string;
+};
 
 export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
-  const prefix =
+  const prefix = locale === DEFAULT_LOCALE ? '' : `/${locale}`;
-    locale === undefined || locale === DEFAULT_LOCALE ? '' : `/${locale}`;
 
   return (
     <Link href={href?.startsWith('/') ? `${prefix}${href}` : href} {...props} />

packages/website/src/components/Navbar.astro

@@ -15,11 +15,11 @@ import { LinkI18n } from './LinkI18n';
 
 export interface Props {
   integrated?: boolean;
+  locale: string;
 }
 
-const { integrated } = Astro.props;
+const { integrated, locale } = Astro.props;
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
-const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
 const strings = getStrings(locale);

packages/website/src/components/Tankopedia/MetaSection/components/Listing.tsx

@@ -13,7 +13,9 @@ export function Listing({ label, ...props }: ListingProps) {
       gap="4"
       style={{ borderBottom: `1px solid ${Var('gray-a9')}` }}
     >
-      <Text size="4">{label}</Text>
+      <Text size="4" wrap="nowrap">
+        {label}
+      </Text>
       <Text align="right" size="4" weight="medium" {...props} />
     </Flex>
   );

packages/website/src/components/Tankopedia_ue/MetaSection.tsx

@@ -1,11 +1,6 @@
-import {
+import { Nation, TankType } from '@protos/blitz_static_tank_component';
-  Nation,
-  TankClass,
-  TankType,
-  Tier,
-} from '@protos/blitz_static_tank_component';
 import { Box, Code, Flex } from '@radix-ui/themes';
-import { asset } from 'packages/core/src';
+import { asset, TIER_ROMAN_NUMERALS } from 'packages/core/src';
 import { Var } from '../../core/radix/var';
 import { useLocale } from '../../hooks/useLocale';
 import { App } from '../../stores/app';
@@ -67,17 +62,17 @@ export function MetaSection() {
                         alt={Nation[tank.nation]}
                         src={asset(`flags/circle/${tank.nation}.webp`)}
                       />
-                      {Nation[tank.nation]}
+                      {strings.common.nations[tank.nation]}
                     </Flex>
                   </Listing>
                   <Listing label={strings.website.tools.tankopedia.meta.class}>
                     <Flex align="center" gap="1">
                       <ClassIcon width="1em" height="1em" />
-                      {TankClass[tank.tank_class]}
+                      {strings.common.tank_class[tank.tank_class]}
                     </Flex>
                   </Listing>
                   <Listing label={strings.website.tools.tankopedia.meta.tier}>
-                    {Tier[tank.tier]}
+                    {TIER_ROMAN_NUMERALS[tank.tier]}
                   </Listing>
                   <Listing
                     label={strings.website.tools.tankopedia.meta.type}
@@ -89,7 +84,7 @@ export function MetaSection() {
                           : undefined
                     }
                   >
-                    {TankType[tank.tank_type]}
+                    {strings.common.tree_type[tank.tank_type]}
                   </Listing>
                 </Flex>
 
@@ -106,7 +101,7 @@ export function MetaSection() {
                       label={strings.website.tools.tankopedia.meta.purchase}
                     >
                       <Flex align="center" gap="1">
-                        {tank.price.value / 400}
+                        {(9999999999).toLocaleString(locale)}
                         <img
                           style={{ width: '1em', height: '1em' }}
                           alt="gold"
@@ -117,43 +112,44 @@ export function MetaSection() {
                   )}
                   <Listing
                     label={
-                      protagonist.type === TankType.RESEARCHABLE
+                      tank.tank_type === TankType.TANK_TYPE_COMMON
                         ? strings.website.tools.tankopedia.meta.purchase
                         : strings.website.tools.tankopedia.meta.restoration
                     }
                   >
                     <Flex align="center" gap="1">
-                      {protagonist.price.value.toLocaleString(locale)}
+                      {(999999999).toLocaleString(locale)}
                       <img
                         style={{ width: '1em', height: '1em' }}
-                        alt={TankPriceType[protagonist.price.type]}
+                        alt="TODO: REPLACE WITH CURRENCY NAME"
-                        src={asset(
+                        // src={asset(
-                          `icons/currencies/${
+                        //   `icons/currencies/${
-                            protagonist.price.type === TankPriceType.GOLD
+                        //     protagonist.price.type === TankPriceType.GOLD
-                              ? 'gold'
+                        //       ? 'gold'
-                              : 'silver'
+                        //       : 'silver'
-                          }.webp`,
+                        //   }.webp`,
-                        )}
+                        // )}
                       />
                     </Flex>
                   </Listing>
                   <Listing label={strings.website.tools.tankopedia.meta.sale}>
                     <Flex align="center" gap="1">
-                      {(protagonist.price.value / 2).toLocaleString(locale)}
+                      {(999999999).toLocaleString(locale)}
                       <img
                         style={{ width: '1em', height: '1em' }}
-                        alt={TankPriceType[protagonist.price.type]}
+                        alt="TODO: REPLACE WITH CURRENCY NAME"
-                        src={asset(
+                        // src={asset(
-                          `icons/currencies/${
+                        //   `icons/currencies/${
-                            protagonist.price.type === TankPriceType.GOLD
+                        //     protagonist.price.type === TankPriceType.GOLD
-                              ? 'gold'
+                        //       ? 'gold'
-                              : 'silver'
+                        //       : 'silver'
-                          }.webp`,
+                        //   }.webp`,
-                        )}
+                        // )}
                       />
                     </Flex>
                   </Listing>
-                  {protagonist.research_cost && (
+                  {/* TODO: ADD RESEARCH COST */}
+                  {/* {protagonist.research_cost && (
                     <Listing
                       label={strings.website.tools.tankopedia.meta.research}
                     >
@@ -169,7 +165,7 @@ export function MetaSection() {
                         />
                       </Flex>
                     </Listing>
-                  )}
+                  )} */}
                 </Flex>
               </Flex>
             </Flex>

packages/website/src/components/ToolCard.astro

@@ -2,20 +2,20 @@
 import { assertSecret } from '@blitzkit/core';
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 import type { Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
 import { LinkI18n } from './LinkI18n';
 
 interface Props {
   tool: Tool;
+  strings: BlitzKitStrings;
+  locale: string;
 }
 
-const { tool } = Astro.props;
+const { tool, strings, locale } = Astro.props;
 const disabled = tool.branches?.every(
   (branch) => branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
 );
-const { locale } = Astro.params;
-const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
     (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools

packages/website/src/hooks/useLocale.tsx

@@ -1,21 +1,24 @@
-import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
+import { type BlitzKitStrings } from '@blitzkit/i18n';
 import { createContext, useContext, type ReactNode } from 'react';
-import { getStrings } from '../core/i18n/getStrings';
 
 const LocaleContext = createContext<{
   locale: string;
-  localeRaw: string | undefined;
+  strings: BlitzKitStrings;
 } | null>(null);
 
-interface LocaleProviderProps extends LocaleAcceptorProps {
+interface LocaleProviderProps {
+  locale: string;
+  strings: BlitzKitStrings;
   children: ReactNode;
 }
 
-export function LocaleProvider({ locale, children }: LocaleProviderProps) {
+export function LocaleProvider({
+  locale,
+  strings,
+  children,
+}: LocaleProviderProps) {
   return (
-    <LocaleContext.Provider
+    <LocaleContext.Provider value={{ locale, strings }}>
-      value={{ locale: locale ?? DEFAULT_LOCALE, localeRaw: locale }}
-    >
       {children}
     </LocaleContext.Provider>
   );
@@ -28,12 +31,11 @@ export function useLocale() {
     throw new Error('useLocale must be used within a LocaleProvider');
   }
 
-  const strings = getStrings(context.locale);
+  const { locale, strings } = context;
-  const unwrap = unwrapper(context.locale);
 
-  return { locale: context.locale, strings, unwrap };
+  return { locale, strings };
 }
 
 export interface LocaleAcceptorProps {
-  locale: string | undefined;
+  localeContext: { locale: string; strings: BlitzKitStrings };
 }

packages/website/src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import '@fontsource/inter';
 import { Flex } from '@radix-ui/themes';
 import { BlitzKitTheme } from '../components/BlitzKitTheme';
 import { Checks } from '../components/Checks';
@@ -7,16 +6,17 @@ import Footer from '../components/Footer.astro';
 import Navbar from '../components/Navbar.astro';
 import Party3 from '../components/Party3.astro';
 import './base.css';
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
+import type { BlitzKitStrings } from 'packages/i18n/src';
 
 export interface Props {
   noFooter?: boolean;
   noNavbar?: boolean;
   integrated?: boolean;
+  locale: string;
+  strings: BlitzKitStrings;
 }
 
-const { noFooter, noNavbar, integrated } = Astro.props;
+const { noFooter, noNavbar, integrated, locale, strings } = Astro.props;
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 ---
 
 <html lang={locale}>
@@ -61,9 +61,9 @@ const locale = Astro.params.locale ?? DEFAULT_LOCALE;
   <body class={noNavbar ? 'no-navbar' : ''}>
     <BlitzKitTheme>
       <Flex direction="column" minHeight="100vh">
-        <Navbar {integrated} />
+        <Navbar {locale} {integrated} />
 
-        <Checks {locale} client:only="react" />
+        <Checks localeContext={{ locale, strings }} client:only="react" />
 
         <slot />
 

packages/website/src/layouts/base.css

@@ -1,9 +1,5 @@
 @import '@radix-ui/themes/styles.css';
 
-.radix-themes {
-  --default-font-family: 'Inter';
-}
-
 body {
   margin: 0;
 }

packages/website/src/pages/[...locale]/index.astro

@@ -1,7 +1,7 @@
 ---
 import { AstroSeo } from '@astrolib/seo';
 import { assertSecret } from '@blitzkit/core';
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
+import { DEFAULT_LOCALE, STRINGS, type SupportedLocale } from '@blitzkit/i18n';
 import locales from '@blitzkit/i18n/locales.json';
 import { literals } from '@blitzkit/i18n/src/literals';
 import { Box, Flex, Heading, Link } from '@radix-ui/themes';
@@ -21,25 +21,23 @@ import {
   tankopediaTool,
   tierListTool,
 } from '../../constants/tools';
-import { getStrings } from '../../core/i18n/getStrings';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH);
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const { strings, locale } = Astro.props;
-const strings = getStrings(Astro.props.locale);
 
 export const getStaticPaths = (() => {
-  // return [
+  return locales.supported.map(({ locale, blitz }) => {
-  //   ...SUPPORTED_LOCALES.filter((locale) => locale !== DEFAULT_LOCALE).map(
+    return {
-  //     (locale) => ({ params: { locale } }),
+      params: { locale: locale === locales.default ? undefined : locale },
-  //   ),
-  //   { params: { locale: undefined } },
-  // ];
 
-  return locales.supported.map(({ locale, blitz }) => ({
+      props: {
-    params: { locale: locale === locales.default ? undefined : locale },
+        locale,
-    props: { locale, blitzLocale: blitz ?? locale },
+        strings: STRINGS[locale as SupportedLocale],
-  }));
+        blitzLocale: blitz ?? locale,
+      },
+    };
+  });
 }) satisfies GetStaticPaths;
 ---
 
@@ -56,8 +54,8 @@ export const getStaticPaths = (() => {
   twitter={{ cardType: 'summary_large_image' }}
 />
 
-<BaseLayout>
+<BaseLayout {locale} {strings}>
-  <HomeHero />
+  <HomeHero {locale} {strings} />
 
   <!-- <Flex justify="center" py="6" px="4" justify="center">
     <Flex
@@ -106,29 +104,29 @@ export const getStaticPaths = (() => {
 
   <Flex p="4" justify="center" gap="4" mt="3">
     <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
-      <ToolCard tool={tankopediaTool} />
+      <ToolCard {locale} {strings} tool={tankopediaTool} />
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        {/* <ToolCard tool={playerStatsTool} /> */}
+        {/* <ToolCard {locale} {strings} tool={playerStatsTool} /> */}
-        <ToolCard tool={compareTool} />
+        <ToolCard {locale} {strings} tool={compareTool} />
-        <ToolCard tool={performanceTool} />
+        <ToolCard {locale} {strings} tool={performanceTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <!-- <ToolCard tool={chartsTool} /> -->
+        <!-- <ToolCard {locale} {strings} tool={chartsTool} /> -->
-        <!-- <ToolCard tool={guessTool} /> -->
+        <!-- <ToolCard {locale} {strings} tool={guessTool} /> -->
-        <ToolCard tool={galleryTool} />
+        <ToolCard {locale} {strings} tool={galleryTool} />
-        <ToolCard tool={sessionTool} />
+        <ToolCard {locale} {strings} tool={sessionTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={discordTool} />
+        <ToolCard {locale} {strings} tool={discordTool} />
-        <ToolCard tool={tierListTool} />
+        <ToolCard {locale} {strings} tool={tierListTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={embedTool} />
+        <ToolCard {locale} {strings} tool={embedTool} />
-        <ToolCard tool={moreTool} />
+        <ToolCard {locale} {strings} tool={moreTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
@@ -141,6 +139,8 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard
+          {locale}
+          {strings}
           tool={{
             button: { color: 'blue' },
             id: 'blitz-analysis',
@@ -149,6 +149,8 @@ export const getStaticPaths = (() => {
           }}
         />
         <ToolCard
+          {locale}
+          {strings}
           tool={{
             button: { color: 'purple', highContrast: true },
             id: 'blitz-insider',

packages/website/src/pages/[...locale]/tanks-ue/[id]/index.astro

@@ -1,43 +0,0 @@
----
-import type {
-  CatalogItemsComponent,
-  TankCatalogComponent,
-} from '@blitzkit/closed/src/unreal/protos';
-import type { GetStaticPaths } from 'astro';
-import { metadata } from '../../../../core/blitz/metadata';
-import BaseLayout from '../../../../layouts/BaseLayout.astro';
-import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
-import { Page } from './_index';
-
-export const getStaticPaths = (async () => {
-  const tanks = await metadata
-    .get('CatalogItemsGroupEntity.all_tanks')
-    .then((components) =>
-      components.get<CatalogItemsComponent>('catalogItemsGroupComponent'),
-    );
-  const parentPaths = parentGetStaticPaths();
-
-  return tanks.catalog_items
-    .map((item) => {
-      const id = item.replace('TankEntity.', '');
-
-      return parentPaths.map((parent) => ({
-        params: { ...parent.params, id },
-        props: { item },
-      }));
-    })
-    .flat();
-}) satisfies GetStaticPaths;
-
-const { id, locale } = Astro.params;
-const { item } = Astro.props;
-const tank = await metadata
-  .get(item)
-  .then((components) =>
-    components.get<TankCatalogComponent>('tankCatalogComponent'),
-  );
----
-
-<BaseLayout>
-  <Page client:load {locale} {tank} />
-</BaseLayout>

packages/website/src/pages/[...locale]/tanks-ue/[slug]/_index.tsx

@@ -14,9 +14,9 @@ interface PageProps extends LocaleAcceptorProps {
   compensation: CompensationComponent;
 }
 
-export function Page({ tank, compensation, locale }: PageProps) {
+export function Page({ tank, compensation, localeContext }: PageProps) {
   return (
-    <LocaleProvider locale={locale}>
+    <LocaleProvider {...localeContext}>
       <App.Provider>
         <TankopediaEphemeral_ue.Provider data={{ tank, compensation }}>
           <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">

packages/website/src/pages/[...locale]/tanks-ue/[slug]/index.astro

@@ -0,0 +1,58 @@
+---
+import type {
+  CatalogItemsComponent,
+  CompensationComponent,
+  TankCatalogComponent,
+} from '@blitzkit/closed/src/unreal/protos';
+import { slugify } from '@blitzkit/core';
+import locales from '@blitzkit/i18n/locales.json';
+import type { GetStaticPaths } from 'astro';
+import { metadata } from '../../../../core/blitz/metadata';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
+import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
+import { Page } from './_index';
+
+export const getStaticPaths = (async () => {
+  const tanks = await metadata
+    .get('CatalogItemsGroupEntity.all_tanks')
+    .then((components) =>
+      components.get<CatalogItemsComponent>('catalogItemsGroupComponent'),
+    );
+  const parentPaths = parentGetStaticPaths();
+  const gameStringsDefault = await metadata
+    .strings(locales.default)
+    .then((strings) => strings.subset(['TankEntity']));
+
+  return (
+    await Promise.all(
+      tanks.catalog_items.map(async (item) => {
+        const tank = await metadata.get(item).then((components) => {
+          return components.get<TankCatalogComponent>('tankCatalogComponent');
+        });
+        const nameEn = gameStringsDefault[tank.name!.value];
+        const slug = slugify(nameEn) || item.replace('TankEntity.', '');
+
+        return parentPaths.map((parent) => {
+          return {
+            params: { ...parent.params, slug },
+            props: { ...parent.props, item },
+          };
+        });
+      }),
+    )
+  ).flat();
+}) satisfies GetStaticPaths;
+
+const { item, locale, strings } = Astro.props;
+const tankComponents = await metadata.get(item);
+const tank = await tankComponents.get<TankCatalogComponent>(
+  'tankCatalogComponent',
+);
+const compensation = await tankComponents.get<CompensationComponent>(
+  'compensationComponent',
+);
+---
+
+<BaseLayout {locale} {strings}>
+  <Page client:load {tank} {compensation} localeContext={{ locale, strings }} />
+</BaseLayout>