From 9709e5df9bdc57896ac7b3c47a26c6aa045ed652 Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <77750390+ethanaobrien@users.noreply.github.com>
Date: Thu, 22 Jun 2023 12:27:21 -0500
Subject: [PATCH] Ability to create and close popups

---
 src/css/main.css | 38 ++++++++++++++++++++++++++++++++++
 src/emulator.js  | 53 ++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 1c34175..d1c74bd 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -198,3 +198,41 @@
     width: 0;
     z-index: 2;
 }
+
+.ejs_popup_container {
+    background: rgba(0,0,0,0.8);
+    text-align: center;
+    z-index: 9999;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    color: #ccc;
+}
+
+.ejs_popup_container h4 {
+    color: #ccc;
+    font-size: 24px;
+    margin: 0;
+    padding: 10px;
+}
+
+.ejs_button {
+    border-radius: .25rem;
+    font-size: .875rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    display: inline-block;
+    background-color: rgba(var(--ejs-primary-color),1);
+    margin: 0 10px;
+    color: #fff !important;
+    touch-action: manipulation;
+    cursor: pointer;
+}
+
+.ejs_popup_body {
+    height: calc(100% - 130px);
+}
diff --git a/src/emulator.js b/src/emulator.js
index 80806f5..7d191da 100644
--- a/src/emulator.js
+++ b/src/emulator.js
@@ -328,7 +328,10 @@ class EmulatorJS {
             if (hidden) li.hidden = true;
             const a = this.createElement("a");
             if (functi0n instanceof Function) {
-                this.addEventListener(li, 'click', functi0n);
+                this.addEventListener(li, 'click', (e) => {
+                    e.preventDefault();
+                    functi0n();
+                });
             }
             a.href = "#";
             a.onclick = "return false";
@@ -357,12 +360,58 @@ class EmulatorJS {
             this.gameManager.quickLoad();
             hideMenu();
         });
-        addButton("EmulatorJS", false, () => console.log("4"));
+        addButton("EmulatorJS", false, () => {
+            hideMenu();
+            const body = this.createPopup("EmulatorJS", {
+                "Close": () => {
+                    this.closePopup();
+                }
+            });
+            body.innerText = "Todo. Write about, include tabs on side with licenses, links to docs/repo/discord?";
+            
+        });
         
         this.elements.contextmenu.appendChild(parent);
         
         this.elements.parent.appendChild(this.elements.contextmenu);
     }
+    closePopup() {
+        if (this.currentPopup !== null) {
+            try {
+                this.currentPopup.remove();
+            } catch(e){}
+            this.currentPopup = null;
+        }
+    }
+    //creates a full box popup.
+    createPopup(popupTitle, buttons) {
+        this.closePopup();
+        this.currentPopup = this.createElement('div');
+        this.currentPopup.classList.add("ejs_popup_container");
+        this.elements.parent.appendChild(this.currentPopup);
+        const title = this.createElement("h4");
+        title.innerText = popupTitle;
+        const main = this.createElement("div");
+        main.classList.add("ejs_popup_body");
+        
+        this.currentPopup.appendChild(title);
+        this.currentPopup.appendChild(main);
+        
+        for (let k in buttons) {
+            const button = this.createElement("a");
+            if (buttons[k] instanceof Function) {
+                button.addEventListener("click", (e) => {
+                    buttons[k]();
+                    e.preventDefault();
+                });
+            }
+            button.classList.add("ejs_button");
+            button.innerText = k;
+            this.currentPopup.appendChild(button);
+        }
+        
+        return main;
+    }
     selectFile() {
         return new Promise((resolve, reject) => {
             const file = this.createElement("input");