feat: nation filters

scripts/buildTankopedia.ts

@@ -166,30 +166,42 @@ Promise.all(
     //     }),
     //   )
     // ).flat() as FileChange[];
-    const flagChanges = await readdir(
-      `${TEMP}/${directoriesOfInterest.flags}`,
-    ).then((flags) =>
-      Promise.all(
-        flags
-          .filter((flag) => flag.startsWith('flag_tutor-tank_'))
-          .map(async (flag) => {
-            const content = await readFile(
-              `${TEMP}/${directoriesOfInterest.flags}/${flag}`,
-              { encoding: 'base64' },
-            );
-            const name = flag.match(/flag_tutor-tank_(.+)\.packed\.webp/)![1];
+    const flags = await readdir(`${TEMP}/${directoriesOfInterest.flags}`);
+    // const scratchedFlags = await Promise.all(
+    //   flags
+    //     .filter((flag) => flag.startsWith('flag_tutor-tank_'))
+    //     .map(async (flag) => {
+    //       const content = await readFile(
+    //         `${TEMP}/${directoriesOfInterest.flags}/${flag}`,
+    //         { encoding: 'base64' },
+    //       );
+    //       const name = flag.match(/flag_tutor-tank_(.+)\.packed\.webp/)![1];
 
-            return {
-              content,
-              encoding: 'base64',
-              path: `flags/scratched/${name}.webp`,
-            } satisfies FileChange;
-          }),
-      ),
+    //       return {
+    //         content,
+    //         encoding: 'base64',
+    //         path: `flags/scratched/${name}.webp`,
+    //       } satisfies FileChange;
+    //     }),
+    // );
+    const circleFlags = await Promise.all(
+      flags
+        .filter((flag) => flag.startsWith('flag_profile-stat_'))
+        .map(async (flag) => {
+          const content = await readFile(
+            `${TEMP}/${directoriesOfInterest.flags}/${flag}`,
+            { encoding: 'base64' },
+          );
+          const name = flag.match(/flag_profile-stat_(.+)\.packed\.webp/)![1];
+
+          return {
+            content,
+            encoding: 'base64',
+            path: `flags/circle/${name}.webp`,
+          } satisfies FileChange;
+        }),
     );
 
-    console.log(flagChanges);
-
     console.log('Writing files...');
     await commitMultipleFiles(
       octokit,
@@ -197,7 +209,7 @@ Promise.all(
       'blitzkrieg-assets',
       'main',
       new Date().toString(),
-      flagChanges,
+      circleFlags,
       true,
     );
   } else {

src/app/tools/tankopedia/components/Options.tsx

@@ -2,6 +2,7 @@
 
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
+import { use } from 'react';
 import {
   TANK_TYPES,
   TREE_TYPES,
@@ -9,7 +10,9 @@ import {
   TREE_TYPE_IMAGES,
   TreeTypeEnum,
 } from '../../../../components/Tanks';
+import { asset } from '../../../../core/blitzkrieg/asset';
 import {
+  NATIONS,
   TIERS,
   TIER_ROMAN_NUMERALS,
 } from '../../../../core/blitzkrieg/tankopedia';
@@ -20,11 +23,12 @@ import mutateTankopedia, {
 } from '../../../../stores/tankopedia';
 
 export function Options() {
+  const nations = use(NATIONS);
   const tankopediaState = useTankopedia();
 
   return (
     <Flex justify="center" wrap="wrap" gap="4">
-      <Flex gap="1">
+      <Flex gap="2">
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
             <Button variant="soft">
@@ -142,6 +146,49 @@ export function Options() {
         ))}
       </Flex>
 
+      <Flex>
+        {nations.map((nation, index) => (
+          <Button
+            key={nation}
+            variant={
+              tankopediaState.filters.nations.includes(nation)
+                ? 'solid'
+                : 'soft'
+            }
+            style={{
+              margin: -0.5,
+              borderTopLeftRadius: index === 0 ? undefined : 0,
+              borderBottomLeftRadius: index === 0 ? undefined : 0,
+              borderTopRightRadius:
+                index === nations.length - 1 ? undefined : 0,
+              borderBottomRightRadius:
+                index === nations.length - 1 ? undefined : 0,
+            }}
+            onClick={() =>
+              mutateTankopedia((draft) => {
+                if (draft.filters.nations.includes(nation)) {
+                  draft.filters.nations = draft.filters.nations.filter(
+                    (preexistingType) => preexistingType !== nation,
+                  );
+                } else {
+                  draft.filters.nations.push(nation);
+                }
+              })
+            }
+          >
+            <img
+              src={asset(`flags/circle/${nation}.webp`)}
+              style={{
+                width: '1em',
+                height: '1em',
+                scale: 2,
+                transform: 'translate(15%, 15%)',
+              }}
+            />
+          </Button>
+        ))}
+      </Flex>
+
       <Flex>
         {TREE_TYPES.map((type, index) => (
           <Button
@@ -179,6 +226,22 @@ export function Options() {
           </Button>
         ))}
       </Flex>
+
+      <Button
+        color="red"
+        onClick={() =>
+          useTankopedia.setState({
+            filters: {
+              nations: [],
+              tiers: [],
+              treeTypes: [],
+              types: [],
+            },
+          })
+        }
+      >
+        Clear
+      </Button>
     </Flex>
   );
 }

src/app/tools/tankopedia/page.tsx

@@ -41,7 +41,10 @@ export default function Page() {
               : tankopediaState.filters.types.includes(tank.type)) &&
             (tankopediaState.filters.treeTypes.length === 0
               ? true
-              : tankopediaState.filters.treeTypes.includes(tank.tree_type)),
+              : tankopediaState.filters.treeTypes.includes(tank.tree_type)) &&
+            (tankopediaState.filters.nations.length === 0
+              ? true
+              : tankopediaState.filters.nations.includes(tank.nation)),
         )
         .sort((a, b) => {
           let diff = 0;
@@ -81,7 +84,7 @@ export default function Page() {
   return (
     <PageWrapper size="wide" color="purple">
       <Suspense fallback={<Text>Loading...</Text>}>
-        <Flex direction="column" gap="3">
+        <Flex direction="column" gap="6">
           <TextField.Root>
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
@@ -108,14 +111,14 @@ export default function Page() {
           </TextField.Root>
 
           <Options />
-        </Flex>
 
-        <PageTurner
-          page={page}
-          setPage={setPage}
-          tanksPerPage={TANKS_PER_PAGE}
-          searchedList={searchedList}
-        />
+          <PageTurner
+            page={page}
+            setPage={setPage}
+            tanksPerPage={TANKS_PER_PAGE}
+            searchedList={searchedList}
+          />
+        </Flex>
 
         <Flex wrap="wrap" gap="3" justify="center">
           {searchedList

src/core/blitzkrieg/tankopedia.ts

@@ -98,3 +98,13 @@ export const TIER_ROMAN_NUMERALS: Record<Tier, string> = {
   9: 'IX',
   10: 'X',
 };
+
+export const NATIONS = tanks.then((tanks) => {
+  const nationsObject: Record<string, true> = {};
+
+  tanks.forEach(({ nation }) => {
+    nationsObject[nation] = true;
+  });
+
+  return Object.keys(nationsObject);
+});

src/stores/tankopedia.ts

@@ -16,6 +16,7 @@ type Tankopedia = {
     tiers: Tier[];
     types: TankType[];
     treeTypes: TreeTypeString[];
+    nations: string[];
   };
 };
 
@@ -31,6 +32,7 @@ export const useTankopedia = create<Tankopedia>()(
           tiers: [],
           types: [],
           treeTypes: [],
+          nations: [],
         },
       }),
       { name: 'tankopedia' },