feat: better meta

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

@@ -1,4 +1,5 @@
 import { Flex, Text, type TextProps } from '@radix-ui/themes';
+import { Var } from '../../../../core/radix/var';
 
 type ListingProps = TextProps & {
   label: string;
@@ -6,9 +7,15 @@ type ListingProps = TextProps & {
 
 export function Listing({ label, ...props }: ListingProps) {
   return (
-    <Flex minWidth="15rem" justify="between" gap="4">
-      <Text color="gray">{label}</Text>
-      <Text align="right" {...props} />
+    <Flex
+      minWidth="17rem"
+      justify="between"
+      gap="4"
+      px="1"
+      style={{ borderBottom: `1px solid ${Var('gray-11')}` }}
+    >
+      <Text size="4">{label}</Text>
+      <Text align="right" size="4" weight="medium" {...props} />
     </Flex>
   );
 }

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

@@ -1,171 +1,178 @@
 import {
-  assertSecret,
   asset,
   TankPriceType,
   TankType,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
-import { Button, Code, Dialog, Flex, Link } from '@radix-ui/themes';
-import { useState } from 'react';
-import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
-import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions';
-import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember';
+import { Box, Code, Flex } from '@radix-ui/themes';
+import { Var } from '../../../core/radix/var';
 import { useLocale } from '../../../hooks/useLocale';
 import { App } from '../../../stores/app';
 import { Duel } from '../../../stores/duel';
-import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { classIcons } from '../../ClassIcon';
-import { LinkI18n } from '../../LinkI18n';
-import { ScienceIcon } from '../../ScienceIcon';
-import { TankSearch } from '../../TankSearch';
 import { Listing } from './components/Listing';
 
-const [provisionDefinitions, modelDefinitions] = await Promise.all([
-  awaitableProvisionDefinitions,
-  awaitableModelDefinitions,
-]);
+const NATIONAL_BANNER_POSITION_OVERRIDES: Record<string, string> = {
+  germany: '50% 35%',
+  france: '50% 35%',
+  other: '50% 35%',
+};
 
 export function MetaSection() {
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const protagonist = Duel.use((state) => state.protagonist.tank);
-  const antagonist = Duel.use((state) => state.antagonist.tank);
   const ClassIcon = classIcons[protagonist.class];
-  const compareTanks =
-    protagonist.id === antagonist.id
-      ? [protagonist.id]
-      : [protagonist.id, antagonist.id];
-  const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const [showSwapDialog, setShowSwapDialog] = useState(false);
-  const { locale, strings, unwrap } = useLocale();
+  const { locale, strings } = useLocale();
+
+  console.log(protagonist.nation);
 
   return (
-    <Flex justify="center" align="center">
-      <Flex direction="column" align="center" gap="6">
-     
-
+    <Box
+      style={{
+        background: `url(/assets/images/national-wallpapers/${protagonist.nation}.jpg)`,
+        backgroundPosition:
+          NATIONAL_BANNER_POSITION_OVERRIDES[protagonist.nation] ?? 'center',
+      }}
+    >
+      <Box
+        style={{
+          background: `url(${asset(`flags/scratched/${protagonist.nation}.webp`)})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '53rem',
+          backgroundPosition: '-25% 50%',
+        }}
+      >
         <Flex
-          gap={{ initial: '0', sm: '6' }}
-          direction={{ initial: 'column', sm: 'row' }}
+          justify="center"
+          align="center"
+          py="6rem"
+          style={{
+            background: `linear-gradient(${Var('gray-1')}, ${Var('black-a8')}, ${Var('black-a8')}, ${Var('gray-1')})`,
+          }}
         >
-          <Flex direction="column" width="100%">
-            {protagonist.name_full && (
-              <Listing label={strings.website.tools.tankopedia.meta.full_name}>
-                {unwrap(protagonist.name_full)}
-              </Listing>
-            )}
-            <Listing label={strings.website.tools.tankopedia.meta.nation}>
-              <Flex align="center" gap="1">
-                <img
-                  style={{ width: '1em', height: '1em' }}
-                  alt={protagonist.nation}
-                  src={asset(`flags/circle/${protagonist.nation}.webp`)}
-                />
-                {
-                  strings.common.nations[
-                    protagonist.nation as keyof typeof strings.common.nations
-                  ]
-                }
-              </Flex>
-            </Listing>
-            <Listing label={strings.website.tools.tankopedia.meta.class}>
-              <Flex align="center" gap="1">
-                <ClassIcon width="1em" height="1em" />
-                {strings.common.tank_class_short[protagonist.class]}
-              </Flex>
-            </Listing>
-            <Listing label={strings.website.tools.tankopedia.meta.tier}>
-              {TIER_ROMAN_NUMERALS[protagonist.tier]}
-            </Listing>
-            <Listing
-              label={strings.website.tools.tankopedia.meta.type}
-              color={
-                protagonist.type === TankType.COLLECTOR
-                  ? 'blue'
-                  : protagonist.type === TankType.PREMIUM
-                    ? 'amber'
-                    : undefined
-              }
+          <Flex direction="column" align="center" gap="6">
+            <Flex
+              gap={{ initial: '0', sm: '8' }}
+              direction={{ initial: 'column', sm: 'row' }}
             >
-              {strings.common.tree_type[protagonist.type]}
-            </Listing>
-          </Flex>
+              <Flex direction="column" width="100%" gap="2">
+                <Listing label={strings.website.tools.tankopedia.meta.nation}>
+                  <Flex align="center" gap="1">
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      alt={protagonist.nation}
+                      src={asset(`flags/circle/${protagonist.nation}.webp`)}
+                    />
+                    {
+                      strings.common.nations[
+                        protagonist.nation as keyof typeof strings.common.nations
+                      ]
+                    }
+                  </Flex>
+                </Listing>
+                <Listing label={strings.website.tools.tankopedia.meta.class}>
+                  <Flex align="center" gap="1">
+                    <ClassIcon width="1em" height="1em" />
+                    {strings.common.tank_class_short[protagonist.class]}
+                  </Flex>
+                </Listing>
+                <Listing label={strings.website.tools.tankopedia.meta.tier}>
+                  {TIER_ROMAN_NUMERALS[protagonist.tier]}
+                </Listing>
+                <Listing
+                  label={strings.website.tools.tankopedia.meta.type}
+                  color={
+                    protagonist.type === TankType.COLLECTOR
+                      ? 'blue'
+                      : protagonist.type === TankType.PREMIUM
+                        ? 'amber'
+                        : undefined
+                  }
+                >
+                  {strings.common.tree_type[protagonist.type]}
+                </Listing>
+              </Flex>
 
-          <Flex direction="column" width="100%">
-            {developerMode && (
-              <Listing label={strings.website.tools.tankopedia.meta.dev_id}>
-                <Code>{protagonist.id}</Code>
-              </Listing>
-            )}
-            {protagonist.type === TankType.PREMIUM && (
-              <Listing label={strings.website.tools.tankopedia.meta.purchase}>
-                <Flex align="center" gap="1">
-                  {protagonist.price.value / 400}
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    alt="gold"
-                    src={asset('icons/currencies/gold.webp')}
-                  />
-                </Flex>
-              </Listing>
-            )}
-            <Listing
-              label={
-                protagonist.type === TankType.RESEARCHABLE
-                  ? strings.website.tools.tankopedia.meta.purchase
-                  : strings.website.tools.tankopedia.meta.restoration
-              }
-            >
-              <Flex align="center" gap="1">
-                {protagonist.price.value.toLocaleString(locale)}
-                <img
-                  style={{ width: '1em', height: '1em' }}
-                  alt={TankPriceType[protagonist.price.type]}
-                  src={asset(
-                    `icons/currencies/${
-                      protagonist.price.type === TankPriceType.GOLD
-                        ? 'gold'
-                        : 'silver'
-                    }.webp`,
-                  )}
-                />
+              <Flex direction="column" width="100%" gap="2">
+                {developerMode && (
+                  <Listing label={strings.website.tools.tankopedia.meta.dev_id}>
+                    <Code>{protagonist.id}</Code>
+                  </Listing>
+                )}
+                {protagonist.type === TankType.PREMIUM && (
+                  <Listing
+                    label={strings.website.tools.tankopedia.meta.purchase}
+                  >
+                    <Flex align="center" gap="1">
+                      {protagonist.price.value / 400}
+                      <img
+                        style={{ width: '1em', height: '1em' }}
+                        alt="gold"
+                        src={asset('icons/currencies/gold.webp')}
+                      />
+                    </Flex>
+                  </Listing>
+                )}
+                <Listing
+                  label={
+                    protagonist.type === TankType.RESEARCHABLE
+                      ? strings.website.tools.tankopedia.meta.purchase
+                      : strings.website.tools.tankopedia.meta.restoration
+                  }
+                >
+                  <Flex align="center" gap="1">
+                    {protagonist.price.value.toLocaleString(locale)}
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      alt={TankPriceType[protagonist.price.type]}
+                      src={asset(
+                        `icons/currencies/${
+                          protagonist.price.type === TankPriceType.GOLD
+                            ? 'gold'
+                            : 'silver'
+                        }.webp`,
+                      )}
+                    />
+                  </Flex>
+                </Listing>
+                <Listing label={strings.website.tools.tankopedia.meta.sale}>
+                  <Flex align="center" gap="1">
+                    {(protagonist.price.value / 2).toLocaleString(locale)}
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      alt={TankPriceType[protagonist.price.type]}
+                      src={asset(
+                        `icons/currencies/${
+                          protagonist.price.type === TankPriceType.GOLD
+                            ? 'gold'
+                            : 'silver'
+                        }.webp`,
+                      )}
+                    />
+                  </Flex>
+                </Listing>
+                {protagonist.research_cost && (
+                  <Listing
+                    label={strings.website.tools.tankopedia.meta.research}
+                  >
+                    <Flex align="center" gap="1">
+                      {(
+                        protagonist.research_cost.research_cost_type!
+                          .value as number
+                      ).toLocaleString(locale)}
+                      <img
+                        style={{ width: '1em', height: '1em' }}
+                        alt="xp"
+                        src={asset('icons/currencies/xp.webp')}
+                      />
+                    </Flex>
+                  </Listing>
+                )}
               </Flex>
-            </Listing>
-            <Listing label={strings.website.tools.tankopedia.meta.sale}>
-              <Flex align="center" gap="1">
-                {(protagonist.price.value / 2).toLocaleString(locale)}
-                <img
-                  style={{ width: '1em', height: '1em' }}
-                  alt={TankPriceType[protagonist.price.type]}
-                  src={asset(
-                    `icons/currencies/${
-                      protagonist.price.type === TankPriceType.GOLD
-                        ? 'gold'
-                        : 'silver'
-                    }.webp`,
-                  )}
-                />
-              </Flex>
-            </Listing>
-            {protagonist.research_cost && (
-              <Listing label={strings.website.tools.tankopedia.meta.research}>
-                <Flex align="center" gap="1">
-                  {(
-                    protagonist.research_cost.research_cost_type!
-                      .value as number
-                  ).toLocaleString(locale)}
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    alt="xp"
-                    src={asset('icons/currencies/xp.webp')}
-                  />
-                </Flex>
-              </Listing>
-            )}
+            </Flex>
           </Flex>
         </Flex>
-      </Flex>
-    </Flex>
+      </Box>
+    </Box>
   );
 }