Setting up a world system

satiate.css

@@ -111,19 +111,20 @@ html, body {
 }
 
 .move-button {
+  user-select: none;
   background-color: #888;
   color: #eee;
   border-radius: 5px;
+  font-size: 24px;
 }
 
-.disabled {
-  background-color: gray;
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
+.move-button:focus {
+  outline: 0px;
 }
 
-.move-button > span {
-  display: inline-block;
-  font-size: 24px;
+.disabled {
+  background-color: #444;
+  border: none;
 }
 
 #move-up-left {
@@ -174,7 +175,7 @@ html, body {
   top: 180px;
 }
 
-#move-climb {
+#move-ascend {
   position: absolute;
   left: -200px;
   top: 300px;
@@ -185,3 +186,7 @@ html, body {
   left: 200px;
   top: 300px;
 }
+
+#area-name {
+  font-size: 36px;
+}

satiate.html

@@ -6,6 +6,7 @@
   <title>Satiate</title>
   <link rel="stylesheet" href="satiate.css">
   <script src="audio.js"></script>
+  <script src="world.js"></script>
   <script src="satiate.js"></script>
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="A text adventure!" />
@@ -29,7 +30,8 @@
       this is the log
     </div>
     <div class="sidebar" id="area-info">
-      this is the area info
+      <div id="area-name"></div>
+      <div id="area-desc"></div>
     </div>
   </div>
   <div id="control-area">
@@ -45,16 +47,16 @@
     <div id="moves">
       beep beep
       <div id="move-holder">
-        <button class="move-button" id="move-up-left"><span>Potato Factory</span></button>
-        <button class="move-button" id="move-up"><span>Door</span></button>
-        <button class="move-button" id="move-up-right"><span>Butts</span></button>
-        <button class="move-button" id="move-left"><span>Fen's Snack Pile</span></button>
-        <button class="move-button" id="move-right"><span>Vore</span></button>
-        <button class="move-button" id="move-down-left"><span>Dennis</span></button>
-        <button class="move-button" id="move-down"><span>Ectoplasm</span></button>
-        <button class="move-button" id="move-down-right"><span>E</span></button>
-        <button class="move-button" id="move-climb"><span>Penthouse</span></button>
-        <button class="move-button" id="move-descend"><span>Basement</span></button>
+        <button class="move-button" id="move-up-left">Potato Factory</button>
+        <button class="move-button" id="move-up">Door</button>
+        <button class="move-button" id="move-up-right">Butts</button>
+        <button class="move-button" id="move-left">Fen's Snack Pile</button>
+        <button class="move-button" id="move-right">Vore</button>
+        <button class="move-button" id="move-down-left">Dennis</button>
+        <button class="move-button" id="move-down">Ectoplasm</button>
+        <button class="move-button" id="move-down-right">E</button>
+        <button class="move-button" id="move-ascend">Penthouse</button>
+        <button class="move-button" id="move-descend">Basement</button>
       </div>
     </div>
   </div>

world.js

@@ -0,0 +1,49 @@
+dirs = {
+  "up-left": "Northwest",
+  "up": "North",
+  "up-right": "Northeast",
+  "left": "West",
+  "right": "East",
+  "down-left": "Southwest",
+  "down": "South",
+  "down-right": "Southeast",
+  "ascend": "Up",
+  "descend": "Down"
+}
+
+function updateRoom(dest) {
+  const room = world[dest];
+
+  const areaName = document.querySelector("#area-name");
+  const areaDesc = document.querySelector("#area-desc");
+
+  areaName.innerText = room.name;
+  areaDesc.innerText = room.desc;
+
+  document.querySelectorAll(".move-button").forEach(button => {
+    const dir = button.id.replace("move-", "");
+    button.classList.add("disabled");
+    button.innerText = dirs[dir];
+  });
+
+  Object.entries(room.exits).forEach(([dir, val]) => {
+    const button = document.querySelector("#move-" + dir);
+
+    button.classList.remove("disabled");
+
+    button.innerText = val.target;
+  });
+}
+
+world = {
+  "Home": {
+    "name": "Home",
+    "desc": "Where the wifi autoconnects",
+    "exits": {
+      "up": {
+        "target": "Dennis",
+        "desc": "The obvious exit, but better."
+      }
+    }
+  }
+}