From dc6b68791c320b5acbedeefccb60d4a612a0579e Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 10 Mar 2018 17:29:13 -0500
Subject: [PATCH] Improved combat formatting. Added a description box

---
 feast.css  | 14 ++++++++++++--
 feast.html | 17 +++--------------
 feast.js   |  4 ++++
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/feast.css b/feast.css
index b81c715..b8a0f34 100644
--- a/feast.css
+++ b/feast.css
@@ -38,12 +38,18 @@ button {
 }
 
 .combat-button {
-  width: 100px;
-  height: 100px;
+  width: 200px;
+  height: 50px;
   font-size: 18px;
   user-select: none;
 }
 
+#combat-desc {
+  width: 200px;
+  height: 400px;
+  background: #222;
+}
+
 .dialog-button {
   width: 300px;
   height: 75px;
@@ -55,6 +61,10 @@ button {
   list-style-type: none;
 }
 
+#combat {
+  list-style-type: none;
+}
+
 #log {
   background: #222;
   width: 100%;
diff --git a/feast.html b/feast.html
index 930e758..05397d6 100644
--- a/feast.html
+++ b/feast.html
@@ -110,20 +110,9 @@
       </div>
     </div>
     <div class="selector" id="selector-combat">
-      <div id="combat">
-        <table>
-          <tr>
-            <th>
-              <button class="combat-button">Punch</button>
-            </th>
-            <th>
-              <button class="combat-button">Eat</button>
-            </th>
-            <th>
-              <button class="combat-button">Sneeze</button>
-            </th>
-          </tr>
-        </table>
+      <ul id="combat">
+      </ul>
+      <div id="combat-desc">
       </div>
     </div>
     <div class="selector" id="selector-dialog">
diff --git a/feast.js b/feast.js
index 63eab42..4ca86e4 100644
--- a/feast.js
+++ b/feast.js
@@ -70,6 +70,7 @@ function updateCombat() {
     button.classList.add("combat-button");
     button.innerHTML = attacks[i].name;
     button.addEventListener("click", function() { attackClicked(i) });
+    button.addEventListener("mouseover", function() { attackHovered(i) });
     li.appendChild(button);
     list.appendChild(li);
   }
@@ -200,6 +201,9 @@ function attackClicked(index) {
   }
 }
 
+function attackHovered(index) {
+  document.getElementById("combat-desc").innerHTML = attacks[index].desc;
+}
 function startDialog(dialog) {
   mode = "dialog";
   currentDialog = dialog;