endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

Misc. UI tweaking

Browse source
This commit is contained in:
b 2021-01-20 05:49:42 -06:00
parent 3d269970a8
commit 9ce1666977
7 changed files with 474 additions and 503 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
builder.js
View file

@ -78,18 +78,6 @@ let equipment_names = [
let equipmentInputs = equipment_fields.map(x => x + "-choice"); let equipmentInputs = equipment_fields.map(x => x + "-choice");
let buildFields = equipment_fields.map(x => "build-"+x); let buildFields = equipment_fields.map(x => "build-"+x);
let powderIDs = new Map();
let powderNames = new Map();
let _powderID = 0;
for (const x of skp_elements) {
for (let i = 1; i <= 6; ++i) {
// Support both upper and lowercase, I guess.
powderIDs.set(x.toUpperCase()+i, _powderID);
powderIDs.set(x+i, _powderID);
powderNames.set(_powderID, x+i);
_powderID++;
}
}
let powderInputs = [ let powderInputs = [
"helmet-powder", "helmet-powder",
"chestplate-powder", "chestplate-powder",
@ -97,45 +85,6 @@ let powderInputs = [
"boots-powder", "boots-powder",
"weapon-powder", "weapon-powder",
]; ];
// Ordering: [dmgMin, dmgMax, convert, defPlus, defMinus (+6 mod 5)]
class Powder {
constructor(min, max, convert, defPlus, defMinus) {
this.min = min;
this.max = max;
this.convert = convert;
this.defPlus = defPlus;
this.defMinus = defMinus;
}
}
function _p(a,b,c,d,e) { return new Powder(a,b,c,d,e); } //bruh moment
let powderStats = [
_p(3,6,17,2,1), _p(6,9,21,4,2), _p(8,14,25,8,3), _p(11,16,31,14,5), _p(15,18,38,22,9), _p(18,22,46,30,13),
_p(1,8,9,3,1), _p(1,13,11,5,1), _p(2,18,14,9,2), _p(3,24,17,14,4), _p(3,32,22,20,7), _p(5,40,28,28,10),
_p(3,4,13,3,1), _p(4,7,15,6,1), _p(6,10,17,11,2), _p(8,12,21,18,4), _p(11,14,26,28,7), _p(13,17,32,40,10),
_p(2,5,14,3,1), _p(4,8,16,5,2), _p(6,10,19,9,3), _p(9,13,24,16,5), _p(12,16,30,25,9), _p(15,19,37,36,13),
_p(2,6,11,3,1), _p(4,9,14,6,2), _p(7,10,17,10,3), _p(9,13,22,16,5), _p(13,18,28,24,9), _p(16,18,35,34,13)
];
//Ordering: [weapon special name, weapon special effects, armor special name, armor special effects]
class PowderSpecial{
constructor(wSpName, wSpEff, aSpName, aSpEff, cap){
this.weaponSpecialName = wSpName;
this.weaponSpecialEffects = wSpEff;
this.armorSpecialName = aSpName;
this.armorSpecialEffects = aSpEff;
this.cap = cap;
}
}
function _ps(a,b,c,d,e) { return new PowderSpecial(a,b,c,d,e); } //bruh moment
let powderSpecialStats = [
_ps("Quake",new Map([["Radius",[5,5.5,6,6.5,7]], ["Damage",[155,220,285,350,415]] ]),"Rage",new Map([ ["Damage", [0.3,0.4,0.5,0.7,1.0]],["Description", "% " + "\u2764" + " Missing"] ]),400), //e
_ps("Chain Lightning",new Map([ ["Chains", [5,6,7,8,9]], ["Damage", [200,225,250,275,300]] ]),"Kill Streak",new Map([ ["Damage", [3,4.5,6,7.5,9]],["Duration", [5,5,5,5,5]],["Description", "Mob Killed"] ]),200), //t
_ps("Curse",new Map([ ["Duration", [7,7.5,8,8.5,9]],["Damage Boost", [90,120,150,180,210]] ]),"Concentration",new Map([ ["Damage", [1,2,3,4,5]],["Duration",[1,1,1,1,1]],["Description", "Mana Used"] ]),150), //w
_ps("Courage",new Map([ ["Duration", [6,6.5,7,7.5,8]],["Damage", [75,87.5,100,112.5,125]],["Damage Boost", [70,90,110,130,150]] ]),"Endurance",new Map([ ["Damage", [2,3,4,5,6]],["Duration", [8,8,8,8,8]],["Description", "Hit Taken"] ]),200), //f
_ps("Air Prison",new Map([ ["Duration", [3,3.5,4,4.5,5]],["Damage Boost", [400,450,500,550,600]],["Knockback", [8,12,16,20,24]] ]),"Dodge",new Map([ ["Damage",[2,3,4,5,6]],["Duration",[2,3,4,5,6]],["Description","Near Mobs"] ]),150) //a
];
let itemTypes = armorTypes.concat(accessoryTypes).concat(weaponTypes); let itemTypes = armorTypes.concat(accessoryTypes).concat(weaponTypes);
let itemLists = new Map(); let itemLists = new Map();

1
crafter.html
View file

@ -180,6 +180,7 @@
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="powders.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>
<script type="text/javascript" src="damage_calc.js"></script> <script type="text/javascript" src="damage_calc.js"></script>

500
index.html
View file

@ -25,7 +25,7 @@
<div class="summary"> <div class="summary">
<div class="equipment" style="grid-column:1/span 2;grid-row:1"> <div class="equipment" style="grid-column:1/span 2;grid-row:1">
<div style="grid-column:1/span 2;grid-row:1;width: 40vw"> <div style="grid-column:1/span 2;grid-row:1;width: 40vw">
<table class="center"> <table class="left">
<tr> <tr>
<th class="center smalltitle"> <th class="center smalltitle">
<label>Equipment</label> <label>Equipment</label>
@ -38,19 +38,19 @@
<tr> <tr>
<td class="left"> <td class="left">
<label for="helmet-choice">Helmet:</label><br> <label for="helmet-choice">Helmet:</label><br>
<input class="iteminput" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/> <input class="iteminput" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" tabindex="1"/>
<datalist id="helmet-items"> <datalist id="helmet-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label id="helmet-slots" for="helmet-powder">X slots</label><br> <label id="helmet-slots" for="helmet-powder">X slots</label><br>
<input class="powderinput" type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/> <input class="powderinput" type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6" tabindex="2"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label for="ring1-choice">Ring 1:</label><br> <label for="ring1-choice">Ring 1:</label><br>
<input class="iteminput" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/> <input class="iteminput" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1" tabindex="11"/>
<datalist id="ring1-items"> <datalist id="ring1-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
@ -59,19 +59,19 @@
<tr> <tr>
<td class="left"> <td class="left">
<label for="chestplate-choice">Chestplate:</label><br> <label for="chestplate-choice">Chestplate:</label><br>
<input class="iteminput" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" /> <input class="iteminput" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" tabindex="3"/>
<datalist id="chestplate-items"> <datalist id="chestplate-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label id="chestplate-slots" for="chestplate-powder">X slots</label><br> <label id="chestplate-slots" for="chestplate-powder">X slots</label><br>
<input class="powderinput" type="text" id="chestplate-powder" name="chestplate-powder" /> <input class="powderinput" type="text" id="chestplate-powder" name="chestplate-powder" tabindex="4"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label for="ring2-choice">Ring 2:</label><br> <label for="ring2-choice">Ring 2:</label><br>
<input class="iteminput" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" /> <input class="iteminput" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" tabindex="12"/>
<datalist id="ring2-items"> <datalist id="ring2-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
@ -80,19 +80,19 @@
<tr> <tr>
<td class="left"> <td class="left">
<label for="leggings-choice">Leggings:</label><br> <label for="leggings-choice">Leggings:</label><br>
<input class="iteminput" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" /> <input class="iteminput" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" tabindex="5"/>
<datalist id="leggings-items"> <datalist id="leggings-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label id="leggings-slots" for="leggings-powder">X slots</label><br> <label id="leggings-slots" for="leggings-powder">X slots</label><br>
<input class="powderinput" type="text" id="leggings-powder" name="leggings-powder" /> <input class="powderinput" type="text" id="leggings-powder" name="leggings-powder" tabindex="6"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label for="bracelet-choice">Bracelet:</label><br> <label for="bracelet-choice">Bracelet:</label><br>
<input class="iteminput" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" /> <input class="iteminput" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" tabindex="13"/>
<datalist id="bracelet-items"> <datalist id="bracelet-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
@ -101,19 +101,19 @@
<tr> <tr>
<td class="left"> <td class="left">
<label for="boots-choice">Boots:</label><br> <label for="boots-choice">Boots:</label><br>
<input class="iteminput" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" /> <input class="iteminput" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" tabindex="7"/>
<datalist id="boots-items"> <datalist id="boots-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label id="boots-slots" for="boots-powder">X slots</label><br> <label id="boots-slots" for="boots-powder">X slots</label><br>
<input class="powderinput" type="text" id="boots-powder" name="boots-powder" /> <input class="powderinput" type="text" id="boots-powder" name="boots-powder" tabindex="8"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<label for="necklace-choice">Necklace:</label><br> <label for="necklace-choice">Necklace:</label><br>
<input class="iteminput" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/> <input class="iteminput" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace" tabindex="14"/>
<datalist id="necklace-items"> <datalist id="necklace-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
@ -123,7 +123,7 @@
<td class="left"> <td class="left">
<br> <br>
<label for="weapon-choice">Weapon:</label><br> <label for="weapon-choice">Weapon:</label><br>
<input class="iteminput" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/> <input class="iteminput" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="9"/>
<datalist id="weapon-items"> <datalist id="weapon-items">
</datalist> </datalist>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
@ -131,24 +131,24 @@
<td class="left"> <td class="left">
<br> <br>
<label id="weapon-slots" for="weapon-powder">X slots</label><br> <label id="weapon-slots" for="weapon-powder">X slots</label><br>
<input class="powderinput" type="text" id="weapon-powder" name="weapon-powder" /> <input class="powderinput" type="text" id="weapon-powder" name="weapon-powder" tabindex="10"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif; white-space: nowrap;"></p>
</td> </td>
<td class="left"> <td class="left">
<br/> <br/>
<label for="level-choice">Level:</label><br> <label for="level-choice">Level:</label><br>
<input class="iteminput" id="level-choice" name="level-choice" placeholder="106" value=""/> <input class="iteminput" id="level-choice" name="level-choice" placeholder="106" value="" tabindex="15"/>
<p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif;"></p> <p class="error" style="color: red; top: 30px; font-size: 10px; padding: 0; margin: 0; height: 5px; font-family: 'Nunito', sans-serif;"></p>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="center" style="grid-column:1/span 3;grid-row:2"> <div class="center" style="grid-column:1/span 3;grid-row:2">
<table class="center"> <table class="left">
<tr> <tr>
<td> <td>
<br/> <br/>
<button class = "button" id = "calc-button" onclick = "calculateBuild()"> <button class = "button" id = "calc-button" onclick = "calculateBuild()" tabindex="16">
Update Items Update Items
</button> </button>
</td> </td>
@ -177,8 +177,8 @@
<div class="skillpoints" style="grid-column:1/span 3;grid-row:3;"> <div class="skillpoints" style="grid-column:1/span 3;grid-row:3;">
<div class="center" style="grid-column:1;grid-row:1"> <div class="center" style="grid-column:1;grid-row:1">
<div> <div>
<label for="str-skp" class="skpLabel" id="str-skp-label">Strength:</label><br> <label for="str-skp" class="skpLabel Earth" id="str-skp-label">Strength:</label><br>
<input type="string" id="str-skp" name="str-skp" value="0" class="skpInput"/> <input type="string" id="str-skp" name="str-skp" value="0" class="skpInput" tabindex="17"/>
</div> </div>
<div id="str-skp-assign" class="skpDesc"> <div id="str-skp-assign" class="skpDesc">
Manually Assigned: 0 Manually Assigned: 0
@ -191,8 +191,8 @@
</div> </div>
<div class="center" style="grid-column:2;grid-row:1"> <div class="center" style="grid-column:2;grid-row:1">
<div> <div>
<label for="dex-skp" class="skpLabel" id="dex-skp-label">Dexterity:</label><br> <label for="dex-skp" class="skpLabel Thunder" id="dex-skp-label">Dexterity:</label><br>
<input type="string" id="dex-skp" name="dex-skp" value="0" class="skpInput"/> <input type="string" id="dex-skp" name="dex-skp" value="0" class="skpInput" tabindex="18"/>
</div> </div>
<div id="dex-skp-assign" class="skpDesc"> <div id="dex-skp-assign" class="skpDesc">
Manually Assigned: 0 Manually Assigned: 0
@ -205,8 +205,8 @@
</div> </div>
<div class="center" style="grid-column:3;grid-row:1"> <div class="center" style="grid-column:3;grid-row:1">
<div> <div>
<label for="int-skp" class="skpLabel" id="int-skp-label">Intelligence:</label><br> <label for="int-skp" class="skpLabel Water" id="int-skp-label">Intelligence:</label><br>
<input type="string" id="int-skp" name="int-skp" value="0" class="skpInput"/> <input type="string" id="int-skp" name="int-skp" value="0" class="skpInput" tabindex="19"/>
</div> </div>
<div id="int-skp-assign" class="skpDesc"> <div id="int-skp-assign" class="skpDesc">
Manually Assigned: 0 Manually Assigned: 0
@ -219,8 +219,8 @@
</div> </div>
<div class="center" style="grid-column:4;grid-row:1"> <div class="center" style="grid-column:4;grid-row:1">
<div> <div>
<label for="def-skp" class="skpLabel" id="def-skp-label">Defense:</label><br> <label for="def-skp" class="skpLabel Fire" id="def-skp-label">Defense:</label><br>
<input type="string" id="def-skp" name="def-skp" value="0" class="skpInput"/> <input type="string" id="def-skp" name="def-skp" value="0" class="skpInput" tabindex="20"/>
</div> </div>
<div id="def-skp-assign" class="skpDesc"> <div id="def-skp-assign" class="skpDesc">
Manually Assigned: 0 Manually Assigned: 0
@ -233,8 +233,8 @@
</div> </div>
<div class="center" style="grid-column:5;grid-row:1"> <div class="center" style="grid-column:5;grid-row:1">
<div> <div>
<label for="agi-skp" class="skpLabel" id="agi-skp-label">Agility:</label><br> <label for="agi-skp" class="skpLabel Air" id="agi-skp-label">Agility:</label><br>
<input type="string" id="agi-skp" name="agi-skp" value="0" class="skpInput"/> <input type="string" id="agi-skp" name="agi-skp" value="0" class="skpInput" tabindex="21"/>
</div> </div>
<div id="agi-skp-assign" class="skpDesc"> <div id="agi-skp-assign" class="skpDesc">
Manually Assigned: 0 Manually Assigned: 0
@ -247,234 +247,15 @@
</div> </div>
</div> </div>
<div class="center" style="grid-column:1/span 3;grid-row:4"> <div class="center" style="grid-column:1/span 3;grid-row:4">
<div class="nomargin" id="summary-box"> <div class="nomargin" id="summary-box"></div>
</div>
<br><br>
<div class="externalBuffs hide-container-block" id="buff-box" style="display: none;">
<table class="externalBuffs" style="padding-bottom:20px">
<tr>
<p class = "buffs-title itemp title">
Spell Boosts & Powder Specials:
</p>
</tr>
<tr>
<td>
<button class = "button-narrow" id = "vanish-boost" onclick = "updateBoosts('vanish-boost', true)">
Vanish (+80%)
</button>
</td>
<td>
<button class = "button-narrow" id = "warscream-boost" onclick = "updateBoosts('warscream-boost', true)">
War Scream (+10%)
</button>
</td>
<td>
<button class = "button-narrow" id = "yourtotem-boost" onclick = "updateBoosts('yourtotem-boost', true)">
Your Totem (+35%)
</button>
</td>
<td>
<button class = "button-narrow" id = "allytotem-boost" onclick = "updateBoosts('allytotem-boost', true)">
Ally Totem (+15%)
</button>
</td>
<td>
<button class = "button-narrow" id = "bash-boost" onclick = "updateBoosts('bash-boost', true)">
Bash (+50%)
</button>
</td>
</tr>
</table>
<div class = "powder-specials" style="display: none;">
<div class = "powder-special-stats" style = "grid-column:1;grid-row:1">
<div class = "center" id = "powder-special-stats">
<p class = "itemp">Powder Specials</p>
</div>
</div>
<div style = "grid-column:2;grid-row:1">
<div class = "powder-special" style = "grid-column:2;grid-row:1">
<div class = "center" id = "powder-special">
<p class = "itemp Earth">
Quake
</p>
<p class = "Quake itemp" id = "Quake">
<b>
<button class = "button" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:2">
<div class = "center" id = "powder-special">
<p class = "itemp Thunder">
Chain Lightning
</p>
<p class = "Chain_Lightning itemp" id = "Chain_Lightning">
<b>
<button class = "button" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:3">
<div class = "center" id = "powder-special">
<p class = "itemp Water">
Curse
</p>
<p class = "Curse itemp" id = "Curse">
<b>
<button class = "button" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:4">
<div class = "center" id = "powder-special">
<p class = "itemp Fire">
Courage
</p>
<p class = "Courage itemp" id = "Courage">
<b>
<button class = "button" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:5">
<div class = "center" id = "powder-special">
<p class = "itemp Air">
Air Prison
</p>
<p class = "Air_Prison itemp" id = "Air_Prison">
<b>
<button class = "button" id = "Air_Prison-1" onclick = "updatePowderSpecials('Air_Prison-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-2" onclick = "updatePowderSpecials('Air_Prison-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-3" onclick = "updatePowderSpecials('Air_Prison-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-4" onclick = "updatePowderSpecials('Air_Prison-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-5" onclick = "updatePowderSpecials('Air_Prison-5', true)">
6
</button>
</b>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="center"> <div class="center">
<button class = "button" id = "update-button" onclick = "updateStats()"> <button class = "button" id = "update-button" onclick = "updateStats()" tabindex="22">
Update Stats Update Stats
</button> </button>
<button class = "button" id = "show-id-button" onclick = "toggleID()"> <button class = "button" id = "show-id-button" onclick = "toggleID()" tabindex="23">
Edit IDs Edit IDs
</button> </button>
</div><br> </div>
<div class="id-box fade-in" id="id-edit" style="display: none"> <div class="id-box fade-in" id="id-edit" style="display: none">
<div class="id-edit1"> <div class="id-edit1">
<table> <table>
@ -870,7 +651,221 @@
</div> </div>
</div> </div>
<br> <br>
<div class="externalBuffs hide-container-block" id="buff-box" style="display: none;">
<table class="externalBuffs" style="padding-bottom:20px">
<!--tr>
<p class = "buffs-title itemp title">
Spell Boosts & Powder Specials:
</p>
</tr-->
<tr>
<td>
<button class = "button-narrow" id = "vanish-boost" onclick = "updateBoosts('vanish-boost', true)">
Vanish (+80%)
</button>
</td>
<td>
<button class = "button-narrow" id = "warscream-boost" onclick = "updateBoosts('warscream-boost', true)">
War Scream (+10%)
</button>
</td>
<td>
<button class = "button-narrow" id = "yourtotem-boost" onclick = "updateBoosts('yourtotem-boost', true)">
Your Totem (+35%)
</button>
</td>
<td>
<button class = "button-narrow" id = "allytotem-boost" onclick = "updateBoosts('allytotem-boost', true)">
Ally Totem (+15%)
</button>
</td>
<td>
<button class = "button-narrow" id = "bash-boost" onclick = "updateBoosts('bash-boost', true)">
Bash (+50%)
</button>
</td>
</tr>
</table>
<div class = "powder-specials" style="display: none;">
<div class = "powder-special-stats" style = "grid-column:1;grid-row:1">
<div class = "center" id = "powder-special-stats">
<p class = "itemp">Powder Specials</p>
</div>
</div>
<div style = "grid-column:2;grid-row:1">
<div class = "powder-special" style = "grid-column:2;grid-row:1">
<div class = "center" id = "powder-special">
<p class = "itemp Earth">
Quake
</p>
<p class = "Quake itemp" id = "Quake">
<b>
<button class = "button" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:2">
<div class = "center" id = "powder-special">
<p class = "itemp Thunder">
Chain Lightning
</p>
<p class = "Chain_Lightning itemp" id = "Chain_Lightning">
<b>
<button class = "button" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:3">
<div class = "center" id = "powder-special">
<p class = "itemp Water">
Curse
</p>
<p class = "Curse itemp" id = "Curse">
<b>
<button class = "button" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:4">
<div class = "center" id = "powder-special">
<p class = "itemp Fire">
Courage
</p>
<p class = "Courage itemp" id = "Courage">
<b>
<button class = "button" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
6
</button>
</b>
</p>
</div>
</div>
<div class = "powder-special" style = "grid-column:2;grid-row:5">
<div class = "center" id = "powder-special">
<p class = "itemp Air">
Air Prison
</p>
<p class = "Air_Prison itemp" id = "Air_Prison">
<b>
<button class = "button" id = "Air_Prison-1" onclick = "updatePowderSpecials('Air_Prison-1', true)">
4
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-2" onclick = "updatePowderSpecials('Air_Prison-2', true)">
4.5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-3" onclick = "updatePowderSpecials('Air_Prison-3', true)">
5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-4" onclick = "updatePowderSpecials('Air_Prison-4', true)">
5.5
</button>
</b>
<b>
<button class = "button" id = "Air_Prison-5" onclick = "updatePowderSpecials('Air_Prison-5', true)">
6
</button>
</b>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="wide-space"></div> <div class="wide-space"></div>
</div> </div>
</div> </div>
@ -972,6 +967,7 @@
</div> </div>
<script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="powders.js"></script>
<script type="text/javascript" src="build_utils.js"></script> <script type="text/javascript" src="build_utils.js"></script>
<script type="text/javascript" src="skillpoints.js"></script> <script type="text/javascript" src="skillpoints.js"></script>
<script type="text/javascript" src="damage_calc.js"></script> <script type="text/javascript" src="damage_calc.js"></script>

10
narrow.css
View file

@ -6,6 +6,14 @@
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
.equipment{
padding: 0%;
display: grid;
grid-template-columns: min-content min-content auto;
gap: 5px;
grid-template-rows: min-content min-content auto;
}
.summary { .summary {
padding: 2% 4% 4%; padding: 2% 4% 4%;
display: grid; display: grid;
@ -50,7 +58,7 @@
} }
.idLabel, .skpLabel, .idDesc, .skpDesc { .idLabel, .skpLabel, .idDesc, .skpDesc {
font-size: 100%; font-size: 90%;
} }
.title{ .title{

26
styles.css
View file

@ -24,14 +24,6 @@ div {
padding: 0%; padding: 0%;
} }
.equipment{
padding: 0%;
display: grid;
grid-template-columns: min-content min-content min-content;
gap: 5px;
grid-template-rows: min-content min-content auto;
}
.skillpoints{ .skillpoints{
padding: 0% 4% 2%; padding: 0% 4% 2%;
display: grid; display: grid;
@ -92,13 +84,23 @@ table.center{
text-align: left; text-align: left;
} }
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .id-box, .box { .build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info, .powder-special, .powder-special-stats, .int-info, .box {
color: #aaa; color: #aaa;
background: #121516; background: #121516;
border: 3px solid #BCBCBC; border: 3px solid #BCBCBC;
border-radius: 3px; border-radius: 3px;
width: 96%; width: 96%;
} }
.id-box {
color: #aaa;
background: #121516;
border: 3px solid #BCBCBC;
border-radius: 3px;
width: 96%;
margin: 1em 0px 0px 0px;
}
.crafter, .recipe-stats, .craft-stats, .ing-stats { .crafter, .recipe-stats, .craft-stats, .ing-stats {
color: #aaa; color: #aaa;
background: #121516; background: #121516;
@ -131,6 +133,12 @@ table.center{
margin: 2px 2%; margin: 2px 2%;
padding: 0; padding: 0;
} }
.powderLeft {
margin-right: 0px;
}
.powderRight {
margin-left: 0px;
}
.space { .space {
margin-right: 5px; margin-right: 5px;
} }

13
wide.css
View file

@ -4,6 +4,15 @@
.spell-info-container { .spell-info-container {
grid-column:4; grid-column:4;
} }
.equipment{
padding: 0%;
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 50vw;
gap: 5px;
grid-template-rows: min-content min-content auto;
}
.sticky-box { .sticky-box {
position: sticky; position: sticky;
top: 0; top: 0;
@ -51,9 +60,9 @@
} }
.skpInput, .idInput { .skpInput, .idInput {
width: 90%; width: 95%;
height: 7vw; height: 7vw;
max-height: 30px; max-height: 20px;
} }
.wide-space { .wide-space {