diff --git a/app/features/map-planner/components/Planner.tsx b/app/features/map-planner/components/Planner.tsx index fdfe3ccfc..0b4206e71 100644 --- a/app/features/map-planner/components/Planner.tsx +++ b/app/features/map-planner/components/Planner.tsx @@ -13,7 +13,7 @@ import { useForceRefreshOnMount } from "~/hooks/useForceRefresh"; import { useTranslation } from "~/hooks/useTranslation"; import type { LanguageCode } from "~/modules/i18n"; import type { MainWeaponId, ModeShort, StageId } from "~/modules/in-game-lists"; -import { mainWeaponIds, stageIds } from "~/modules/in-game-lists"; +import { stageIds, weaponCategories } from "~/modules/in-game-lists"; import { modesShort } from "~/modules/in-game-lists/modes"; import { semiRandomId } from "~/utils/strings"; import { @@ -21,6 +21,7 @@ import { outlinedMainWeaponImageUrl, stageMinimapImageUrlWithEnding, TLDRAW_URL, + weaponCategoryUrl, } from "~/utils/urls"; import { Button } from "../../../components/Button"; import { Image } from "../../../components/Image"; @@ -142,24 +143,41 @@ function WeaponImageSelector({ }: { handleAddWeapon: (weaponId: MainWeaponId) => void; }) { - const { t } = useTranslation(["weapons"]); + const { t } = useTranslation(["weapons", "common"]); return (
- {mainWeaponIds.map((weaponId) => { + {weaponCategories.map((category) => { return ( - +
+ + {t(`common:weapon.category.${category.name}`)} + {t(`common:weapon.category.${category.name}`)} + +
+ {category.weaponIds.map((weaponId) => { + return ( + + ); + })} +
+
); })}
diff --git a/app/features/map-planner/plans.css b/app/features/map-planner/plans.css index 4f3e33e15..813aeb94f 100644 --- a/app/features/map-planner/plans.css +++ b/app/features/map-planner/plans.css @@ -51,12 +51,8 @@ button[data-state="closed"][aria-haspopup="dialog"] { position: fixed; z-index: 10; top: 10%; - display: flex; width: 150px; max-height: 85vh; - flex-wrap: wrap; - justify-content: center; - padding: var(--s-2); border: 1px solid var(--theme-very-transparent); border-radius: 0 var(--rounded) var(--rounded) 0; background: var(--bg-darker); @@ -64,6 +60,23 @@ button[data-state="closed"][aria-haspopup="dialog"] { overflow-y: auto; } +.plans__weapons-summary { + background-color: var(--bg-lighter); + font-size: var(--fonts-sm); + font-weight: var(--bold); + padding: var(--s-2-5); + display: flex; + align-items: center; + gap: var(--s-2); +} + +.plans__weapons-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: var(--s-2); +} + .plans__powered-by { position: fixed; z-index: 10; diff --git a/app/features/map-planner/routes/plans.tsx b/app/features/map-planner/routes/plans.tsx index f4af5015c..8bb9d1f4e 100644 --- a/app/features/map-planner/routes/plans.tsx +++ b/app/features/map-planner/routes/plans.tsx @@ -1,6 +1,6 @@ import { lazy } from "react"; import type { LinksFunction } from "@remix-run/node"; -import styles from "./plans.css"; +import styles from "../plans.css"; import type { SendouRouteHandle } from "~/utils/remix"; import { useIsMounted } from "~/hooks/useIsMounted"; import { navIconUrl, PLANNER_URL } from "~/utils/urls";