commit 985e4d5c2be66d2384e20062768d160afdd01987
parent 38ee9f4564af29dbfd6e8d656d3422280e440c7a
Author: Jake Bauer <jbauer@paritybit.ca>
Date: Sat, 4 Jan 2020 00:15:47 -0500
Improved layout and functionality of BL3DPSCalc
Diffstat:
3 files changed, 139 insertions(+), 35 deletions(-)
diff --git a/build/borderlands.css b/build/borderlands.css
@@ -6,31 +6,49 @@ select {
width: 106px;
}
-table {
- display: inline-block;
-}
-
.td-label {
text-align: right;
padding-right: 10px;
}
-#flesh, #shields, #armour {
- margin: 0px;
+#grid-container {
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: auto auto;
+ justify-content: center;
+ align-content: center;
}
-#results {
- margin-left: 120px;
+#form-1 {
+ grid-column: 1;
+ grid-row: 1;
}
-@media all and (max-width: 900px) {
- #results {
- margin-left: 0px;
- }
+#form-2 {
+ grid-column: 2;
+ grid-row: 1;
+}
- button {
- width: 10em;
- }
+#results-1 {
+ grid-column: 1;
+ grid-row: 3;
+}
+
+#results-2 {
+ grid-column: 2;
+ grid-row: 3;
+}
+
+#calc-button {
+ grid-column: 1 / span 2;
+ grid-row: 2;
+}
+
+#flesh, #shields, #armour, #flesh2, #shields2, #armour2 {
+ margin: 0px;
+}
+
+@media all and (max-width: 900px) {
input:not(#tvhm){
width: 7em;
@@ -40,12 +58,49 @@ table {
width: 7.5em;
}
- table {
- width: 16em;
- }
-
#form-table {
margin-left: -30px;
width: 20em;
}
+ #results-table2 {
+ padding-left: 0px;
+ }
+
+ .grid-item {
+ margin-left: 10%;
+ width: 110%;
+ }
+
+ #grid-container {
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: auto;
+ justify-content: center;
+ align-content: center;
+ }
+
+ #form-1 {
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ #form-2 {
+ grid-column: 1;
+ grid-row: 2;
+ }
+
+ #results-1 {
+ grid-column: 1;
+ grid-row: 4;
+ }
+
+ #results-2 {
+ grid-column: 1;
+ grid-row: 5;
+ }
+
+ #calc-button {
+ grid-column: 1;
+ grid-row: 3;
+ }
}
diff --git a/pages/projects/borderlands-3-dps-calculator.md b/pages/projects/borderlands-3-dps-calculator.md
@@ -15,17 +15,16 @@ suggestions to [Leon's email](mailto:balding@protonmail.com).
Use this utility to calculate the DPS of weapons in Borderlands 3.
-<div>
- <form>
- <table id="form-table">
- <tbody>
+<div id="grid-container">
+ <form class="grid-item" id="form-1">
+ <table>
<tr><td class="td-label">Damage: </td><td><input id="dmg" type="number" min="0" placeholder="0" value="0"></td></tr>
<tr><td class="td-label">Projectiles Fired: </td><td><input id="dmg-mult" type="number" min="1" placeholder="1" value="1"></td></tr>
- <tr><td class="td-label">Reload Time (s): </td><td><input id="rload" type="number" min="0" placeholder="0"></td></tr>
- <tr><td class="td-label">Fire Rate (shots/s): </td><td><input id="frate" type="number" min="0" placeholder="0"></td></tr>
- <tr><td class="td-label">Magazine Size: </td><td><input id="mag" type="number" min="0" placeholder="0"></td></tr>
+ <tr><td class="td-label">Reload Time (s): </td><td><input id="rload" type="number" step="any" min="0" placeholder="0" value="0"></td></tr>
+ <tr><td class="td-label">Fire Rate (shots/s): </td><td><input id="frate" type="number" step="any" min="0" placeholder="0" value="0"></td></tr>
+ <tr><td class="td-label">Magazine Size: </td><td><input id="mag" type="number" min="0" placeholder="0" value="1"></td></tr>
<tr><td class="td-label">Ammo Consumed Per Shot: </td><td><input id="ammo" type="number" min="1" placeholder="1" value="1"></td></tr>
- <tr><td class="td-label">Elemental Type: </td><td><select id="elmnt" type="text">
+ <tr><td class="td-label">Elemental Type: </td><td><select id="elmnt">
<option value="None" selected="selected">None</option>
<option value="Fire">Fire</option>
<option value="Shock">Shock</option>
@@ -34,19 +33,44 @@ Use this utility to calculate the DPS of weapons in Borderlands 3.
<option value="Rad">Rad</option>
</select></td></tr>
<tr><td class="td-label">True Vault Hunter Mode: </td><td id="checkbox-cell"><input id="tvhm" type="checkbox"></td></tr>
- </tbody>
+ </table>
+ </form>
+ <form class="grid-item" id="form-2">
+ <table>
+ <tr><td class="td-label">Damage: </td><td><input id="dmg2" type="number" min="0" placeholder="0" value="0"></td></tr>
+ <tr><td class="td-label">Projectiles Fired: </td><td><input id="dmg-mult2" type="number" min="1" placeholder="1" value="1"></td></tr>
+ <tr><td class="td-label">Reload Time (s): </td><td><input id="rload2" type="number" step="any" min="0" placeholder="0" value="0"></td></tr>
+ <tr><td class="td-label">Fire Rate (shots/s): </td><td><input id="frate2" type="number" step="any" min="0" placeholder="0" value="0"></td></tr>
+ <tr><td class="td-label">Magazine Size: </td><td><input id="mag2" type="number" min="0" placeholder="0" value="1"></td></tr>
+ <tr><td class="td-label">Ammo Consumed Per Shot: </td><td><input id="ammo2" type="number" min="1" placeholder="1" value="1"></td></tr>
+ <tr><td class="td-label">Elemental Type: </td><td><select id="elmnt2">
+ <option value="None" selected="selected">None</option>
+ <option value="Fire">Fire</option>
+ <option value="Shock">Shock</option>
+ <option value="Acid">Acid</option>
+ <option value="Cryo">Cryo</option>
+ <option value="Rad">Rad</option>
+ </select></td></tr>
+ <tr><td class="td-label">True Vault Hunter Mode: </td><td id="checkbox-cell2"><input id="tvhm2" type="checkbox"></td></tr>
</table>
</form>
- <br />
+ <button class="grid-item" id="calc-button" onclick="gamerMoment()"> Calculate DPS </button>
- <div id="results">
- <button onclick="gamerMoment()"> Calculate DPS </button>
- <br>
+ <div class="grid-item" id="results-1">
+ <p>Weapon 1:</p>
<table>
- <tbody><tr><td><b>DPS against flesh: </b></td><td><p id="flesh"> -- </p></td></tr>
+ <tr><td><b>DPS against flesh: </b></td><td><p id="flesh"> -- </p></td></tr>
<tr><td><b>DPS against shields: </b></td><td><p id="shields"> -- </p></td></tr>
- <tr><td><b>DPS against armour: </b></td><td><p id="armour"> -- </p></td></tr>
- </tbody></table>
+ <tr><td><b>DPS against armour: </b></td><td><p id="armour"> -- </p></td></tr>
+ </table>
+ </div>
+ <div class="grid-item" id="results-2">
+ <p>Weapon 2:</p>
+ <table>
+ <tr><td><b>DPS against flesh: </b></td><td><p id="flesh2"> -- </p></td></tr>
+ <tr><td><b>DPS against shields: </b></td><td><p id="shields2"> -- </p></td></tr>
+ <tr><td><b>DPS against armour: </b></td><td><p id="armour2"> -- </p></td></tr>
+ </table>
</div>
</div>
diff --git a/public/js/borderlands-3-dps-calculator.js b/public/js/borderlands-3-dps-calculator.js
@@ -101,6 +101,30 @@ function calculateDPS(gun, effectDuration) {
return dps;
}
+function gamerMoment2() {
+
+ let gun = {};
+ let e;
+ let dpsResult;
+ let effectDuration;
+
+ for (let str of properties_g) {
+ gun[str] = parseFloat(document.getElementById(str + "2").value);
+ if (! gun[str])
+ gun[str] = 0;
+ }
+
+ e = document.getElementById("elmnt2");
+ gun["elmnt"] = e.options[e.selectedIndex].value;
+ gun["tvhm"] = document.getElementById("tvhm2").checked ? 1 : 0;
+
+ dpsResult = calculateDPS(gun, effectDuration);
+
+ document.getElementById("flesh2").innerHTML = dpsResult[0].toFixed(2);
+ document.getElementById("shields2").innerHTML = dpsResult[1].toFixed(2);
+ document.getElementById("armour2").innerHTML = dpsResult[2].toFixed(2);
+}
+
function gamerMoment() {
let gun = {};
@@ -123,4 +147,5 @@ function gamerMoment() {
document.getElementById("flesh").innerHTML = dpsResult[0].toFixed(2);
document.getElementById("shields").innerHTML = dpsResult[1].toFixed(2);
document.getElementById("armour").innerHTML = dpsResult[2].toFixed(2);
+ gamerMoment2();
}
