Allow mouseover of buttons that are disabled

satiate.css

@@ -421,9 +421,19 @@ a:hover {
   border: none;
 }
 
-.missing {
+.disabled:active {
   background-color: #444;
-  color: #aaa !important;
+  border: none;
+}
+
+.disabled:focus {
+  outline: none;
+}
+
+.missing,
+.disabled.missing {
+  background-color: #333;
+  color: #aaa;
 }
 
 #area-name {

stories/demo.js

@@ -90,7 +90,9 @@ stories.push({
       "exits": {
         "up": {
           "target": "Locked Room",
-          "desc": "It's locked!",
+          get desc() {
+            return state.player.items.keys.includes("Locked Room") ? "It's locked, but at least you have the key" : "It's locked!";
+          },
           "conditions": [
             (room) => {
               return state.player.items.keys.includes("Locked Room");

world.js

@@ -41,7 +41,7 @@ function resetControls() {
     button.classList.add("move-button")
     button.id = "move-" + dir;
     button.classList.add("missing");
-    button.setAttribute("disabled", "true");
+    disableButton(button);
     button.textContent = dirs[dir];
     moveHolder.appendChild(button);
 
@@ -159,8 +159,7 @@ function updateRoom() {
 
   Object.entries(dirs).forEach(([dir, name]) => {
     const button = document.querySelector("#move-" + dir);
-    button.classList.add("disabled");
-    button.setAttribute("disabled", "true");
+    disableButton(button);
     button.textContent = dirs[dir];
   });
 
@@ -178,18 +177,25 @@ function updateRoom() {
       }
 
       button.classList.remove("missing");
-      button.classList.add("disabled");
+      disableButton(button);
       button.textContent = dest.name;
 
-      // if any condition fails, don't enable/add a listener
+      button.addEventListener("mouseenter", () => {
+        showActionDescription(exit.desc);
+      });
+
+      button.addEventListener("mouseleave", () => {
+        removeActionDescription();
+      });
+
+      // if any condition fails, don't turn it on and allow clicks
       if (exit.conditions) {
         if (!exit.conditions.every(cond => cond(room,state))) {
           return;
         }
       }
 
-      button.classList.remove("disabled");
-      button.removeAttribute("disabled");
+      enableButton(button);
 
       if (moveListeners[dir]) {
         button.removeEventListener("click", moveListeners[dir]);
@@ -203,14 +209,6 @@ function updateRoom() {
       button.addEventListener("click", moveFunc);
 
       moveListeners[dir] = moveFunc;
-
-      button.addEventListener("mouseenter", () => {
-        showActionDescription(exit.desc);
-      });
-
-      button.addEventListener("mouseleave", () => {
-        removeActionDescription();
-      });
     });
   }
 
@@ -235,8 +233,10 @@ function updateRoom() {
         button.textContent = action.name;
 
         button.addEventListener("click", () => {
-          action.execute(room);
-          refresh();
+          if (!button.classList.contains("disabled")) {
+            action.execute(room);
+            refresh();
+          }
         });
 
         button.addEventListener("mouseenter", () => {
@@ -258,11 +258,9 @@ function updateRoom() {
 
       if (action.conditions) {
         if (!action.conditions.every(cond => cond(room))) {
-          button.classList.add("disabled");
-          button.setAttribute("disabled", true);
+          disableButton(button);
         } else {
-          button.classList.remove("disabled");
-          button.removeAttribute("disabled");
+          enableButton(button);
         }
       }
 
@@ -281,3 +279,13 @@ function updateRoom() {
     added.forEach(button => actionHolder.appendChild(button));
   }
 }
+
+function disableButton(button) {
+  button.setAttribute("tabindex", "-1");
+  button.classList.add("disabled");
+}
+
+function enableButton(button) {
+  button.removeAttribute("tabindex");
+  button.classList.remove("disabled");
+}