New Header and style

7 files changed, 191 insertions, 39 deletions

diff --git a/src/App.vue b/src/App.vue
index 4c0911b..d421c8b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,37 @@
 <template>
   <div class="container">
-    <section class="hero">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">Vainglory Broken Talents Fun Statistics</h1>
-          <h2 class="subtitle">Tilting Brawlers since May 2017</h2>
+<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>
         </div>
       </div>
-    </section>
+    </div>
+  </div>
+</section>
 
     <router-view></router-view>
   </div>
 </template>
+
+
+<style scoped>
+  .header {
+    text-align: center;
+  }
+
+  .search {
+    width: 500px;
+    margin: 0 auto
+  }
+</style>
diff --git a/src/BlitzTab.vue b/src/BlitzTab.vue
index 5d711a2..f8d1b54 100644
--- a/src/BlitzTab.vue
+++ b/src/BlitzTab.vue
@@ -2,19 +2,36 @@
   <div>
     <div class="tile is-ancestor">
       <div class="tile is-parent">
-        <talent-box class="tile is-child is-warning notification"
-                    title="Overpowered!"
-                    :entry="topWin">
-          {{ Math.round(100 * topWin.Winner) }}% Win Rate
-        </talent-box>
+        <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-success notification"
+        <talent-box class="tile is-child is-dark notification"
                     title="Trending"
-                    :entry="topPick">
-          {{ (100 * 6 * topPick.Count / totalPicks).toFixed(2) }}% Pick Rate
-        </talent-box>
+                    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 Leveled Up"
+                    type="Avg 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 Leveled Up"
+                    type="Avg Level"
+                    :value="(lowestLevelAvg.Level).toFixed(2)"
+                    :entry="lowestLevelAvg" />
       </div>
     </div>
 
