weapon select fancy initial

2026-07-16 17:00:02 -05:00 · 2020-12-17 14:24:59 +02:00 · 2020-12-17 14:24:59 +02:00 · ca93b0de7b
commit ca93b0de7b
parent c3688a22d7
19 changed files with 468 additions and 160 deletions
--- a/components/common/MySelect.tsx
+++ b/components/common/MySelect.tsx
@ -1,30 +1,160 @@
-import { Select } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
+import { useMyTheme } from "lib/useMyTheme";
+import { useState } from "react";
+import ReactSelect, {
+  GroupedOptionsType,
+  OptionsType,
+  OptionTypeBase,
+  ValueType,
+} from "react-select";
+import { SelectComponents } from "react-select/src/components";

-interface Props {
-  value: string;
-  setValue: (value?: string) => void;
-  placeholder?: string;
-  name?: string;
-  children: React.ReactNode;
+interface SelectProps {
+  options?:
+    | OptionsType<{
+        label: string;
+        value: string;
+      }>
+    | GroupedOptionsType<{
+        label: string;
+        value: string;
+      }>;
+  width?: string;
+  value: ValueType<OptionTypeBase, boolean>;
+  setValue?: (value: any) => void;
+  autoFocus?: boolean;
+  components?: Partial<SelectComponents<OptionTypeBase, boolean>>;
+  isClearable?: boolean;
+  isMulti?: boolean;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  isSearchable?: boolean;
+  menuIsOpen?: boolean;
+  hideMenuBeforeTyping?: boolean;
 }

-const MySelect: React.FC<Props> = ({
+const MySelect: React.FC<SelectProps> = ({
+  options,
+  components,
  value,
  setValue,
-  placeholder,
-  children,
-  name,
-}) => (
-  <Select
-    value={value ?? ""}
-    onChange={(e) =>
-      setValue(e.target.value === "" ? undefined : e.target.value)
+  isClearable,
+  autoFocus,
+  isMulti,
+  isLoading,
+  isDisabled,
+  isSearchable,
+  menuIsOpen,
+  hideMenuBeforeTyping,
+}) => {
+  const { borderColor, themeColorHex, bgColor } = useMyTheme();
+  const { colorMode } = useColorMode();
+  const [inputValue, setInputValue] = useState("");
+
+  const handleChange = (selectedOption: any) => {
+    if (!setValue) return;
+    if (!selectedOption) {
+      setValue(null);
+      return;
    }
-    name={name}
-  >
-    {placeholder && <option value="">{placeholder}</option>}
-    {children}
-  </Select>
-);
+    if (Array.isArray(selectedOption)) {
+      setValue(selectedOption.map((obj) => obj.value));
+    } else {
+      setValue(selectedOption?.value);
+    }
+  };
+
+  const getOptionColor = (focused: boolean) => {
+    if (focused) return "black";
+
+    return colorMode === "light" ? "black" : "white";
+  };
+
+  const menuIsOpenCheck = () => {
+    if (menuIsOpen) return true;
+    if (hideMenuBeforeTyping) {
+      return !!(inputValue.length >= 3);
+    }
+
+    return undefined;
+  };
+
+  console.log({ borderColor });
+
+  return (
+    <ReactSelect
+      className="basic-single"
+      classNamePrefix="select"
+      value={value}
+      inputValue={inputValue}
+      onInputChange={(newValue) => setInputValue(newValue)}
+      menuIsOpen={menuIsOpenCheck()}
+      onChange={handleChange}
+      placeholder={null}
+      isSearchable={!!isSearchable}
+      isMulti={!!isMulti}
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+      isClearable={isClearable}
+      options={options}
+      components={
+        hideMenuBeforeTyping
+          ? {
+              IndicatorSeparator: () => null,
+              DropdownIndicator: () => null,
+              ...components,
+            }
+          : {
+              IndicatorSeparator: () => null,
+              ...components,
+            }
+      }
+      theme={(theme) => ({
+        ...theme,
+        borderRadius: 5,
+        colors: {
+          ...theme.colors,
+          primary25: `${themeColorHex}`,
+          primary: themeColorHex,
+          neutral0: bgColor,
+          neutral5: bgColor,
+        },
+      })}
+      autoFocus={autoFocus}
+      styles={{
+        singleValue: (base) => ({
+          ...base,
+          padding: 5,
+          borderRadius: 5,
+          color: colorMode === "light" ? "black" : "white",
+          display: "flex",
+        }),
+        input: (base) => ({
+          ...base,
+          color: colorMode === "light" ? "black" : "white",
+        }),
+        multiValue: (base) => ({
+          ...base,
+          background: themeColorHex,
+          color: "black",
+        }),
+        option: (styles, { isFocused }) => {
+          return {
+            ...styles,
+            backgroundColor: isFocused ? themeColorHex : undefined,
+            color: getOptionColor(isFocused),
+          };
+        },
+        menu: (styles) => ({ ...styles, zIndex: 999 }),
+        control: (base) => ({
+          ...base,
+          borderColor,
+          height: "2.5rem",
+          background: "hsla(0, 0%, 0%, 0)",
+        }),
+      }}
+    />
+  );
+};

 export default MySelect;
--- a/components/common/WeaponSelector.tsx
+++ b/components/common/WeaponSelector.tsx
@ -1,53 +1,76 @@
-import { Select } from "@chakra-ui/react";
-import { t } from "@lingui/macro";
+import { Box, Flex } from "@chakra-ui/react";
 import { useLingui } from "@lingui/react";
 import { weaponsWithHeroCategorized } from "lib/lists/weaponsWithHero";
+import { components } from "react-select";
+import MySelect from "./MySelect";
+import WeaponImage from "./WeaponImage";

-interface Props {
-  name?: string;
-  value: string;
-  onChange: (value: string) => void;
-  excludeAlt?: boolean;
-  isHeader?: boolean;
+interface WeaponSelectorProps {
+  value?: string;
+  setValue: (value: string) => void;
+  autoFocus?: boolean;
+  isClearable?: boolean;
+  isMulti?: boolean;
+  menuIsOpen?: boolean;
+  showAlts?: boolean;
 }

-const WeaponSelector: React.FC<Props> = ({
-  name,
+const WeaponSelector: React.FC<WeaponSelectorProps> = ({
  value,
-  onChange,
-  excludeAlt = false,
-  isHeader = false,
+  setValue,
+  isClearable,
+  autoFocus,
+  isMulti,
+  menuIsOpen,
+  showAlts,
 }) => {
  const { i18n } = useLingui();
+  const singleOption = (props: any) => (
+    <components.Option {...props}>
+      <Flex alignItems="center" color={props.isFocused ? "black" : undefined}>
+        <Box mr="0.5em">
+          <WeaponImage size={32} name={props.value} />
+        </Box>
+        {props.label}
+      </Flex>
+    </components.Option>
+  );
+
  return (
-    <>
-      <Select
-        value={value ?? "NO_VALUE"}
-        name={name}
-        onChange={(e) => onChange(e.target.value)}
-        mx={isHeader ? "auto" : undefined}
-        maxWidth={80}
-        size={isHeader ? "lg" : undefined}
-      >
-        <option hidden value="NO_VALUE">
-          {t`Select weapon`}
-        </option>
-        {weaponsWithHeroCategorized.flatMap((wpnCategory) =>
-          wpnCategory.weapons.map((wpn) => {
-            if (
-              excludeAlt &&
-              (wpn.includes("Hero") || wpn.includes("Octo Shot"))
-            )
-              return null;
-            return (
-              <option key={wpn} value={wpn}>
-                {i18n._(wpn)}
-              </option>
-            );
-          })
-        )}
-      </Select>
-    </>
+    <MySelect
+      options={
+        showAlts
+          ? weaponsWithHeroCategorized.map((category) => ({
+              label: i18n._(category.name),
+              options: category.weapons.map((weapon) => ({
+                value: weapon,
+                label: i18n._(weapon),
+              })),
+            }))
+          : weaponsWithHeroCategorized.map((category) => ({
+              label: i18n._(category.name),
+              options: category.weapons
+                .filter(
+                  (wpn) => !wpn.includes("Hero") && !wpn.includes("Octo Shot")
+                )
+                .map((weapon) => ({
+                  value: weapon,
+                  label: i18n._(weapon),
+                })),
+            }))
+      }
+      value={value ? { value, label: i18n._(value) } : undefined}
+      setValue={setValue}
+      isClearable={isClearable}
+      isSearchable
+      isMulti={isMulti}
+      menuIsOpen={menuIsOpen}
+      components={{
+        IndicatorSeparator: () => null,
+        Option: singleOption,
+      }}
+      autoFocus={autoFocus}
+    />
  );
 };

--- a/components/u/BuildModal.tsx
+++ b/components/u/BuildModal.tsx
@ -15,6 +15,7 @@ import {
  ModalFooter,
  ModalHeader,
  ModalOverlay,
+  Select,
  Stack,
  Textarea,
  useToast,
@ -23,7 +24,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
 import { Ability } from "@prisma/client";
 import ViewSlots from "components/builds/ViewSlots";
-import MySelect from "components/common/MySelect";
 import WeaponSelector from "components/common/WeaponSelector";
 import { getToastOptions } from "lib/getToastOptions";
 import { gear } from "lib/lists/gear";
@ -175,11 +175,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                  control={control}
                  defaultValue={null}
                  render={({ onChange, value }) => (
-                    <WeaponSelector
-                      name="weapon"
-                      value={value}
-                      onChange={onChange}
-                    />
+                    <WeaponSelector value={value} setValue={onChange} />
                  )}
                />
                <FormErrorMessage>
@ -301,12 +297,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                control={control}
                defaultValue=""
                render={({ onChange, value, name }) => (
-                  <MySelect
-                    placeholder={t`Select gear (head)`}
-                    name={name}
-                    value={value}
-                    setValue={onChange}
-                  >
+                  <Select name={name} value={value} setValue={onChange}>
                    {gear.map(({ brand, head }) => (
                      <Fragment key={brand}>
                        <optgroup>{brand}</optgroup>
@ -317,7 +308,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                        ))}
                      </Fragment>
                    ))}
-                  </MySelect>
+                  </Select>
                )}
              />

@ -329,12 +320,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                control={control}
                defaultValue=""
                render={({ onChange, value, name }) => (
-                  <MySelect
-                    placeholder={t`Select gear (clothing)`}
-                    name={name}
-                    value={value}
-                    setValue={onChange}
-                  >
+                  <Select name={name} value={value} setValue={onChange}>
                    {gear.map(({ brand, clothing }) => (
                      <Fragment key={brand}>
                        <optgroup>{brand}</optgroup>
@ -345,7 +331,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                        ))}
                      </Fragment>
                    ))}
-                  </MySelect>
+                  </Select>
                )}
              />

