<template>
  <div>
    <div>
      <button class="primary" aria-label="Clear" @click="clearMessages">
        <span aria-hidden="true">Clear</span>
      </button>
    </div>

    <div>
      <div v-for="message, i in messages" :key="i">
        <span>{{message}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
import { d } from '../services/dice';
import { messageService } from '../services/messageService';

@Component({
  components: {
  },
  subscriptions() {
    return {
      messages: messageService.messages$
    };
  }
})
export default class Messages extends Vue {
  private messages: string[] = [];

  private clearMessages() {
    messageService.clearMessages();
  }
}
</script>

<style  scoped lang="scss">

</style>
