diff --git a/app/components/Combobox.tsx b/app/components/Combobox.tsx index 220fa6fc7..46d12d530 100644 --- a/app/components/Combobox.tsx +++ b/app/components/Combobox.tsx @@ -5,10 +5,17 @@ import clsx from "clsx"; import type { Unpacked } from "~/utils/types"; import type { UserWithPlusTier } from "~/db/types"; import { useUsers } from "~/hooks/swr"; +import { useTranslation } from "react-i18next"; +import { weaponIds } from "~/modules/in-game-lists"; const MAX_RESULTS_SHOWN = 6; -type ComboboxOption = { label: string; value: string } & T; +interface ComboboxBaseOption { + label: string; + value: string; +} + +type ComboboxOption = ComboboxBaseOption & T; interface ComboboxProps { options: ComboboxOption[]; inputName: string; @@ -162,3 +169,34 @@ export function UserCombobox({ /> ); } + +export function WeaponCombobox({ + id, + required, + className, + inputName, + onChange, +}: Pick< + ComboboxProps, + "inputName" | "onChange" | "className" | "id" | "required" +>) { + const { t } = useTranslation("weapons"); + + const idToWeapon = (id: typeof weaponIds[number]) => ({ + value: String(id), + label: t(`${id}`), + }); + + // xxx: weapon images + return ( + + ); +} diff --git a/app/constants.ts b/app/constants.ts index d24052416..fa0498aaf 100644 --- a/app/constants.ts +++ b/app/constants.ts @@ -31,6 +31,7 @@ export const BUILD = { TITLE_MIN_LENGTH: 1, TITLE_MAX_LENGTH: 100, DESCRIPTION_MAX_LENGTH: TWEET_LENGTH_MAX_LENGTH, + MAX_WEAPONS_COUNT: 5, } as const; export const PLUS_TIERS = [1, 2, 3]; diff --git a/app/routes/u.$identifier/builds/new.tsx b/app/routes/u.$identifier/builds/new.tsx index d0c0a83dd..5fbc161e5 100644 --- a/app/routes/u.$identifier/builds/new.tsx +++ b/app/routes/u.$identifier/builds/new.tsx @@ -7,6 +7,8 @@ import { Form } from "@remix-run/react"; import { modesShort } from "~/modules/in-game-lists"; import { Image } from "~/components/Image"; import { modeImageUrl } from "~/utils/urls"; +import { WeaponCombobox } from "~/components/Combobox"; +import { Button } from "~/components/Button"; export const handle = { i18n: ["weapons", "builds", "gear"], @@ -97,9 +99,47 @@ function ModeCheckboxes() { } function WeaponsSelector() { + const { t } = useTranslation(["common", "weapons", "builds"]); + const [count, setCount] = React.useState(1); + return (
- + +
+ {new Array(count).fill(null).map((_, i) => { + return ( +
+
+ +
+ {i === count - 1 && ( + <> + + {count > 1 && ( + + )} + + )} +
+ ); + })} +
); } diff --git a/public/locales/en/builds.json b/public/locales/en/builds.json index 8c37a34c3..b4cff331f 100644 --- a/public/locales/en/builds.json +++ b/public/locales/en/builds.json @@ -5,5 +5,6 @@ "buildCard.edit": "Edit", "forms.title": "Title", - "forms.modes": "Modes" + "forms.modes": "Modes", + "forms.weapons": "Weapons" }