<html>
  <head>
    <meta charset="utf-8">
    <title>targetinfo</title>

    <script>

// 表示する項目
var targets = [ 'Target', 'Focus', 'Hover', 'Anchor', 'TargetOfTarget' ];

// 項目のタイトル
var titles  = {
  Target: 'ターゲット',
  Focus: 'フォーカス',
  Hover: 'ホバー',
  Anchor: 'アンカー',
  TargetOfTarget: 'TT'
};
    </script>
    <style>
* {
  font-family: "Meiryo";
  font-size: 12px;
  font-weight: normal;
  box-sizing: border-box;
}
 
html {
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
 
body {
  margin: 0;
  padding: 0;
}

#targetinfo .outer {
  height: 100%;
  padding: 10px;
}

#targetinfo .inner {
  position: relative;
  padding: 10px;
}

#targetinfo .inner .background {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(5px);
  z-index: -1;
}

.blue {
  color: #E2EBF5;
  text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
}

.gold {
  color: #DED7BE;
  text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
}

/* HP Colors */
.green { background-color: rgba(38, 214, 70, 0.75); }
.yellow { background-color: rgba(201, 204, 36, 0.75); }
.orange { background-color: rgba(239, 151, 43, 0.75); }
.red { background-color: rgba(255, 45, 45, 0.75); }

.box { position: relative; }

.target {
  border-bottom: 1px solid #DED7BE;
  color: #DED7BE;
  text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
  font-weight: 300;
  white-space: nowrap;
  padding: 2px;
}

.target .name {
  width: 100%;
  position: relative;
  bottom: 0;
}

.target .gauge {
  position: absolute;
  display: block;
  bottom: 2px;
  height: 2px;
  z-index: -1;
}

.target .header {
  color: #DED7BE;
  text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
  font-weight: 300;
  white-space: nowrap;
  text-align: left;
}

.target .value {
  color: #E2EBF5;
  text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
  font-weight: 300;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
    </style>
  </head>

  <body id="targetinfo" v-class="resize-handle: !locked">
    <div class="outer">
      <div class="inner">
        <div class="background"></div>

        <div v-if="!updated" class="gold">
          <span>No data to show.</span>
        </div>

        <div v-if="updated">

          <div class="target" v-repeat="t: targets">
            <div class="box">
              <div class="gauge {{t | hpcolor}}" style="width: {{t.HPPercent}}%"></div>
              <div class="name">
                <span class="header">{{t.Key}}: </span>
                <span class="value">{{t.Name}}</span>
              </div>
            </div>
            <div>
              <span class="header">HP: </span>
              <span class="value">{{t.HPPercent}}% ({{t.CurrentHP}}/{{t.MaxHP}})</span>
              <div style="float: right">
                <span class="header">距離: </span>
                <span class="value">{{t.Distance}}m ({{t.EffectiveDistance}}m)</span>
              </div>
            </div>
          </div>

        </div><!-- if updated -->
      </div><!-- inner -->
    </div><!-- outer -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
    <script>
Vue.filter('hpcolor', function (t) {
  if (t.HPPercent > 75) return "green";
  if (t.HPPercent > 50) return "yellow";
  if (t.HPPercent > 25) return "orange";
  return "red";
});

// データ処理
var targetinfo = new Vue({
  el: '#targetinfo',
  data: {
    updated: false,
    locked: false,
    collapsed: false,
    targets: [],
  },
  attached: function() {
    document.addEventListener('onOverlayDataUpdate', this.update);
    document.addEventListener('onOverlayStateUpdate', this.updateState);
  },
  detached: function() {
    document.removeEventListener('onOverlayStateUpdate', this.updateState);
    document.removeEventListener('onOverlayDataUpdate', this.update);
  },
  methods: {
    update: function(e) {
      this.updated = true;
      this.targets = [];
      for(var k of targets) {
        var t = e.detail.Enmity[k];
        if (t == null) {
           t = {};
           t.Name = 'none';
           t.MaxHP = 0;
           t.CurrentHP = 0;
           t.HPPercent = 0;
           t.Distance  = 0;
           t.EffectiveDistance = 0;
           t.HorizontalDistance = 0;
        }
        t.Key = titles[k];
        this.targets.push(t);
      }
    },
    updateState: function(e) {
      this.locked = e.detail.isLocked;
    },
    toggleCollapse: function() {
      this.collapsed = !this.collapsed;
    }
  }
});
    </script>
  </body>
</html>
