feat: revert poopy header

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -7,10 +7,8 @@ import { ThicknessRange } from '../../../../../../components/StaticArmor';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
-import * as App from '../../../../../../stores/app';
 import * as Duel from '../../../../../../stores/duel';
 import { Options } from './components/Options';
-import { MetaSection } from './MetaSection';
 import { TankSandbox } from './TankSandbox';
 import { TankSandboxLoader } from './TankSandboxLoader';
 
@@ -19,7 +17,6 @@ interface HeroSectionProps {
 }
 
 export function HeroSection({ id }: HeroSectionProps) {
-  const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const canvas = useRef<HTMLCanvasElement>(null);
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const antagonist = Duel.use((state) => state.antagonist.tank);
@@ -38,7 +35,6 @@ export function HeroSection({ id }: HeroSectionProps) {
         : undefined;
   const awaitedTankDefinitions = use(tankDefinitions);
   const tank = awaitedTankDefinitions[id];
-  const ClassIcon = classIcons[tank.class];
   const thicknessRange = useMemo(() => {
     const entries = Object.values(awaitedTankDefinitions);
     const filtered = entries.filter((thisTank) => thisTank.tier === tank.tier);
@@ -67,7 +63,7 @@ export function HeroSection({ id }: HeroSectionProps) {
       pt={{ initial: '6', md: '0' }}
       style={{ background: 'var(--color-surface)', position: 'relative' }}
       height={{ initial: 'calc(75vh - 4rem)', md: undefined }}
-      minHeight={{ initial: '30rem' }}
+      minHeight={{ initial: '40rem' }}
       gap="4"
     >
       <Flex
@@ -90,6 +86,20 @@ export function HeroSection({ id }: HeroSectionProps) {
             style={{ height: '100%', userSelect: 'none' }}
           >
             <Flex gap="4">
+              <Heading size={{ initial: '8', sm: '9' }} color={treeColor}>
+                <Icon style={{ width: '0.75em', height: '0.75em' }} />{' '}
+              </Heading>
+
+              <Heading
+                size={{ initial: '8', sm: '9' }}
+                align={{ initial: 'center', md: 'left' }}
+                color={treeColor}
+              >
+                {protagonist.name}
+              </Heading>
+            </Flex>
+
+            <Flex gap="4" mt="2" pl="8">
               <Link href="/tools/tankopedia">
                 <Button variant="ghost" size="1" ml="-1">
                   <ChevronLeftIcon />
@@ -104,22 +114,6 @@ export function HeroSection({ id }: HeroSectionProps) {
                 </Button>
               </Link>
             </Flex>
-
-            <Flex gap="4">
-              <Heading size={{ initial: '8', sm: '9' }} color={treeColor}>
-                <Icon style={{ width: '0.75em', height: '0.75em' }} />{' '}
-              </Heading>
-
-              <Heading
-                size={{ initial: '8', sm: '9' }}
-                align={{ initial: 'center', md: 'left' }}
-                color={treeColor}
-              >
-                {protagonist.name}
-              </Heading>
-            </Flex>
-
-            <MetaSection naked />
           </Flex>
         </Flex>
 

src/app/tools/tankopedia/[id]/components/Model/MetaSection/index.tsx

@@ -1,127 +1,132 @@
 import { Code, Flex } from '@radix-ui/themes';
 import { classIcons } from '../../../../../../../components/ClassIcon';
 import { asset } from '../../../../../../../core/blitzkit/asset';
+import { tankIcon } from '../../../../../../../core/blitzkit/tankIcon';
 import strings from '../../../../../../../lang/en-US.json';
 import * as App from '../../../../../../../stores/app';
 import * as Duel from '../../../../../../../stores/duel';
 import { Listing } from './components/Listing';
 
-interface MetaSectionProps {
-  naked?: boolean;
-}
-
-export function MetaSection({ naked }: MetaSectionProps) {
+export function MetaSection() {
   const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const tank = Duel.use((state) => state.protagonist.tank);
   const ClassIcon = classIcons[tank.class];
-  const content = (
-    <Flex
-      wrap={{ initial: 'nowrap', sm: 'wrap' }}
-      direction={{ initial: 'column', sm: 'row' }}
-      align={{ initial: 'center', sm: 'start' }}
-      gapX="4"
-      width="100%"
-      mt={{ initial: '4', md: '6' }}
-      display={naked ? { initial: 'none', sm: 'flex' } : undefined}
-      maxWidth="calc(2 * 15rem + var(--space-4))"
-    >
-      {tank.nameFull && <Listing label="Full-name">{tank.nameFull}</Listing>}
-      <Listing label="Nation">
-        <Flex align="center" gap="1">
-          <img
-            style={{ width: '1em', height: '1em' }}
-            alt={tank.nation}
-            src={asset(`flags/circle/${tank.nation}.webp`)}
-          />
-          {
-            strings.common.nations[
-              tank.nation as keyof typeof strings.common.nations
-            ]
-          }
-        </Flex>
-      </Listing>
-      <Listing label="Tier">{tank.tier}</Listing>
-      <Listing label="Class">
-        <Flex align="center" gap="1">
-          <ClassIcon width="1em" height="1em" />
-          {strings.common.tank_class_short[tank.class]}
-        </Flex>
-      </Listing>
-      <Listing
-        label="Type"
-        color={
-          tank.treeType === 'collector'
-            ? 'blue'
-            : tank.treeType === 'premium'
-              ? 'amber'
-              : undefined
-        }
-      >
-        {strings.common.tree_type[tank.treeType]}
-      </Listing>
-      {developerMode && (
-        <Listing label="DEV: ID">
-          <Code>{tank.id}</Code>
-        </Listing>
-      )}
-      {tank.treeType === 'premium' && (
-        <Listing label="Purchase price">
-          <Flex align="center" gap="1">
-            {tank.price.value / 400}
-            <img
-              style={{ width: '1em', height: '1em' }}
-              alt="gold"
-              src={asset('icons/currencies/gold.webp')}
-            />
-          </Flex>
-        </Listing>
-      )}
-      <Listing
-        label={`${tank.treeType === 'researchable' ? 'Purchase' : 'Restoration'} price`}
-      >
-        <Flex align="center" gap="1">
-          {tank.price.value.toLocaleString()}
-          <img
-            style={{ width: '1em', height: '1em' }}
-            alt={tank.price.type}
-            src={asset(
-              `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
-            )}
-          />
-        </Flex>
-      </Listing>
-      <Listing label="Sale price">
-        <Flex align="center" gap="1">
-          {(tank.price.value / 2).toLocaleString()}
-          <img
-            style={{ width: '1em', height: '1em' }}
-            alt={tank.price.type}
-            src={asset(
-              `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
-            )}
-          />
-        </Flex>
-      </Listing>
-      {tank.xp && (
-        <Listing label="Research XP">
-          <Flex align="center" gap="1">
-            {tank.xp.toLocaleString()}
-            <img
-              style={{ width: '1em', height: '1em' }}
-              alt="xp"
-              src={asset('icons/currencies/xp.webp')}
-            />
-          </Flex>
-        </Listing>
-      )}
-    </Flex>
-  );
-
-  if (naked) return content;
 
   return (
-    <Flex justify="center" display={{ initial: 'flex', sm: 'none' }}>
-      {content}
+    <Flex
+      justify="center"
+      align="center"
+      gap="6"
+      direction={{ initial: 'column', sm: 'row' }}
+    >
+      <img
+        alt={tank.name}
+        src={tankIcon(tank.id)}
+        style={{
+          objectFit: 'contain',
+          height: '8rem',
+          width: '8rem',
+        }}
+      />
+
+      <Flex
+        wrap={{ initial: 'nowrap', sm: 'wrap' }}
+        direction={{ initial: 'column', sm: 'row' }}
+        align={{ initial: 'center', sm: 'start' }}
+        gapX="6"
+        width="100%"
+        maxWidth="calc(2 * 15rem + var(--space-6))"
+      >
+        {tank.nameFull && <Listing label="Full-name">{tank.nameFull}</Listing>}
+        <Listing label="Nation">
+          <Flex align="center" gap="1">
+            <img
+              style={{ width: '1em', height: '1em' }}
+              alt={tank.nation}
+              src={asset(`flags/circle/${tank.nation}.webp`)}
+            />
+            {
+              strings.common.nations[
+                tank.nation as keyof typeof strings.common.nations
+              ]
+            }
+          </Flex>
+        </Listing>
+        <Listing label="Tier">{tank.tier}</Listing>
+        <Listing label="Class">
+          <Flex align="center" gap="1">
+            <ClassIcon width="1em" height="1em" />
+            {strings.common.tank_class_short[tank.class]}
+          </Flex>
+        </Listing>
+        <Listing
+          label="Type"
+          color={
+            tank.treeType === 'collector'
+              ? 'blue'
+              : tank.treeType === 'premium'
+                ? 'amber'
+                : undefined
+          }
+        >
+          {strings.common.tree_type[tank.treeType]}
+        </Listing>
+        {developerMode && (
+          <Listing label="DEV: ID">
+            <Code>{tank.id}</Code>
+          </Listing>
+        )}
+        {tank.treeType === 'premium' && (
+          <Listing label="Purchase price">
+            <Flex align="center" gap="1">
+              {tank.price.value / 400}
+              <img
+                style={{ width: '1em', height: '1em' }}
+                alt="gold"
+                src={asset('icons/currencies/gold.webp')}
+              />
+            </Flex>
+          </Listing>
+        )}
+        <Listing
+          label={`${tank.treeType === 'researchable' ? 'Purchase' : 'Restoration'} price`}
+        >
+          <Flex align="center" gap="1">
+            {tank.price.value.toLocaleString()}
+            <img
+              style={{ width: '1em', height: '1em' }}
+              alt={tank.price.type}
+              src={asset(
+                `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+              )}
+            />
+          </Flex>
+        </Listing>
+        <Listing label="Sale price">
+          <Flex align="center" gap="1">
+            {(tank.price.value / 2).toLocaleString()}
+            <img
+              style={{ width: '1em', height: '1em' }}
+              alt={tank.price.type}
+              src={asset(
+                `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+              )}
+            />
+          </Flex>
+        </Listing>
+        {tank.xp && (
+          <Listing label="Research XP">
+            <Flex align="center" gap="1">
+              {tank.xp.toLocaleString()}
+              <img
+                style={{ width: '1em', height: '1em' }}
+                alt="xp"
+                src={asset('icons/currencies/xp.webp')}
+              />
+            </Flex>
+          </Listing>
+        )}
+      </Flex>
     </Flex>
   );
 }