1 files changed, 59 insertions, 0 deletions
diff --git a/src/HeroSearchBox.vue b/src/HeroSearchBox.vue
new file mode 100644
index 0000000..ecb57b7
--- /dev/null
+++ b/src/HeroSearchBox.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="box">
+    <b-field label="Hero">
+      <b-input v-model="hero"></b-input>
+    </b-field>
+
+    <b-table :data="heroReport"
+             :default-sort="['Count', 'desc']"
+             :default-sort-directon="'desc'"
+             :mobile-cards="false">
+      <template slot-scope="props">
+        <b-table-column field="Actor" label="Hero" sortable>
+          {{ getHero(props.row.Actor) }}
+        </b-table-column>
+
+        <b-table-column field="Talent" label="Talent">
+          <talent-image :entry="props.row"></talent-image>
+        </b-table-column>
+
+        <b-table-column field="Winner" label="Win Rate" sortable numeric>
+          <template v-if="!!props.row.Winner">
+            {{ Math.round(100 * props.row.Winner) }}%
+          </template>
+        </b-table-column>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import TalentImage from './TalentImage.vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-search-box', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      hero: maps.getHero(this.reportService.getTopPick('casual_aral').Actor),
+      totalPicks: this.reportService.getTotalPicks('casual_aral'),
+      getHero: maps.getHero,
+    };
+  },
+  computed: {
+    heroReport: function() {
+      return this.reportService.getReport('casual_aral')
+          .filter((entry) => maps.getHero(entry.Actor).includes(this.hero));
+    },
+    totalHeroPicks: function() {
+      return this.heroReport
+        .map((entry) => entry.Count)
+        .reduce((agg, cur) => agg + cur, 0);
+    },
+  },
+  components: {
+    TalentImage,
+  },
+});
+</script>