From aea0fa999fd09951835b2d74c53137624f46929e Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Mon, 21 May 2018 13:09:05 +0200
Subject: major redesign

---
 dist/assets/hero-icons/kensei.png | Bin 0 -> 58750 bytes
 package.json                      |   2 +-
 src/App.vue                       |  38 +++++++--------------
 src/BattleRoyaleTab.vue           |  30 -----------------
 src/BlitzTab.vue                  |  67 ------------------------------------
 src/HeroDraftGrid.vue             |  57 +++++++++++++++++++++++++++++++
 src/HeroImage.vue                 |  19 +++++++++++
 src/HeroSearchBox.vue             |  63 ----------------------------------
 src/HeroTalentTable.vue           |  69 ++++++++++++++++++++++++++++++++++++++
 src/Highlights.vue                |  65 +++++++++++++++++++++++++++++++++++
 src/Home.vue                      |  28 +++++++---------
 src/ModeTab.vue                   |  50 +++++++++++++++++++++++++++
 src/ReportTable.vue               |  55 +++++++++++++++++++++++-------
 src/TalentBox.vue                 |  24 ++++++-------
 src/TalentImage.vue               |  20 ++++-------
 src/TopTalentsBox.vue             |  61 +++++++++++++++++++++++++++++++++
 src/maps/maps.js                  |  11 ++++++
 src/maps/modes.json               |   8 +++++
 src/report-service.js             |  22 ++++++++++++
 19 files changed, 450 insertions(+), 239 deletions(-)
 create mode 100644 dist/assets/hero-icons/kensei.png
 delete mode 100644 src/BattleRoyaleTab.vue
 delete mode 100644 src/BlitzTab.vue
 create mode 100644 src/HeroDraftGrid.vue
 create mode 100644 src/HeroImage.vue
 delete mode 100644 src/HeroSearchBox.vue
 create mode 100644 src/HeroTalentTable.vue
 create mode 100644 src/Highlights.vue
 create mode 100644 src/ModeTab.vue
 create mode 100644 src/TopTalentsBox.vue
 create mode 100644 src/maps/modes.json

