Worked on interface

feast.css

@@ -3,6 +3,7 @@ body {
   color: #eee;
   height: 100%;
   width: 100%;
+  font-family: sans-serif;
 }
 
 button {
@@ -10,9 +11,14 @@ button {
   color: #eee;
 }
 
+#selector-combat {
+  display: none;
+}
+
 .compass-button {
   width: 100px;
   height: 100px;
+  font-size: 18px;
 }
 
 .active-compass-button {
@@ -23,6 +29,34 @@ button {
   background: #111;
 }
 
+.action-button {
+  width: 100px;
+  height: 100px;
+  font-size: 18px;
+}
+
+.active-action-button {
+
+}
+
+.inactive-action-button {
+  background: #111;
+}
+
+.combat-button {
+  width: 100px;
+  height: 100px;
+  font-size: 18px;
+}
+
+.active-combat-button {
+
+}
+
+.inactive-combat-button {
+  background: #111;
+}
+
 #log {
   background: #222;
   width: 100%;
@@ -35,6 +69,10 @@ button {
   flex: 1;
 }
 
+.stat-line {
+
+}
+
 #game-and-stats {
   margin: auto;
   height: 500px;
@@ -46,3 +84,7 @@ button {
   width: 500px;
   margin: auto;
 }
+
+.selector {
+  display: flex;
+}

feast.html

@@ -22,46 +22,104 @@
       Welcome to Feast v0.0.3
     </div>
     <div id="stats">
-      qweqw
+      <div class="stat-line" id="stat-name">Vim: 15</div>
+      <div class="stat-line" id="stat-health">Pulchritude: 44</div>
+      <div class="stat-line" id="stat-fullness">Imagination: 97</div>
     </div>
   </div>
   <div id="footer">
-    <div id="compass">
-      <table>
-        <tr>
-          <th>
-            <button class="compass-button" id="compass-north-west">North West</button>
-          </th>
-          <th>
-            <button class="compass-button" id="compass-north">North</button>
-          </th>
-          <th>
-            <button class="compass-button" id="compass-north-east">North East</button>
-          </th>
-        </tr>
-        <tr>
-          <th>
-            <button class="compass-button" id="compass-west">West</button>
-          </th>
-          <th>
-            <button class="compass-button inactive-compass-button" id="compass-filler" disabled="true"></button>
-          </th>
-          <th>
-            <button class="compass-button" id="compass-east">East</button>
-          </th>
-        </tr>
-        <tr>
-          <th>
-            <button class="compass-button" id="compass-south-west">South West</button>
-          </th>
-          <th>
-            <button class="compass-button" id="compass-south">South</button>
-          </th>
-          <th>
-            <button class="compass-button" id="compass-south-east">South East</button>
-          </th>
-        </tr>
-      </table>
+    <div class="selector" id="selector-explore">
+      <div id="compass">
+        <table>
+          <tr>
+            <th>
+              <button class="compass-button" id="compass-north-west">North West</button>
+            </th>
+            <th>
+              <button class="compass-button" id="compass-north">North</button>
+            </th>
+            <th>
+              <button class="compass-button" id="compass-north-east">North East</button>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <button class="compass-button" id="compass-west">West</button>
+            </th>
+            <th>
+              <button class="compass-button inactive-compass-button" id="compass-filler" disabled="true"></button>
+            </th>
+            <th>
+              <button class="compass-button" id="compass-east">East</button>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <button class="compass-button" id="compass-south-west">South West</button>
+            </th>
+            <th>
+              <button class="compass-button" id="compass-south">South</button>
+            </th>
+            <th>
+              <button class="compass-button" id="compass-south-east">South East</button>
+            </th>
+          </tr>
+        </table>
+      </div>
+      <div id="actions">
+        <table>
+          <tr>
+            <th>
+              <button class="action-button" id="action-look">Look</button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true"></button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+            <th>
+              <button class="inactive-action-button action-button" disabled="true" ></button>
+            </th>
+          </tr>
+        </table>
+      </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>
+      </div>
     </div>
   </div>
 </body>

feast.js

@@ -1,7 +1,17 @@
 let currentRoom = null;
 let dirButtons = [];
+let mode = "explore";
 
-function updateDisplay() {
+let player = {
+  name: "Fen",
+  height: 1.55,
+  health: 75,
+  maxHealth: 100,
+  fullness: 35,
+  maxFullness: 200
+};
+
+function updateExplore() {
   for (let i = 0; i < dirButtons.length; i++) {
     let button = dirButtons[i];
     if (currentRoom.exits[i] == null) {
@@ -18,6 +28,29 @@ function updateDisplay() {
   }
 }
 
+function updateCombat() {
+
+}
+
+function updateDisplay() {
+  switch(mode) {
+    case "explore":
+      document.getElementById("selector-explore").style.display = "flex";
+      document.getElementById("selector-combat").style.display = "none";
+      updateExplore();
+      break;
+    case "combat":
+      document.getElementById("selector-explore").style.display = "none";
+      document.getElementById("selector-combat").style.display = "flex";
+      updateCombat();
+      break;
+  }
+
+  document.getElementById("stat-name").innerHTML = "Name: " + player.name;
+  document.getElementById("stat-health").innerHTML = "Health: " + player.health + "/" + player.maxHealth;
+  document.getElementById("stat-fullness").innerHTML = "Fullness: " + player.fullness + "/" + player.maxFullness;
+}
+
 function move(direction) {
   let target = currentRoom.exits[direction];
   if (target == null) {