@ -357,12 +343,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                control={control}
                defaultValue=""
                render={({ onChange, value, name }) => (
-                  <MySelect
-                    placeholder={t`Select gear (shoes)`}
-                    name={name}
-                    value={value}
-                    setValue={onChange}
-                  >
+                  <Select name={name} value={value} setValue={onChange}>
                    {gear
                      .filter((brand) => brand.shoes.length > 0)
                      .map(({ brand, shoes }) => (
@ -375,7 +356,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
                          ))}
                        </Fragment>
                      ))}
-                  </MySelect>
+                  </Select>
                )}
              />

--- a/locale/de/messages.json
+++ b/locale/de/messages.json
@ -89,11 +89,8 @@
  "Title": "Titel",
  "Description": "Beschreibung",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Kleidung",
-  "Select gear (clothing)": "",
  "Shoes": "Schuhe",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/el/messages.json
+++ b/locale/el/messages.json
@ -89,11 +89,8 @@
  "Title": "Τίτλος",
  "Description": "Περιγραφή",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Ρούχα",
-  "Select gear (clothing)": "",
  "Shoes": "Παπούτσια",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/en/messages.json
+++ b/locale/en/messages.json
@ -89,11 +89,8 @@
  "Title": "Title",
  "Description": "Description",
  "Head": "Head",
