prepend additional information for relevant games

3 files changed, 226 insertions, 3 deletions

diff --git a/site/package.json b/site/package.json
index 2f7ac65..e538dce 100644
--- a/site/package.json
+++ b/site/package.json
@@ -14,6 +14,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.0",
+    "reactjs-popup": "^2.0.6",
     "tailwindcss": "^4.1.3"
   },
   "devDependencies": {
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
index b514129..ab91ad0 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       react-router-dom:
         specifier: ^7.5.0
         version: 7.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      reactjs-popup:
+        specifier: ^2.0.6
+        version: 2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       tailwindcss:
         specifier: ^4.1.3
         version: 4.1.3
@@ -1036,6 +1039,13 @@ packages:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
+  reactjs-popup@2.0.6:
+    resolution: {integrity: sha512-A+tt+x9wdgZiZjv0e2WzYLD3IfFwJALaRaqwrCSXGjo0iQdsry/EtBEbQXRSmQs7cHmOi5eytCiSlOm8k4C+dg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2010,6 +2020,11 @@ snapshots:
 
   react@19.1.0: {}
 
+  reactjs-popup@2.0.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   resolve-from@4.0.0: {}
 
   reusify@1.1.0: {}
diff --git a/site/src/components/GameNotes.tsx b/site/src/components/GameNotes.tsx
index 0a72d01..ea840c8 100644
--- a/site/src/components/GameNotes.tsx
+++ b/site/src/components/GameNotes.tsx
@@ -1,17 +1,224 @@
 import React from "react";
+import Popup from 'reactjs-popup'
+
+const EamuseMaintenancePopup: React.FC<{ isMoe: boolean }> = ({ isMoe }) => {
+  return (
+    <Popup
+      trigger={<button className={`mt-4 rounded px-2 py-1 ${isMoe ? "bg-pink-300 text-pink-900 hover:bg-pink-400" : "bg-gray-500 text-white hover:bg-gray-400"}`}>e-amusement Maintenance</button>}
+      position="center center"
+      modal
+      closeOnDocumentClick
+    >
+      <div className={`p-6 rounded-lg shadow-lg ${isMoe ? "bg-pink-100 text-pink-900" : "bg-gray-900 text-white"} max-w-md mx-auto`}>
+        <div className="flex justify-between items-center mb-3">
+          <h3 className="text-lg">e-amusement Maintenance Information</h3>
+        </div>
+        <div className="mb-4">
+          <p className="font-bold">
+            Regular Daily Maintenance
+          </p>
+          <p className="mt-1 font-semibold">
+            Every day from 5:00 AM to 7:00 AM (JST)
+          </p>
+          <p className="mt-1 text-right">
+            In your local time: {(() => {
+              const jst5am = new Date();
+              jst5am.setUTCHours(20, 0, 0, 0); // 5AM JST is 8PM UTC the day before
+              const jst7am = new Date();
+              jst7am.setUTCHours(22, 0, 0, 0); // 7AM JST is 10PM UTC the day before
+              const options: Intl.DateTimeFormatOptions = {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+              };
+              return `${jst5am.toLocaleTimeString([], options)} to ${jst7am.toLocaleTimeString([], options)}`;
+            })()}
+          </p>
+          <p>
+            e-amusement website, at-home Konasute games offline, Japan + Asia cabinets offline.  USA cabinets exempt
+          </p>
+          <p className="font-bold mt-4">
+            Monthly Extended Maintenance
+          </p>
+          <p className="mt-1 font-semibold">
+           Every Third Tuesday from 2:00 AM to 7:00 AM (JST)
+          </p>
+          <p className="mt-1 text-right">
+            In your local time: {(() => {
+              const jst2am = new Date();
+              jst2am.setUTCHours(17, 0, 0, 0);
+              const jst7am = new Date();
+              jst7am.setUTCHours(22, 0, 0, 0);
+              const options: Intl.DateTimeFormatOptions = {
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+              };
+              return `${jst2am.toLocaleTimeString([], options)} to ${jst7am.toLocaleTimeString([], options)}`;
+            })()}
+          </p>
+          <p>
+            ALL Cabinets + e-amusement services offline. This is moved 1 day earlier if that day is a Japanese Holiday.
+          </p>
+
+        </div>
+        <div className="flex justify-end">
+        </div>
+      </div>
+    </Popup>
+  );
+};
 
 export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
   sdvx: (
     <>
       <ul className={`mt-2 ${isMoe ? "text-pink-900" : "text-white"}`}>
-        <li>• [USA] PREMIUM GENERATOR gacha available only ONLINE</li>
-        <li>• VP/VOLTEFACTORY rewards only in Japan</li>
+        <li>• [USA] PREMIUM GENERATOR gacha available only ONLINE (No PASELI)</li>
+        <li>• VP/VOLTEFACTORY rewards only available in Japan</li>
+        <li>• [USA] Some cover art and/or charts have been removed </li>
+        <li>• Official Online play is cross-region (including Japan)</li>
+      </ul>
+      <div className="flex justify-center">
+        <EamuseMaintenancePopup isMoe={isMoe}/>
+      </div>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Official e-amusement service in NA available only at Round1 USA
+        <br />
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  iidx: (
+    <>
+      <ul className={`mt-2 ${isMoe ? "text-pink-900" : "text-white"}`}>
+        <li>• [USA] Certain e-amusement features such as video upload unavailable </li>
       </ul>
+      <div className="flex justify-center">
+        <EamuseMaintenancePopup isMoe={isMoe}/>
+      </div>
       <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
         Official e-amusement service in NA available only at Round1 USA
         <br />
-        Cabinets in Canada/Europe/Australia are on non-official private networks which are running older data
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
       </p>
     </>
   ),
+  gitadora: (
+    <>
+      <div className="flex justify-center">
+        <EamuseMaintenancePopup isMoe={isMoe}/>
+      </div>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Official e-amusement service in NA available only at Round1 USA
+        <br />
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  ddr: (
+    <>
+      <div className="flex justify-center">
+        <EamuseMaintenancePopup isMoe={isMoe}/>
+      </div>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Official e-amusement service in NA available only at Round1 USA
+        <br />
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  jubeat: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        Online only in Japan and Asia regions. No online service in the US (only old versions running offline-kit)
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  popn_music: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        Online only in Japan and Asia regions. Japan and Asia only. No online service in the US (only old versions running offline-kit)
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  nostalgia: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+       Online only in Japan and Asia regions. Japan and Asia only. No online service in the US
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        Online Cabinets in non-supported regions (CAN/EU/AUS) are on private networks which are running older data
+      </p>
+    </>
+  ),
+  chunithm_jp: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        This version of the game is only available in Japan
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        You may be on the International version if you are outside of Japan
+      </p>
+    </>
+  ),
+  maimaidx_jp: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        This version of the game is only available in Japan
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        You may be on the International version if you are outside of Japan
+      </p>
+    </>
+  ),
+  ongeki_jp: (
+    <>
+      <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"}`}>
+        <li>• Updates behind JP version. International and JP are completely seperated</li>
+      </ul>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        No official service in NA or EU. <a className="underline" href="https://location.am-all.net/alm/location?gm=104&lang=en">See supported regions here</a>
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        If your region is not shown, you are likely on a private network
+      </p>
+    </>
+  ),
+  maimaidx_intl: (
+    <>
+      <ul className={`mt-2 ${isMoe ? "text-pink-900" : "text-white"}`}>
+        <li>• Updates behind JP version. International and JP are completely seperated</li>
+      </ul>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        No official service in NA or EU. <a className="underline" href="https://location.am-all.net/alm/location?gm=98">See supported regions here</a>
+      </p>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}>
+        If your region is not shown, you are likely on a private network
+      </p>
+    </>
+  ),
+  music_diver: (
+    <>
+      <p className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-center`}>
+        Online service available only at Round1 Japan and Round1 USA locations
+      </p>
+    </>
+  ),
+
 });