first frontend proof of concept

5 files changed, 169 insertions, 6 deletions

diff --git a/src/App.vue b/src/App.vue
index 3335de9..faed617 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,89 @@
 <template>
-  <h1>{{ message }}</h1>
+  <div class="container">
+    <section class="hero">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Broken Talents Fun
+          </h1>
+          <h2 class="subtitle">
+            Tilting since 2017
+          </h2>
+        </div>
+      </div>
+    </section>
+
+    <section>
+        <b-tabs v-model="activeTab">
+            <b-tab-item label="Blitz">
+                <div class="tile is-ancestor">
+                  <div class="tile is-parent">
+                      <report-tile class="tile is-child is-warning notification"
+                                   title="Overpowered!"
+                                   :entry="topWins.blitz_pvp_ranked">
+                        {{ Math.round(100 * topWins.blitz_pvp_ranked.Winner) }}% Win Rate
+                      </report-tile>
+                 </div>
+
+                  <div class="tile is-parent">
+                      <report-tile class="tile is-child is-success notification"
+                                   title="Trending"
+                                   :entry="topPicks.blitz_pvp_ranked">
+                        {{ (100 * 6 * topPicks.blitz_pvp_ranked.Count / totalPicks.blitz_pvp_ranked).toFixed(2) }}% Pick Rate
+                      </report-tile>
+                  </div>
+                </div>
+
+                <h2 class="title is-2">Blitz Hero Statistics</h2>
+                <report-table :report="reports.blitz_pvp_ranked" :totalPicks="totalPicks.blitz_pvp_ranked"></report-table>
+            </b-tab-item>
+
+            <b-tab-item label="Battle Royale">
+                <h2 class="title is-2">Battle RoyaleHero Statistics</h2>
+                <report-table :report="reports.casual_aral" :totalPicks="totalPicks.casual_aral"></report-table>
+            </b-tab-item>
+        </b-tabs>
+    </section>
+  </div>
 </template>
 
 <script>
+import report from '../data/98aae7f0/report.json';
+import ReportTable from './ReportTable.vue';
+import ReportTile from './ReportTile.vue';
+
+const MODES = [
+  'casual_aral', 'blitz_pvp_ranked'
+];
+
+const reports = {};
+const totalPicks = {};
+const topPicks = {};
+const topWins = {};
+
+for(let mode of MODES) {
+  reports[mode] = report.filter((entry) => entry.Mode == mode);
+  totalPicks[mode] = report.map((entry) => entry.Count).reduce((agg, cur) => agg + cur, 0);
+  topPicks[mode] = reports[mode].sort((entry1, entry2) => entry2.Count - entry1.Count)[0];
+  topWins[mode] = reports[mode]
+          .filter((entry) => 100 * 6 * entry.Count / totalPicks[mode] > 0.05)
+          .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+}
+
 export default {
   name: 'app',
-  data() {
+  data: function() {
     return {
-      message: 'Hello, Vue!'
+      reports,
+      topPicks,
+      topWins,
+      totalPicks,
+      activeTab: 0,
     };
-  }
+  },
+  components: {
+    ReportTable,
+    ReportTile,
+  },
 };
 </script>
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
new file mode 100644
index 0000000..161585a
--- /dev/null
+++ b/src/ReportTable.vue
@@ -0,0 +1,54 @@
+<template>
+  <section>
+    <b-table :data="report"
+             :default-sort="['Count', 'desc']"
+             :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) }}
+          </b-table-column>
+
+          <b-table-column field="Talent" label="Talent">
+              <template v-if="!!props.row.Talent && props.row.Talent != 'NoTalent'">
+              {{ props.row.Talent.substring(props.row.Talent.lastIndexOf('_') + 1, props.row.Talent.length - 1) }}
+              </template>
+              <template v-else>
+              (none)
+              </template>
+          </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>
+          </b-table-column>
+
+          <b-table-column field="Winner" label="Win Rate" sortable numeric>
+              <template v-if="!!props.row.Winner">
+              {{ (100 * props.row.Winner).toFixed(2) }}%
+              </template>
+          </b-table-column>
+
+          <b-table-column field="Count" label="Pick Rate" sortable numeric>
+              <template v-if="!!props.row.Count">
+              {{ (100 * 6 * props.row.Count / totalPicks).toFixed(2) }}%
+              </template>
+          </b-table-column>
+        </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.component('report-table', {
+    props: [ 'report', 'totalPicks' ],
+    data: function() {
+      return {
+      };
+    },
+    computed: {
+    },
+});
+</script>
diff --git a/src/ReportTile.vue b/src/ReportTile.vue
new file mode 100644
index 0000000..3d5479d
--- /dev/null
+++ b/src/ReportTile.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="box">
+    <p class="title">{{ title }}</p>
+    <article class="media">
+      <div class="media-left">
+        <figure class="image is-64x64">
+          <img src="" :alt="entry.Actor">
+        </figure>
+        <figure class="image is-64x64">
+          <img src="" :alt="entry.Talent">
+        </figure>
+      </div>
+      <div class="media-content">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+export default Vue.component('report-tile', {
+    props: [ 'title', 'content', 'entry' ],
+    data: function() {
+      return {
+      };
+    },
+    computed: {
+    },
+});
+</script>
diff --git a/src/index.html b/src/index.html
index fd3fe13..26a50f2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>BrokenTalents</title>
+    <title>Broken Talents Fun</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></head>
   <body>
     <div id="app"></div>
diff --git a/src/index.js b/src/index.js
index be00b70..8f584ce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import 'buefy/lib/buefy.css'
 
 import App from './App.vue';
 
-Vue.use(Buefy)
+Vue.use(Buefy);
 
 new Vue({
   el: '#app',