From f92d8b5f4220e7827f0d3bb038a8deb21a4ed446 Mon Sep 17 00:00:00 2001
From: "Lu[ke] Wilson" <l2wilson94@gmail.com>
Date: Wed, 8 Jan 2025 17:53:28 +0000
Subject: [PATCH] mcplant experience

---
 index.html     | 17 +++++++++++++++--
 src/alert.js   |  7 +++++++
 src/confirm.js |  4 +++-
 src/main.js    | 10 ++++++++++
 src/style.css  | 18 ------------------
 5 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 src/alert.js

diff --git a/index.html b/index.html
index 9b8f96a..58be71f 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,7 @@
         </select>
         <button id="export-button">⇓ Export</button>
         <div class="mcplant">
-          <button>🌱 McPlant</button>
-          <span class="tooltip">Vegetarianism propaganda in my burger menu?!</span>
+          <button id="mcplant-button">🌱 McPlant</button>
         </div>
       </div>
     </div>
@@ -132,6 +131,20 @@ <h1>Are you sure?</h1>
       </dialog>
     </div>
 
+    <div class="dialog-container">
+      <dialog id="alert-dialog">
+        <!-- <h1>Alert</h1> -->
+        <form method="dialog">
+          <p>
+            <span id="alert-message">alert</span>
+          </p>
+          <p>
+            <button id="alert-ok-button">OK</button>
+          </p>
+        </form>
+      </dialog>
+    </div>
+
     <div class="dialog-container">
       <dialog id="about-dialog">
         <form method="dialog">
diff --git a/src/alert.js b/src/alert.js
new file mode 100644
index 0000000..d658d9a
--- /dev/null
+++ b/src/alert.js
@@ -0,0 +1,7 @@
+const alertDialog = document.querySelector('#alert-dialog');
+const alertMessageSpan = document.querySelector('#alert-message');
+
+export async function nudelAlert(alertMessage = 'alert!') {
+  alertMessageSpan.textContent = alertMessage;
+  alertDialog.showModal();
+}
diff --git a/src/confirm.js b/src/confirm.js
index 1653f0e..82b5dc2 100644
--- a/src/confirm.js
+++ b/src/confirm.js
@@ -1,8 +1,10 @@
 const youSureDialog = document.querySelector('#you-sure-dialog');
 const yesButton = document.querySelector('#you-sure-yes-button');
 const noButton = document.querySelector('#you-sure-no-button');
+const actionDescriptionSpan = document.querySelector('#you-sure-action-description');
 
-export async function nudelConfirm() {
+export async function nudelConfirm(actionDescription = 'do that') {
+  actionDescriptionSpan.textContent = actionDescription;
   youSureDialog.showModal();
 
   return new Promise((resolve) => {
diff --git a/src/main.js b/src/main.js
index 38bd3d7..c49c1fb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,8 @@ import { applySettingsToNudel, getSettings } from './settings.js';
 import { vim } from '@replit/codemirror-vim';
 import { Compartment } from '@codemirror/state';
 import './style.css';
+import { nudelConfirm } from './confirm.js';
+import { nudelAlert } from './alert.js';
 
 export const editorViews = new Map();
 
@@ -278,5 +280,13 @@ window.addEventListener('message', (event) => {
   }
 });
 
+const mcPlantButton = document.querySelector('#mcplant-button');
+mcPlantButton.addEventListener('click', async () => {
+  const result = await nudelConfirm('eat a mcplant');
+  if (result) {
+    nudelAlert('You eat the McPlant. It tastes just like a real burger.');
+  }
+});
+
 session.initialize();
 applySettingsToNudel();
diff --git a/src/style.css b/src/style.css
index 2a00ff2..386b731 100644
--- a/src/style.css
+++ b/src/style.css
@@ -463,21 +463,3 @@ iframe#shader {
 .dropdown:hover .dropdown-content {
   display: flex;
 }
-
-.mcplant {
-  position: relative;
-}
-
-.tooltip {
-  display: none;
-  position: absolute;
-  right: 100%;
-  white-space: nowrap;
-  background: black;
-  color: white;
-  padding: 4px;
-}
-
-.mcplant:hover .tooltip {
-  display: block;
-}