From 8fd740f92a5d0181239bb94d34592aac50784d36 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Mon, 1 Jun 2020 15:04:10 -0400
Subject: [PATCH] Allow mouseover of buttons that are disabled

---
 satiate.css     | 14 ++++++++++++--
 stories/demo.js |  4 +++-
 world.js        | 50 ++++++++++++++++++++++++++++---------------------
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/satiate.css b/satiate.css
index f4148aa..97fec2d 100644
--- a/satiate.css
+++ b/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 {
diff --git a/stories/demo.js b/stories/demo.js
index 478e69a..b15536c 100644
--- a/stories/demo.js
+++ b/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");
diff --git a/world.js b/world.js
index fcd6a3e..3622655 100644
--- a/world.js
+++ b/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");
+}
\ No newline at end of file