Map Planner: divide weapons to categories

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 (
     <div className="plans__weapons-section">
-      {mainWeaponIds.map((weaponId) => {
+      {weaponCategories.map((category) => {
         return (
-          <Button
-            key={weaponId}
-            variant="minimal"
-            onClick={() => handleAddWeapon(weaponId)}
-          >
-            <Image
-              alt={t(`weapons:MAIN_${weaponId}`)}
-              title={t(`weapons:MAIN_${weaponId}`)}
-              path={mainWeaponImageUrl(weaponId)}
-              width={36}
-              height={36}
-            />
-          </Button>
+          <details key={category.name}>
+            <summary className="plans__weapons-summary">
+              <Image
+                path={weaponCategoryUrl(category.name)}
+                width={24}
+                height={24}
+                alt={t(`common:weapon.category.${category.name}`)}
+              />
+              {t(`common:weapon.category.${category.name}`)}
+            </summary>
+            <div className="plans__weapons-container">
+              {category.weaponIds.map((weaponId) => {
+                return (
+                  <Button
+                    key={weaponId}
+                    variant="minimal"
+                    onClick={() => handleAddWeapon(weaponId)}
+                  >
+                    <Image
+                      alt={t(`weapons:MAIN_${weaponId}`)}
+                      title={t(`weapons:MAIN_${weaponId}`)}
+                      path={mainWeaponImageUrl(weaponId)}
+                      width={36}
+                      height={36}
+                    />
+                  </Button>
+                );
+              })}
+            </div>
+          </details>
         );
       })}
     </div>

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;

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";