frontend: display street fighter and idac

3 files changed, 70 insertions, 19 deletions

diff --git a/site/src/components/GameNotes.tsx b/site/src/components/GameNotes.tsx
index 0b2a49d..2ef9335 100644
--- a/site/src/components/GameNotes.tsx
+++ b/site/src/components/GameNotes.tsx
@@ -331,6 +331,20 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
       </p>
     </>
   ),
+  idac: (
+    <>
+      <p
+        className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}
+      >
+        Official service only in Japan. No International Version
+      </p>
+      <p
+        className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}
+      >
+        You are on a private network if the cabinet is not in Japan
+      </p>
+    </>
+  ),
   chunithm_intl: (
     <>
       <ul className={`mt-2 ${isMoe ? "text-pink-900" : "text-white"}`}>
@@ -395,6 +409,18 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
       </p>
     </>
   ),
+  street_fighter: (
+    <>
+      <div className="flex justify-center">
+        <NesicaMaintenancePopup isMoe={isMoe} />
+      </div>
+      <p
+        className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}
+      >
+        Online service in USA only at Round1 locations
+      </p>
+    </>
+  ),
   wacca_plus: (
     <>
       <p
diff --git a/site/src/pages/GameSelector.tsx b/site/src/pages/GameSelector.tsx
index d9d5279..41551bc 100644
--- a/site/src/pages/GameSelector.tsx
+++ b/site/src/pages/GameSelector.tsx
@@ -33,21 +33,29 @@ const gameInfo: GameCategory[] = [
       { id: "maimaidx_jp", title: "maimai DX (JAPAN)" },
       { id: "maimaidx_intl", title: "maimai DX (INTERNATIONAL)" },
       { id: "ongeki_jp", title: "O.N.G.E.K.I" },
+      { id: "idac", title: "INITIAL D (頭文字D)" },
     ],
   },
   {
     name: "TAITO",
     description: "",
-    games: [{ id: "music_diver", title: "MUSIC DIVER" }],
+    games: [
+      { id: "music_diver", title: "MUSIC DIVER" },
+      { id: "street_fighter", title: "STREET FIGHTER" },
+    ],
   },
   {
     name: "BANDAI NAMCO",
     description: "",
-    games: [{ id: "taiko", title: "Taiko no Tatsujin" }, { id: "wmmt", title: "WANGAN MIDNIGHT MAXIMUM TUNE" }],
+    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",
+    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" },
@@ -62,10 +70,18 @@ const GameSelector = () => {
 
   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>
+      <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 => (
+        {category.games.map((game) => (
           <Link
             key={game.id}
             to={`/game/${game.id}?${searchParams.toString()}`}
@@ -80,18 +96,25 @@ const GameSelector = () => {
 
   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)}
+      <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>
-    </div>
     </>
   );
 };
diff --git a/site/src/utils.ts b/site/src/utils.ts
index 47652da..8c46c84 100644
--- a/site/src/utils.ts
+++ b/site/src/utils.ts
@@ -8,14 +8,16 @@ export const getGameTitle = (gameId: string) => {
     if (lowerCaseGameId.startsWith("chunithm_jp")) return "CHUNITHM (JAPAN)";
     if (lowerCaseGameId.startsWith("maimaidx_jp")) return "maimai DX (JAPAN)";
     if (lowerCaseGameId.startsWith("maimaidx_intl")) return "maimai DX (INTERNATIONAL)";
-    if (lowerCaseGameId.startsWith("ongeki_jp")) return "O.N.G.E.K.I"
-    if (lowerCaseGameId.startsWith("chunithm_intl")) return "CHUNITHM (INTERNATIONAL)"
+    if (lowerCaseGameId.startsWith("ongeki_jp")) return "O.N.G.E.K.I";
+    if (lowerCaseGameId.startsWith("idac")) return "INITIAL D THE ARCADE";
+    if (lowerCaseGameId.startsWith("chunithm_intl")) return "CHUNITHM (INTERNATIONAL)";
     if (lowerCaseGameId.startsWith("ddr")) return "DanceDanceRevolution";
     if (lowerCaseGameId.startsWith("jubeat")) return "jubeat";
     if (lowerCaseGameId.startsWith("gitadora")) return "GITADORA";
     if (lowerCaseGameId.startsWith("nostalgia")) return "NOSTALGIA";
     if (lowerCaseGameId.startsWith("popn_music")) return "pop'n music";
     if (lowerCaseGameId.startsWith("music_diver")) return "MUSIC DIVER";
+    if (lowerCaseGameId.startsWith("street_fighter")) return "STREET FIGHTER TYPE ARCADE";
     if (lowerCaseGameId.startsWith("taiko")) return "Taiko no Tatsujin";
     if (lowerCaseGameId.startsWith("wacca")) return "WACCA PLUS";
     if (lowerCaseGameId.startsWith("museca")) return "MÚSECA PLUS";