Improved combat formatting. Added a description box

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%;

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">

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;