feat: revert poopy header

public/assets/versions.json

@@ -1 +1 @@
-["1.10.0","1.10.1","1.10.2","1.11.0","1.12.0","1.12.1","1.12.2","1.12.3","1.12.4","1.12.5","1.12.6","1.12.7","1.12.8","1.12.9","1.13.0","1.13.1","1.13.2","1.13.3","1.14.0","1.14.1","1.14.2","1.14.3","1.14.4","1.15.0","1.15.1","1.15.10","1.15.11","1.15.12","1.15.13","1.15.2","1.15.3","1.15.4","1.15.5","1.15.6","1.15.7","1.15.8","1.15.9","1.16.0","1.16.1","1.16.2","1.16.3","1.16.4","1.17.0","1.17.1","1.17.2","1.18.0","1.18.1","1.18.2","1.18.3","1.19.0","1.19.1","1.19.2","1.19.3","1.19.4","1.19.5","1.19.6","1.20.0","1.20.1","1.20.2","1.20.3","1.20.4","1.20.5","1.21.0","1.21.1","1.21.2","1.21.3","1.22.0","1.22.1","1.22.2","1.22.3","1.3.0","1.3.1","1.3.2","1.3.3","1.4.0","1.4.1","1.5.0","1.5.1","1.5.2","1.5.3","1.5.4","1.6.0","1.7.0","1.7.1","1.7.2","1.7.3-1.7.4","1.7.5","1.7.6","1.7.7","1.8.0","1.8.1","1.9.0","1.9.1","1.9.2","1.9.3","1.9.4","1.9.5"]
+["1.10.0","1.10.1","1.10.2","1.11.0","1.12.0","1.12.1","1.12.2","1.12.3","1.12.4","1.12.5","1.12.6","1.12.7","1.12.8","1.12.9","1.13.0","1.13.1","1.13.2","1.13.3","1.14.0","1.14.1","1.14.2","1.14.3","1.14.4","1.15.0","1.15.1","1.15.10","1.15.11","1.15.12","1.15.13","1.15.2","1.15.3","1.15.4","1.15.5","1.15.6","1.15.7","1.15.8","1.15.9","1.16.0","1.16.1","1.16.2","1.16.3","1.16.4","1.17.0","1.17.1","1.17.2","1.18.0","1.18.1","1.18.2","1.18.3","1.19.0","1.19.1","1.19.2","1.19.3","1.19.4","1.19.5","1.19.6","1.20.0","1.20.1","1.20.2","1.20.3","1.20.4","1.20.5","1.21.0","1.21.1","1.21.2","1.21.3","1.22.0","1.22.1","1.22.2","1.22.3","1.22.4","1.3.0","1.3.1","1.3.2","1.3.3","1.4.0","1.4.1","1.5.0","1.5.1","1.5.2","1.5.3","1.5.4","1.6.0","1.7.0","1.7.1","1.7.2","1.7.3-1.7.4","1.7.5","1.7.6","1.7.7","1.8.0","1.8.1","1.9.0","1.9.1","1.9.2","1.9.3","1.9.4","1.9.5"]

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 {
+export function MetaSection() {
-  naked?: boolean;
-}
-
-export function MetaSection({ naked }: MetaSectionProps) {
   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' }}>
+    <Flex
-      {content}
+      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>
   );
 }