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

1 files changed, 235 insertions, 0 deletions

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>
+  );
+};