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}`)}
+
+
+ {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";