Adjust layout a bit

src/components/Explore.vue

@@ -14,7 +14,6 @@
     </div>
     <div class="explore-nav">
       <NavButton @click.native="location.connections[direction].travel(world, world.player)" v-for="direction in Object.keys(location.connections)" :key="direction" :style="navBtnCss(direction)" :location="location" :direction="direction" />
-      <div class="nav-filler" :Style="navBtnCss(direction)" v-for="direction in Object.keys(directions)" :key="direction + '-filler'"></div>
     </div>
     <div class="explore-choices">
       <ChoiceButton @click.native="writeLog(choice.execute(world, world.player))" v-for="(choice, index) in location.choices.filter(choice => choice.visible(world))" :key="'choice' + index" :choice="choice" :world="world" />
@@ -137,6 +136,7 @@ export default class Explore extends Vue {
 }
 
 .explore-nav {
+  position: relative;
   grid-area: nav;
   background: #444;
   display: grid;
@@ -151,12 +151,6 @@ export default class Explore extends Vue {
   height: 100%;
 }
 
-.nav-filler {
-  grid-area: var(--nav-direction);
-  background: #222;
-  margin: 10px;
-}
-
 .explore-choices {
   grid-area: choices;
   background: #555;

src/components/NavButton.vue

@@ -41,7 +41,7 @@ export default class NavButton extends Vue {
 
 .nav-button {
   grid-area: var(--nav-direction);
-  margin: 5%;
+  padding: 5%;
   background: #555;
   color: #ccc;
   font-size: 200%;
@@ -50,6 +50,9 @@ export default class NavButton extends Vue {
   border-radius: 8px;
   border-style: outset;
   outline: none;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .nav-button:hover {

src/game/world.ts

@@ -47,6 +47,14 @@ export class Connection {
 
   }
 
+  visible (world: World, traveler: Creature): boolean {
+    return true
+  }
+
+  accessible (world: World, traveler: Creature): boolean {
+    return true
+  }
+
   travel (world: World, traveler: Creature) {
     world.advance(moment.duration(5, "minutes"))
     traveler.location = this.dst