sparkyneko.github.io/cf-arm.html at master · sparkyneko/sparkyneko.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<style>
  .slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

td {
  text-align: right;
}
.left_cell {
  text-align: left;
}
</style>
<script>
  var def = 0;

  function getCDM (a, cd) {
    let value = cd * ((2000 * a) + (((100 - def) * 2000) / 100) + 400);
    return value <= 1 ? 1 : value; // always left with 1%, 1 damage in toram
  }

  function getDiffPC (fc, st) {
    let diff = (st / fc) * 100;
    return diff.toFixed(3);
  }

  function updateSlider() {
    let a = document.getElementById('player_atk').value;
    let d = document.getElementById('boss_def').value;

    def = (d / a) * 100;
    document.getElementById('def_slider').value = Math.round(def);
    document.getElementById('def_value').innerHTML = Math.round(def);

    updateDisplay(true);
  }

  function updateDisplay(skip_def_update) {
    console.log('updatedisplay called!');
    if (!skip_def_update) {
      def = document.getElementById('def_slider').value;
      document.getElementById('boss_def').value = Math.round(document.getElementById('player_atk').value * def / 100);
      document.getElementById('def_value').innerHTML = Math.round(def);
    }
    console.log('updating for', def, '% DEF');
    var fc16 = getCDM(0, 1.15);
    var a2d2cd3cd16cr16 = getCDM(0.03, 1.11);
    var a2d4cd7cd16cr16 = getCDM(0.04, 1.15);
    var a7cd16cr16 = getCDM(0.07, 1.08);
    var a7d7cr16 = getCDM(0.11, 1);

    document.getElementById('fc16_cdm').innerHTML = fc16.toFixed(1);
    document.getElementById('a2d2cd3cd16cr16_cdm').innerHTML = a2d2cd3cd16cr16.toFixed(1);
    document.getElementById('a2d4cd7cd16cr16_cdm').innerHTML = a2d4cd7cd16cr16.toFixed(1);
    document.getElementById('a7cd16cr16_cdm').innerHTML = a7cd16cr16.toFixed(1);
    document.getElementById('a7d7cr16_cdm').innerHTML = a7d7cr16.toFixed(1);

    document.getElementById('a2d2cd3cd16cr16').innerHTML = getDiffPC(fc16, a2d2cd3cd16cr16);
    document.getElementById('a2d4cd7cd16cr16').innerHTML = getDiffPC(fc16, a2d4cd7cd16cr16);
    document.getElementById('a7cd16cr16').innerHTML = getDiffPC(fc16, a7cd16cr16);
    document.getElementById('a7d7cr16').innerHTML = getDiffPC(fc16, a7d7cr16);
  }
</script>

<body onload="updateDisplay()">
  <h5>Rough Estimate of Lv10 Crossfire Damage</h5>
  [using simplified formula CD·M·((A - D) + C)]
  <br /><br />
  <table cellpadding=5 border=1>
    <tr><th class='left_cell'>Stat</th><th>% Damage</th><th>Damage Value in CD·M</th></tr>
    <tr><td class='left_cell'>FC16</td><td id="fc16">100</td><td id="fc16_cdm"></td></tr>
    <tr><td class='left_cell'>A2%D2%CD3%CD16CR16</td><td id="a2d2cd3cd16cr16"></td><td id="a2d2cd3cd16cr16_cdm"></td></tr>
    <tr><td class='left_cell'>A2%D4%CD7%CD16CR16</td><td id="a2d4cd7cd16cr16"></td><td id="a2d4cd7cd16cr16_cdm"></td></tr>
    <tr><td class='left_cell'>A7%CD16CR16</td><td id="a7cd16cr16"></td><td id="a7cd16cr16_cdm"></td></tr>
    <tr><td class='left_cell'>A7%D7%CR16</td><td id="a7d7cr16"></td><td id="a7d7cr16_cdm"></td></tr>
  </table>
  <br /><br />

  <strong style="color: blue">USING STANDARD FC16 ARMOR</strong><br />
  <strong>PLAYER ATK:</strong> <input type='number' value=2000 id='player_atk' oninput="updateSlider()">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <strong>BOSS DEF:</strong> <input type='number' value=0 id='boss_def' oninput="updateSlider()">
  <br />
  <strong>DEF</strong> = <span id='def_value'></span>% of ATK
  <div class="slidecontainer">
    <input type="range" min="0" max="100" value="0" class="slider" id="def_slider" oninput="updateDisplay()">
  </div>
</body>