frontend: convert titlebar menus to full page game selector

- due to growing number of games supported

4 files changed, 125 insertions, 244 deletions

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 5142463..79c64a1 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -1,13 +1,15 @@
 import Home from './pages/Homepage';
+import GameSelector from './pages/GameSelector'
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/games" element={<GameSelector />} />
       <Route path="/game/:gameId" element={<Home />} />
     </Routes>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/site/src/components/GameNotes.tsx b/site/src/components/GameNotes.tsx
index 82f1629..4f5396b 100644
--- a/site/src/components/GameNotes.tsx
+++ b/site/src/components/GameNotes.tsx
@@ -398,5 +398,19 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
         *Not in main feed as date data is unavailable from this source
       </p>
     </>
+  ),
+  wmmt: (
+    <>
+      <p
+        className={`mt-3 ${isMoe ? "text-pink-800" : "text-white"} text-center`}
+      >
+        Singular news feed for NA, ASIA/OCE, and JPN
+      </p>
+      <p
+        className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}
+      >
+        All regions run different versions of the game
+      </p>
+    </>
   )
 });
diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx
index daecb4e..2229a45 100644
--- a/site/src/components/TitleBar.tsx
+++ b/site/src/components/TitleBar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useEffect } from "react";
 import {
   Link,
   useSearchParams,
@@ -6,25 +6,12 @@ import {
   useLocation,
 } from "react-router-dom";
 
-interface GameCategory {
-  name: string;
-  games: { id: string; title: string }[];
-}
 const TitleBar: React.FC = () => {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [otherDropdownOpen, setOtherDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const otherDropdownRef = useRef<HTMLDivElement>(null);
-  const rhythmGamesBtnRef = useRef<HTMLButtonElement>(null);
-  const otherGamesBtnRef = useRef<HTMLButtonElement>(null);
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const location = useLocation();
   const isMoe = searchParams.has("moe");
 
-  const [rhythmDropdownStyle, setRhythmDropdownStyle] = useState<React.CSSProperties>({});
-  const [otherDropdownStyle, setOtherDropdownStyle] = useState<React.CSSProperties>({});
-
   const toggleTheme = () => {
     const params = new URLSearchParams(searchParams);
 
@@ -58,121 +45,6 @@ const TitleBar: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname, navigate]);
 
-  const gameCategories: GameCategory[] = [
-    {
-      name: "KONAMI",
-      games: [
-        { id: "iidx", title: "beatmania IIDX" },
-        { id: "sdvx", title: "SOUND VOLTEX" },
-        { id: "ddr", title: "DDR" },
-        { id: "jubeat", title: "jubeat" },
-        { id: "popn_music", title: "pop'n music" },
-        { id: "nostalgia", title: "NOSTALGIA" },
-        { id: "gitadora", title: "GITADORA" },
-        { id: "dance_rush", title: "DANCERUSH" },
-        { id: "dance_around", title: "DANCE aROUND" },
-        { id: "polaris_chord", title: "POLARIS CHORD" },
-      ],
-    },
-    {
-      name: "SEGA",
-      games: [
-        { id: "chunithm_jp", title: "CHUNITHM (JAPAN)" },
-        { id: "chunithm_intl", title: "CHUNITHM (INTL)" },
-        { id: "maimaidx_jp", title: "maimai DX (JAPAN)" },
-        { id: "maimaidx_intl", title: "maimai DX (INTL)" },
-        { id: "ongeki_jp", title: "O.N.G.E.K.I" },
-      ],
-    },
-    {
-      name: "TAITO",
-      games: [{ id: "music_diver", title: "MUSIC DIVER" }],
-    },
-    {
-      name: "BANDAI NAMCO",
-      games: [{ id: "taiko", title: "TAIKO" }],
-    },
-    {
-      name: "COMMUNITY",
-      games: [
-        { id: "wacca_plus", title: "WACCA PLUS" },
-        { id: "museca_plus", title: "MÚSECA PLUS" },
-        { id: "rb_deluxe_plus", title: "RB DELUXE PLUS" },
-      ],
-    },
-  ];
-
-  const otherGames: GameCategory[] = [
-    {
-      name: "BANDAI NAMCO",
-      games: [
-        { id: "wmmt", title: "WANGAN MAXI" },
-      ],
-    },
-  ];
-
-  const calculateDropdownPosition = (buttonRef: React.RefObject<HTMLElement | null>) => {
-    if (!buttonRef.current) return {};
-
-    const rect = buttonRef.current.getBoundingClientRect();
-    const dropdownWidth = 320; // sm:w-80 equivalent in px
-    const spaceOnRight = window.innerWidth - rect.right;
-    if (spaceOnRight < dropdownWidth) {
-      return { right: 'auto', left: '0' };
-    }
-    return { right: '0', left: 'auto' };
-  };
-  const toggleRhythmDropdown = () => {
-    const newState = !dropdownOpen;
-    if (newState) {
-      setRhythmDropdownStyle(calculateDropdownPosition(rhythmGamesBtnRef));
-    }
-    setDropdownOpen(newState);
-  };
-
-  const toggleOtherDropdown = () => {
-    const newState = !otherDropdownOpen;
-    if (newState) {
-      setOtherDropdownStyle(calculateDropdownPosition(otherGamesBtnRef));
-    }
-    setOtherDropdownOpen(newState);
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (dropdownOpen) {
-        setRhythmDropdownStyle(calculateDropdownPosition(rhythmGamesBtnRef));
-      }
-      if (otherDropdownOpen) {
-        setOtherDropdownStyle(calculateDropdownPosition(otherGamesBtnRef));
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [dropdownOpen, otherDropdownOpen]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setDropdownOpen(false);
-      }
-      if (
-        otherDropdownRef.current &&
-        !otherDropdownRef.current.contains(event.target as Node)
-      ) {
-        setOtherDropdownOpen(false);
-      }
-    };
-    if (dropdownOpen || otherDropdownOpen)
-      document.addEventListener("mousedown", handleClickOutside);
-    return () =>
-      document.removeEventListener("mousedown", handleClickOutside);
-  }, [dropdownOpen, otherDropdownOpen]);
-
   return (
     <div
       className={`${isMoe ? "bg-pink-200 border-pink-300" : "bg-gray-900 border-gray-800"} border-b py-4 px-6 font-[Zen_Maru_Gothic]`}
@@ -209,120 +81,14 @@ const TitleBar: React.FC = () => {
               to={`/${isMoe ? "?moe" : ""}`}
               className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
             >
-              All Games
+              Main News Feed
+            </Link>
+            <Link
+              to={`/games${isMoe ? "?moe" : ""}`}
+              className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
+            >
+              Game Selector
             </Link>
-
-            <div className="relative" ref={dropdownRef}>
-              <button
-                ref={rhythmGamesBtnRef}
-                className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium flex items-center text-sm sm:text-base`}
-                onClick={toggleRhythmDropdown}
-              >
-                Rhythm Games
-                <svg
-                  className="w-4 h-4 ml-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-
-              {dropdownOpen && (
-                <div
-                  className={`absolute mt-2 w-64 sm:w-80 ${isMoe ? "bg-pink-100 border-pink-300" : "bg-gray-800 border-gray-700"} border rounded-md shadow-lg z-10`}
-                  style={rhythmDropdownStyle}
-                >
-                  <div className="py-1 max-h-[70vh] overflow-y-auto scroll-py-2">
-                    {gameCategories.map((category, index) => (
-                      <div key={index} className="px-2 py-1">
-                        <div
-                          className={`${isMoe ? "text-pink-600 border-pink-300" : "text-gray-400 border-gray-700"} text-sm font-semibold mb-1 border-b pb-1`}
-                        >
-                          {category.name}
-                        </div>
-                        <div
-                          className={`${category.games.length > 3 ? "grid grid-cols-1 sm:grid-cols-2 gap-x-2 gap-y-0.5" : "space-y-0.5"}`}
-                        >
-                          {category.games.map((game) => (
-                            <Link
-                              key={game.id}
-                              to={`/game/${game.id}?${searchParams.toString()}`}
-                              className={`${isMoe ? "text-pink-800 hover:bg-pink-200" : "text-gray-300 hover:bg-gray-700 hover:text-white"} block text-left px-2 py-1 text-sm rounded whitespace-nowrap overflow-hidden text-ellipsis`}
-                              onClick={() => setDropdownOpen(false)}
-                            >
-                              {game.title}
-                            </Link>
-                          ))}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            <div className="relative" ref={otherDropdownRef}>
-              <button
-                ref={otherGamesBtnRef}
-                className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium flex items-center text-sm sm:text-base`}
-                onClick={toggleOtherDropdown}
-              >
-                Other Games
-                <svg
-                  className="w-4 h-4 ml-1"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-
-              {otherDropdownOpen && (
-                <div
-                  className={`absolute mt-2 w-64 sm:w-80 ${isMoe ? "bg-pink-100 border-pink-300" : "bg-gray-800 border-gray-700"} border rounded-md shadow-lg z-10`}
-                  style={otherDropdownStyle}
-                >
-                  <div className="py-1 max-h-[70vh] overflow-y-auto scroll-py-2">
-                    {otherGames.map((category, index) => (
-                      <div key={index} className="px-2 py-1">
-                        <div
-                          className={`${isMoe ? "text-pink-600 border-pink-300" : "text-gray-400 border-gray-700"} text-sm font-semibold mb-1 border-b pb-1`}
-                        >
-                          {category.name}
-                        </div>
-                        <div
-                          className={`${category.games.length > 3 ? "grid grid-cols-1 sm:grid-cols-2 gap-x-2 gap-y-0.5" : "space-y-0.5"}`}
-                        >
-                          {category.games.map((game) => (
-                            <Link
-                              key={game.id}
-                              to={`/game/${game.id}?${searchParams.toString()}`}
-                              className={`${isMoe ? "text-pink-800 hover:bg-pink-200" : "text-gray-300 hover:bg-gray-700 hover:text-white"} block text-left px-2 py-1 text-sm rounded whitespace-nowrap overflow-hidden text-ellipsis`}
-                              onClick={() => setOtherDropdownOpen(false)}
-                            >
-                              {game.title}
-                            </Link>
-                          ))}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
           </div>
         </div>
       </div>
@@ -330,4 +96,4 @@ const TitleBar: React.FC = () => {
   );
 };
 
-export default TitleBar
+export default TitleBar;
diff --git a/site/src/pages/GameSelector.tsx b/site/src/pages/GameSelector.tsx
new file mode 100644
index 0000000..d9d5279
--- /dev/null
+++ b/site/src/pages/GameSelector.tsx
@@ -0,0 +1,99 @@
+import { Link, useSearchParams } from "react-router-dom";
+import TitleBar from "../components/TitleBar";
+
+interface GameCategory {
+  name: string;
+  description: string;
+  games: { id: string; title: string }[];
+}
+
+const gameInfo: GameCategory[] = [
+  {
+    name: "KONAMI",
+    description: "",
+    games: [
+      { id: "iidx", title: "beatmania IIDX" },
+      { id: "sdvx", title: "SOUND VOLTEX" },
+      { id: "ddr", title: "DanceDanceRevolution" },
+      { id: "jubeat", title: "jubeat" },
+      { id: "popn_music", title: "pop'n music" },
+      { id: "nostalgia", title: "NOSTALGIA" },
+      { id: "gitadora", title: "GITADORA" },
+      { id: "dance_rush", title: "DANCERUSH" },
+      { id: "dance_around", title: "DANCE aROUND" },
+      { id: "polaris_chord", title: "POLARIS CHORD" },
+    ],
+  },
+  {
+    name: "SEGA",
+    description: "",
+    games: [
+      { id: "chunithm_jp", title: "CHUNITHM (JAPAN)" },
+      { id: "chunithm_intl", title: "CHUNITHM (INTERNATIONAL)" },
+      { id: "maimaidx_jp", title: "maimai DX (JAPAN)" },
+      { id: "maimaidx_intl", title: "maimai DX (INTERNATIONAL)" },
+      { id: "ongeki_jp", title: "O.N.G.E.K.I" },
+    ],
+  },
+  {
+    name: "TAITO",
+    description: "",
+    games: [{ id: "music_diver", title: "MUSIC DIVER" }],
+  },
+  {
+    name: "BANDAI NAMCO",
+    description: "",
+    games: [{ id: "taiko", title: "Taiko no Tatsujin" }, { id: "wmmt", title: "WANGAN MIDNIGHT MAXIMUM TUNE" }],
+  },
+  {
+    name: "COMMUNITY",
+    description: "Community-driven projects to continue the legacy of dead/abandoned rhythm games",
+    games: [
+      { id: "wacca_plus", title: "WACCA PLUS" },
+      { id: "museca_plus", title: "MÚSECA PLUS" },
+      { id: "rb_deluxe_plus", title: "REFLEC BEAT DELUXE PLUS" },
+    ],
+  },
+];
+
+const GameSelector = () => {
+  const [searchParams] = useSearchParams();
+  const isMoe = searchParams.has("moe");
+
+  const renderCategory = (category: GameCategory) => (
+    <div key={category.name} className="mb-6">
+      <h2 className={`text-lg font-bold ${isMoe ? "text-pink-700" : "text-gray-200"}`}>{category.name}</h2>
+      <p className={`text-sm ${isMoe ? "text-pink-600" : "text-gray-400"} mb-2`}>{category.description}</p>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mt-2">
+        {category.games.map(game => (
+          <Link
+            key={game.id}
+            to={`/game/${game.id}?${searchParams.toString()}`}
+            className={`block px-3 py-2 rounded text-sm font-medium text-center truncate ${isMoe ? "bg-pink-100 text-pink-800 hover:bg-pink-200" : "bg-gray-800 text-white hover:bg-gray-700"} sm:px-4 sm:py-3`}
+          >
+            {game.title}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+    <TitleBar />
+    <div className={`min-h-screen px-4 py-6 ${isMoe ? "bg-pink-50" : "bg-gray-900"} sm:px-6 sm:py-8`}>
+      <div className="max-w-[1200px] mx-auto">
+        <h1 className={`text-2xl font-bold mb-4 ${isMoe ? "text-pink-800" : "text-white"} sm:mb-6`}>
+          Select a Game
+        </h1>
+        <h2 className={`text-base font-medium ${isMoe ? "text-pink-700" : "text-gray-300"} mb-4`}>
+          Individual game feeds keep a longer history of news relating to that game than the main feed.
+        </h2>
+        {gameInfo.map(renderCategory)}
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default GameSelector;