thrakt/index.html

## index.html
<html>
  <head>
    <title>2-5式索敵値計算</title>
    <meta charset="UTF-8">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script type="text/javascript">
      //<![CDATA[
      window.onload = function(){
      var sakutekiSum = function(){
        var result = 0;
        _.each(this.list, function(item){
          if(item.count && item.sakuteki){
            result += parseInt(item.count) * parseInt(item.sakuteki)
          }
        });
        return result;
      };
      Vue.component(
        'sakutekiList',
        {
          data: {
            list: [],
            countList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
          },
          computed: {
            sum: sakutekiSum
          },
          template : '<table class="table table-striped table-bordered"><thead><tr><td>個数</td><td>名称</td><td>索敵値</td></tr></thead><tbody><tr v-repeat="list"><td><select v-model="count"><option v-repeat="countList" value="{{$value}}">{{$value}}</option></select></td><td>{{itemname}}</td><td>{{sakuteki}}</td></tr><tr><td colspan="3">索敵合計値 : <mark>{{sum}}</mark></td></tr></tbody></table>'
        }
      );
      Vue.component(
        'kantaiList',
        {
          data: {
            list: []
          },
          computed: {
            sum: sakutekiSum
          },
          template : '<table class="table table-striped table-bordered"><thead><tr><td>所属艦</td><td>装備込みの索敵値</td></tr></thead><tbody><tr v-repeat="list"><td>{{itemname}}</td><td><input type="text" size="3" v-model="sakuteki"></td></tr><tr><td colspan="2">索敵合計値 : <mark>{{sum}}</mark></td></tr></tbody></table>'
        }
      );
      container = new Vue({
        el: '#container',
        data: {
          dentanList: [
            {itemname: '13号対空電探', sakuteki: 3, count: 0 },
            {itemname: '22号対水上電探', sakuteki: 5, count: 0 },
            {itemname: '33号対水上電探', sakuteki: 7, count: 0 },
            {itemname: '22号対水上電探改四', sakuteki: 5, count: 0 },
            {itemname: '21号対空電探', sakuteki: 4, count: 0 },
            {itemname: '32号対水上電探', sakuteki: 10, count: 0 },
            {itemname: '14号対空電探', sakuteki: 5, count: 0 },
            {itemname: '21号対空電探改', sakuteki: 6, count: 0 },
            {itemname: '13号対空電探改', sakuteki: 4, count: 0 }
          ],
          teisatsuList: [
            {itemname: '零式水上偵察機', sakuteki: 5, count: 0 },
            {itemname: '瑞雲', sakuteki: 6, count: 0 },
            {itemname: '零式水上観測機', sakuteki: 6, count: 0 },
            {itemname: '試製晴嵐', sakuteki: 6, count: 0 },
            {itemname: '瑞雲(六三四空)', sakuteki: 6, count: 0 },
            {itemname: '瑞雲12型', sakuteki: 6, count: 0 },
            {itemname: '瑞雲12型(六三四空)', sakuteki: 7, count: 0 },
            {itemname: '九八式水上偵察機(夜偵)', sakuteki: 3, count: 0 },
            {itemname: '彩雲', sakuteki: 9, count: 0 },
            {itemname: '二式艦上偵察機', sakuteki: 7, count: 0 }
          ],
          kantaiList: [
            {itemname: '旗艦', sakuteki: 40, count: 1 },
            {itemname: '随伴艦1', sakuteki: 40, count: 1 },
            {itemname: '随伴艦2', sakuteki: 40, count: 1 },
            {itemname: '随伴艦3', sakuteki: 40, count: 1 },
            {itemname: '随伴艦4', sakuteki: 40, count: 1 },
            {itemname: '随伴艦5', sakuteki: 40, count: 1 }
          ]
        },
        computed: {
          sum: function(){
            if(this.$.kantai && this.$.kantai.sum > 0){
              return Math.floor(
                this.$.teisatsu.sum*2 + this.$.dentan.sum +
                Math.sqrt(this.$.kantai.sum - this.$.dentan.sum - this.$.teisatsu.sum)
              );
            }
            return 0;
          }
        }
      });
      };
      //]]>
    </script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style type="text/css">
    <!--
      body{
        padding: 10px;
      }
      div{
        float: left;
        padding-right: 20px;
      }
    -->
    </style>
  </head>
  <body>
    <h1>2-5式 索敵値計算</h1>
    <br />
    <div id="container">
      <div v-component="sakutekiList" v-with="list:dentanList" v-ref="dentan"></div>
      <div v-component="sakutekiList" v-with="list:teisatsuList" v-ref="teisatsu"></div>
      <div v-component="kantaiList" v-with="list:kantaiList" v-ref="kantai"></div>
      <br clear="all" />
      <span class="lead">(偵察機×2)+(電探)+√(装備込みの艦隊索敵値合計-偵察機-電探) : <mark>{{sum}}</mark></span>
    </div>
    <br clear="all" />
    <div style="padding-top:30px;">
    作成: <a href="https://github.com/thrakt">thrakt</a><br />
    参照:
      <ul>
        <li><a href="http://ch.nicovideo.jp/16K/blomaga/ar565320">艦隊の合計索敵値があてにならない！というわけで　索敵値計算機暫定版:大湊慢心クソ提督の雑記 - ブロマガ</a></li>
        <li><a href="http://wikiwiki.jp/kancolle/">艦隊これくしょん -艦これ- 攻略 Wiki*</a></li>
        <li><a href="https://gist.github.com/koba04/9776792">Vue.js note(v0.10.3). not translate. This is draft of https://github.com/koba04/vuejs-book .</a></li>
        <li><a href="http://getbootstrap.com/">Bootstrap</a></li>
      </ul>
    </div>
  </body>
