feast/src/App.vue

<template>
  <div id="app">
    <Header :version="version" />
    <div id="main-area">
      <transition name="component-fade" mode='out-in'>
        <component
          @control="control"
          @profile="profile"
          @exit="$data.profileSubject = null"
          @give-in="gameOver()"
          @leave-combat="$data.world.encounter = null"
          v-bind:is="mode"
          :world="$data.world"
          :subject="$data.profileSubject"
          :encounter="$data.world.encounter" />
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import Header from '@/components/Header.vue'
import Combat from '@/components/Combat.vue'
import Explore from '@/components/Explore.vue'
import Profile from '@/components/Profile.vue'
import * as Items from '@/game/items'
import { Creature } from '@/game/creature'
import { ProperNoun, TheyPronouns, FemalePronouns, MalePronouns, ImproperNoun, POV } from '@/game/language'
import { Place, Direction, World, Choice } from '@/game/world'
import { Encounter, Side } from '@/game/combat'
import { LogLine, nilLog } from '@/game/interface'
import { InstantKillEffect } from '@/game/combat/effects'
import moment from 'moment'
import { Town } from '@/game/maps/town'
import Player from './game/creatures/player'

@Component({
  components: {
    Combat, Header, Explore, Profile
  },
  data () {
    return {
      world: null,
      home: null,
      profileSubject: null,
      props: {
        Explore: {
          world: this
        }
      },
      version: "pre-alpha"
    }
  }
})

export default class App extends Vue {
  constructor () {
    super()
  }

  get mode () {
    if (this.$data.profileSubject !== null) {
      return "Profile"
    } else if (this.$data.world.encounter !== null) {
      return "Combat"
    } else {
      return "Explore"
    }
  }

  @Emit('startFight')
  startFight (encounter: Encounter) {
    this.$data.world.encounter = encounter
  }

  created () {
    const player = new Player()
    player.perspective = POV.Second
    player.side = Side.Heroes
    player.equipment[Items.EquipmentSlot.MainHand] = new Items.Sword()
    player.equipment[Items.EquipmentSlot.Head] = new Items.Helmet()
    player.items.push(new Items.HealthPotion())
    player.items.push(new Items.Mace())
    player.items.push(new Items.Dagger())
    this.$data.world = new World(player)
    this.$data.home = Town()
    player.location = this.$data.home
  }

  gameOver () {
    this.$data.world.encounter = null
    this.$data.world.player.location = this.$data.home
  }

  profile (subject: Creature) {
    this.$data.profileSubject = subject
  }

  control (subject: Creature) {
    this.$data.world.player.perspective = POV.Third
    this.$data.world.player = subject
    subject.perspective = POV.Second
  }
}
</script>

<style>
body, html {
  background: #181818;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

html {
  font-size: calc(0.75em + 1vmin);
}

#app {
  position: relative;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #ddd;
  background: #111;
  width: 100%;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#main-area {
  position: relative;
  flex: 10;
  overflow-x: hidden;
  overflow-y: hidden;
}

.tippy-box {
  text-align: center;
  border-radius: 10px;
}

.tippy-box .tooltip-title {
  font-size: 18pt;
  font-family: sans-serif;
}

.tippy-box .tooltip-body {
  font-size: 12pt;
  font-family: sans-serif;
}

*::-webkit-scrollbar {
    height: 12px;
  }
*::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
*::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 50px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}
*::-webkit-scrollbar-thumb:active {
    background: #000000;
}
*::-webkit-scrollbar-track {
    background: #00000000;
    border: 0px none #ffffff;
    border-radius: 50px;
}
*::-webkit-scrollbar-track:hover {
    background: #666666;
}
*::-webkit-scrollbar-track:active {
    background: #333333;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.onomatopoeia {
  font-weight: bold;
  font-style: italic;
  font-size: 200%;
  animation: fly-in 0.4s;
  animation-timing-function: ease-out;
  display: inline-block;
}

@keyframes fly-in {
  0% { transform: scale(0, 0); opacity: 0 };
  100% { transform: scale(1, 1); opacity: 1 };
}
</style>