diff --git a/dist/assets/hero-icons/kensei.png b/dist/assets/hero-icons/kensei.png
new file mode 100644
index 0000000..28cdd77
Binary files /dev/null and b/dist/assets/hero-icons/kensei.png differ
diff --git a/package.json b/package.json
index 10f4fdf..a0b961c 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "backend": "node backend/index.js",
-    "dev": "webpack-dev-server --mode development --progress --hot",
+    "dev": "webpack-dev-server --mode development --progress --hot --watch-poll",
     "build": "webpack --mode production --progress"
   },
   "repository": {
diff --git a/src/App.vue b/src/App.vue
index 7715d29..785eb35 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,17 @@
 <template>
   <div class="container">
-<section class="hero is-medium is-dark is-bold header">
-  <div class="hero-body">
-    <div class="container">
-      <h1 class="title">
-        Broken Talents
-      </h1>
-      <h2 class="subtitle">
-        Tilting Brawlers since May 2017
-      </h2>
-      <div class="search">
-        <div class="field">
-          <div class="control">
-            <input class="input is-large" type="text" placeholder="Search for a hero">
-          </div>
+    <section class="hero is-medium is-dark is-bold header">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Broken Talents
+          </h1>
+          <h2 class="subtitle">
+            Tilting Brawlers since May 2017
+          </h2>
         </div>
       </div>
-    </div>
-  </div>
-</section>
+    </section>
 
     <router-view></router-view>
   </div>
@@ -26,12 +19,7 @@
 
 
 <style scoped>
-  .header {
-    text-align: center;
-  }
-
-  .search {
-    max-width: 500px;
-    margin: 0 auto
-  }
+.header {
+  text-align: center;
+}
 </style>
diff --git a/src/BattleRoyaleTab.vue b/src/BattleRoyaleTab.vue
deleted file mode 100644
index d3c51f2..0000000
--- a/src/BattleRoyaleTab.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<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>
-</template>
-
-<script>
-import Vue from 'vue';
-import ReportTable from './ReportTable.vue';
-import HeroSearchBox from './HeroSearchBox.vue';
-
-export default Vue.component('battle-royale-tab', {
-  props: [ 'reportService' ],
-  data: function() {
-    return {
-      report: this.reportService.getReport('casual_aral'),
-      totalPicks: this.reportService.getTotalPicks('casual_aral'),
-    };
-  },
-  computed: {
-  },
-  components: {
-    ReportTable,
-    HeroSearchBox,
-  },
-});
-</script>
diff --git a/src/BlitzTab.vue b/src/BlitzTab.vue
deleted file mode 100644
index 174ac98..0000000
--- a/src/BlitzTab.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div>
-    <div class="tile is-ancestor">
-      <div class="tile is-parent">
-        <talent-box class="tile is-child is-dark notification"
-                    title="Overpowered"
-                    type="Win Rate"
-                    label="%"
-                    :value="Math.round(100 * topWin.Winner)"
-                    :entry="topWin" />
-      </div>
-
-      <div class="tile is-parent">
-        <talent-box class="tile is-child is-dark notification"
-                    title="Trending"
-                    type="Pick Rate"
-                    label="%"
-                    :value="(100 * 6 * topPick.Count / totalPicks).toFixed(2)"
-                    :entry="topPick" />
-      </div>
-
-      <div class="tile is-parent">
-        <talent-box class="tile is-child is-dark notification"
-                    title="Highest Level"
-                    type="Average Level"
-                    :value="(highestLevelAvg.Level).toFixed(2)"
-                    :entry="highestLevelAvg" />
-      </div>
-      <div class="tile is-parent">
-        <talent-box class="tile is-child is-dark notification"
-                    title="Lowest Level"
-                    type="Average Level"
-                    :value="(lowestLevelAvg.Level).toFixed(2)"
-                    :entry="lowestLevelAvg" />
-      </div>
-    </div>
-
-    <h2 class="title is-2">Blitz Hero Statistics</h2>
-    <report-table :report="report" :totalPicks="totalPicks"></report-table>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-import ReportTable from './ReportTable.vue';
-import TalentBox from './TalentBox.vue';
-
-export default Vue.component('blitz-tab', {
-  props: [ 'reportService' ],
-  data: function() {
-    return {
-      report: this.reportService.getReport('blitz_pvp_ranked'),
-      topWin: this.reportService.getTopWin('blitz_pvp_ranked'),
-      topPick: this.reportService.getTopPick('blitz_pvp_ranked'),
-      totalPicks: this.reportService.getTotalPicks('blitz_pvp_ranked'),
-      highestLevelAvg: this.reportService.getHighestLevelAvg('blitz_pvp_ranked'),
-      lowestLevelAvg: this.reportService.getLowestLevelAvg('blitz_pvp_ranked')
-    };
-  },
-  computed: {
-  },
-  components: {
-    ReportTable,
-    TalentBox,
-  },
-});
-</script>
diff --git a/src/HeroDraftGrid.vue b/src/HeroDraftGrid.vue
new file mode 100644
index 0000000..a130218
--- /dev/null
+++ b/src/HeroDraftGrid.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="box">
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-narrow" v-for="actor in actors" :key="actor">
+        <a v-on:click="selectedActor = actor">
+          <hero-image :actor="actor" :class="'is-48x48 ' + (selectedActor == actor? 'highlight-selection' : '')"></hero-image>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import '~bulma/sass/utilities/_all';
+@import '~bulma/sass/base/_all';
+@import '~bulma/sass/elements/button.sass';
+
+.highlight-selection {
+  border-color: $button-focus-border-color;
+  color: $button-focus-color;
+  box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+  transform: scale(1.25);
+}
+</style>
+
+<script>
+import Vue from 'vue';
+import TalentImage from './TalentImage.vue';
+import HeroImage from './HeroImage.vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-draft-grid', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      actors: this.reportService.getActors(),
+      getHero: maps.getHero,
+      getTalentName: maps.getTalentName,
+    };
+  },
+  computed: {
+    selectedActor: {
+      get: function() {
+        return this.$route.query.actor;
+      },
+      set: function(value) {
+        const query = Object.assign({}, this.$route.query, { actor: value });
+        this.$router.push({ query });
+      },
+    },
+  },
+  components: {
+    TalentImage,
+    HeroImage,
+  },
+});
+</script>
diff --git a/src/HeroImage.vue b/src/HeroImage.vue
new file mode 100644
index 0000000..fc1c677
--- /dev/null
+++ b/src/HeroImage.vue
@@ -0,0 +1,19 @@
+<template>
+  <figure class="image">
+    <img :src="`dist/assets/hero-icons/${hero.toLowerCase()}.png`" :style="round? 'border-radius: 50%' : ''">
+  </figure>
+</template>
+
+<script>
+import Vue from 'vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-image', {
+  props: [ 'actor', 'round' ],
+  computed: {
+    hero: function() {
+      return maps.getHero(this.actor);
+    },
+  },
+});
+</script>
diff --git a/src/HeroSearchBox.vue b/src/HeroSearchBox.vue
deleted file mode 100644
index a2ec4a9..0000000
--- a/src/HeroSearchBox.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<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">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span>{{ getTalentName(props.row.Talent) }}</span>
-            <talent-image :entry="props.row" :size="48"></talent-image>
-          </div>
-        </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,
-      getTalentName: maps.getTalentName,
-    };
-  },
-  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/HeroTalentTable.vue b/src/HeroTalentTable.vue
new file mode 100644
index 0000000..881d441
--- /dev/null
+++ b/src/HeroTalentTable.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="box">
+    <div style="display: flex; align-items: center; justify-content: space-between;">
+      <h3 class="title is-3">{{ getHero(selectedActor) }}</h3>
+      <hero-image :actor="selectedActor" class="is-64x64"></hero-image>
+    </div>
+
+    <b-table :data="heroReport"
+             :mobile-cards="false">
+      <template slot-scope="props">
+        <b-table-column field="Talent" label="Talent">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span>{{ getTalentName(props.row.Talent) }}</span>
+            <talent-image :entry="props.row" :size="48"></talent-image>
+          </div>
+        </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 HeroImage from './HeroImage.vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-talent-table', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      totalPicks: this.reportService.getTotalPicks('casual_aral'),
+      getHero: maps.getHero,
+      getTalentName: maps.getTalentName,
+    };
+  },
+  computed: {
+    selectedMode: {
+      get: function() {
+        return this.$route.query.mode;
+      },
+    },
+    heroReport: function() {
+      return this.reportService.getReport(this.selectedMode)
+          .filter((entry) => entry.Actor == this.selectedActor);
+    },
+    totalHeroPicks: function() {
+      return this.heroReport
+        .map((entry) => entry.Count)
+        .reduce((agg, cur) => agg + cur, 0);
+    },
+    selectedActor: {
+      get: function() {
+        return this.$route.query.actor;
+      },
+    },
+  },
+  components: {
+    TalentImage,
+    HeroImage,
+  },
+});
+</script>
diff --git a/src/Highlights.vue b/src/Highlights.vue
new file mode 100644
index 0000000..022c23d
--- /dev/null
+++ b/src/Highlights.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="columns is-multiline">
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Overpowered"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topWin.Winner)"
+                  :entry="stats.topWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Trending"
+                  type="Total Pick Rate"
+                  label="%"
+                  :value="(100 * 6 * stats.topPick.Count / stats.totalPicks).toFixed(2)"
+                  :entry="stats.topPick" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Highest Level"
+                  type="Average Level"
+                  :value="stats.highestLevelAvg.Level.toFixed(2)"
+                  :entry="stats.highestLevelAvg" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Lowest Level"
+                  type="Average Level"
+                  :value="stats.lowestLevelAvg.Level.toFixed(2)"
+                  :entry="stats.lowestLevelAvg" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import TalentBox from './TalentBox.vue';
+
+export default Vue.component('highlights', {
+  props: [ 'reportService' ],
+  computed: {
+    selectedMode: {
+      get: function() {
+        return this.$route.query.mode;
+      },
+    },
+    stats: function() {
+      return {
+        topWin: this.reportService.getTopWin(this.selectedMode),
+        topPick: this.reportService.getTopPick(this.selectedMode),
+        totalPicks: this.reportService.getTotalPicks(this.selectedMode),
+        highestLevelAvg: this.reportService.getHighestLevelAvg(this.selectedMode),
+        lowestLevelAvg: this.reportService.getLowestLevelAvg(this.selectedMode),
+      };
+    },
+  },
+  components: {
+    TalentBox,
+  },
+});
+</script>
diff --git a/src/Home.vue b/src/Home.vue
index 888d6d5..4983b5a 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -1,11 +1,7 @@
 <template>