</html>
	<html>
	<head>
	<title>2-5式索敵値計算</title>
	<meta charset="UTF-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script type="text/javascript">
	//<![CDATA[
	window.onload = function(){
	var sakutekiSum = function(){
	var result = 0;
	_.each(this.list, function(item){
	if(item.count && item.sakuteki){
	result += parseInt(item.count) * parseInt(item.sakuteki)
	}
	});
	return result;
	};
	Vue.component(
	'sakutekiList',
	{
	data: {
	list: [],
	countList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
	},
	computed: {
	sum: sakutekiSum
	},
	template : '<table class="table table-striped table-bordered"><thead><tr><td>個数</td><td>名称</td><td>索敵値</td></tr></thead><tbody><tr v-repeat="list"><td><select v-model="count"><option v-repeat="countList" value="{{$value}}">{{$value}}</option></select></td><td>{{itemname}}</td><td>{{sakuteki}}</td></tr><tr><td colspan="3">索敵合計値 : <mark>{{sum}}</mark></td></tr></tbody></table>'
	}
	);
	Vue.component(
	'kantaiList',
	{
	data: {
	list: []
	},
	computed: {
	sum: sakutekiSum
	},
	template : '<table class="table table-striped table-bordered"><thead><tr><td>所属艦</td><td>装備込みの索敵値</td></tr></thead><tbody><tr v-repeat="list"><td>{{itemname}}</td><td><input type="text" size="3" v-model="sakuteki"></td></tr><tr><td colspan="2">索敵合計値 : <mark>{{sum}}</mark></td></tr></tbody></table>'
	}
	);
	container = new Vue({
	el: '#container',
	data: {
	dentanList: [
	{itemname: '13号対空電探', sakuteki: 3, count: 0 },
	{itemname: '22号対水上電探', sakuteki: 5, count: 0 },
	{itemname: '33号対水上電探', sakuteki: 7, count: 0 },
	{itemname: '22号対水上電探改四', sakuteki: 5, count: 0 },
	{itemname: '21号対空電探', sakuteki: 4, count: 0 },
	{itemname: '32号対水上電探', sakuteki: 10, count: 0 },
	{itemname: '14号対空電探', sakuteki: 5, count: 0 },
	{itemname: '21号対空電探改', sakuteki: 6, count: 0 },
	{itemname: '13号対空電探改', sakuteki: 4, count: 0 }
	],
	teisatsuList: [
	{itemname: '零式水上偵察機', sakuteki: 5, count: 0 },
	{itemname: '瑞雲', sakuteki: 6, count: 0 },
	{itemname: '零式水上観測機', sakuteki: 6, count: 0 },
	{itemname: '試製晴嵐', sakuteki: 6, count: 0 },
	{itemname: '瑞雲(六三四空)', sakuteki: 6, count: 0 },
	{itemname: '瑞雲12型', sakuteki: 6, count: 0 },
	{itemname: '瑞雲12型(六三四空)', sakuteki: 7, count: 0 },
	{itemname: '九八式水上偵察機(夜偵)', sakuteki: 3, count: 0 },
	{itemname: '彩雲', sakuteki: 9, count: 0 },
	{itemname: '二式艦上偵察機', sakuteki: 7, count: 0 }
	],
	kantaiList: [
	{itemname: '旗艦', sakuteki: 40, count: 1 },
	{itemname: '随伴艦1', sakuteki: 40, count: 1 },
	{itemname: '随伴艦2', sakuteki: 40, count: 1 },
	{itemname: '随伴艦3', sakuteki: 40, count: 1 },
	{itemname: '随伴艦4', sakuteki: 40, count: 1 },
	{itemname: '随伴艦5', sakuteki: 40, count: 1 }
	]
	},
	computed: {
	sum: function(){
	if(this.$.kantai && this.$.kantai.sum > 0){
	return Math.floor(
	this.$.teisatsu.sum*2 + this.$.dentan.sum +
	Math.sqrt(this.$.kantai.sum - this.$.dentan.sum - this.$.teisatsu.sum)
	);
	}
	return 0;
	}
	}
	});
	};
	//]]>
	</script>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<style type="text/css">
	<!--
	body{
	padding: 10px;
	}
	div{
	float: left;
	padding-right: 20px;
	}
	-->
	</style>
	</head>
	<body>
	<h1>2-5式索敵値計算</h1>
	<br />
	<div id="container">
	<div v-component="sakutekiList" v-with="list:dentanList" v-ref="dentan"></div>
	<div v-component="sakutekiList" v-with="list:teisatsuList" v-ref="teisatsu"></div>
	<div v-component="kantaiList" v-with="list:kantaiList" v-ref="kantai"></div>
	<br clear="all" />
	<span class="lead">(偵察機×2)+(電探)+√(装備込みの艦隊索敵値合計-偵察機-電探) : <mark>{{sum}}</mark></span>
	</div>
	<br clear="all" />
	<div style="padding-top:30px;">
	作成: <a href="https://github.com/thrakt">thrakt</a><br />
	参照:
	<ul>
	<li><a href="http://ch.nicovideo.jp/16K/blomaga/ar565320">艦隊の合計索敵値があてにならない！というわけで　索敵値計算機暫定版:大湊慢心クソ提督の雑記 - ブロマガ</a></li>
	<li><a href="http://wikiwiki.jp/kancolle/">艦隊これくしょん -艦これ- 攻略 Wiki*</a></li>
	<li><a href="https://gist.github.com/koba04/9776792">Vue.js note(v0.10.3). not translate. This is draft of https://github.com/koba04/vuejs-book .</a></li>
	<li><a href="http://getbootstrap.com/">Bootstrap</a></li>
	</ul>
	</div>
	</body>
	</html>