add table view

src/App.vue

@@ -15,12 +15,23 @@ export default class App extends Vue {}
 </script>
 
 <style>
+body {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  /* margin-top: 60px; */
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 </style>

src/components/dm-table.vue

@@ -1,41 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
-import { d } from '../services/dice';
-
-@Component({
-  components: {
-  },
-})
-export default class TestTable extends Vue {
-  private rollValue: number = 0;
-  private diceSize: number[] = [
-    4,
-    6,
-    8,
-    10,
-    100,
-    12,
-    20,
-  ];
-  private messages: string[] = [];
-
-  private roll(faces: number) {
-    this.rollValue = d(faces);
-    this.messages.push(`Rolled a d${faces} and got ${this.rollValue}`);
-  }
-
-  private clearMessages() {
-    this.messages = [];
-  }
-}
-</script>
-
-<style  scoped lang="scss">
-
-</style>

src/components/tableDisplay.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    Tags: <span class="tag" v-for="tag in curTable.getTags()" :key="tag">{{tag}}</span>
+    <div class="Rtable Rtable--2cols">
+      <div style="order:1;" class="Rtable-cell">
+        <h5>d{{curTable.dice.join(' + d')}} - {{curTable.name}}</h5>
+      </div>
+
+      <div :style="'order:' + (i+2) + ';'" class="Rtable-cell" v-for="possibleResult, i in curTable.getPossibleResults()" :key="i">
+        {{possibleResult.keys.join(' - ')}}
+      </div>
+
+      <div style="order:1;" class="Rtable-cell">
+        <h5>Results</h5>
+      </div>
+
+      <div :style="'order:' + (j+2) + ';'" class="Rtable-cell" v-for="possibleResult, j in curTable.getPossibleResults()" :key="possibleResult.value">
+        {{possibleResult.value}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import { RandomTable } from '../services/tableService';
+
+@Component({
+  components: {
+  },
+})
+export default class TableDisplay extends Vue {
+  @Prop() private curTable!: RandomTable;
+}
+</script>
+
+<style scoped lang="scss">
+
+/* Tables
+================================== */
+.Rtable {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 3em 0;
+  padding: 0;
+  text-align: left;
+  // align-items: center;
+}
+.Rtable-cell {
+  box-sizing: border-box;
+  flex-grow: 1;
+  width: 100%;  // Default to full width
+  padding: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
+  overflow: hidden; // Or flex might break
+  list-style: none;
+  border: solid 3px white;
+  background-color: rgba(112, 128, 144, 0.2);
+  > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
+}
+
+/* Table column sizing
+================================== */
+.Rtable--2cols > .Rtable-cell  { width: 50%; }
+.Rtable--3cols > .Rtable-cell  { width: 33.33%; }
+.Rtable--4cols > .Rtable-cell  { width: 25%; }
+.Rtable--5cols > .Rtable-cell  { width: 20%; }
+.Rtable--6cols > .Rtable-cell  { width: 16.6%; }
+
+.tag {
+  padding: 3px 10px;
+  background-color: lightblue;
+  margin: 2px;
+  border-radius: 10px;
+}
+</style>

src/components/tableSearch.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <input v-model="tableSearch" placeholder="Search for a table"/>
+    <div v-for="table, i in searchedTables" :key="i" @click="selectTable(table)">
+      {{table.name}}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import { tableService, RandomTable, TableResult, TableConfig } from '../services/tableService';
+
+@Component({
+
+})
+export default class TableSearch extends Vue {
+  private searchedTables: RandomTable[] = [];
+  private tableSearch: string = '';
+
+  private selectTable(table: RandomTable) {
+    this.$emit('table-selected', table);
+  }
+
+  @Watch('tableSearch')
+  private doSearch(newValue: string, oldValue: string) {
+    if (newValue === '') {
+      this.searchedTables = [];
+    } else {
+      this.searchedTables = tableService.searchForTable(newValue);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/services/tableData.ts

@@ -1085,7 +1085,7 @@ let tableData: TableConfig[] = [
       },
       {
         keys: [20],
-        value: 'Villain posin as a patron'
+        value: 'Villain posing as a patron'
       },
     ]
   },

src/views/test-table.vue

@@ -1,40 +1,35 @@
 <template>
   <div class="test-table">
-    {{rollValue}} <br />
+    <!-- {{rollValue}} <br />
     <br />
     <div v-for="dice, i in diceSize" :key="i">
       <button class="primary" :aria-label="'Roll D' + dice" @click="roll(dice)">
         <span>d{{dice}}</span>
       </button>
     </div>
-    <br />
+    <br /> -->
+    <div class="left-panel">
+      <div>
+        <span>{{tableResult}}</span><br />
+        <button class="btn-primary" :aria-label="'Get table value'" @click="roleTable">
+          <span>Get table value</span>
+        </button>
+      </div>
+
+      <table-search @table-selected="tableSelected($event)"></table-search>
+
+      <messages class="message-container"></messages>
 
-    <div>
-      <span>{{tableResult}}</span><br />
-      <button class="btn-primary" :aria-label="'Get table value'" @click="roleTable">
-        <span>Test Table</span>
-      </button>
     </div>
 
+
+
     <!-- <div>
-      <button class="btn-primary" :aria-label="'Get table value'" @click="testTable">
-        <span>Run Table Test</span>
-      </button>
+      <span>{{curTable.name}}</span>
     </div> -->
 
-    <div>
-      <span>{{curTable.name}}</span>
+    <table-display class="table-display" :cur-table="curTable"></table-display>
 
-    </div>
-
-    <div>
-      <input v-model="tableSearch" />
-      <div v-for="table, i in searchedTables" :key="i" @click="curTable = table">
-        {{table.name}}
-      </div>
-    </div>
-
-    <messages></messages>
   </div>
 </template>
 
@@ -42,6 +37,8 @@
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import { messageService } from '../services/messageService';
 import Messages from '../components/messages.vue';
+import TableSearch from '../components/tableSearch.vue';
+import TableDisplay from '../components/tableDisplay.vue';
 import { d } from '../services/dice';
 
 
@@ -51,7 +48,9 @@ import { tableService, RandomTable, TableResult, TableConfig } from '../services
 
 @Component({
   components: {
-    'messages': Messages
+    'messages': Messages,
+    'table-search': TableSearch,
+    'table-display': TableDisplay
   },
 })
 export default class TestTable extends Vue {
@@ -66,9 +65,6 @@ export default class TestTable extends Vue {
     20,
   ];
 
-  private tableSearch: string = '';
-  private searchedTables: RandomTable[] = [];
-
   private curTable: RandomTable = new RandomTable(tableData[0]);
   private tableResult: string = '';
 
@@ -94,17 +90,35 @@ export default class TestTable extends Vue {
     }
   }
 
-  @Watch('tableSearch')
-  private doSearch(newValue: string, oldValue: string) {
-    if (newValue === '') {
-      this.searchedTables = [];
-    } else {
-      this.searchedTables = tableService.searchForTable(newValue);
-    }
+  private tableSelected(newTable: RandomTable) {
+    this.curTable = newTable;
   }
 }
 </script>
 
 <style scoped lang="scss">
+.test-table {
+  display: flex;
+  height: 100%;
+  justify-content: space-around;
+}
 
+.test-table > div {
+  width: 50%;
+}
+
+.table-display {
+  width: 600px;
+  overflow: auto;
+}
+
+.left-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-container {
+  overflow-y: auto;
+}
 </style>