feat: start of tankopedia translation

packages/core/lang/en.json

@@ -799,7 +799,9 @@
         "name": "Tankopedia",
         "button": "Find tanks",
         "description": "Blitz tank encyclopedia",
-        "seo_description": "Statistics, armor, and more for all tanks in World of Tanks Blitz"
+        "seo_description": "Statistics, armor, and more for all tanks in World of Tanks Blitz",
+        "tank_seo_title": "%s1 - Tier %s2 %s3 %s4 | %s5 Tankopedia | World of Tanks Blitz (WoTB)",
+        "tank_seo_description": "%s1 armor, statistics, equipment, provisions, and more. %s2 DPM, %s3hp alpha, %s4mm penetration, %s5kph top speed, %s6hp health."
       },
       "compare": {
         "name": "Compare",

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Heading.tsx

@@ -1,6 +1,6 @@
 import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
 import { Flex, Heading, SegmentedControl, Text } from '@radix-ui/themes';
+import { useLocale } from '../../../../../../hooks/useLocale';
 import { Duel } from '../../../../../../stores/duel';
 import {
   TankopediaEphemeral,
@@ -13,6 +13,7 @@ export function CharacteristicsHeading() {
   );
   const tank = Duel.use((state) => state.protagonist.tank);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const { strings } = useLocale();
 
   return (
     <Flex

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

@@ -5,7 +5,6 @@ import {
   TankType,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
 import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Code, Dialog, Flex, Link } from '@radix-ui/themes';
 import { useState } from 'react';
@@ -39,7 +38,7 @@ export function MetaSection() {
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const [showSwapDialog, setShowSwapDialog] = useState(false);
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
 
   return (
     <Flex justify="center" align="center">

packages/website/src/components/Tankopedia/TankopediaCharts.tsx

@@ -1,63 +0,0 @@
-import { asset, AverageDefinitions } from '@blitzkit/core';
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { range } from 'lodash-es';
-import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
-import { Duel } from '../../stores/duel';
-import { FIRST_AVERAGES_ENTRY } from '../Charts/constants';
-import { ThemedLine } from '../Nivo/ThemedLine';
-
-const currentEntry = Math.floor(Date.now() / 1000 / 60 / 60 / 24);
-const days = await Promise.all(
-  range(FIRST_AVERAGES_ENTRY, currentEntry).map(async (day) => {
-    const url = asset(`averages/${day}.pb`);
-    const response = await fetch(url);
-
-    if (response.status !== 200) return null;
-
-    const buffer = await response.arrayBuffer();
-    const averageDefinitions = AverageDefinitions.decode(
-      new Uint8Array(buffer),
-    );
-
-    return { day, definitions: averageDefinitions };
-  }),
-).then((days) => days.filter((day) => day !== null));
-
-export function TankopediaCharts() {
-  const id = Duel.use((state) => state.protagonist.tank.id);
-  const ratio = useAveragesExclusionRatio();
-  const data = days.map(({ day, definitions }) => {
-    const entry = definitions.averages[id];
-    const x = new Date(day * 24 * 60 * 60 * 1000);
-    const y = entry ? Math.round((entry.samples.d_7 / 7) * ratio) : 0;
-
-    return { x, y };
-  });
-
-  return (
-    <Flex direction="column" align="center">
-      <Flex direction="column" width="50rem">
-        <Heading>Players</Heading>
-        <Text color="gray" mb="5">
-          7-day rolling average
-        </Text>
-
-        <Box height="25rem">
-          <ThemedLine
-            enablePoints={false}
-            enableGridX={false}
-            data={[{ id: 'value', data }]}
-            xFormat={(date) => {
-              return (date as Date).toLocaleDateString(undefined, {
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric',
-              });
-            }}
-            xScale={{ type: 'time' }}
-          />
-        </Box>
-      </Flex>
-    </Flex>
-  );
-}

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/_index.tsx

@@ -6,7 +6,6 @@ import { GameModeSection } from '../../../../../components/Tankopedia/GameModeSe
 import { HeroSection } from '../../../../../components/Tankopedia/HeroSection';
 import { HistorySection } from '../../../../../components/Tankopedia/HistorySection';
 import { MetaSection } from '../../../../../components/Tankopedia/MetaSection';
-import { TankopediaCharts } from '../../../../../components/Tankopedia/TankopediaCharts';
 import { TechTreeSection } from '../../../../../components/Tankopedia/TechTreeSection';
 import { VideoSection } from '../../../../../components/Tankopedia/VideoSection';
 import { awaitableModelDefinitions } from '../../../../../core/awaitables/modelDefinitions';
@@ -55,7 +54,6 @@ export function Page({ id, skeleton, locale }: PageProps) {
                 )}
                 <CharacteristicsSection />
                 <GameModeSection />
-                <TankopediaCharts />
                 <VideoSection skeleton={skeleton} />
                 <HistorySection />
               </PageWrapper>

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro

@@ -1,18 +1,20 @@
 ---
 import {
-asset,
-createDefaultProvisions,
-createDefaultSkills,
-fetchEquipmentDefinitions,
-fetchModelDefinitions,
-fetchProvisionDefinitions,
-fetchSkillDefinitions,
-fetchTankDefinitions,
-TIER_ROMAN_NUMERALS,
+  asset,
+  createDefaultProvisions,
+  createDefaultSkills,
+  DEFAULT_LOCALE,
+  fetchEquipmentDefinitions,
+  fetchModelDefinitions,
+  fetchProvisionDefinitions,
+  fetchSkillDefinitions,
+  fetchTankDefinitions,
+  TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
 import type { GetStaticPaths } from 'astro';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
+import { getStrings } from '../../../../../core/i18n/getStrings';
+import { literals } from '../../../../../core/i18n/literals';
 import BaseLayout from '../../../../../layouts/BaseLayout.astro';
 import { genericDefaultEquipmentMatrix } from '../../../../../stores/duel/constants';
 import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
@@ -31,8 +33,9 @@ export const getStaticPaths = (async () => {
     .flat();
 }) satisfies GetStaticPaths;
 
-const {id} = Astro.params;
+const { id } = Astro.params;
 const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const strings = getStrings(locale);
 const tankDefinitions = await fetchTankDefinitions();
 const skillDefinitions = await fetchSkillDefinitions();
 const provisionDefinitions = await fetchProvisionDefinitions();
@@ -41,11 +44,16 @@ const tankModelDefinitions = await fetchModelDefinitions();
 const tank = tankDefinitions.tanks[id];
 const tankModelDefinition = tankModelDefinitions.models[tank.id];
 const name = tank.name_full ?? tank.name;
-const title = `${name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
+const title = literals(strings.website.tools.tankopedia.tank_seo_title, [
+  name,
+  TIER_ROMAN_NUMERALS[tank.tier],
   strings.common.nations_adjectives[
     tank.nation as keyof typeof strings.common.nations_adjectives
-  ]
-} ${strings.common.tank_class_short[tank.class]} | BlitzKit Tankopedia | World of Tanks Blitz (WoTB)`;
+  ],
+  strings.common.tank_class_short[tank.class],
+  'BlitzKit',
+  strings.common.nations[tank.nation as keyof typeof strings.common.nations],
+]);
 const url = import.meta.env.SITE + Astro.url.pathname;
 const icon = asset(`icons/tanks/big/${id}.webp`);
 const turret = tank.turrets.at(-1)!;
@@ -73,15 +81,17 @@ const characteristics = tankCharacteristics(
   },
   { equipmentDefinitions, provisionDefinitions, tankModelDefinition },
 );
-const description = `${
-  name
-} armor, statistics, equipment, provisions, and more. ${Math.round(
-  characteristics.dpm,
-).toLocaleString(locale)} DPM, ${characteristics.damage.toFixed(0)}hp alpha, ${characteristics.penetration.toFixed(
-  0,
-)}mm penetration, ${characteristics.speedForwards.toFixed(
-  0,
-)}kph top speed, ${characteristics.health}hp health.`;
+const description = literals(
+  strings.website.tools.tankopedia.tank_seo_description,
+  [
+    name,
+    Math.round(characteristics.dpm).toLocaleString(locale),
+    Math.round(characteristics.damage).toLocaleString(locale),
+    Math.round(characteristics.penetration).toLocaleString(locale),
+    Math.round(characteristics.speedForwards).toLocaleString(locale),
+    Math.round(characteristics.health).toLocaleString(locale),
+  ],
+);
 ---
 
 <title>{title}</title>