paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

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:
Mbuild/borderlands.css | 93+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------
Mpages/projects/borderlands-3-dps-calculator.md | 56++++++++++++++++++++++++++++++++++++++++----------------
Mpublic/js/borderlands-3-dps-calculator.js | 25+++++++++++++++++++++++++
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(); }