xtuaok/aggrolist.html

## aggrolist.html
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>

    * {
      /* フォント （一部のフォントは上手く適用されない） */
      font-family: "Meiryo";
      font-size: 12px;
    }

    body, html {
      margin: 0;
    }

    html {
      /* リサイズ用のハンドル
       * リサイズができる場所はウィンドウ右下の16x16ピクセルの場所
       * この部分が完全に透明だとマウス入力が透過してしまってサイズを変更できなくなる */
      background-image: url(handle.png);
      background-position: bottom right;
      background-repeat: no-repeat;
      box-sizing: border-box;
      height: 100%;
      /* 外枠 */
      /*border: 1px solid rgba(0,0,0,0.1);*/
      /* はみ出た内容はスクロールバーを表示させずに隠す
             * 今のところ、ブラウザへの入力はできないので表示させても無意味 */
      overflow: hidden;
      /* 背景色 */
      background-color: transparent;
    }

    #window {
      margin: 10px;
      padding: 5px;
      background-color: rgba(0,0,0,0.50);
	  box-shadow: rgba(0,0,0,0.50) 0 0 10px 5px;
	  border-radius: 5px;
    }

    #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_plate {
      width: 100%;
      position: relative;
      bottom: 0;
      z-index: 2;
    }

    #target_hp_gauge {
      position: absolute;
      display: block;
      bottom: 2px;
      height: 2px;
      /* background-color: rgba(81, 255, 0, 0.75); */ /* Apply Effect で設定するのでコメント */
      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_body {
      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;
    }

    #enmityList {
      margin: 1px 5px 1px 5px;
      padding: 0 0 0 0;
    }

    .character {
      color: #E2EBF5;
      text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
      font-weight: 300;
    }

    .enmity {
      color: #E2EBF5;
      text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
      font-weight: 300;
    }

    .content {
      position: relative;
      margin-bottom: 3px;
	  height: 1em;
      z-index: 2;
      clear: both;
    }

    .gauge {
      position: absolute;
      display: block;
      bottom: -3px;
      height: 3px;
      background-color: rgba(101, 50, 50, 0.75);
      z-index: 1;
    }

    .box {
      position: relative;
    }

    .UNKNOWN { background-color: rgba(211,211,211,0.75); }
    }
  </style>
  <script>
    //
    // プラグイン側から以下のような ActXiv オブジェクトとしてデータが提供される
    //
    // ダミーデータ(デバッグ用)
    var ActXivDebug = {
      "Enmity": {
        "Target": { 'Name': 'マンドラゴラ・プライム', 'HPPercent': 17.74, 'CurrentHP': 221004, 'MaxHP': 1245321, 'Distance': 3.02, 'EffectiveDistance': 2, 'HorizontalDistance': 2.32 },
        // "Target": null,
        "Entries": [
          { "Name": 'Tomonori Tamagawa', "Enmity": 128923, 'EnmityString': '128,923', 'isMe': true, 'HateRate': 100,'JobName': 'WAR' },
          { "Name": 'Tomonori Arakawa', "Enmity": 3845, 'EnmityString': '3,845', 'isMe': false, 'HateRate': 20, 'JobName': 'SCH' },
          { "Name": 'Tomonori Tonegawa', "Enmity": 0, 'EnmityString': '0', 'isMe': false, 'HateRate': 00, 'JobName': 'WHM' }
        ]
      }
    };

    //
    // プラグインから onOverlayDataUpdate イベントが発行されるので、それを受信することもできる
    // イベントハンドラの第一引数の detail プロパティ内に上記のオブジェクトが入る
    //

    // 表示するデータの定義
    var bodyDefine = function (e, index) {
      var content = document.createElement('div');
      var name = document.createElement('span');
      var enmity = document.createElement('span');
      var hpp = document.createElement('span');
      content.classList.add('content');
      name.classList.add('character');
      enmity.classList.add('enmity');
      hpp.classList.add('enmity');
      name.innerText = e.Name + " ";
      enmity.innerText = e.HateRate + "% ";
	  hpp.innerText	= "HP: "+ e.HPPercent +  "%";
      content.appendChild(enmity);
      content.appendChild(name);
	  content.appendChild(hpp);
      return content;
    };
    //
    // 以下表示用スクリプト
    //

    // onOverlayDataUpdate イベントを購読
    document.addEventListener("onOverlayDataUpdate", function (e) {
      update(e.detail);
    });

    // 表示要素の更新
    function update(data) {
      updateAggroList(data);
    }

    // 敵視リストを更新する
    function updateAggroList(data) {
      // 要素取得＆作成
      var body = document.getElementById('enmityList');
      body.innerHTML = '';

      // List の内容を作成
      data.Enmity.AggroList.forEach(function(entry, index, array) {
        var box = document.createElement('div');
        var graph = document.createElement('div');
        box.classList.add('box');
        if (typeof (bodyDefine) == 'string') {
          var content = document.createElement('div');
          // クラス
          content.classList.add('content');
          content.innerHTML = bodyDefine.replace(/{(.+?)}/g, function (_, key) { return key in entry ? entry[key] : ""; });
          box.appendChild(content);
        } else {
          content = bodyDefine(entry, index);
          box.appendChild(content);
        }
        box.appendChild(graph);
        body.appendChild(box);
      });
    }
  </script>
</head>
<body id="body">
  <div id="window">
  <span class='content target character'>敵視リスト</span>
  <div id="enmityList">
    <!-- ここに敵視のエントリの情報が入る -->
  </div>
