From fb9c04c779c2dbf6f02daa4108a86c0f60e40d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:48:19 -0600
Subject: [PATCH] feat: even cleaner filters

---
 .../tankopedia/components/Options/index.tsx   | 571 +++++++++---------
 src/app/tools/tankopedia/page.tsx             |  20 +-
 2 files changed, 298 insertions(+), 293 deletions(-)

diff --git a/src/app/tools/tankopedia/components/Options/index.tsx b/src/app/tools/tankopedia/components/Options/index.tsx
index 79fc47221..d6e9f6a35 100644
--- a/src/app/tools/tankopedia/components/Options/index.tsx
+++ b/src/app/tools/tankopedia/components/Options/index.tsx
@@ -27,218 +27,219 @@ export function Options() {
   const tankopediaState = useTankopedia();
 
   return (
-    <Flex justify="center" wrap="wrap" gap="2">
-      <Button
-        color="red"
-        onClick={() =>
-          useTankopedia.setState({
-            filters: {
-              nations: [],
-              tiers: [],
-              treeTypes: [],
-              types: [],
-              test: 'include',
-            },
-          })
-        }
-      >
-        Clear
-      </Button>
-
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="soft">
-            Test tanks
-            <CaretDownIcon />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.RadioGroup
-            value={tankopediaState.filters.test}
-            onValueChange={(value) =>
-              mutateTankopedia((draft) => {
-                draft.filters.test = value as TankopediaTestTankDisplay;
-              })
-            }
-          >
-            <DropdownMenu.RadioItem value="include">
-              Include
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="exclude">
-              Exclude
-            </DropdownMenu.RadioItem>
-            <DropdownMenu.RadioItem value="only">Only</DropdownMenu.RadioItem>
-          </DropdownMenu.RadioGroup>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-
-      <Flex style={{ flex: 1 }}>
-        {TREE_TYPES.map((type, index) => (
-          <Button
-            key={type}
-            variant={
-              tankopediaState.filters.treeTypes.includes(type)
-                ? 'solid'
-                : 'soft'
-            }
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === TREE_TYPES.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TREE_TYPES.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopedia((draft) => {
-                if (draft.filters.treeTypes.includes(type)) {
-                  draft.filters.treeTypes = draft.filters.treeTypes.filter(
-                    (preexistingType) => preexistingType !== type,
-                  );
-                } else {
-                  draft.filters.treeTypes.push(type);
-                }
-              })
-            }
-          >
-            <img
-              src={TREE_TYPE_IMAGES[type]}
-              style={{ width: '1em', height: '1em' }}
-            />
-          </Button>
-        ))}
-      </Flex>
-
-      <Flex style={{ flex: 1 }}>
-        {[...TANK_TYPES].reverse().map((type, index) => (
-          <Button
-            key={type}
-            variant={
-              tankopediaState.filters.types.includes(type) ? 'solid' : 'soft'
-            }
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === TANK_TYPES.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TANK_TYPES.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopedia((draft) => {
-                if (draft.filters.types.includes(type)) {
-                  draft.filters.types = draft.filters.types.filter(
-                    (preexistingType) => preexistingType !== type,
-                  );
-                } else {
-                  draft.filters.types.push(type);
-                }
-              })
-            }
-          >
-            <img
-              src={TREE_TYPE_ICONS[TreeTypeEnum.TechTree][type]}
-              style={{ width: '1em', height: '1em' }}
-            />
-          </Button>
-        ))}
-      </Flex>
-
-      <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
-        {[...TIERS].reverse().map((tier, index) => (
-          <Button
-            key={tier}
-            variant={
-              tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
-            }
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === TIERS.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopedia((draft) => {
-                if (draft.filters.tiers.includes(tier)) {
-                  draft.filters.tiers = draft.filters.tiers.filter(
-                    (preexistingTier) => preexistingTier !== tier,
-                  );
-                } else {
-                  draft.filters.tiers.push(tier);
-                }
-              })
-            }
-          >
-            {TIER_ROMAN_NUMERALS[tier]}
-          </Button>
-        ))}
-      </Flex>
-
-      <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
-        {nations.map((nation, index) => (
-          <Button
-            key={nation}
-            variant={
-              tankopediaState.filters.nations.includes(nation)
-                ? 'solid'
-                : 'soft'
-            }
-            style={{
-              flex: 1,
-              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`)}
+    <Flex justify="center" direction="column" gap="2">
+      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
+        <Button
+          color="red"
+          onClick={() =>
+            useTankopedia.setState({
+              filters: {
+                nations: [],
+                tiers: [],
+                treeTypes: [],
+                types: [],
+                test: 'include',
+              },
+            })
+          }
+        >
+          Clear
+        </Button>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="soft">
+              Test tanks
+              <CaretDownIcon />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.RadioGroup
+              value={tankopediaState.filters.test}
+              onValueChange={(value) =>
+                mutateTankopedia((draft) => {
+                  draft.filters.test = value as TankopediaTestTankDisplay;
+                })
+              }
+            >
+              <DropdownMenu.RadioItem value="include">
+                Include
+              </DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="exclude">
+                Exclude
+              </DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="only">Only</DropdownMenu.RadioItem>
+            </DropdownMenu.RadioGroup>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+        <Flex style={{ flex: 1 }}>
+          {TREE_TYPES.map((type, index) => (
+            <Button
+              key={type}
+              variant={
+                tankopediaState.filters.treeTypes.includes(type)
+                  ? 'solid'
+                  : 'soft'
+              }
               style={{
-                width: '1em',
-                height: '1em',
-                scale: 2,
-                transform: 'translate(15%, 15%)',
+                flex: 1,
+                margin: -0.5,
+                borderTopLeftRadius: index === 0 ? undefined : 0,
+                borderBottomLeftRadius: index === 0 ? undefined : 0,
+                borderTopRightRadius:
+                  index === TREE_TYPES.length - 1 ? undefined : 0,
+                borderBottomRightRadius:
+                  index === TREE_TYPES.length - 1 ? undefined : 0,
               }}
-            />
-          </Button>
-        ))}
-      </Flex>
-
-      <Flex
-        direction="column"
-        className={styles.splitFilters}
-        style={{ width: '100%' }}
-      >
-        <Flex>
-          {[...TIERS]
-            .reverse()
-            .slice(0, 5)
-            .map((tier, index) => (
+              onClick={() =>
+                mutateTankopedia((draft) => {
+                  if (draft.filters.treeTypes.includes(type)) {
+                    draft.filters.treeTypes = draft.filters.treeTypes.filter(
+                      (preexistingType) => preexistingType !== type,
+                    );
+                  } else {
+                    draft.filters.treeTypes.push(type);
+                  }
+                })
+              }
+            >
+              <img
+                src={TREE_TYPE_IMAGES[type]}
+                style={{ width: '1em', height: '1em' }}
+              />
+            </Button>
+          ))}
+        </Flex>
+        <Flex style={{ flex: 1 }}>
+          {[...TANK_TYPES].reverse().map((type, index) => (
+            <Button
+              key={type}
+              variant={
+                tankopediaState.filters.types.includes(type) ? 'solid' : 'soft'
+              }
+              style={{
+                flex: 1,
+                margin: -0.5,
+                borderTopLeftRadius: index === 0 ? undefined : 0,
+                borderBottomLeftRadius: index === 0 ? undefined : 0,
+                borderTopRightRadius:
+                  index === TANK_TYPES.length - 1 ? undefined : 0,
+                borderBottomRightRadius:
+                  index === TANK_TYPES.length - 1 ? undefined : 0,
+              }}
+              onClick={() =>
+                mutateTankopedia((draft) => {
+                  if (draft.filters.types.includes(type)) {
+                    draft.filters.types = draft.filters.types.filter(
+                      (preexistingType) => preexistingType !== type,
+                    );
+                  } else {
+                    draft.filters.types.push(type);
+                  }
+                })
+              }
+            >
+              <img
+                src={TREE_TYPE_ICONS[TreeTypeEnum.TechTree][type]}
+                style={{ width: '1em', height: '1em' }}
+              />
+            </Button>
+          ))}
+        </Flex>
+        <Flex
+          direction="column"
+          className={styles.splitFilters}
+          style={{ width: '100%' }}
+        >
+          <Flex>
+            {[...TIERS]
+              .reverse()
+              .slice(0, 5)
+              .map((tier, index) => (
+                <Button
+                  key={tier}
+                  variant={
+                    tankopediaState.filters.tiers.includes(tier)
+                      ? 'solid'
+                      : 'soft'
+                  }
+                  style={{
+                    flex: 1,
+                    margin: -0.5,
+                    borderTopLeftRadius: index === 0 ? undefined : 0,
+                    borderBottomLeftRadius: 0,
+                    borderTopRightRadius:
+                      index === TIERS.length - Math.round(TIERS.length / 2) - 1
+                        ? undefined
+                        : 0,
+                    borderBottomRightRadius: 0,
+                  }}
+                  onClick={() =>
+                    mutateTankopedia((draft) => {
+                      if (draft.filters.tiers.includes(tier)) {
+                        draft.filters.tiers = draft.filters.tiers.filter(
+                          (preexistingTier) => preexistingTier !== tier,
+                        );
+                      } else {
+                        draft.filters.tiers.push(tier);
+                      }
+                    })
+                  }
+                >
+                  {TIER_ROMAN_NUMERALS[tier]}
+                </Button>
+              ))}
+          </Flex>
+          <Flex>
+            {[...TIERS]
+              .reverse()
+              .slice(5, 10)
+              .map((tier, index) => (
+                <Button
+                  key={tier}
+                  variant={
+                    tankopediaState.filters.tiers.includes(tier)
+                      ? 'solid'
+                      : 'soft'
+                  }
+                  style={{
+                    flex: 1,
+                    margin: -0.5,
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: index === 0 ? undefined : 0,
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius:
+                      index === TIERS.length - Math.round(TIERS.length / 2) - 1
+                        ? undefined
+                        : 0,
+                  }}
+                  onClick={() =>
+                    mutateTankopedia((draft) => {
+                      if (draft.filters.tiers.includes(tier)) {
+                        draft.filters.tiers = draft.filters.tiers.filter(
+                          (preexistingTier) => preexistingTier !== tier,
+                        );
+                      } else {
+                        draft.filters.tiers.push(tier);
+                      }
+                    })
+                  }
+                >
+                  {TIER_ROMAN_NUMERALS[tier]}
+                </Button>
+              ))}
+          </Flex>
+        </Flex>
+        <Flex
+          direction="column"
+          className={styles.splitFilters}
+          style={{ width: '100%' }}
+        >
+          <Flex>
+            {nations.slice(0, 5).map((nation, index) => (
               <Button
-                key={tier}
+                key={nation}
                 variant={
-                  tankopediaState.filters.tiers.includes(tier)
+                  tankopediaState.filters.nations.includes(nation)
                     ? 'solid'
                     : 'soft'
                 }
@@ -248,35 +249,43 @@ export function Options() {
                   borderTopLeftRadius: index === 0 ? undefined : 0,
                   borderBottomLeftRadius: 0,
                   borderTopRightRadius:
-                    index === TIERS.length - 6 ? undefined : 0,
-                  borderBottomRightRadius: 0,
+                    index === nations.length - Math.round(nations.length / 2)
+                      ? undefined
+                      : 0,
+                  borderBottomRightRadius:
+                    index === nations.length - 1 ? undefined : 0,
                 }}
                 onClick={() =>
                   mutateTankopedia((draft) => {
-                    if (draft.filters.tiers.includes(tier)) {
-                      draft.filters.tiers = draft.filters.tiers.filter(
-                        (preexistingTier) => preexistingTier !== tier,
+                    if (draft.filters.nations.includes(nation)) {
+                      draft.filters.nations = draft.filters.nations.filter(
+                        (preexistingType) => preexistingType !== nation,
                       );
                     } else {
-                      draft.filters.tiers.push(tier);
+                      draft.filters.nations.push(nation);
                     }
                   })
                 }
               >
-                {TIER_ROMAN_NUMERALS[tier]}
+                <img
+                  src={asset(`flags/circle/${nation}.webp`)}
+                  style={{
+                    width: '1em',
+                    height: '1em',
+                    scale: 2,
+                    transform: 'translate(15%, 15%)',
+                  }}
+                />
               </Button>
             ))}
-        </Flex>
+          </Flex>
 
-        <Flex>
-          {[...TIERS]
-            .reverse()
-            .slice(5, 10)
-            .map((tier, index) => (
+          <Flex>
+            {nations.slice(5, 10).map((nation, index) => (
               <Button
-                key={tier}
+                key={nation}
                 variant={
-                  tankopediaState.filters.tiers.includes(tier)
+                  tankopediaState.filters.nations.includes(nation)
                     ? 'solid'
                     : 'soft'
                 }
@@ -285,35 +294,77 @@ export function Options() {
                   margin: -0.5,
                   borderTopLeftRadius: 0,
                   borderBottomLeftRadius: index === 0 ? undefined : 0,
-                  borderTopRightRadius: 0,
+                  borderTopRightRadius:
+                    index === nations.length - 1 ? undefined : 0,
                   borderBottomRightRadius:
-                    index === TIERS.length - 6 ? undefined : 0,
+                    index ===
+                    nations.length - Math.round(nations.length / 2) - 1
+                      ? undefined
+                      : 0,
                 }}
                 onClick={() =>
                   mutateTankopedia((draft) => {
-                    if (draft.filters.tiers.includes(tier)) {
-                      draft.filters.tiers = draft.filters.tiers.filter(
-                        (preexistingTier) => preexistingTier !== tier,
+                    if (draft.filters.nations.includes(nation)) {
+                      draft.filters.nations = draft.filters.nations.filter(
+                        (preexistingType) => preexistingType !== nation,
                       );
                     } else {
-                      draft.filters.tiers.push(tier);
+                      draft.filters.nations.push(nation);
                     }
                   })
                 }
               >
-                {TIER_ROMAN_NUMERALS[tier]}
+                <img
+                  src={asset(`flags/circle/${nation}.webp`)}
+                  style={{
+                    width: '1em',
+                    height: '1em',
+                    scale: 2,
+                    transform: 'translate(15%, 15%)',
+                  }}
+                />
               </Button>
             ))}
+          </Flex>
         </Flex>
       </Flex>
 
-      <Flex
-        direction="column"
-        className={styles.splitFilters}
-        style={{ width: '100%' }}
-      >
-        <Flex>
-          {nations.slice(0, 5).map((nation, index) => (
+      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
+        <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
+          {[...TIERS].reverse().map((tier, index) => (
+            <Button
+              key={tier}
+              variant={
+                tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
+              }
+              style={{
+                flex: 1,
+                margin: -0.5,
+                borderTopLeftRadius: index === 0 ? undefined : 0,
+                borderBottomLeftRadius: index === 0 ? undefined : 0,
+                borderTopRightRadius:
+                  index === TIERS.length - 1 ? undefined : 0,
+                borderBottomRightRadius:
+                  index === TIERS.length - 1 ? undefined : 0,
+              }}
+              onClick={() =>
+                mutateTankopedia((draft) => {
+                  if (draft.filters.tiers.includes(tier)) {
+                    draft.filters.tiers = draft.filters.tiers.filter(
+                      (preexistingTier) => preexistingTier !== tier,
+                    );
+                  } else {
+                    draft.filters.tiers.push(tier);
+                  }
+                })
+              }
+            >
+              {TIER_ROMAN_NUMERALS[tier]}
+            </Button>
+          ))}
+        </Flex>
+        <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
+          {nations.map((nation, index) => (
             <Button
               key={nation}
               variant={
@@ -325,55 +376,11 @@ export function Options() {
                 flex: 1,
                 margin: -0.5,
                 borderTopLeftRadius: index === 0 ? undefined : 0,
-                borderBottomLeftRadius: 0,
-                borderTopRightRadius:
-                  index === nations.length - 5 ? 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>
-          {nations.slice(5, 10).map((nation, index) => (
-            <Button
-              key={nation}
-              variant={
-                tankopediaState.filters.nations.includes(nation)
-                  ? 'solid'
-                  : 'soft'
-              }
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: 0,
                 borderBottomLeftRadius: index === 0 ? undefined : 0,
                 borderTopRightRadius:
                   index === nations.length - 1 ? undefined : 0,
                 borderBottomRightRadius:
-                  index === nations.length - 6 ? undefined : 0,
+                  index === nations.length - 1 ? undefined : 0,
               }}
               onClick={() =>
                 mutateTankopedia((draft) => {
diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx
index d5d9e206a..3e47b3485 100644
--- a/src/app/tools/tankopedia/page.tsx
+++ b/src/app/tools/tankopedia/page.tsx
@@ -28,14 +28,13 @@ import { theme } from '../../../stitches.config';
 import mutateTankopedia, {
   TankopediaSortBy,
   TankopediaSortDirection,
-  TankopediaTestTankDisplay,
   useTankopedia,
 } from '../../../stores/tankopedia';
 import { Options } from './components/Options';
 import { PageTurner } from './components/PageTurner';
 import * as styles from './page.css';
 
-const TANKS_PER_PAGE = 3 * 2 ** 4;
+const TANKS_PER_PAGE = 3 * 2 ** 3;
 
 export default function Page() {
   const tankopediaState = useTankopedia();
@@ -102,7 +101,7 @@ export default function Page() {
   return (
     <PageWrapper size="wide" color="purple">
       <Suspense fallback={<Text>Loading...</Text>}>
-        <Flex direction="column" gap="6">
+        <Flex direction="column" gap="4">
           <Flex gap="2">
             <TextField.Root style={{ flex: 1 }}>
               <TextField.Slot>
@@ -174,19 +173,18 @@ export default function Page() {
                 </DropdownMenu.RadioGroup>
               </DropdownMenu.Content>
             </DropdownMenu.Root>
-
           </Flex>
 
           <Options />
-
-          <PageTurner
-            page={page}
-            setPage={setPage}
-            tanksPerPage={TANKS_PER_PAGE}
-            searchedList={searchedList}
-          />
         </Flex>
 
+        <PageTurner
+          page={page}
+          setPage={setPage}
+          tanksPerPage={TANKS_PER_PAGE}
+          searchedList={searchedList}
+        />
+
         <Flex wrap="wrap" gap="3" justify="center">
           {searchedList
             .map((tank) => (