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 Y") }}</p>
      <p class="worldinfo-date">{{ world.time.format("hh:mm:ss a") }}</p>
    </div>
    <Statblock :subject="world.player" :initiative="0" />
    <div class="explore-info">
      <h2 class="location-name">{{ location.name.capital }}</h2>
      <p class="location-desc">{{ location.desc }}</p>
    </div>
    <div class="explore-nav">
      <NavButton @click.native="writeLog(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>
    <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" />
    </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'
import ChoiceButton from './ChoiceButton.vue'
import Statblock from './Statblock.vue'
import { LogEntry } from '@/game/interface'

@Component({
  components: {
    NavButton, ChoiceButton, Statblock
  },
  data () {
    return {
      directions: Direction
    }
  }
})

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
    }
  }

  writeLog (entry: LogEntry) {
    const log = this.$el.querySelector(".explore-log")
    if (log !== null) {
      const before = log.querySelector("div.explore-log-entry")
      const holder = document.createElement("div")
      holder.classList.add("explore-log-entry")

      entry.render().forEach(element => {
        holder.appendChild(element)
      })

      holder.classList.add("explore-entry")
      const hline = document.createElement("div")
      hline.classList.add("explore-log-separator")
      log.insertBefore(hline, before)
      log.insertBefore(holder, hline)

      log.scrollTo({ top: 0, left: 0 })
    }
  }
}

</script>

<style scoped>

.explore-layout {
  flex: 10;
  position: relative;
  display: grid;
  grid-template-areas: "log worldinfo"
                       "log statblock"
                       "log info     "
                       "log choices  "
                       "nav choices  ";
  grid-template-rows: 0.5fr fit-content(250pt) 2fr 1fr 1fr;
  grid-template-columns: 2fr 1fr;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.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%;
  margin: 8pt;
}

.location-desc {
  font-size: 150%;
  color: #ccc;
}

.explore-nav {
  position: relative;
  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;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  justify-self: end;
}

.explore-choices {
  grid-area: choices;
  background: #555;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
</style>

<style>

.explore-log-entry {
  animation: explore-entry-fade 1s;
}

@keyframes explore-entry-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1
  }
}

.explore-log-separator {
  width: 100%;
  height: 4px;
  margin: 16pt 0pt 16pt;
  background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%);
}
</style>