Added alert modals

src/components/modals/share/Share.jsx

@@ -10,6 +10,7 @@ import Option from "./Option.jsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
+import { useAlert } from "../../../hooks/modals/alert.js";
 
 const APP_OPTIONS = {
 	"terminal": [
@@ -38,6 +39,7 @@ export function Share({ modal, params, ...props }) {
 	const [fullscreen, setFullscreen] = useState(params.fullscreen ?? false);
 	const [options, setOptions] = useState({});
 	const [url, setUrl] = useState(null);
+	const { alert } = useAlert({ modalsManager: modal.modalsManager });
 
 	useEffect(() => {
 		setUrl(generateUrl({
@@ -118,9 +120,17 @@ export function Share({ modal, params, ...props }) {
 				className={`${styles.Button} ${utilStyles["Text-bold"]}`}
 				onClick={() => {
 					copyToClipboard(url, () => {
-						alert("Copied to clipboard!");
+						alert({
+							title: "Share",
+							iconUrl: ModalsManager.getModalIconUrl("share"),
+							text: "Copied to clipboard!",
+						});
 					}, () => {
-						alert("Failed to copy");
+						alert({
+							title: "Share",
+							iconUrl: ModalsManager.getModalIconUrl("share"),
+							text: "Failed to copy.",
+						});
 					});
 				}}
 			>

src/features/modals/modalsManager.js

@@ -13,7 +13,7 @@ export default class ModalsManager {
 
 	/**
 	 * @param {Modal} modal 
-	 * @param {boolean} closeOthers
+	 * @param {boolean} closeOthers - Set to false to preserve other open modals
 	 */
 	open(modal, closeOthers = true) {
 		if (closeOthers) {
@@ -30,6 +30,7 @@ export default class ModalsManager {
 		modal.id = id;
 		modal.modalsManager = this;
 
+		console.info(`Opening modal ${id}`);
 		this.modals[id] = modal;
 		this.updateModals(this.modals);
 	}

src/hooks/modals/alert.js

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { DialogBox } from "../../components/modals/dialog-box/DialogBox.jsx";
+import { DIALOG_CONTENT_TYPES } from "../../config/modals.config.js";
+import Vector2 from "../../features/math/vector2.js";
+import { useWindowedModal } from "./windowedModal.js";
+import ModalsManager from "../../features/modals/modalsManager.js";
+
+/**
+ * @typedef alertType
+ * @param {object} options
+ * @param {string} options.title
+ * @param {string} options.text
+ * @param {string} options.iconUrl
+ */
+
+/**
+ * @param {object} props 
+ * @param {ModalsManager} props.modalsManager
+ * @returns {{ alert: alertType }}
+ */
+export function useAlert({ modalsManager }) {
+	const { openWindowedModal } = useWindowedModal({ modalsManager });
+
+	const alert = useCallback(({ title, text, iconUrl }) => {
+		openWindowedModal({
+			title: title ?? "Alert",
+			iconUrl,
+			size: new Vector2(300, 150),
+			Modal: (props) =>
+				<DialogBox {...props}>
+					<p>{text}</p>
+					<button data-type={DIALOG_CONTENT_TYPES.CloseButton}>Ok</button>
+				</DialogBox>
+		});
+	}, [openWindowedModal]);
+	
+	return { alert };
+}

src/hooks/modals/windowedModal.js

@@ -42,7 +42,7 @@ export function useWindowedModal({ modalsManager }) {
 			.setDismissible(false)
 			.setProps({ params });
 
-		modalsManager.open(newModal);
+		modalsManager.open(newModal, false);
 		return newModal;
 	}, [modalsManager]);