define how to roll and how tables work

add some test tables

src/components/messages.vue

@@ -0,0 +1,42 @@
+<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>