-  "Select gear (head)": "Select gear (head)",
  "Clothing": "Clothing",
-  "Select gear (clothing)": "Select gear (clothing)",
  "Shoes": "Shoes",
-  "Select gear (shoes)": "Select gear (shoes)",
  "Modes": "Modes",
  "TW": "TW",
  "SZ": "SZ",
--- a/locale/es/messages.json
+++ b/locale/es/messages.json
@ -89,11 +89,8 @@
  "Title": "Título",
  "Description": "Descripción",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Ropa",
-  "Select gear (clothing)": "",
  "Shoes": "Calzado",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/fr/messages.json
+++ b/locale/fr/messages.json
@ -89,11 +89,8 @@
  "Title": "Titre",
  "Description": "Description",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Vêtements",
-  "Select gear (clothing)": "",
  "Shoes": "Chaussures",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/it/messages.json
+++ b/locale/it/messages.json
@ -89,11 +89,8 @@
  "Title": "Titolo",
  "Description": "Descrizione",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Vestiti",
-  "Select gear (clothing)": "",
  "Shoes": "Scarpe",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/ja/messages.json
+++ b/locale/ja/messages.json
@ -89,11 +89,8 @@
  "Title": "",
  "Description": "",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "",
-  "Select gear (clothing)": "",
  "Shoes": "",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/ko/messages.json
