feat: buttons

src/app/tools/tankopedia/page.tsx

@@ -13,6 +13,7 @@ import { use } from 'react';
 import { classIcons } from '../../../components/ClassIcon';
 import { Link } from '../../../components/Link';
 import PageWrapper from '../../../components/PageWrapper';
+import { ResearchedIcon } from '../../../components/ResearchedIcon';
 import { TANK_CLASSES } from '../../../components/Tanks/components/Item/constants';
 import { asset } from '../../../core/blitzkit/asset';
 import { gameDefinitions } from '../../../core/blitzkit/gameDefinitions';
@@ -30,17 +31,45 @@ export default function Page() {
 
   return (
     <PageWrapper color="purple" size={1028 + 256}>
-      <Flex gap="8">
-        <Flex direction="column" gap="4" align="start" pt="9">
-          <Text mb="-3">Class</Text>
       <Flex
-            direction="column"
+        gap="8"
+        direction={{
+          initial: 'column',
+          sm: 'row',
+        }}
+        pt={{
+          initial: '0',
+          sm: '6',
+        }}
+      >
+        <Flex
+          direction={{
+            initial: 'row',
+            sm: 'column',
+          }}
+          gap="4"
+          align="start"
+          pt={{
+            initial: '0',
+            sm: '8',
+          }}
+        >
+          <Flex
+            direction={{
+              initial: 'row',
+              sm: 'column',
+            }}
             overflow="hidden"
             style={{
               borderRadius: 'var(--radius-4)',
             }}
           >
-            <Flex>
+            <Flex
+              direction={{
+                sm: 'row',
+                initial: 'column',
+              }}
+            >
               {times(5, (index) => {
                 const tier = (index + 1) as Tier;
 
@@ -60,7 +89,12 @@ export default function Page() {
                 );
               })}
             </Flex>
-            <Flex>
+            <Flex
+              direction={{
+                sm: 'row',
+                initial: 'column',
+              }}
+            >
               {times(5, (index) => {
                 const tier = (index + 6) as Tier;
 
@@ -82,50 +116,32 @@ export default function Page() {
             </Flex>
           </Flex>
 
-          <Text mb="-3">Type</Text>
           <Flex
-            overflow="hidden"
+            direction={{
-            style={{
+              initial: 'row',
-              borderRadius: 'var(--radius-full)',
+              sm: 'column',
             }}
-          >
-            {TANK_CLASSES.map((tankClass) => {
-              const Icon = classIcons[tankClass];
-
-              return (
-                <IconButton
-                  key={tankClass}
-                  variant="soft"
-                  radius="none"
-                  color="gray"
-                  highContrast
-                >
-                  <Icon style={{ width: '1em', height: '1em' }} />
-                </IconButton>
-              );
-            })}
-          </Flex>
-
-          <Text mb="-3">Nation</Text>
-          <Flex
-            direction="column"
             overflow="hidden"
             style={{
               borderRadius: 'var(--radius-4)',
             }}
           >
-            <Flex>
+            <Flex
+              direction={{
+                sm: 'row',
+                initial: 'column',
+              }}
+            >
               {awaitedGameDefinitions.nations
                 .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
                 .map((nation) => (
                   <IconButton
-                    style={{ flex: 1 }}
+                    // style={{ flex: 1 }}
                     variant="soft"
                     color="gray"
                     highContrast
                     radius="none"
                   >
-                    {/* TODO: trim icons */}
                     <img
                       style={{ width: '1em', height: '1em' }}
                       src={asset(`flags/circle/${nation}.webp`)}
@@ -133,7 +149,12 @@ export default function Page() {
                   </IconButton>
                 ))}
             </Flex>
-            <Flex>
+            <Flex
+              direction={{
+                sm: 'row',
+                initial: 'column',
+              }}
+            >
               {awaitedGameDefinitions.nations
                 .slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
                 .map((nation) => (
@@ -154,15 +175,75 @@ export default function Page() {
             </Flex>
           </Flex>
 
-          <Text mb="-3">Test tanks</Text>
+          <Flex
+            overflow="hidden"
+            style={{
+              borderRadius: 'var(--radius-full)',
+            }}
+            direction={{
+              sm: 'row',
+              initial: 'column',
+            }}
+          >
+            {TANK_CLASSES.map((tankClass) => {
+              const Icon = classIcons[tankClass];
+
+              return (
+                <IconButton
+                  key={tankClass}
+                  variant="soft"
+                  radius="none"
+                  color="gray"
+                  highContrast
+                >
+                  <Icon style={{ width: '1em', height: '1em' }} />
+                </IconButton>
+              );
+            })}
+          </Flex>
+
+          <Flex
+            overflow="hidden"
+            style={{
+              borderRadius: 'var(--radius-full)',
+            }}
+            direction={{
+              sm: 'row',
+              initial: 'column',
+            }}
+          >
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+            </IconButton>
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <Text
+                color="amber"
+                style={{ display: 'flex', justifyContent: 'center' }}
+              >
+                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+              </Text>
+            </IconButton>
+            <IconButton variant="soft" radius="none" color="gray" highContrast>
+              <Text
+                color="blue"
+                style={{ display: 'flex', justifyContent: 'center' }}
+              >
+                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+              </Text>
+            </IconButton>
+          </Flex>
+
+          <Flex direction="column" gap="2">
+            <Text wrap="nowrap">Test tanks</Text>
             <RadioGroup.Root defaultValue="include">
               <RadioGroup.Item value="include">Include</RadioGroup.Item>
               <RadioGroup.Item value="exclude">Exclude</RadioGroup.Item>
               <RadioGroup.Item value="only">Only</RadioGroup.Item>
             </RadioGroup.Root>
           </Flex>
+        </Flex>
 
-        <Flex direction="column" gap="8" mt="4" flexGrow="1">
+        <Flex direction="column" gap="8" flexGrow="1">
           {range(10, 0).map((tierUntyped) => {
             const tier = tierUntyped as Tier;
             const tierTanks = awaitedTanksDefinitionsArray

src/components/ResearchedIcon.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+
+export function ResearchedIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M63 25V43L48 51H60C58.5 53.6667 51.6 59 36 59L62 25H63Z"
+        fill="currentColor"
+      />
+      <path d="M48 3L60 18L54 27L48 3Z" fill="currentColor" />
+      <path
+        d="M3 25V43L18 51H6C7.5 53.6667 14.4 59 30 59L4 25H3Z"
+        fill="currentColor"
+      />
+      <path d="M18 3L6 18L12 27L18 3Z" fill="currentColor" />
+    </svg>
+  );
+}

src/core/blitzkit/tankDefinitions/index.ts

@@ -197,6 +197,7 @@ export const tankNames = tanksDefinitionsArray.then((tanks) =>
 
 export type Tier = (typeof TIERS)[number];
 
+// TODO: DEPRICATE THISuuu
 export const NATIONS = tanksDefinitionsArray.then((tanks) => {
   const nations = Array.from(
     new Set<string>(Object.values(tanks).map((tank) => tank.nation)),