アイギスダメージビジュアライザー

グラフにするとむしろキャリーさんが強く見える

by zenith6

HTML

<script src="//www.google.com/jsapi"></script>
<script src="//zenith6.github.io/files/bootstrap.touchspin.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css">
<link rel="stylesheet" href="//fk.github.io/select2-bootstrap-css/css/select2-bootstrap.css">
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<header>
    <h1>アイギスダメージビジュアライザー</h1>
</header>

<div id="loading" class="loading">
    <div class="loading-background"></div>
    <div class="loading-foreground">
        <img src="http://i.imgur.com/zm8y0wW.gif" alt="なうキャリーさん" />
        <div class="progress progress-striped active">
            <div class="progress-bar">しばらくキャリーさんでお待ちください</div>
        </div>
    </div>
</div>

<div id="notices">
    <div class="alert alert-danger">
        ビジュアライザーは <a href="http://zenith6.github.io/aigistools/visualizer/" target="_parent">http://zenith6.github.io/aigistools/visualizer/</a> に移動しました
    </div>
</div>

<form action="#" class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-lg-12">比較対象</label>
        <div class="col-lg-12">
            <table id="unitList" class="table">
                <thead>
                    <tr>
                        <th class="col-xs-2 unit-name">ラベル</th>
                        <th class="col-xs-2 unit-info" colspan="2">ユニット情報</th>
                        <th class="col-xs-1 unit-lv">レベル</th>
                        <th class="col-xs-1 unit-intimacy">好感度</th>
                        <th class="col-xs-1 unit-strength">攻撃力</th>
<!--                         <th...

CSS

body {
}

header {
    margin: 1em;
}

.loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loading-background {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
}

.loading .foreground {
    position: fixed;
    z-index: 10000;
}

.loading img {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 50%;
    margin: -80px 0 0 -40px;
}

.loading .progress {
    position: fixed;
    top: 50%;
    left: 1em;
    right: 1em;
}

#loading .progress-bar {
    width: 100%;
}

td {
    border-top: none !important;
}

#notices {
    margin: 1em;
}

form {
    padding: 1em;
    background-color: #fcfcfc;
    border-bottom: 1px solid #ccc;
}

input[type=text] {
    min-width: 4em;
}

select {
    min-width: 5em;
}

section {
    margin: 1em 1em;
}

.time {
    text-align: right;
}

#unitList {
    padding: 1em;
}

#unitList tbody td {
    cursor: move;
}

#chart {
    width: 100%;
    height: 400px;
}

.pickup th, .pickup td {
    text-align: right;
}

footer {
    background-color: #404040;
    color: white;
    font-size: 12px;
    padding: 1em;
    line-height: 2;
}

footer a {
    color: white;
}

footer a:hover {
    color: royalblue;
}

.label-rarity-1 {
    background-color: royalblue;
}

.label-rarity-2 {
    background-color: #5F9EA0;
}

.label-rarity-3 {
    background-color: #556B2F;
}

.label-rarity-4 {
    background-color: #666;
}


.label-rarity-5 {
    background-color: #FFA500;
}


.label-rarity-6 {
    background-color: #7B68EE;
}

.label-rarity-7 {
    background-color: #101010;
}

.label-primary a {
    color: white;
}

input[readonly] {
    cursor: text !important;
}

.label-class {
    color: #666;
    background-color: #eee;
}

.unit-info .label {
    display: block;
}

.ability {
}

.template {
    display: none;
}

.skill-level {
    font-weight: bold;
}

select[name=skill_lv] {
    max-width: 5em;
}

.small-icon {
    display:...

JavaScript

// 'use strict';
return;
var Aigis = {
    settings: {
        databaseUrl: 'https://docs.google.com/spreadsheets/d/1-zStm1B36Ckq1Tpxrz018h3YVAsZyd2vustqghPFie0/edit',
        debug: false
    },
    tables: [
        'Class',
        'Rarity',
        'Attack',
        'Heal',
        'Skill',
        'Ability',
        'Unit',
        'PrinceTitle',
        'Settings'
    ],
    data: {},
    state: {
        currentGraph: 'damage'
    },
    cache: {}
};

google.load('visualization', '1', {packages:['corechart', 'table']});
google.setOnLoadCallback(bootstrap);

var Stage = function Stage() {
    this.name      = 'ステージ';
    this.condition = null;
    this.units     = [];
    this.time      = 0;
    this.status    = {};
    this.cost      = 0;
    this.callbacks = {};
};

Stage.prototype = Object.create({});
Stage.prototype.constructor = Object;

Stage.prototype.dispatch = function () {
    var args = Array.prototype.slice.call(arguments);
    var handler = args.shift();
    var callback = this.callbacks[handler];
    if (callback) {
        callback.apply(this, args);
    }
};

Stage.prototype.addUnit = function (unit) {
    unit.stage = this;
    this.units.push(unit);
};

Stage.prototype.clearStatus = function () {
    var status = this.status;
    status.morale = 0;
};

Stage.prototype.start = function () {
    this.clearStatus();
    this.units.forEach(function (unit) {
        unit.reset();
    });
};

Stage.prototype.stop = function () {
};

Stage.prototype.update = function (time) {
    this.clearStatus();
    var units = this.units, unit;
    var len = units.length;
    for (var i = 0; i < len; i++) {
        unit = units[i];
        unit.ability.update(time);
        unit.actions.skill.update(time);
    }
    for (i = 0; i < len; i++) {
        units[i].updateStatus(time);
    }
    for (i = 0; i < len; i++) {
        unit = units[i];
        unit.actions.attack.update(time);
        unit.actions.heal.update(time);
    }
};

Stage.prototype.addCost =...