#256 timeline view for team hero uptime

ebshimizu · Dec 27, 2018 · eafc89d · eafc89d
1 parent 73266db
commit eafc89d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 4 deletions.
diff --git a/assets/css/match-detail.css b/assets/css/match-detail.css
@@ -319,6 +319,52 @@
   border-color: rgba(229, 229, 229, 0.25);
 }
 
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-0,
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-0
+{
+  background-color: rgba(0, 0, 0, 0);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-1 {
+  background-color: rgba(33, 133, 208, 0.2);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-2 {
+  background-color: rgba(33, 133, 208, 0.4);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-3 {
+  background-color: rgba(33, 133, 208, 0.6);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-4 {
+  background-color: rgba(33, 133, 208, 0.8);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.blue.hero-5 {
+  background-color: rgba(33, 133, 208, 1);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-1 {
+  background-color: rgba(219, 40, 40, 0.2);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-2 {
+  background-color: rgba(219, 40, 40, 0.4);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-3 {
+  background-color: rgba(219, 40, 40, 0.6);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-4 {
+  background-color: rgba(219, 40, 40, 0.8);
+}
+
+#match-detail-timeline-wrapper .vis-item.vis-background.red.hero-5 {
+  background-color: rgba(219, 40, 40, 1);
+}
+
 #match-detail-timeline-wrapper .vis-item.merc-unit,
 #match-detail-timeline-wrapper .vis-item.temple-shot {
   font-size: 9pt;

diff --git a/js/match-detail.js b/js/match-detail.js
@@ -308,6 +308,18 @@ matchDetailTimelineGroups.add([
     content: 'Payload Control',
     classname: 'hanamura-payload',
     visible: false
+  },
+  {
+    id: 16,
+    content: 'Blue Heroes Alive',
+    classname: 'blue-hero-uptime',
+    visible: true
+  },
+  {
+    id: 17,
+    content: 'Red Heroes Alive',
+    classname: 'red-hero-uptime',
+    visible: true
   }
 ]);
 
@@ -1317,12 +1329,51 @@ function loadTimeline() {
     item.group = 7;
     items.push(item);
   }
+
+  // hero uptime
+  // parser v7
+  if (matchDetailMatch.teams[0].stats.uptime) {
+    for (let t of [0, 1]) {
+      const teamUptime = matchDetailMatch.teams[t].stats.uptime;
+      const groupID = t === 0 ? 16 : 17;
+      const teamClass = t === 0 ? 'blue' : 'red';
+
+      for (let i = 0; i < teamUptime.length; i++) {
+        const current = teamUptime[i];
+
+        const item = {
+          start: current.time,
+          content: `${current.heroes}`,
+          type: 'background',
+          group: groupID,
+          className: `${teamClass} hero-${current.heroes}`
+        };
+
+        if (i + 1 < teamUptime.length) {
+          item.end = teamUptime[i + 1].time;
+        }
+        else {
+          item.end = matchDetailMatch.length;
+        }
+
+        items.push(item);
+      }
+    }
+    matchDetailTimelineGroups.update({id: 16, visible: true});
+    matchDetailTimelineGroups.update({id: 17, visible: true});
+    matchDetailTimelineGroups.update({id: 3, nestedGroups: [16, 17]});
+  }
+  else {
+    matchDetailTimelineGroups.update({id: 16, visible: false});
+    matchDetailTimelineGroups.update({id: 17, visible: false});
+    matchDetailTimelineGroups.update({id: 3, nestedGroups: null});
+  }
 
   // group config
-  matchDetailTimelineGroups.update({id: 11, visible: false})
-  matchDetailTimelineGroups.update({id: 12, visible: false})
-  matchDetailTimelineGroups.update({id: 13, visible: false})
-  matchDetailTimelineGroups.update({id: 14, visible: false})
+  matchDetailTimelineGroups.update({id: 11, visible: false});
+  matchDetailTimelineGroups.update({id: 12, visible: false});
+  matchDetailTimelineGroups.update({id: 13, visible: false});
+  matchDetailTimelineGroups.update({id: 14, visible: false});
   matchDetailTimelineGroups.update({id: 5, nestedGroups: null});
 
   // objectives...