Redid actions so they, too, are not destroyed on every refresh

world.js

@@ -15,9 +15,9 @@ moveListeners = {
 
 }
 
-actionListeners = {
+actionButtons = [
 
-}
+]
 
 function initWorld(story, state) {
   state.world = story["world"];
@@ -47,6 +47,19 @@ function resetControls(state) {
 
     moveListeners[dir] = undefined;
   });
+
+  const actionHolder = document.querySelector("#actions");
+  actionHolder.innerHTML = "";
+
+  actionButtons = [];
+
+  if (state.player.location) {
+    state.world[state.player.location].actions.forEach(action => {
+      actionButtons.push(undefined);
+    });
+  }
+
+
 }
 
 
@@ -96,7 +109,7 @@ function moveToRoom(src, exit, dest, state) {
 
   state.player.location = dest;
 
-  resetControls();
+  resetControls(state);
 
   refresh();
 }
@@ -121,7 +134,7 @@ function goToRoom(dest, state) {
 
   state.player.location = dest;
 
-  resetControls();
+  resetControls(state);
 
   refresh();
 }
@@ -184,7 +197,7 @@ function updateRoom(state) {
       button.addEventListener("click", moveFunc);
 
       moveListeners[dir] = moveFunc;
-      
+
       button.addEventListener("mouseenter", () => {
         showActionDescription(exit.desc);
       });
@@ -196,45 +209,66 @@ function updateRoom(state) {
   }
 
   const actionHolder = document.querySelector("#actions");
-  actionHolder.innerHTML = "";
+  const existingButtons = Array.from(document.querySelectorAll("#actions > button"));
+  const keptButtons = [];
 
   if (room.actions) {
-    room.actions.forEach(action => {
-      const button = document.createElement("button");
-      button.classList.add("action-button");
+    for (index in room.actions) {
+      const action = room.actions[index];
+      let button;
+
+      if (actionButtons[index]) {
+        button = actionButtons[index];
+      }
+      else {
+        button = document.createElement("button");
+        button.classList.add("action-button");
+
+        actionButtons[index] = button;
+
+        button.textContent = action.name;
+
+        button.addEventListener("click", () => {
+          action.execute(room, state);
+          refresh();
+        });
+
+        button.addEventListener("mouseenter", () => {
+          showActionDescription(action.desc);
+        });
+
+        button.addEventListener("mouseleave", () => {
+          removeActionDescription();
+        });
+      }
 
       if (action.show) {
         if (!action.show.every(cond => cond(room, state))) {
-          return;
+          continue;
         }
       }
 
-      button.textContent = action.name;
-
-      actionHolder.appendChild(button);
+      keptButtons.push(actionButtons[index]);
 
       if (action.conditions) {
         if (!action.conditions.every(cond => cond(room, state))) {
           button.classList.add("disabled");
           button.setAttribute("disabled", "true");
-          return;
         }
       }
 
-      button.addEventListener("click", () => {
-        action.execute(room, state);
-        refresh();
-      });
-
-      button.addEventListener("mouseenter", () => {
-        showActionDescription(action.desc);
-      });
+    }
 
-      button.addEventListener("mouseleave", () => {
-        removeActionDescription();
-      });
+    const removed = existingButtons.filter(button => {
+      return !keptButtons.includes(button);
+    });
 
+    removed.forEach(button => actionHolder.removeChild(button));
 
+    const added = actionButtons.filter(button => {
+      return keptButtons.includes(button) && !existingButtons.includes(button);
     });
+
+    added.forEach(button => actionHolder.appendChild(button));
   }
 }