From 00727ea5a058a4508a3b2d958c3bdef80a4120d2 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 2 Jun 2018 19:15:31 -0400
Subject: [PATCH] Worked on the explore and action buttons a bit.

---
 feast.css  | 20 ++++++++++++++++----
 feast.html | 35 -----------------------------------
 feast.js   | 38 +++++++++++---------------------------
 3 files changed, 27 insertions(+), 66 deletions(-)

diff --git a/feast.css b/feast.css
index 487afc7..10622d9 100644
--- a/feast.css
+++ b/feast.css
@@ -66,6 +66,10 @@ button {
   user-select: none;
 }
 
+#compass {
+  padding: 10px;
+}
+
 .compass-button {
   width: 100px;
   height: 100px;
@@ -73,9 +77,16 @@ button {
   user-select: none;
 }
 
+#actions {
+  display: flex;
+  flex-wrap: wrap;
+  width: 40%;
+  padding: 15px;
+}
+
 .action-button {
-  width: 100px;
-  height: 100px;
+  flex: 1 0 200px;
+  height: 50px;
   font-size: 18px;
   user-select: none;
 }
@@ -148,12 +159,13 @@ button {
 #game-and-stats {
   margin: auto;
   height: 500px;
-  width: 700px;
+  max-width: 1000px;
+  padding: 15px;
   display: flex;
 }
 
 #footer {
-  width: 500px;
+  max-width: 800px;
   margin: auto;
 }
 
diff --git a/feast.html b/feast.html
index eb99ccb..050caf1 100644
--- a/feast.html
+++ b/feast.html
@@ -110,41 +110,6 @@
           </table>
         </div>
         <div id="actions">
-          <table>
-            <tr>
-              <th>
-                <button class="action-button" id="action-look">Look</button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-            </tr>
-            <tr>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-              <th>
-                <button class="inactive-button action-button" disabled="true"></button>
-              </th>
-            </tr>
-          </table>
         </div>
       </div>
       <div class="selector" id="selector-combat">
diff --git a/feast.js b/feast.js
index d2a26ee..13fb031 100644
--- a/feast.js
+++ b/feast.js
@@ -6,8 +6,6 @@ let currentDialog = null;
 let currentFoe = null;
 
 let dirButtons = [];
-let actionButtons = [];
-
 let mode = "explore";
 let actions = [];
 let time = 9*60*60;
@@ -117,19 +115,17 @@ function updateExploreCompass() {
 function updateExploreActions() {
   updateActions();
 
-  for (let i = 0; i < actionButtons.length; i++) {
-    if (i < actions.length) {
-      actionButtons[i].disabled = false;
-      actionButtons[i].innerHTML = actions[i].name;
-      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");
-    }
+  let actionButtons = document.querySelector("#actions");
+
+  actionButtons.innerHTML = "";
+
+  for (let i = 0; i < actions.length; i++) {
+    let button = document.createElement("button");
+    button.innerHTML = actions[i].name;
+    button.classList.add("active-button");
+    button.classList.add("action-button");
+    button.addEventListener("click", function() { actions[i].action(); });
+    actionButtons.appendChild(button);
   }
 }
 
@@ -365,7 +361,6 @@ function start() {
   document.getElementById("game").style.display = "block";
   document.getElementById("stat-button-status").addEventListener("click", status, false);
   document.getElementById("log-button").addEventListener("click", toggleLog, false);
-  loadActions();
   loadCompass();
   loadDialog();
   world = createWorld();
@@ -680,17 +675,6 @@ function loadDialog() {
   }
 }
 
-function actionClicked(index) {
-  actions[index].action();
-}
-
-function loadActions() {
-  actionButtons = Array.from( document.querySelectorAll(".action-button"));
-  for (let i = 0; i < actionButtons.length; i++) {
-    actionButtons[i].addEventListener("click", function() { actionClicked(i); });
-  }
-}
-
 function loadCompass() {
   dirButtons[NORTH_WEST] = document.getElementById("compass-north-west");
   dirButtons[NORTH_WEST].addEventListener("click", function() {