add hero search box to BR tab

4 files changed, 89 insertions, 11 deletions

diff --git a/src/BattleRoyaleTab.vue b/src/BattleRoyaleTab.vue
index 48d8b25..d3c51f2 100644
--- a/src/BattleRoyaleTab.vue
+++ b/src/BattleRoyaleTab.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <hero-search-box :reportService="reportService"></hero-search-box>
+
     <h2 class="title is-2">Battle Royale Hero Statistics</h2>
     <report-table :report="report" :totalPicks="totalPicks"></report-table>
   </div>
@@ -8,6 +10,7 @@
 <script>
 import Vue from 'vue';
 import ReportTable from './ReportTable.vue';
+import HeroSearchBox from './HeroSearchBox.vue';
 
 export default Vue.component('battle-royale-tab', {
   props: [ 'reportService' ],
@@ -21,6 +24,7 @@ export default Vue.component('battle-royale-tab', {
   },
   components: {
     ReportTable,
+    HeroSearchBox,
   },
 });
 </script>
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>
diff --git a/src/TalentBox.vue b/src/TalentBox.vue
index c779e12..d372f20 100644
--- a/src/TalentBox.vue
+++ b/src/TalentBox.vue
@@ -4,11 +4,9 @@
     <article class="media">
       <div class="media-left">
         <figure class="image is-64x64">
-          <img :src="'dist/assets/hero-icons/' + hero.toLowerCase() + '.png'" :alt="entry.Actor">
-        </figure>
-        <figure class="image is-64x64">
-          <img :src="'dist/assets/talent-icons-small/' + hero + '/' + hero + '_' + rarity + '.png'" :alt="hero + ' ' + rarity">
+          <img :src="'dist/assets/hero-icons/' + hero + '.png'" :alt="entry.Actor">
         </figure>
+        <talent-image :entry="entry"></talent-image>
       </div>
       <div class="media-content">
         <div class="content">
@@ -21,21 +19,18 @@
 
 <script>
 import Vue from 'vue';
+import TalentImage from './TalentImage.vue';
 import * as maps from './maps/maps';
 
 export default Vue.component('talent-box', {
   props: [ 'title', 'content', 'entry' ],
   data: function() {
     return {
+      hero: maps.getHero(this.entry.Actor).toLowerCase(),
     };
   },
-  computed: {
-    hero: function() {
-      return maps.getHero(this.entry.Actor);
-    },
-    rarity: function() {
-      return maps.getTalentRarity(this.entry.Talent);
-    },
+  components: {
+    TalentImage,
   },
 });
 </script>
diff --git a/src/TalentImage.vue b/src/TalentImage.vue
new file mode 100644
index 0000000..ccf3147
--- /dev/null
+++ b/src/TalentImage.vue
@@ -0,0 +1,20 @@
+<template>
+  <figure class="image is-64x64">
+    <img :src="'dist/assets/talent-icons-small/' + hero + '/' + hero + '_' + rarity + '.png'" :alt="hero + ' ' + rarity">
+  </figure>
+</template>
+
+<script>
+import Vue from 'vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('talent-image', {
+  props: [ 'entry' ],
+  data: function() {
+    return {
+      hero: maps.getHero(this.entry.Actor),
+      rarity: maps.getTalentRarity(this.entry.Talent),
+    };
+  },
+});
+</script>