feast/src/components/Explore.vue

<template>
  <div class="explore-layout">
    <div class="explore-log">

    </div>
    <div class="explore-worldinfo">
      <p class="worldinfo-date">{{ world.time.format("MMMM Do YYYY") }}</p>
      <p class="worldinfo-time">{{ world.time.format("h:mm:ss A")}}</p>
    </div>
    <div class="explore-info">
      <h2 class="location-name">{{ location.name }}</h2>
      <p class="location-desc">{{ location.desc }}</p>
    </div>
    <div class="explore-nav">
      <NavButton @click.native="location=location.connections[direction]" v-for="direction in Object.keys(location.connections)" :key="direction" :style="navBtnCss(direction)" :location="location" :direction="direction" />
    </div>
    <div class="explore-actions">

    </div>
  </div>
</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator'
import { Direction, World, Place } from '@/game/world'
import NavButton from './NavButton.vue'

@Component({
  components: {
    NavButton
  }
})

export default class Explore extends Vue {
  get location () {
    return this.world.player.location
  }

  set location (loc: Place) {
    this.world.player.location = loc
  }

  @Prop({ type: World })
  world!: World

  navBtnCss (dir: Direction) {
    return {
      '--nav-direction': dir
    }
  }
}

</script>

<style scoped>

.explore-layout {
  position: relative;
  display: grid;
  grid-template-areas: "log worldinfo"
                       "log info     "
                       "log actions  "
                       "nav actions  ";
  grid-template-rows: 0.5fr 2fr 1fr 1fr;
  grid-template-columns: 2fr 1fr;
  width: 100%;
  height: 100%;
}

.explore-log {
  grid-area: log;
  background: #222;
}

.explore-worldinfo {
  grid-area: worldinfo;
  background: #111;
}

.worldinfo-date,
.worldinfo-time {
  font-size: 125%;
}
.explore-info {
  grid-area: info;
  background: #333;
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: start;
  align-items: center;
}

.location-name {
  font-size: 200%;
}

.location-desc {
  font-size: 150%;
}
.explore-nav {
  grid-area: nav;
  background: #444;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-areas: "Northwest North  Northeast"
                       "West      Center East     "
                       "Southwest South  Southeast";
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.explore-actions {
  grid-area: actions;
  background: #555;
}
</style>