feast/src/components/Explore.vue

<template>
  <div class="explore-layout">
    <div class="explore-log">
      <div class="explore-log-filler"></div>
    </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>
    <div class="explore-statblock">
      <Statblock v-on="$listeners" :subject="world.player" />
    </div>
    <div class="explore-wallet">
      <WalletView :subject="world.player" />
    </div>
    <div class="explore-containers">
      <transition-group name="container">
        <ContainerView v-show="container.contents.concat(container.digested).length > 0" :container="container" v-for="(container, index) in world.player.containers" :key="'explore-container-' + index" />
      </transition-group>
    </div>
    <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="clearLog(); writeLog(location.connections[direction].travel(world, world.player))" v-for="direction in Object.keys(directions).filter(dir => Object.keys(location.connections).includes(dir))" :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 ContainerView from './ContainerView.vue'
import WalletView from './WalletView.vue'
import { LogEntry } from '@/game/interface'

@Component({
  components: {
    NavButton, ChoiceButton, Statblock, ContainerView, WalletView
  },
  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: string) {
    return {
      '--nav-direction': dir
    }
  }

  clearLog () {
    const log = this.$el.querySelector(".explore-log")

    if (log !== null) {
      log.innerHTML = ""
    }
  }

  writeLog (entry: LogEntry) {
    const log = this.$el.querySelector(".explore-log")
    if (log !== null) {
      const rendered = entry.render()
      if (rendered.length > 0) {
        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.appendChild(hline)
        log.appendChild(holder)

        log.scrollTo({ top: log.scrollHeight, left: 0, behavior: "smooth" })
      }
    }
  }
}

</script>

<style scoped>

.explore-layout {
  flex: 10;
  position: relative;
  display: grid;
  grid-template-areas: "info log log statblock"
                       "worldinfo log log statblock"
                       "worldinfo log log wallet"
                       "nav nav choices containers  ";
  grid-template-rows: fit-content(50%) 1fr fit-content(10%) 12rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 8px;
  width: 100%;
  height: calc(100% - 16px);
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
  overflow: hidden;
}

.explore-containers {
  background: #222;
  grid-area: containers;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.explore-containers > .vore-container {
  flex-basis: 25%;
  max-height: 125px;
}

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

.explore-log-filler {
  height: 100%;
}

.explore-worldinfo {
  grid-area: worldinfo;
  background: #222;
  padding: 8px;
}

.worldinfo-date,
.worldinfo-time {
  font-size: 1.25rem;
}

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

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

.explore-info {
  grid-area: info;
  background: #222;
  display: flex;
  flex-direction: column;
  flex-wrap: none;
  justify-content: start;
  align-items: center;
  padding: 8px;
}

.location-name {
  font-size: 2rem;
  margin: 8pt;
}

.location-desc {
  font-size: 1.5rem;
  color: #ccc;
}

.explore-nav {
  padding: 8px;
  position: relative;
  grid-area: nav;
  background: #222;
  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: calc(100% - 16px);
  height: calc(100% - 16px);
  justify-self: end;
}

.explore-choices {
  padding: 8px;
  grid-area: choices;
  background: #222;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.container-enter {
  opacity: 0;
}

.container-enter-active {
  transition: opacity 2s;
}

.container-move {
  transition: transform 1s;
}

.container-leave-active {
  transition: opacity 5s;
  opacity: 0;
}

.show-profile {
  grid-area: var(--nav-direction);
  padding: 5%;
  background: #555;
  color: #ccc;
  font-size: 1rem;
  border-color: #ccc;
  border-width: 3px;
  border-radius: 8px;
  border-style: outset;
  outline: none;
  width: 100%;
  height: 4rem;
  z-index: 1;
  user-select: none;
}

.show-profile:hover {
  background: #666;
}

.show-profile:active {
  background: #777;
  border-style: inset;
}

.show-profile:focus {
  background: #666;
}

</style>

<style>

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

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

  to {
    opacity: 1
  }
}

.explore-log-separator {
  animation: explore-log-keyframes 0.5s;
  height: 4px;
  margin: 16pt auto 16pt;
  background: linear-gradient(90deg, transparent, #444 10%, #444 90%, transparent 100%);
}

@keyframes explore-log-keyframes {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.explore-log > div:last-child {
  margin-bottom: 8pt;
}
</style>