mcplant experience

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">

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();
+}

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) => {

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();

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;
-}