1 files changed, 99 insertions, 0 deletions
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;