Buttons disable/enable properly. Rooms are described. Version number, baby!

feast.css

@@ -15,6 +15,14 @@ button {
   height: 100px;
 }
 
+.active-compass-button {
+
+}
+
+.inactive-compass-button {
+  background: #111;
+}
+
 #log {
   background: #222;
   width: 100%;

feast.html

@@ -19,24 +19,51 @@
 
   <div id="game-and-stats">
     <div id="log">
-qweqwwetr
+      Welcome to Feast v0.0.3
     </div>
     <div id="stats">
-qweqw
+      qweqw
     </div>
   </div>
   <div id="footer">
     <div id="compass">
-      <button class="compass-button" id="compass-north-west">North West</button>
-      <button class="compass-button" id="compass-north">North</button>
-      <button class="compass-button" id="compass-north-east">North East</button><br>
-      <button class="compass-button" id="compass-west">West</button>
-      <button class="compass-button" id="compass-filler">Filler lol</button>
-      <button class="compass-button" id="compass-east">East</button><br>
-      <button class="compass-button" id="compass-south-west">South West</button>
-      <button class="compass-button" id="compass-south">South</button>
-      <button class="compass-button" id="compass-south-east">South East</button>
+      <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>
 </body>
+
 </html>

feast.js

@@ -1,7 +1,21 @@
 let currentRoom = null;
+let dirButtons = [];
 
 function updateDisplay() {
-  document.getElementById("location").innerHTML = currentRoom.name;
+  for (let i = 0; i < dirButtons.length; i++) {
+    let button = dirButtons[i];
+    if (currentRoom.exits[i] == null) {
+      button.disabled = true;
+      button.classList.remove("active-compass-button");
+      button.classList.add("inactive-compass-button");
+      button.innerHTML = "";
+    } else {
+      button.disabled = false;
+      button.classList.remove("inactive-compass-button");
+      button.classList.add("active-compass-button");
+      button.innerHTML = currentRoom.exits[i].name;
+    }
+  }
 }
 
 function move(direction) {
@@ -11,7 +25,7 @@ function move(direction) {
     return;
   } else {
     currentRoom = target;
-    update(["You move to " + currentRoom.name]);
+    update(["You move to " + currentRoom.name,currentRoom.description]);
     updateDisplay();
   }
 
@@ -30,31 +44,40 @@ function update(lines=[]) {
     div.innerHTML = lines[i];
     log.appendChild(div);
   }
+  updateDisplay();
 }
 
 function loadCompass() {
-  document.getElementById("compass-north-west").addEventListener("click", function() {
+  dirButtons[NORTH_WEST] = document.getElementById("compass-north-west");
+  dirButtons[NORTH_WEST].addEventListener("click", function() {
     move(NORTH_WEST);
   });
-  document.getElementById("compass-north").addEventListener("click", function() {
+  dirButtons[NORTH] = document.getElementById("compass-north");
+  dirButtons[NORTH].addEventListener("click", function() {
     move(NORTH);
   });
-  document.getElementById("compass-north-east").addEventListener("click", function() {
+  dirButtons[NORTH_EAST] = document.getElementById("compass-north-east");
+  dirButtons[NORTH_EAST].addEventListener("click", function() {
     move(NORTH_EAST);
   });
-  document.getElementById("compass-west").addEventListener("click", function() {
+  dirButtons[WEST] = document.getElementById("compass-west");
+  dirButtons[WEST].addEventListener("click", function() {
     move(WEST);
   });
-  document.getElementById("compass-east").addEventListener("click", function() {
+  dirButtons[EAST] = document.getElementById("compass-east");
+  dirButtons[EAST].addEventListener("click", function() {
     move(EAST);
   });
-  document.getElementById("compass-south-west").addEventListener("click", function() {
+  dirButtons[SOUTH_WEST] = document.getElementById("compass-south-west");
+  dirButtons[SOUTH_WEST].addEventListener("click", function() {
     move(SOUTH_WEST);
   });
-  document.getElementById("compass-south").addEventListener("click", function() {
+  dirButtons[SOUTH] = document.getElementById("compass-south");
+  dirButtons[SOUTH].addEventListener("click", function() {
     move(SOUTH);
   });
-  document.getElementById("compass-south-east").addEventListener("click", function() {
+  dirButtons[SOUTH_EAST] = document.getElementById("compass-south-east");
+  dirButtons[SOUTH_EAST].addEventListener("click", function() {
     move(SOUTH_EAST);
   });
 }

world.js

@@ -14,7 +14,7 @@ let NORTH_WEST = 7;
 
 function Location(name="Nowhere") {
   this.name = name;
-  this.description = "Not much of anything, really.";
+  this.description = "";
   this.exits = [null,null,null,null,null,null,null,null];
 }
 
@@ -41,9 +41,16 @@ function createWorld() {
   let bedroom = new Location("Bedroom");
   let bathroom = new Location("Bathroom");
   let livingroom = new Location("Living Room");
+  let street = new Location("Street");
+  let alley = new Location("Alley");
+  let hotvore = new Location("Sexy vore scene");
+  hotvore.description = "Oh murr";
 
   connectLocations(bedroom,bathroom,EAST);
   connectLocations(bedroom,livingroom,NORTH);
+  connectLocations(livingroom,street,NORTH);
+  connectLocations(street,alley,WEST);
+  connectLocations(alley,hotvore,NORTH_WEST);
 
   return bedroom;
 }