Show gpm/xpm on hover

waylaidwanderer · Dec 6, 2016 · d0ff867 · d0ff867
1 parent 7c3dfd4
commit d0ff867
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/app/app.html b/app/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html xmlns:v-on="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="utf-8">
     <title>{{ title }}</title>
@@ -58,14 +58,15 @@
                                 <li class="header" data-state="open">
                                     <div class="collapsible-header green darken-2">Radiant</div>
                                 </li>
-                                <li v-for="player in players">
+                                <li v-for="player in players" class="player">
                                     <div class="collapsible-header primary" :class="[player.status == 15 ? '' : 'active']"><img class="circle" :src="player.user.avatarmedium"/>{{ player.user.personaname }} <a class="secondary-text" :href="player.user.profileurl" target="_blank">[Steam]</a> <a class="secondary-text" :href="'http://www.dotabuff.com/players/' + player.accountId" target="_blank">[Dotabuff]</a> <a class="secondary-text" :href="'http://opendota.com/players/' + player.accountId" target="_blank">[OpenDota]</a> <span class="material-icons">person</span> {{ player.solo_mmr }} <span class="material-icons">people</span> {{ player.party_mmr }} <span class="material-icons">help</span> {{ player.estimated_mmr }}</div>
                                     <div class="collapsible-body">
                                         <div v-for="hero in player.heroes" :class="[hero.match_id === undefined ? 'hidden' : '']">
                                             <a class="white-text" :href="'http://www.dotabuff.com/matches/' + hero.match_id" target="_blank">
                                                 <img :src="hero.img"/>
                                                 <div class="center" :class="[hero.win ? 'won' : 'lost']">
-                                                    {{ hero.kda }}
+                                                    <span class="gpm-xpm" style="display: none; font-size: 12px">{{ hero.gpm }}<span style="font-size: 9px; display: inline;">GPM</span> {{ hero.xpm }}<span style="font-size: 9px; display: inline;">XPM</span></span>
+                                                    <span class="kda" style="display: block;">{{ hero.kda }}</span>
                                                 </div>
                                             </a>
                                         </div>
@@ -78,14 +79,15 @@
                                 <li class="header" data-state="open">
                                     <div class="collapsible-header materialize-red darken-4">Dire</div>
                                 </li>
-                                <li v-for="player in players">
+                                <li v-for="player in players" class="player">
                                     <div class="collapsible-header primary" :class="[player.status == 15 ? '' : 'active']"><img class="circle" :src="player.user.avatarmedium"/>{{ player.user.personaname }} <a class="secondary-text" :href="player.user.profileurl" target="_blank">[Steam]</a> <a class="secondary-text" :href="'http://www.dotabuff.com/players/' + player.accountId" target="_blank">[Dotabuff]</a> <a class="secondary-text" :href="'http://opendota.com/players/' + player.accountId" target="_blank">[OpenDota]</a> <span class="material-icons">person</span> {{ player.solo_mmr }} <span class="material-icons">people</span> {{ player.party_mmr }} <span class="material-icons">help</span> {{ player.estimated_mmr }}</div>
                                     <div class="collapsible-body">
                                         <div v-for="hero in player.heroes" :class="[hero.match_id === undefined ? 'hidden' : '']">
                                             <a class="white-text" :href="'http://www.dotabuff.com/matches/' + hero.match_id" target="_blank">
                                                 <img :src="hero.img"/>
                                                 <div class="center" :class="[hero.win ? 'won' : 'lost']">
-                                                    {{ hero.kda }}
+                                                    <span class="gpm-xpm" style="display: block; font-size: 12px">{{ hero.gpm }}<span style="font-size: 9px; display: inline;">GPM</span> {{ hero.xpm }}<span style="font-size: 9px; display: inline;">XPM</span></span>
+                                                    <span class="kda" style="display: block;">{{ hero.kda }}</span>
                                                 </div>
                                             </a>
                                         </div>

diff --git a/src/lib/listeners.js b/src/lib/listeners.js
@@ -57,3 +57,11 @@ document.addEventListener("keydown", function (e) {
         location.reload();
     }
 });
+
+$('.players').mouseenter(function() {
+    $(this).find('.kda').hide();
+    $(this).find('.gpm-xpm').fadeIn('fast');
+}).mouseleave(function() {
+    $(this).find('.gpm-xpm').hide();
+    $(this).find('.kda').fadeIn('fast');
+});
diff --git a/src/lib/stats.js b/src/lib/stats.js
@@ -262,11 +262,15 @@ function renderMatchHistory(numPlayers, playerIndex, teamIndex, steamId, player,
                     getMatchDetails(match.match_id, details => resolve(details));
                 }).then(details => {
                     let kda = 'N/A';
+                    let xpm = 0;
+                    let gpm = 0;
                     let win = true;
                     for (let i = 0; i < details.players.length; i++) {
                         let detailPlayer = details.players[i];
                         if (detailPlayer.account_id != steamId.accountid) continue;
                         kda = detailPlayer.kills + '/' + detailPlayer.deaths + '/' + detailPlayer.assists;
+                        xpm = detailPlayer.xp_per_min;
+                        gpm = detailPlayer.gold_per_min;
                         let radiant = detailPlayer.player_slot <= 4;
                         win = details.radiant_win == radiant;
                         break;
@@ -278,6 +282,8 @@ function renderMatchHistory(numPlayers, playerIndex, teamIndex, steamId, player,
                             img: 'http://cdn.dota2.com/apps/dota2/images/heroes/' + heroName + '_lg.png',
                             kda: kda,
                             win: win,
+                            gpm: gpm,
+                            xpm: xpm,
                             match_id: match.match_id
                         });
                     } catch (err) {
@@ -350,6 +356,8 @@ function initialHeroState() {
     return {
         win: true,
         kda: undefined,
+        gpm: undefined,
+        xpm: undefined,
         img: undefined,
         match_id: undefined,
     };