diff options
Diffstat (limited to 'site/src/components/NoteModals.tsx')
| -rw-r--r-- | site/src/components/NoteModals.tsx | 235 |
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> + ); +}; |