feast/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>VORE TIME</h1>
    <p>
      {{ meme }}
    </p>
    <button v-on:click="dab">VORE</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import { Creature } from '@/game/entity'
import { Wolf } from '@/game/creatures/wolf'

/// <reference path="game/feast.ts" />
/// <reference path="game/creatures.ts" />

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  @Prop() public seen!: boolean;
  private player: Creature;
  private enemy: Creature;

  private meme = 'hm';

  mounted () {
    this.meme = 'Yeet'
  }

  @Emit()
  dab () {
    this.meme = 'Yeeeeet'
  }

  @Watch('meme')
  onPropertyChanged (value: string, oldValue: string) {
    this.msg = value + oldValue
  }

  constructor () {
    super()
    this.player = new Wolf()
    this.enemy = new Wolf()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>