Relative enmity, mini target window

EnmityPlugin/EnmityPlugin.csproj

@@ -166,9 +166,15 @@
     <Content Include="resources\enmity.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\enmity_relative.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\targetinfo.html">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\targetinfo_mini.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="EnmityOverlayConfigPanel.ja-JP.resx">

EnmityPlugin/resources/enmity.js

@@ -40,7 +40,15 @@ var noTarget = {
   Distance: '--',
   EffectiveDistance: '--',
   HorizontalDistance: '--',
-}
+  TimeToDeath: '',
+};
+
+var noEntry = {
+  Enmity: 0,
+  EnmityString: '--',
+  RelativeEnmity: 0,
+  RelativeEnmityString: '--',
+};
 
 // フィルタ
 Vue.filter('jobclass', function (v) {
@@ -70,6 +78,7 @@ var enmity = new Vue({
     collapsed: false,
     target: null,
     entries: null,
+    myEntry: null,
     hide: false
   },
   attached: function() {
@@ -82,10 +91,40 @@ var enmity = new Vue({
   },
   methods: {
     update: function(e) {
+      var enmity = e.detail.Enmity;
+
+      // Entries sorted by enmity, and keys are integers.
+      // If only one, show absolute value (otherwise confusingly 0 for !isMe).
+      var max = 0;
+      if (Object.keys(enmity.Entries).length > 1) {
+        max = enmity.Entries[0].isMe ? enmity.Entries[1].Enmity : enmity.Entries[0].Enmity;
+      }
+      var foundMe = false;
+      for (var i = 0; i < enmity.Entries.length; ++i) {
+        var e = enmity.Entries[i];
+        e.RelativeEnmity = e.Enmity - max;
+        if (e.RelativeEnmity != 0) {
+          var numStr = (e.RelativeEnmity > 0 ? "+" : "") + e.RelativeEnmity;
+          e.RelativeEnmityString = numStr.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+        } else {
+          e.RelativeEnmityString = '--';
+        }
+        if (e.isMe) {
+          foundMe = true;
+          this.myEntry = e;
+        }
+      }
+      if (!foundMe) {
+        this.myEntry = noEntry;
+      }
+      if (enmity.Target) {
+        this.processTarget(enmity.Target);
+      }
+
       this.updated = true;
-      this.entries = e.detail.Enmity.Entries;
-      this.target  = e.detail.Enmity.Target ? e.detail.Enmity.Target : noTarget;
-      this.hide = (hideNoTarget && e.detail.Enmity.Target == null);
+      this.entries = enmity.Entries;
+      this.target  = enmity.Target ? enmity.Target : noTarget;
+      this.hide = (hideNoTarget && enmity.Target == null);
       if(this.hide){
         document.getElementById("enmity").style.visibility = "hidden";
       }else{
@@ -97,7 +136,63 @@ var enmity = new Vue({
     },
     toggleCollapse: function() {
       this.collapsed = !this.collapsed;
-    }
-  }
+    },
+    toTimeString: function(time) {
+      var totalSeconds = Math.floor(time);
+      var minutes = Math.floor(totalSeconds / 60);
+      var seconds = totalSeconds % 60;
+      var str = "";
+      if (minutes > 0) {
+        str = minutes + "m";
+      }
+      str += seconds + "s";
+      return str;
+    },
+    processTarget: function(target) {
+      target.TimeToDeath = '';
+
+      // Throw away entries older than this.
+      var keepHistoryMs = 30 * 1000;
+      // Sample period between recorded entries.
+      var samplePeriodMs = 60;
+
+      var now = +new Date();
+      if (!this.targetHistory) {
+        this.targetHistory = {};
+      }
+      if (!this.targetHistory[target.ID]) {
+        this.targetHistory[target.ID] = {
+          hist: [],
+          lastUpdated: now,
+        };
+      }
+      var h = this.targetHistory[target.ID];
+      if (now - h.lastUpdated > samplePeriodMs) {
+        h.lastUpdated = now;
+        // Don't update if hp is unchanged to keep estimate more stable.
+        if (h.hist.length == 0 || h.hist[h.hist.length - 1].hp != target.CurrentHP) {
+          h.hist.push({time: now, hp: target.CurrentHP});
+        }
+      }
+
+      while (h.hist.length > 0 && now - h.hist[0].time > keepHistoryMs) {
+        h.hist.shift();
+      }
+
+      if (h.hist.length < 2) {
+        return;
+      }
+
+      var first = h.hist[0];
+      var last = h.hist[h.hist.length - 1];
+      var totalSeconds = (last.time - first.time) / 1000;
+      if (first.hp <= last.hp || totalSeconds == 0) {
+        return;
+      }
+
+      var dps = (first.hp - last.hp) / totalSeconds;
+      target.TimeToDeath = this.toTimeString(last.hp / dps);
+    },
+  },
 });
 

EnmityPlugin/resources/enmity_relative.html

@@ -0,0 +1,48 @@
+<html>
+<head>
+  <link rel="stylesheet" href="enmity.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
+  <style>
+    .content {
+      display: flex;
+      flex-direction: row;
+    }
+    .name {
+      display: inline-block;
+      order: 1;
+      align-self: flex-start;
+      margin-right: auto;
+    }
+    .enmity {
+      flex-shrink: 0;
+      order: 2;
+      padding-left: 10px;
+      align-self: flex-end;
+    }
+    #target {
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body id="enmity" v-class="resize-handle: !locked">
+  <div v-if="updated" class="outer {{target.type != 2 ? 'hide' : ''}}">
+    <div class="inner">
+      <div class="background"></div>
+      <div>
+        <div id="target">
+          <span class="value">{{target.Name}}</span>
+        </div>
+        <div id="entries" class="box" v-repeat="e: entries">
+          <div class="content">
+            <span class="name {{e.isMe ? 'me' : '' }}">{{$index + 1}}.{{e | you}}</span>
+            <span class="enmity">{{e.RelativeEnmityString}}</span>
+          </div>
+          <div class="gauge {{e | jobclass}}" style="width: {{e.HateRate}}%" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="enmity.js"></script>
+</body>
+</html>

EnmityPlugin/resources/targetinfo_mini.html

@@ -0,0 +1,39 @@
+<html>
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="enmity.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
+  <style>
+    .content {
+      position: absolute;
+      right: 0px;
+      padding: 10px;
+    }
+    .item {
+      color: #E2EBF5;
+      text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
+      font-weight: 300;
+      text-align: right;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body id="enmity" v-class="resize-handle: !locked">
+  <div v-if="updated" class="outer {{target.type != 2 ? 'hide' : ''}}">
+    <div class="inner">
+        <div class="content">
+          <div class="background"></div>
+          <div class="item">
+            <span>{{target.HPPercent}}%</span>
+            <span v-if="target.TimeToDeath"> ({{target.TimeToDeath}})</span>
+          </div>
+          <div class="item">{{myEntry.RelativeEnmityString}}</div>
+          <div class="item">{{target.Distance}}m</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="enmity.js"></script>
+</body>
+</html>