Dialog works, and you can interact with things

dialog.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function DialogNode {
+function DialogNode() {
   this.text = "Foo bar baz.";
   this.hooks = [];
 
@@ -16,3 +16,20 @@ function DialogNode {
     this.choices.push({"text": text, "node": node});
   }
 }
+
+function EatDude() {
+  DialogNode.call(this);
+
+  this.text = "You approach the nerd.";
+
+  let eatHim = new DialogNode();
+
+  eatHim.text = "You eat the nerd. Burp.";
+  eatHim.hooks.push(function() { player.health += 100 } );
+
+  let dontEatHim = new DialogNode();
+  dontEatHim.text = "You don't eat the nerd.";
+
+  this.addChoice("Eat him lol",eatHim);
+  this.addChoice("Actually don't",dontEatHim);
+}

feast.css

@@ -15,32 +15,24 @@ button {
   display: none;
 }
 
-.compass-button {
-  width: 100px;
-  height: 100px;
-  font-size: 18px;
-}
-
-.active-compass-button {
+.active-button {
 
 }
 
-.inactive-compass-button {
+.inactive-button {
   background: #111;
 }
 
-.action-button {
+.compass-button {
   width: 100px;
   height: 100px;
   font-size: 18px;
 }
 
-.active-action-button {
-
-}
-
-.inactive-action-button {
-  background: #111;
+.action-button {
+  width: 100px;
+  height: 100px;
+  font-size: 18px;
 }
 
 .combat-button {
@@ -49,12 +41,10 @@ button {
   font-size: 18px;
 }
 
-.active-combat-button {
-
-}
-
-.inactive-combat-button {
-  background: #111;
+.dialog-button {
+  width: 100px;
+  height: 100px;
+  font-size: 18px;s
 }
 
 #log {

feast.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <title>Feast</title>
   <link rel="stylesheet" href="feast.css">
+  <script src="dialog.js"></script>
   <script src="world.js"></script>
   <script src="vore.js"></script>
   <script src="feast.js"></script>
@@ -49,7 +50,7 @@
               <button class="compass-button" id="compass-west">West</button>
             </th>
             <th>
-              <button class="compass-button inactive-compass-button" id="compass-filler" disabled="true"></button>
+              <button class="compass-button inactive-button" id="compass-filler" disabled="true"></button>
             </th>
             <th>
               <button class="compass-button" id="compass-east">East</button>
@@ -75,32 +76,32 @@
               <button class="action-button" id="action-look">Look</button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
           </tr>
           <tr>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true"></button>
+              <button class="inactive-button action-button" disabled="true"></button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
           </tr>
           <tr>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
             <th>
-              <button class="inactive-action-button action-button" disabled="true" ></button>
+              <button class="inactive-button action-button" disabled="true" ></button>
             </th>
           </tr>
         </table>
@@ -123,6 +124,23 @@
         </table>
       </div>
     </div>
+    <div class="selector" id="selector-dialog">
+      <div id="combat">
+        <table>
+          <tr>
+            <th>
+              <button class="dialog-button">Headbang violently</button>
+            </th>
+            <th>
+              <button class="dialog-button">Belch at</button>
+            </th>
+            <th>
+              <button class="dialog-button">Accost</button>
+            </th>
+          </tr>
+        </table>
+      </div>
+    </div>
   </div>
 </body>
 

feast.js

@@ -1,6 +1,10 @@
 let currentRoom = null;
+let currentDialog = null;
+
 let dirButtons = [];
 let actionButtons = [];
+let dialogButtons = [];
+
 let mode = "explore";
 let actions = [];
 let time = 9*60;
@@ -24,17 +28,33 @@ function Burger() {
   });
 }
 
+function Nerd() {
+  Object.call(this, "Nerd");
+  this.actions.push({
+    "name": "Eat Nerd",
+    "action": function() {
+      startDialog(new EatDude());
+    }
+  });
+}
+
+function startDialog(dialog) {
+  mode = "dialog";
+  currentDialog = dialog;
+  updateDisplay();
+}
+
 function updateExploreCompass() {
   for (let i = 0; i < dirButtons.length; i++) {
     let button = dirButtons[i];
     if (currentRoom.exits[i] == null) {
       button.disabled = true;
       button.classList.remove("active-compass-button");
-      button.classList.add("inactive-compass-button");
+      button.classList.add("inactive-button");
       button.innerHTML = "";
     } else {
       button.disabled = false;
-      button.classList.remove("inactive-compass-button");
+      button.classList.remove("inactive-button");
       button.classList.add("active-compass-button");
       button.innerHTML = currentRoom.exits[i].name;
     }
@@ -42,36 +62,64 @@ function updateExploreCompass() {
 }
 function updateExploreActions() {
   for (let i = 0; i < actionButtons.length; i++) {
-    if (i < actions.length)
+    if (i < actions.length) {
+      actionButtons[i].disabled = false;
       actionButtons[i].innerHTML = actions[i].name;
-    else
+      actionButtons[i].classList.remove("inactive-button");
+      actionButtons[i].classList.add("active-button");
+    }
+    else {
+      actionButtons[i].disabled = true;
       actionButtons[i].innerHTML = "";
+      actionButtons[i].classList.remove("active-button");
+      actionButtons[i].classList.add("inactive-button");
+    }
   }
 }
-function updateExplore() {
 
+function updateExplore() {
   updateExploreCompass();
-
   updateExploreActions();
-
-
 }
 
 function updateCombat() {
 
 }
 
+function updateDialog() {
+  for (let i = 0; i < dialogButtons.length; i++) {
+    if (i < currentDialog.choices.length) {
+      dialogButtons[i].disabled = false;
+      dialogButtons[i].innerHTML = currentDialog.choices[i].text;
+      dialogButtons[i].classList.remove("inactive-button");
+      dialogButtons[i].classList.add("active-button");
+    } else {
+      dialogButtons[i].disabled = true;
+      dialogButtons[i].innerHTML = "";
+      dialogButtons[i].classList.remove("active-button");
+      dialogButtons[i].classList.add("inactive-button");
+    }
+  }
+}
+
 function updateDisplay() {
   switch(mode) {
     case "explore":
       document.getElementById("selector-explore").style.display = "flex";
       document.getElementById("selector-combat").style.display = "none";
+      document.getElementById("selector-dialog").style.display = "none";
       updateExplore();
       break;
     case "combat":
       document.getElementById("selector-explore").style.display = "none";
       document.getElementById("selector-combat").style.display = "flex";
+      document.getElementById("selector-dialog").style.display = "none";
       updateCombat();
+    case "dialog":
+      document.getElementById("selector-explore").style.display = "none";
+      document.getElementById("selector-combat").style.display = "none";
+      document.getElementById("selector-dialog").style.display = "flex";
+      updateDialog();
       break;
   }
 
@@ -123,8 +171,10 @@ function moveTo(room) {
 window.addEventListener('load', function(event) {
   loadActions();
   loadCompass();
+  loadDialog();
   currentRoom = createWorld();
   currentRoom.objects.push(new Burger());
+  currentRoom.objects.push(new Nerd());
   moveTo(currentRoom);
   updateDisplay();
 });
@@ -139,6 +189,22 @@ function update(lines=[]) {
   updateDisplay();
 }
 
+function dialogClicked(index) {
+  currentDialog = currentDialog.choices[index].node;
+  update([currentDialog.visit()]);
+  if (currentDialog.choices.length == 0) {
+    mode = "explore";
+    updateDisplay();
+  }
+}
+
+function loadDialog() {
+  dialogButtons = Array.from( document.querySelectorAll(".dialog-button"));
+  for (let i = 0; i < dialogButtons.length; i++) {
+    dialogButtons[i].addEventListener("click", function() { dialogClicked(i); });
+  }
+}
+
 function actionClicked(index) {
   actions[index].action();
 }