</div>
</body>
</html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<style>

	* {
	/* フォント（一部のフォントは上手く適用されない） */
	font-family: "Meiryo";
	font-size: 12px;
	}

	body, html {
	margin: 0;
	}

	html {
	/* リサイズ用のハンドル
	* リサイズができる場所はウィンドウ右下の16x16ピクセルの場所
	* この部分が完全に透明だとマウス入力が透過してしまってサイズを変更できなくなる */
	background-image: url(handle.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	box-sizing: border-box;
	height: 100%;
	/* 外枠 */
	/border: 1px solid rgba(0,0,0,0.1);/
	/* はみ出た内容はスクロールバーを表示させずに隠す
	* 今のところ、ブラウザへの入力はできないので表示させても無意味 */
	overflow: hidden;
	/* 背景色 */
	background-color: transparent;
	}

	#window {
	margin: 10px;
	padding: 5px;
	background-color: rgba(0,0,0,0.50);
	box-shadow: rgba(0,0,0,0.50) 0 0 10px 5px;
	border-radius: 5px;
	}

	#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_plate {
	width: 100%;
	position: relative;
	bottom: 0;
	z-index: 2;
	}

	#target_hp_gauge {
	position: absolute;
	display: block;
	bottom: 2px;
	height: 2px;
	/* background-color: rgba(81, 255, 0, 0.75); / / Apply Effect で設定するのでコメント */
	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_body {
	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;
	}

	#enmityList {
	margin: 1px 5px 1px 5px;
	padding: 0 0 0 0;
	}

	.character {
	color: #E2EBF5;
	text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
	font-weight: 300;
	}

	.enmity {
	color: #E2EBF5;
	text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
	font-weight: 300;
	}

	.content {
	position: relative;
	margin-bottom: 3px;
	height: 1em;
	z-index: 2;
	clear: both;
	}

	.gauge {
	position: absolute;
	display: block;
	bottom: -3px;
	height: 3px;
	background-color: rgba(101, 50, 50, 0.75);
	z-index: 1;
	}

	.box {
	position: relative;
	}

	.UNKNOWN { background-color: rgba(211,211,211,0.75); }
	}
	</style>
	<script>
	//
	// プラグイン側から以下のような ActXiv オブジェクトとしてデータが提供される
	//
	// ダミーデータ(デバッグ用)
	var ActXivDebug = {
	"Enmity": {
	"Target": { 'Name': 'マンドラゴラ・プライム', 'HPPercent': 17.74, 'CurrentHP': 221004, 'MaxHP': 1245321, 'Distance': 3.02, 'EffectiveDistance': 2, 'HorizontalDistance': 2.32 },
	// "Target": null,
	"Entries": [
	{ "Name": 'Tomonori Tamagawa', "Enmity": 128923, 'EnmityString': '128,923', 'isMe': true, 'HateRate': 100,'JobName': 'WAR' },
	{ "Name": 'Tomonori Arakawa', "Enmity": 3845, 'EnmityString': '3,845', 'isMe': false, 'HateRate': 20, 'JobName': 'SCH' },
	{ "Name": 'Tomonori Tonegawa', "Enmity": 0, 'EnmityString': '0', 'isMe': false, 'HateRate': 00, 'JobName': 'WHM' }
	]
	}
	};

	//
	// プラグインから onOverlayDataUpdate イベントが発行されるので、それを受信することもできる
	// イベントハンドラの第一引数の detail プロパティ内に上記のオブジェクトが入る
	//

	// 表示するデータの定義
	var bodyDefine = function (e, index) {
	var content = document.createElement('div');
	var name = document.createElement('span');
	var enmity = document.createElement('span');
	var hpp = document.createElement('span');
	content.classList.add('content');
	name.classList.add('character');
	enmity.classList.add('enmity');
	hpp.classList.add('enmity');
	name.innerText = e.Name + " ";
	enmity.innerText = e.HateRate + "% ";
	hpp.innerText = "HP: "+ e.HPPercent + "%";
	content.appendChild(enmity);
	content.appendChild(name);
	content.appendChild(hpp);
	return content;
	};
	//
	// 以下表示用スクリプト
	//

	// onOverlayDataUpdate イベントを購読
	document.addEventListener("onOverlayDataUpdate", function (e) {
	update(e.detail);
	});

	// 表示要素の更新
	function update(data) {
	updateAggroList(data);
	}

	// 敵視リストを更新する
	function updateAggroList(data) {
	// 要素取得＆作成
	var body = document.getElementById('enmityList');
	body.innerHTML = '';

	// List の内容を作成
	data.Enmity.AggroList.forEach(function(entry, index, array) {
	var box = document.createElement('div');
	var graph = document.createElement('div');
	box.classList.add('box');
	if (typeof (bodyDefine) == 'string') {
	var content = document.createElement('div');
	// クラス
	content.classList.add('content');
	content.innerHTML = bodyDefine.replace(/{(.+?)}/g, function (_, key) { return key in entry ? entry[key] : ""; });
	box.appendChild(content);
	} else {
	content = bodyDefine(entry, index);
	box.appendChild(content);
	}
	box.appendChild(graph);
	body.appendChild(box);
	});
	}
	</script>
	</head>
	<body id="body">
	<div id="window">
	<span class='content target character'>敵視リスト</span>
	<div id="enmityList">
	<!-- ここに敵視のエントリの情報が入る -->
	</div>
	</div>
	</body>
	</html>