-    <b-tabs v-model="tabIndex" expanded  type="is-toggle" >
-      <b-tab-item label="Blitz">
-        <blitz-tab :reportService="reportService"></blitz-tab>
-      </b-tab-item>
-
-      <b-tab-item label="Battle Royale">
-        <battle-royale-tab :reportService="reportService"></battle-royale-tab>
+    <b-tabs v-model="tabIndex" expanded type="is-toggle">
+      <b-tab-item v-for="mode in modes" :label="getMode(mode)">
+        <mode-tab :reportService="reportService"></mode-tab>
       </b-tab-item>
     </b-tabs>
   </div>
@@ -14,29 +10,31 @@
 
 <script>
 import Vue from 'vue';
-import BlitzTab from './BlitzTab.vue';
-import BattleRoyaleTab from './BattleRoyaleTab.vue';
-import ReportService from './report-service.js';
+import ModeTab from './ModeTab.vue';
+import * as maps from './maps/maps';
 
 export default Vue.component('home', {
   props: [ 'reportService' ],
   data: function() {
     return {
+      modes: this.reportService.getModes(),
+      getMode: maps.getMode,
     };
   },
   computed: {
     tabIndex: {
       get: function() {
-        return this.$route.query.tab;
+        return this.reportService.getModes().indexOf(this.$route.query.mode);
       },
-      set: function(value) {
-        this.$router.push({ query: { tab: value }});
+      set: function(index) {
+        const mode = this.reportService.getModes()[index];
+        const query = Object.assign({}, this.$route.query, { mode: mode });
+        this.$router.push({ query });
       },
     },
   },
   components: {
-    BlitzTab,
-    BattleRoyaleTab,
+    ModeTab,
   },
 });
 </script>
diff --git a/src/ModeTab.vue b/src/ModeTab.vue
new file mode 100644
index 0000000..e629ef0
--- /dev/null
+++ b/src/ModeTab.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="columns is-multiline">
+      <div class="column">
+        <h2 class="title is-2">Highlights</h2>
+        <highlights :reportService="reportService"></highlights>
+      </div>
+
+      <div class="column is-narrow">
+        <h2 class="title is-2">Top 10 Talents</h2>
+        <top-talents-box :reportService="reportService"></top-talents-box>
+      </div>
+    </div>
+
+    <div class="columns is-multiline">
+      <h2 class="title is-2">Individual Hero Statistics</h2>
+      <div class="column is-two-thirds">
+        <hero-draft-grid :reportService="reportService"></hero-draft-grid>
+      </div>
+      <div class="column is-one-third">
+        <hero-talent-table :reportService="reportService"></hero-talent-table>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="title is-2">All Hero Statistics</h2>
+      <report-table :reportService="reportService"></report-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Highlights from './Highlights.vue';
+import TopTalentsBox from './TopTalentsBox.vue';
+import HeroDraftGrid from './HeroDraftGrid.vue';
+import HeroTalentTable from './HeroTalentTable.vue';
+import ReportTable from './ReportTable.vue';
+
+export default Vue.component('mode-tab', {
+  props: [ 'reportService' ],
+  components: {
+    Highlights,
+    TopTalentsBox,
+    HeroDraftGrid,
+    HeroTalentTable,
+    ReportTable,
+  },
+});
+</script>
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index f36dac9..254b6f4 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -5,20 +5,36 @@
              :default-sort-directon="'desc'">
       <template slot-scope="props">
         <b-table-column field="Actor" label="Hero" sortable>
-          <div style="display: flex; align-items: center">
-          <figure class="image is-48x48" style="padding: 5px; display: flex; align-items: center;">
-            <img style="border-radius: 50%;"
-                 :src="'dist/assets/hero-icons/' + getHero(props.row.Actor).toLowerCase() + '.png'"
-                 :alt="getHero(props.row.Actor)">
-          </figure>
-          <span>{{ getHero(props.row.Actor) }}</span>
+          <!-- desktop, table view -->
+          <div class="is-hidden-touch">
+            <div style="display: flex; align-items: center">
+              <hero-image round="true" :actor="props.row.Actor" class="is-48x48"></hero-image>
+              <span style="padding-left: 0.75em">{{ getHero(props.row.Actor) }}</span>
+            </div>
+          </div>
+          <!-- mobile, card view -->
+          <div class="is-hidden-desktop">
+            <div style="display: flex; align-items: center">
+              <span style="padding-right: 0.5em">{{ getHero(props.row.Actor) }}</span>
+              <hero-image round="true" :actor="props.row.Actor" class="is-48x48"></hero-image>
+            </div>
           </div>
         </b-table-column>
 
         <b-table-column field="Talent" label="Talent">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <span>{{ getTalentName(props.row.Talent) }}</span>
-            <talent-image :entry="props.row" :size="48"></talent-image>
+          <!-- desktop, table view -->
+          <div class="is-hidden-touch">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <span>{{ getTalentName(props.row.Talent) }}</span>
+              <talent-image :entry="props.row" :size="48"></talent-image>
+            </div>
+          </div>
+          <!-- mobile, card view -->
+          <div class="is-hidden-desktop">
+            <div style="display: flex; align-items: center">
+              <span style="padding-right: 0.5em">{{ getTalentName(props.row.Talent) }}</span>
+              <talent-image :entry="props.row" :size="48"></talent-image>
+            </div>
           </div>
         </b-table-column>
 
@@ -49,17 +65,32 @@
 
 <script>
 import Vue from 'vue';
+import HeroImage from './HeroImage.vue';
 import * as maps from './maps/maps';
 
 export default Vue.component('report-table', {
-  props: [ 'report', 'totalPicks' ],
+  props: [ 'reportService' ],
   data: function() {
     return {
       getTalentName: maps.getTalentName,
-      getHero: maps.getHero
+      getHero: maps.getHero,
     };
   },
   computed: {
+    selectedMode: {
+      get: function() {
+        return this.$route.query.mode;
+      },
+    },
+    report: function() {
+      return this.reportService.getReport(this.selectedMode);
+    },
+    totalPicks: function() {
+      return this.reportService.getTotalPicks(this.selectedMode);
+    },
+  },
+  components: {
+    HeroImage,
   },
 });
 </script>
diff --git a/src/TalentBox.vue b/src/TalentBox.vue
index d9f220e..ee30717 100644
--- a/src/TalentBox.vue
+++ b/src/TalentBox.vue
@@ -1,8 +1,7 @@
 <template>
 <div>
   <p class="title-box">{{ title }}</p>
-  <div class="columns">
-
+  <div class="columns is-mobile">
     <div class="column is-centered">
       <figure class="image is-64x64 hero-image-slot">
         <img class="hero-image" :src="'dist/assets/hero-icons/' + hero.toLowerCase() + '.png'" :alt="entry.Actor">
@@ -46,7 +45,6 @@
 
 .hero-name {
   font-size: 18px;
-  /* margin-bottom: 10px; */
 }
 
 .value {
@@ -62,19 +60,19 @@
 
 
 <script>
-import Vue from "vue";
-import TalentImage from "./TalentImage.vue";
-import * as maps from "./maps/maps";
+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", "type", "value", "label"],
-  data: function() {
-    return {
-      hero: maps.getHero(this.entry.Actor),
-    };
+export default Vue.component('talent-box', {
+  props: ['title', 'content', 'entry', 'type', 'value', 'label'],
+  computed: {
+    hero: function() {
+      return maps.getHero(this.entry.Actor);
+    },
   },
   components: {
-    TalentImage
+    TalentImage,
   }
 });
 </script>
diff --git a/src/TalentImage.vue b/src/TalentImage.vue
index b7cb78c..3e3c2db 100644
--- a/src/TalentImage.vue
+++ b/src/TalentImage.vue
@@ -20,19 +20,13 @@ import * as maps from './maps/maps';
 
 export default Vue.component('talent-image', {
   props: [ 'entry', 'size' ],
-  data: function() {
-    return {
-      hero: maps.getHero(this.entry.Actor),
-      rarity: maps.getTalentRarity(this.entry.Talent),
-    };
+  computed: {
+    hero: function() {
+      return maps.getHero(this.entry.Actor);
+    },
+    rarity: function() {
+      return maps.getTalentRarity(this.entry.Talent);
+    },
   },
-
-  watch: {
-    entry: function(newEntry, oldEntry) {
-      // This is needed so component will recalculate whenever there is a change on entry
-      this.hero = maps.getHero(this.entry.Actor);
-      this.rarity = maps.getTalentRarity(this.entry.Talent);
-    }
-  }
 });
 </script>
diff --git a/src/TopTalentsBox.vue b/src/TopTalentsBox.vue
new file mode 100644
index 0000000..e0e7cfb
--- /dev/null
+++ b/src/TopTalentsBox.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="box">
+    <b-table :data="top10Talents"
+             :default-sort="['Count', 'desc']"
+             :default-sort-directon="'desc'"
+             :mobile-cards="false">
+      <template slot-scope="props">
+        <b-table-column field="Actor" label="Hero">
+          <hero-image :actor="props.row.Actor" class="is-square"></hero-image>
+        </b-table-column>
+
+        <b-table-column field="Talent" label="Talent">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <span>{{ getTalentName(props.row.Talent) }}</span>
+            <talent-image :entry="props.row" :size="48"></talent-image>
+          </div>
+        </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 HeroImage from './HeroImage.vue';
+import * as maps from './maps/maps';
+
+export default Vue.component('hero-search-box', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      getHero: maps.getHero,
+      getTalentName: maps.getTalentName,
+    };
+  },
+  computed: {
+    selectedMode: {
+      get: function() {
+        return this.$route.query.mode;
+      },
+    },
+    top10Talents: function() {
+      return this.reportService.getTop10Picks(this.selectedMode);
+    },
+    totalPicks: function() {
+      return this.reportService.getTotalPicks(this.selectedMode);
+    },
+  },
+  components: {
+    TalentImage,
+    HeroImage,
+  },
+});
+</script>
diff --git a/src/maps/maps.js b/src/maps/maps.js
index 01c89ad..dbb7056 100644
--- a/src/maps/maps.js
+++ b/src/maps/maps.js
@@ -1,5 +1,6 @@
 const rarities = require('./rarities.json');
 const names = require('./names.json');
+const modes = require('./modes.json');
 
 function getTalentName(talent) {
   if (talent == 'NoTalent') {
@@ -42,12 +43,22 @@ function getTalentRarity(talent) {
   }
 }
 
+function getTalentRarityIndex(talent) {
+  return ['No Talent', 'Rare', 'Epic', 'Legendary'];
+}
+
 function getHero(actor) {
   return actor.substring(1, actor.length - 1);
 }
 
+function getMode(mode) {
+  return modes[mode];
+}
+
 module.exports = {
   getTalentName,
   getTalentRarity,
+  getTalentRarityIndex,
   getHero,
+  getMode,
 };
diff --git a/src/maps/modes.json b/src/maps/modes.json
new file mode 100644
index 0000000..e683464
--- /dev/null
+++ b/src/maps/modes.json
@@ -0,0 +1,8 @@
+{
+  "blitz_pvp_ranked": "Blitz",
+  "casual_aral": "Battle Royale",
+  "ranked": "3v3 Ranked",
+  "5v5_pvp_ranked": "5v5 Ranked",
+  "casual": "3v3 Casual",
+  "5v5_casual": "5v5 Casual"
+}
diff --git a/src/report-service.js b/src/report-service.js
index 98b7bfa..91ef15d 100644
--- a/src/report-service.js
+++ b/src/report-service.js
@@ -7,14 +7,20 @@ export default class ReportService {
 
     this.reports = {};
     this.totalPicks = {};
+    this.top10Relevancy = {};
     this.topPicks = {};
     this.topWins = {};
     this.topLeveledUp = {};
     this.topLeveledDown = {};
+    this.actors = [];
+    this.modes = MODES;
 
     for(let mode of MODES) {
+      const relevancy = (entry) => (entry.Count / this.totalPicks[mode]) * (entry.Winner / entry.Count);
+
       this.reports[mode] = this.report.filter((entry) => entry.Mode == mode);
       this.totalPicks[mode] = this.report.map((entry) => entry.Count).reduce((agg, cur) => agg + cur, 0);
+      this.top10Relevancy[mode] = this.reports[mode].sort((entry1, entry2) => relevancy(entry2) - relevancy(entry1)).slice(0, 10);
       this.topPicks[mode] = this.reports[mode].sort((entry1, entry2) => entry2.Count - entry1.Count)[0];
       this.topWins[mode] = this.reports[mode]
         .filter((entry) => 100 * 6 * entry.Count / this.totalPicks[mode] > 0.05)
@@ -30,6 +36,10 @@ export default class ReportService {
 
         return entry1.Level < entry2.Level ? -1 : 1;
       })[0];
+
+      if (this.actors.length == 0) {
+        this.actors = [...new Set(this.reports[mode].map((entry) => entry.Actor))];
+      }
     }
   }
 
@@ -45,6 +55,10 @@ export default class ReportService {
     return this.topPicks[mode];
   }
 
+  getTop10Picks(mode) {
+    return this.top10Relevancy[mode];
+  }
+
   getHighestLevelAvg(mode) {
     return this.topLeveledUp[mode];
   }
@@ -56,4 +70,12 @@ export default class ReportService {
   getTopWin(mode) {
     return this.topWins[mode];
   }
+
+  getActors() {
+    return this.actors;
+  }
+
+  getModes() {
+    return this.modes;
+  }
 }
-- 
cgit v1.3.1