+++ b/locale/ko/messages.json
@ -89,11 +89,8 @@
  "Title": "제목",
  "Description": "설명",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "옷",
-  "Select gear (clothing)": "",
  "Shoes": "신발",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/nl/messages.json
+++ b/locale/nl/messages.json
@ -89,11 +89,8 @@
  "Title": "",
  "Description": "",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "",
-  "Select gear (clothing)": "",
  "Shoes": "",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/pt/messages.json
+++ b/locale/pt/messages.json
@ -89,11 +89,8 @@
  "Title": "Título",
  "Description": "Descrição",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "Roupa",
-  "Select gear (clothing)": "",
  "Shoes": "Calçado",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/ru/messages.json
+++ b/locale/ru/messages.json
@ -89,11 +89,8 @@
  "Title": "",
  "Description": "",
  "Head": "",
-  "Select gear (head)": "",
  "Clothing": "",
-  "Select gear (clothing)": "",
  "Shoes": "",
-  "Select gear (shoes)": "",
  "Modes": "",
  "TW": "",
  "SZ": "",
--- a/locale/sv/messages.json
+++ b/locale/sv/messages.json
@ -89,11 +89,8 @@
  "Title": "Titel",
  "Description": "Beskrivning",
  "Head": "Huvud",
-  "Select gear (head)": "Välj huvudbonad",
  "Clothing": "Kläder",
-  "Select gear (clothing)": "Välj kläder",
  "Shoes": "Skor",
-  "Select gear (shoes)": "Välj skor",
  "Modes": "Spellägen",
  "TW": "TW",
  "SZ": "SZ",
--- a/package-lock.json
+++ b/package-lock.json
@ -1372,6 +1372,93 @@
        }
      }
    },
+    "@emotion/core": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
+      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "10.0.29",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+          "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+          "requires": {
+            "@emotion/sheet": "0.9.4",
+            "@emotion/stylis": "0.8.5",
+            "@emotion/utils": "0.11.3",
+            "@emotion/weak-memoize": "0.2.5"
+          }
+        },
+        "@emotion/serialize": {
+          "version": "0.11.16",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+          "requires": {
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/unitless": "0.7.5",
+            "@emotion/utils": "0.11.3",
+            "csstype": "^2.5.7"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "0.9.4",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+          "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        },
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      },
+      "dependencies": {
+        "@emotion/serialize": {
+          "version": "0.11.16",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+          "requires": {
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/unitless": "0.7.5",
+            "@emotion/utils": "0.11.3",
+            "csstype": "^2.5.7"
+          }
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        },
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
    "@emotion/hash": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@ -1444,6 +1531,11 @@
        }
      }
    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
    "@emotion/unitless": {
      "version": "0.7.5",
      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
@ -1937,6 +2029,15 @@
        "csstype": "^3.0.2"
      }
    },
+    "@types/react-dom": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.0.tgz",
+      "integrity": "sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/react-infinite-scroller": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.1.tgz",
@ -1946,6 +2047,26 @@
        "@types/react": "*"
      }
    },
+    "@types/react-select": {
+      "version": "3.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.28.tgz",
+      "integrity": "sha512-Gfg3a/EPLyUQkfezcCQkmLW1Vz6+ziclJhn8dpBUEYJF3IUoxS81ToAi3ky2xtnAyk2wJFMXLvE73KiUd56yTA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "@types/react-transition-group": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/recharts": {
      "version": "1.8.18",
      "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.18.tgz",
@ -2492,6 +2613,47 @@
      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
      "dev": true
    },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "@emotion/serialize": {
+          "version": "0.11.16",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+          "requires": {
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/unitless": "0.7.5",
+            "@emotion/utils": "0.11.3",
+            "csstype": "^2.5.7"
+          }
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        },
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
    "babel-plugin-macros": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
@ -6742,6 +6904,11 @@
        "unist-util-visit-parents": "1.1.2"
      }
    },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
    "memory-fs": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@ -8526,6 +8693,14 @@
        "prop-types": "^15.5.8"
      }
    },