@@ -36,6 +53,8 @@ export default Vue.component('blitz-tab', {
       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: {
diff --git a/src/Home.vue b/src/Home.vue
index c0fef32..888d6d5 100644
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-tabs v-model="tabIndex">
+    <b-tabs v-model="tabIndex" expanded  type="is-toggle" >
       <b-tab-item label="Blitz">
         <blitz-tab :reportService="reportService"></blitz-tab>
       </b-tab-item>
@@ -11,6 +11,7 @@
   </div>
 </template>
 
+
 <script>
 import Vue from 'vue';
 import BlitzTab from './BlitzTab.vue';
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index 00ef643..e0e622f 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -5,17 +5,28 @@
              :default-sort-directon="'desc'">
       <template slot-scope="props">
         <b-table-column field="Actor" label="Hero" sortable>
-          {{ props.row.Actor.substring(1, props.row.Actor.length - 1) }}
+          <div style="display: flex; align-items: center">
+          <figure class="image is-48x48" style="padding: 5px;">
+            <img style="border-radius: 50%;" :src="'dist/assets/hero-icons/' + getHero(props.row.Actor) + '.png'" :alt="getHero(props.row.Actor)">
+          </figure>
+          {{ getHero(props.row.Actor) }}
+          </div>
         </b-table-column>
 
         <b-table-column field="Talent" label="Talent">
-          {{ getTalentName(props.row.Talent) }}
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            {{ getTalentName(props.row.Talent) }}
+            <talent-image :entry="props.row" :size="48"></talent-image>
+          </div>
         </b-table-column>
 
         <b-table-column field="Level" label="Average Level" sortable numeric>
           <template v-if="!!props.row.Level">
             {{ props.row.Level.toFixed(2) }}
           </template>
+          <template v-if="!props.row.Level">
+            0
+          </template>
         </b-table-column>
 
         <b-table-column field="Winner" label="Win Rate" sortable numeric>
@@ -43,6 +54,7 @@ export default Vue.component('report-table', {
   data: function() {
     return {
       getTalentName: maps.getTalentName,
+      getHero: maps.getHero
     };
   },
   computed: {
diff --git a/src/TalentBox.vue b/src/TalentBox.vue
index d372f20..91252f4 100644
--- a/src/TalentBox.vue
+++ b/src/TalentBox.vue
@@ -1,36 +1,95 @@
 <template>
-  <div class="box">
-    <p class="title">{{ title }}</p>
-    <article class="media">
-      <div class="media-left">
-        <figure class="image is-64x64">
-          <img :src="'dist/assets/hero-icons/' + hero + '.png'" :alt="entry.Actor">
-        </figure>
-        <talent-image :entry="entry"></talent-image>
-      </div>
+  <!-- <div class="box">
       <div class="media-content">
         <div class="content">
+          
+          <figure class="image hero-image-slot">
+            <img class="hero-image" :src="'dist/assets/hero-icons/' + hero + '.png'" :alt="entry.Actor">
+          </figure>
+          
+          <talent-image :entry="entry"></talent-image>
           <slot></slot>
         </div>
       </div>
     </article>
+  </div> -->
+<div>
+  <p class="title-box">{{ title }}</p>
+  <div class="columns">
+
+    <div class="column is-centered">
+      <figure class="image is-64x64 hero-image-slot">
+        <img class="hero-image" :src="'dist/assets/hero-icons/' + hero + '.png'" :alt="entry.Actor">
+      </figure>
+      <p class="hero-name">{{entry.Actor.replace(/\*/g, "")}}</p>
+    </div>
+    <div class="column value is-centered">
+      
+      <talent-image :entry="entry" :size="64"></talent-image>
+        {{ value }}{{ label }}
+        <div class="type">{{ type }}</div>
+    </div>
+    </div>
   </div>
 </template>
 
+<style scoped>
+.title-box {
+  font-size: 20px;
+  text-transform: uppercase;
+}
+.is-centered {
+  display: flex;
+  /* flex-align: center; */
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.hero-image-slot {
+  display: inline-block;
+}
+
+.hero-image {
+  /* width: 128px;
+    height: 128px; */
+  /* border-radius: 50%; */
+  overflow: hidden;
+  border: 5px solid rgba(27, 40, 56, 0.1);
+}
+
+.hero-name {
+  font-size: 18px;
+  /* margin-bottom: 10px; */
+}
+
+.value {
+  font-size: 24px;
+  text-align: center;
+}
+.value .type {
+  position: absolute;
+  bottom: 5px;
+  font-size: 14px;
+}
+</style>
+
+
 <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' ],
+export default Vue.component("talent-box", {
+  props: ["title", "content", "entry", "type", "value", "label"],
   data: function() {
     return {
-      hero: maps.getHero(this.entry.Actor).toLowerCase(),
+      hero: maps.getHero(this.entry.Actor).toLowerCase()
     };
   },
   components: {
-    TalentImage,
-  },
+    TalentImage
+  }
 });
 </script>
diff --git a/src/TalentImage.vue b/src/TalentImage.vue
index ccf3147..b52887e 100644
--- a/src/TalentImage.vue
+++ b/src/TalentImage.vue
@@ -1,20 +1,37 @@
 <template>
-  <figure class="image is-64x64">
-    <img :src="'dist/assets/talent-icons-small/' + hero + '/' + hero + '_' + rarity + '.png'" :alt="hero + ' ' + rarity">
-  </figure>
+  <div v-if="rarity !== 'unknown' && rarity" class="talent-image" :style="`background-image: url('dist/assets/talent-icons-small/${hero}/${hero}_${rarity}.png'); width: ${size}px; height: ${size}px`">
+  </div>
 </template>
 
+<style scoped>
+  .talent-image {
+    /* background-color: red; */
+    background-size: 150px;
+    border-radius: 50%;
+    background-position: center center;
+  }
+</style>
+
+
 <script>
 import Vue from 'vue';
 import * as maps from './maps/maps';
 
 export default Vue.component('talent-image', {
-  props: [ 'entry' ],
+  props: [ 'entry', 'size' ],
   data: function() {
     return {
       hero: maps.getHero(this.entry.Actor),
       rarity: 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/report-service.js b/src/report-service.js
index feddec5..c9da174 100644
--- a/src/report-service.js
+++ b/src/report-service.js
@@ -8,6 +8,8 @@ export default class ReportService {
     this.totalPicks = {};
     this.topPicks = {};
     this.topWins = {};
+    this.topLeveledUp = {};
+    this.topLeveledDown = {};
 
     for(let mode of MODES) {
       this.reports[mode] = this.report.filter((entry) => entry.Mode == mode);
@@ -16,6 +18,17 @@ export default class ReportService {
       this.topWins[mode] = this.reports[mode]
         .filter((entry) => 100 * 6 * entry.Count / this.totalPicks[mode] > 0.05)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+      this.topLeveledUp[mode] = this.reports[mode].sort((entry1, entry2) => {
+        if (!entry1.Level) return 1;
+        if (!entry2.Level) return -1;
+        return entry1.Level < entry2.Level ? 1 : -1;
+      })[0];
+      this.topLeveledDown[mode] = this.reports[mode].sort((entry1, entry2) => {
+        if (!entry1.Level) return 1;
+        if (!entry2.Level) return -1;
+
+        return entry1.Level < entry2.Level ? -1 : 1;
+      })[0];
     }
   }
 
@@ -31,6 +44,14 @@ export default class ReportService {
     return this.topPicks[mode];
   }
 
+  getHighestLevelAvg(mode) {
+    return this.topLeveledUp[mode];
+  }
+
+  getLowestLevelAvg(mode) {
+    return this.topLeveledDown[mode];
+  }
+
   getTopWin(mode) {
     return this.topWins[mode];
   }