From cd6a3a56b0a9f27dd7250c7641776fe1bd184888 Mon Sep 17 00:00:00 2001
From: Elizabeth Hunt <elizabeth.hunt@simponic.xyz>
Date: Sat, 2 Mar 2024 01:34:19 -0700
Subject: add modal interaction with code

---
 src/engine/utils/modal.ts | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/engine/utils/modal.ts

(limited to 'src/engine/utils/modal.ts')

diff --git a/src/engine/utils/modal.ts b/src/engine/utils/modal.ts
new file mode 100644
index 0000000..e7b36b1
--- /dev/null
+++ b/src/engine/utils/modal.ts
@@ -0,0 +1,38 @@
+import { Miscellaneous } from "../config";
+
+let modalOpen = false;
+
+export const openModal = (content: string, id = Miscellaneous.MODAL_ID) => {
+  const modal = document.getElementById(id);
+  if (modal && !modalOpen) {
+    modal.style.display = "flex";
+    modal.style.animation = "fadeIn 0.25s";
+
+    modal.innerHTML = `<div class="modal-content">${content}</div>`;
+    const modalContent = document.querySelector<HTMLElement>(".modal-content");
+    if (modalContent) {
+      modalContent.style.animation = "scaleUp 0.25s";
+    }
+
+    modalOpen = true;
+  }
+};
+
+export const closeModal = (id = Miscellaneous.MODAL_ID) => {
+  const modal = document.getElementById(id);
+  if (modal && modalOpen) {
+    modal.style.animation = "fadeOut 0.25s";
+
+    const modalContent = document.querySelector<HTMLElement>(".modal-content");
+    if (modalContent) {
+      modalContent.style.animation = "scaleDown 0.25s";
+    }
+
+    setTimeout(() => {
+      modal.innerHTML = "";
+      modal.style.display = "none";
+
+      modalOpen = false;
+    }, 250);
+  }
+};
-- 
cgit v1.2.3-70-g09d2