+    "react-input-autosize": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
+      "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -8588,6 +8763,64 @@
        "resize-observer-polyfill": "^1.5.0"
      }
    },
+    "react-select": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.1.tgz",
+      "integrity": "sha512-HjC6jT2BhUxbIbxMZWqVcDibrEpdUJCfGicN0MMV+BQyKtCaPTgFekKWiOizSCy4jdsLMGjLqcFGJMhVGWB0Dg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^2.2.2",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "10.0.29",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+          "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+          "requires": {
+            "@emotion/sheet": "0.9.4",
+            "@emotion/stylis": "0.8.5",
+            "@emotion/utils": "0.11.3",
+            "@emotion/weak-memoize": "0.2.5"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "0.9.4",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+          "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        },
+        "dom-helpers": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+          "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
    "react-smooth": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
--- a/package.json
+++ b/package.json
@ -49,6 +49,7 @@
    "react-icons": "^4.1.0",
    "react-infinite-scroller": "^1.2.4",
    "react-markdown": "^4.3.1",
+    "react-select": "^3.1.1",
    "react-string-replace": "^0.4.4",
    "recharts": "^1.8.5",
    "swr": "^0.3.9",
@ -64,6 +65,7 @@
    "@types/nprogress": "^0.2.0",
    "@types/react": "^17.0.0",
    "@types/react-infinite-scroller": "^1.2.1",
+    "@types/react-select": "^3.0.28",
    "@types/recharts": "^1.8.18",
    "cypress": "^6.1.0",
    "husky": "^5.0.4",
--- a/pages/builds/[[...slug]].tsx
+++ b/pages/builds/[[...slug]].tsx
@ -22,12 +22,13 @@ const BuildsPage = () => {
  return (
    <>
      <Breadcrumbs pages={[{ name: t`Builds` }]} />
-      <WeaponSelector
-        value={state.weapon}
-        onChange={(weapon) => dispatch({ type: "SET_WEAPON", weapon })}
-        excludeAlt
-        isHeader
-      />
+      <Box my={4} maxW={80} mx="auto">
+        <WeaponSelector
+          value={state.weapon}
+          setValue={(weapon) => dispatch({ type: "SET_WEAPON", weapon })}
+          menuIsOpen={!state.weapon}
+        />
+      </Box>
      <>
        {state.weapon && (
          <>
--- a/theme.ts
+++ b/theme.ts
@ -1,31 +1,3 @@
-/*
-  const theme = {
-    light: {
-      colorMode: "light",
-      bgColor: "#eff0f3",
-      darkerBgColor: "#FFFAFA",
-      textColor: "blackAlpha.900",
-      borderStyle: "1px solid rgba(0, 0, 0, .2)",
-      themeColorWithShade: `${themeColor}.500`,
-      grayWithShade: "gray.600",
-      themeColorHex: chakraTheme.colors[themeColor]["500"],
-      themeColorHexLighter: chakraTheme.colors[themeColor]["200"],
-      themeColor,
-    } as Theme,
-    dark: {
-      colorMode: "dark",
-      bgColor: "#031e3e",
-      darkerBgColor: "#0e2a56",
-      textColor: "whiteAlpha.900",
-      borderStyle: "1px solid rgba(255, 255, 255, .2)",
-      themeColorWithShade: `${themeColor}.200`,
-      grayWithShade: "gray.300",
-      themeColorHex: chakraTheme.colors[themeColor]["500"],
-      themeColorHexLighter: chakraTheme.colors[themeColor]["200"],
-      themeColor,
-    } as Theme,
-  }; */
-
 export const theme = {
  light: {
    themeColorShade: "theme.600",
@ -34,6 +6,7 @@ export const theme = {
    secondaryBgColor: "#FFFAFA",
    textColor: "blackAlpha.900",
    gray: "gray.600",
+    borderColor: "#2e466c",
  },
  dark: {
    themeColorShade: "theme.200",
@ -42,5 +15,6 @@ export const theme = {
    secondaryBgColor: "#0e2a56",
    textColor: "whiteAlpha.900",
    gray: "gray.300",
+    borderColor: "#2e466c",
  },
 } as const;