update allnet games with private network modal, official mai2 service in USA soon

2 files changed, 248 insertions, 132 deletions

diff --git a/site/src/components/GameNotes.tsx b/site/src/components/GameNotes.tsx
index 2ef9335..6f18649 100644
--- a/site/src/components/GameNotes.tsx
+++ b/site/src/components/GameNotes.tsx
@@ -1,129 +1,5 @@
 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>
-  );
-};
-
-const NesicaMaintenancePopup: 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"}`}
-        >
-          NESiCA 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">NESiCA 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 6:00 AM to 8:00 AM (JST)
-          </p>
-          <p className="mt-1 text-right">
-            In your local time:{" "}
-            {(() => {
-              const jst5am = new Date();
-              jst5am.setUTCHours(21, 0, 0, 0); // 6AM JST is 9PM UTC the day before
-              const jst7am = new Date();
-              jst7am.setUTCHours(23, 0, 0, 0); // 8AM JST is 11PM 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>
-            IC Cards are not accepted 15 minutes prior to start of maintenance
-          </p>
-        </div>
-        <div className="flex justify-end"></div>
-      </div>
-    </Popup>
-  );
-};
+import { NesicaMaintenancePopup, EamuseMaintenancePopup, AimeIntlMaintenanceInfo, AllnetPrivateServerWarning } from "./NoteModals";
 
 export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
   sdvx: (
@@ -329,6 +205,9 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
       >
         You are on a private network if the cabinet is not in Japan
       </p>
+      <div className="flex justify-center">
+      <AllnetPrivateServerWarning isMoe={isMoe} />
+      </div>
     </>
   ),
   idac: (
@@ -364,15 +243,16 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
           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>
+      <div className="flex justify-center">
+      <AllnetPrivateServerWarning isMoe={isMoe} />
+      </div>
     </>
   ),
   maimaidx_intl: (
     <>
+      <div className="flex justify-center">
+        <AimeIntlMaintenanceInfo isMoe={isMoe} />
+      </div>
       <ul className={`mt-2 ${isMoe ? "text-pink-900" : "text-white"}`}>
         <li>
           • Updates behind JP version. International and JP are completely
@@ -382,7 +262,7 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
       <p
         className={`mt-3 ${isMoe ? "text-pink-800" : "text-pink-300"} text-right`}
       >
-        No official service in NA or EU.{" "}
+        Official service in USA/CAN.{" "}
         <a
           className="underline"
           href="https://location.am-all.net/alm/location?gm=98"
@@ -393,8 +273,9 @@ export const GameNotes = (isMoe: boolean): Record<string, React.ReactNode> => ({
       <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
+        (No official service in EU)
       </p>
+      <AllnetPrivateServerWarning isMoe={isMoe} />
     </>
   ),
   music_diver: (
diff --git a/site/src/components/NoteModals.tsx b/site/src/components/NoteModals.tsx
new file mode 100644
index 0000000..fe68054
--- /dev/null
+++ b/site/src/components/NoteModals.tsx
@@ -0,0 +1,235 @@
+import Popup from "reactjs-popup";
+import React from "react";
+
+export 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
+      overlayStyle={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      }}
+    >
+      <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 NesicaMaintenancePopup: 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"}`}
+        >
+          NESiCA Maintenance
+        </button>
+      }
+      position="center center"
+      modal
+      closeOnDocumentClick
+      overlayStyle={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      }}
+    >
+      <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">NESiCA 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 6:00 AM to 8:00 AM (JST)
+          </p>
+          <p className="mt-1 text-right">
+            In your local time:{" "}
+            {(() => {
+              const jst5am = new Date();
+              jst5am.setUTCHours(21, 0, 0, 0); // 6AM JST is 9PM UTC the day before
+              const jst7am = new Date();
+              jst7am.setUTCHours(23, 0, 0, 0); // 8AM JST is 11PM 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>
+            IC Cards are not accepted 15 minutes prior to start of maintenance
+          </p>
+        </div>
+        <div className="flex justify-end"></div>
+      </div>
+    </Popup>
+  );
+};
+
+export const AimeIntlMaintenanceInfo: 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"}`}
+        >
+          Aime Maintenance
+        </button>
+      }
+      position="center center"
+      modal
+      closeOnDocumentClick
+      overlayStyle={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      }}
+    >
+      <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">Aime 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 11:00 AM to 2:00 PM (PST)
+          </p>
+          <p className="mt-1 text-right">
+            In your local time:{" "}
+            {(() => {
+              const pst11am = new Date();
+              pst11am.setUTCHours(19, 0, 0, 0); // 11AM PST is 7PM UTC
+              const pst2pm = new Date();
+              pst2pm.setUTCHours(22, 0, 0, 0); // 2PM PST is 10PM UTC
+              const options: Intl.DateTimeFormatOptions = {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: true,
+              };
+              return `${pst11am.toLocaleTimeString([], options)} to ${pst2pm.toLocaleTimeString([], options)}`;
+            })()}
+          </p>
+          <p>
+            Cabinets will operate only in GUEST MODE play mode during
+            maintenance
+          </p>
+        </div>
+        <div className="flex justify-end"></div>
+      </div>
+    </Popup>
+  );
+};
+
+export const AllnetPrivateServerWarning: 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"}`}
+        >
+          Private Networks
+        </button>
+      }
+      position="center center"
+      modal
+      closeOnDocumentClick
+      overlayStyle={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      }}
+    >
+      <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">Private Servers</h3>
+        </div>
+        <div className="mb-4">
+          <p className="mt-1 mb-2">
+            This game has prominent private networks in locations where official
+            service was/is not available.
+            <br /> <br /> Playdata on these private networks not shared nor
+            transferrable with official service. Please take care to know the
+            difference.
+            <br /> <br />
+            All information on this side refers to cabinets on the official
+            network.
+          </p>
+        </div>
+        <div className="flex justify-end"></div>
+      </div>
+    </Popup>
+  );
+};