Add more highlights

5 files changed, 95 insertions, 11 deletions

diff --git a/src/Highlights.vue b/src/Highlights.vue
index 022c23d..b98e792 100644
--- a/src/Highlights.vue
+++ b/src/Highlights.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="columns is-multiline">
+  <div class="columns is-multiline is-mobile">
     <div class="column">
       <talent-box class="is-dark notification"
                   title="Overpowered"
@@ -20,6 +20,15 @@
 
     <div class="column">
       <talent-box class="is-dark notification"
+                  title="Hidden Gem"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topUnpopularWin.Winner)"
+                  :entry="stats.topUnpopularWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
                   title="Highest Level"
                   type="Average Level"
                   :value="stats.highestLevelAvg.Level.toFixed(2)"
@@ -33,6 +42,34 @@
                   :value="stats.lowestLevelAvg.Level.toFixed(2)"
                   :entry="stats.lowestLevelAvg" />
     </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Rare"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topRareWin.Winner)"
+                  :entry="stats.topRareWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Epic"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topEpicWin.Winner)"
+                  :entry="stats.topEpicWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Legendary"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topLegendaryWin.Winner)"
+                  :entry="stats.topLegendaryWin" />
+    </div>
+
   </div>
 </template>
 
@@ -51,9 +88,13 @@ export default Vue.component('highlights', {
     stats: function() {
       return {
         topWin: this.reportService.getTopWin(this.selectedMode),
+        topUnpopularWin: this.reportService.getTopUnpopularWin(this.selectedMode),
         topPick: this.reportService.getTopPick(this.selectedMode),
         totalPicks: this.reportService.getTotalPicks(this.selectedMode),
         highestLevelAvg: this.reportService.getHighestLevelAvg(this.selectedMode),
+        topRareWin: this.reportService.getTopRareWins(this.selectedMode),
+        topEpicWin: this.reportService.getTopEpicWins(this.selectedMode),
+        topLegendaryWin: this.reportService.getTopLegendaryWins(this.selectedMode),
         lowestLevelAvg: this.reportService.getLowestLevelAvg(this.selectedMode),
       };
     },
diff --git a/src/TalentBox.vue b/src/TalentBox.vue
index ee30717..f7f2694 100644
--- a/src/TalentBox.vue
+++ b/src/TalentBox.vue
@@ -3,15 +3,14 @@
   <p class="title-box">{{ title }}</p>
   <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">
-      </figure>
-      <p class="hero-name">{{ hero }}</p>
+      <hero-image :actor="entry.Actor" class="is-64x64 hero-image-slot"></hero-image>
+      <span class="hero-name">{{ hero }}</span>
     </div>
     <div class="column value is-centered">
-      <talent-image :entry="entry" :size="64"></talent-image>
-        {{ value }}{{ label }}
-        <div class="type">{{ type }}</div>
+      <talent-image v-if="hasTalent" :entry="entry" :size="64"></talent-image>
+      <span v-else>No Talent</span>
+      <span>{{ value }}{{ label }}</span>
+      <span class="type">{{ type }}</span>
     </div>
     </div>
   </div>
@@ -62,6 +61,7 @@
 <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('talent-box', {
@@ -70,9 +70,13 @@ export default Vue.component('talent-box', {
     hero: function() {
       return maps.getHero(this.entry.Actor);
     },
+    hasTalent: function() {
+      return maps.getTalentRarity(this.entry.Talent) != 'None';
+    },
   },
   components: {
     TalentImage,
+    HeroImage,
   }
 });
 </script>
diff --git a/src/TalentImage.vue b/src/TalentImage.vue
index b409e53..4a8ffaa 100644
--- a/src/TalentImage.vue
+++ b/src/TalentImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="rarity !== 'unknown' && rarity"
+  <div v-if="rarity != 'None'"
        class="talent-image"
        :style="`background-image: url('dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.png'); width: ${size}px; height: ${size}px`"
        :alt="`${hero} ${rarity}`"
diff --git a/src/maps/maps.js b/src/maps/maps.js
index dbb7056..94db68a 100644
--- a/src/maps/maps.js
+++ b/src/maps/maps.js
@@ -26,7 +26,7 @@ function getTalentName(talent) {
 }
 
 function getTalentRarity(talent) {
-  if (talent == 'No Talent') {
+  if (talent == 'NoTalent') {
     return 'None';
   }
 
diff --git a/src/report-service.js b/src/report-service.js
index 91ef15d..9fdbbf3 100644
--- a/src/report-service.js
+++ b/src/report-service.js
@@ -1,4 +1,7 @@
+import * as maps from './maps/maps';
+
 const MODES = [ 'casual_aral', 'blitz_pvp_ranked' ];
+const POPULAR_THRESHOLD = 0.1;
 
 export default class ReportService {
   constructor() {
@@ -10,8 +13,12 @@ export default class ReportService {
     this.top10Relevancy = {};
     this.topPicks = {};
     this.topWins = {};
+    this.topRareWins = {};
+    this.topEpicWins = {};
+    this.topLegendaryWins = {};
     this.topLeveledUp = {};
     this.topLeveledDown = {};
+    this.topUnpopularWins = {};
     this.actors = [];
     this.modes = MODES;
 
@@ -23,7 +30,19 @@ export default class ReportService {
       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)
+        .filter((entry) => 100 * 6 * entry.Count / this.totalPicks[mode] > POPULAR_THRESHOLD)
+        .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+      this.topUnpopularWins[mode] = this.reports[mode]
+        .filter((entry) => 100 * 6 * entry.Count / this.totalPicks[mode] <= POPULAR_THRESHOLD)
+        .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+      this.topRareWins[mode] = this.reports[mode]
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Rare' && 100 * 6 * entry.Count / this.totalPicks[mode] > POPULAR_THRESHOLD)
+        .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+      this.topEpicWins[mode] = this.reports[mode]
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Epic' && 100 * 6 * entry.Count / this.totalPicks[mode] > POPULAR_THRESHOLD)
+        .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+      this.topLegendaryWins[mode] = this.reports[mode]
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Legendary' && 100 * 6 * entry.Count / this.totalPicks[mode] > POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
       this.topLeveledUp[mode] = this.reports[mode].sort((entry1, entry2) => {
         if (!entry1.Level) return 1;
@@ -71,6 +90,26 @@ export default class ReportService {
     return this.topWins[mode];
   }
 
+  getTopUnpopularWin(mode) {
+    return this.topUnpopularWins[mode];
+  }
+
+  getTopRareWins(mode) {
+    return this.topRareWins[mode];
+  }
+
+  getTopEpicWins(mode) {
+    return this.topEpicWins[mode];
+  }
+
+  getTopLegendaryWins(mode) {
+    return this.topLegendaryWins[mode];
+  }
+
+  getBestUnpopular(mode) {
+    return this.topUnpopular[mode];
+  }
+
   getActors() {
     return this.actors;
   }