Refactor some stuff, add ID editing (no saving)

This commit is contained in:
b 2021-01-18 08:18:14 -06:00
parent acf7532061
commit ca179c7c40
6 changed files with 402 additions and 88 deletions

View file

@ -403,14 +403,10 @@ class Build{
}
}
}
statMap.set("poisonPct", 100);
// The stuff relevant for damage calculation!!! @ferricles
statMap.set("atkSpd", this.weapon.get("atkSpd"));
statMap.set("damageRaw", [this.weapon.get("nDam"), this.weapon.get("eDam"), this.weapon.get("tDam"), this.weapon.get("wDam"), this.weapon.get("fDam"), this.weapon.get("aDam")]);
statMap.set("damageBonus", [statMap.get("eDamPct"), statMap.get("tDamPct"), statMap.get("wDamPct"), statMap.get("fDamPct"), statMap.get("aDamPct")]);
statMap.set("defRaw", [statMap.get("eDam"), statMap.get("tDef"), statMap.get("wDef"), statMap.get("fDef"), statMap.get("aDef")]);
statMap.set("defBonus", [statMap.get("eDamPct"), statMap.get("tDefPct"), statMap.get("wDefPct"), statMap.get("fDefPct"), statMap.get("aDefPct")]);
statMap.set("poisonPct", 100);
for (const x of skp_elements) {
this.externalStats.set(x + "DamPct", 0);
@ -421,6 +417,15 @@ class Build{
this.externalStats.set("defBonus",[0, 0, 0, 0, 0]);
this.externalStats.set("poisonPct", 0);
this.statMap = statMap;
this.aggregateStats();
}
aggregateStats() {
let statMap = this.statMap;
statMap.set("damageRaw", [this.weapon.get("nDam"), this.weapon.get("eDam"), this.weapon.get("tDam"), this.weapon.get("wDam"), this.weapon.get("fDam"), this.weapon.get("aDam")]);
statMap.set("damageBonus", [statMap.get("eDamPct"), statMap.get("tDamPct"), statMap.get("wDamPct"), statMap.get("fDamPct"), statMap.get("aDamPct")]);
statMap.set("defRaw", [statMap.get("eDef"), statMap.get("tDef"), statMap.get("wDef"), statMap.get("fDef"), statMap.get("aDef")]);
statMap.set("defBonus", [statMap.get("eDefPct"), statMap.get("tDefPct"), statMap.get("wDefPct"), statMap.get("fDefPct"), statMap.get("aDefPct")]);
}
}

View file

@ -3,7 +3,7 @@ const url_tag = location.hash.slice(1);
console.log(url_base);
console.log(url_tag);
const BUILD_VERSION = "6.9.3";
const BUILD_VERSION = "6.9.4";
function setTitle() {
document.getElementById("header").textContent = "WynnBuilder version "+BUILD_VERSION+" (db version "+DB_VERSION+")";
@ -19,6 +19,7 @@ let accessoryTypes = [ "ring", "bracelet", "necklace" ];
let weaponTypes = [ "wand", "spear", "bow", "dagger", "relik" ];
// THIS IS SUPER DANGEROUS, WE SHOULD NOT BE KEEPING THIS IN SO MANY PLACES
let item_fields = [ "name", "displayName", "tier", "set", "slots", "type", "material", "drop", "quest", "restrict", "nDam", "fDam", "wDam", "aDam", "tDam", "eDam", "atkSpd", "hp", "fDef", "wDef", "aDef", "tDef", "eDef", "lvl", "classReq", "strReq", "dexReq", "intReq", "defReq", "agiReq", "hprPct", "mr", "sdPct", "mdPct", "ls", "ms", "xpb", "lb", "ref", "str", "dex", "int", "agi", "def", "thorns", "expd", "spd", "atkTier", "poison", "hpBonus", "spRegen", "eSteal", "hprRaw", "sdRaw", "mdRaw", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "fixID", "category", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "rainbowRaw", "sprint", "sprintReg", "jh", "lq", "gXp", "gSpd", "id" ];
let editable_item_fields = [ "sdPct", "sdRaw", "mdPct", "mdRaw", "poison", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "hprRaw", "hprPct", "hpBonus", "atkTier", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4" ];
let skp_order = ["str","dex","int","def","agi"];
let skp_elements = ["e","t","w","f","a"];
@ -470,6 +471,11 @@ function calculateBuild(save_skp, skp){
setText(skp_order[i] + "-skp-base", "Original Value: " + skillpoints[i]);
}
for (let id of editable_item_fields) {
setValue(id, player_build.statMap.get(id));
setText(id+"-base", "Original Value: " + player_build.statMap.get(id));
}
if (save_skp) {
// TODO: reduce duplicated code, @updateStats
let skillpoints = player_build.total_skillpoints;
@ -582,15 +588,20 @@ function updateStats() {
delta_total += delta;
}
player_build.assigned_skillpoints += delta_total;
calculateBuildStats();
if(player_build){
updatePowderSpecials("skip");
updateBoosts("skip");
updatePowderSpecials("skip", false);
updateBoosts("skip", false);
}
for (let id of editable_item_fields) {
player_build.statMap.set(id, parseInt(getValue(id)));
}
player_build.aggregateStats();
console.log(player_build.statMap);
calculateBuildStats();
}
/* Updates all spell boosts
*/
function updateBoosts(buttonId) {
function updateBoosts(buttonId, recalcStats) {
let elem = document.getElementById(buttonId);
let name = buttonId.split("-")[0];
if(buttonId !== "skip") {
@ -618,12 +629,14 @@ function updateBoosts(buttonId) {
}
}
}
if (recalcStats) {
calculateBuildStats();
}
}
/* Updates all powder special boosts
*/
function updatePowderSpecials(buttonId){
function updatePowderSpecials(buttonId, recalcStats) {
//console.log(player_build.statMap);
let name = (buttonId).split("-")[0];
@ -703,8 +716,10 @@ function updatePowderSpecials(buttonId){
}
}
if (recalcStats) {
calculateBuildStats();
}
displayPowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build);
calculateBuildStats(); //also make damage boosts apply ;-;
}
/* Calculates all build statistics and updates the entire display.
*/
@ -868,5 +883,18 @@ function resetFields(){
calculateBuild();
}
function toggleID() {
let button = document.getElementById("show-id-button");
let targetDiv = document.getElementById("id-edit");
if (button.classList.contains("toggleOn")) { //toggle the pressed button off
targetDiv.style.display = "none";
button.classList.remove("toggleOn");
}
else {
targetDiv.style.display = "block";
button.classList.add("toggleOn");
}
}
load_init(init);

View file

@ -442,7 +442,7 @@
<div class="center" style="grid-column:1;grid-row:1">
<div>
<label for="str-skp" class="skpLabel" id="str-skp-label">Strength:</label><br>
<input class="skp-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"/>
</div>
<div id="str-skp-assign">
Manually Assigned: 0
@ -456,7 +456,7 @@
<div class="center" style="grid-column:2;grid-row:1">
<div>
<label for="dex-skp" class="skpLabel" id="dex-skp-label">Dexterity:</label><br>
<input class="skp-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"/>
</div>
<div id="dex-skp-assign">
Manually Assigned: 0
@ -470,7 +470,7 @@
<div class="center" style="grid-column:3;grid-row:1">
<div>
<label for="int-skp" class="skpLabel" id="int-skp-label">Intelligence:</label><br>
<input class="skp-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"/>
</div>
<div id="int-skp-assign">
Manually Assigned: 0
@ -484,7 +484,7 @@
<div class="center" style="grid-column:4;grid-row:1">
<div>
<label for="def-skp" class="skpLabel" id="def-skp-label">Defense:</label><br>
<input class="skp-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"/>
</div>
<div id="def-skp-assign">
Manually Assigned: 0
@ -498,7 +498,7 @@
<div class="center" style="grid-column:5;grid-row:1">
<div>
<label for="agi-skp" class="skpLabel" id="agi-skp-label">Agility:</label><br>
<input class="skp-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"/>
</div>
<div id="agi-skp-assign">
Manually Assigned: 0
@ -510,13 +510,317 @@
</div>
</div>
</div>
<div class="id-box fade-in" id="id-edit" style="display: none">
<div class="id-edit1">
<div class="idCenter">
<div class="idWrap">
<div>
<label for="sdPct" class="idLabel" id="sdPct-label">Spell Damage %:</label><br>
<input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
</div>
<div id="sdPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="sdRaw" class="idLabel" id="sdRaw-label">Spell Damage Raw:</label><br>
<input type="number" id="sdRaw" name="sdRaw" value="0" class="idInput"/>
</div>
<div id="sdRaw-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="mdPct" class="idLabel" id="mdPct-label">Melee Damage %:</label><br>
<input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
</div>
<div id="mdPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="mdRaw" class="idLabel" id="mdRaw-label">Melee Damage Raw:</label><br>
<input type="number" id="mdRaw" name="mdRaw" value="0" class="idInput"/>
</div>
<div id="mdRaw-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="poison" class="idLabel" id="poison-label">Poison:</label><br>
<input type="number" id="poison" name="poison" value="0" class="idInput"/>
</div>
<div id="poison-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="eDamPct" class="idLabel" id="eDamPct-label">Earth Damage %:</label><br>
<input type="number" id="eDamPct" name="eDamPct" value="0" class="idInput"/>
</div>
<div id="eDamPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="tDamPct" class="idLabel" id="tDamPct-label">Thunder Damage %:</label><br>
<input type="number" id="tDamPct" name="tDamPct" value="0" class="idInput"/>
</div>
<div id="tDamPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="wDamPct" class="idLabel" id="wDamPct-label">Water Damage %:</label><br>
<input type="number" id="wDamPct" name="wDamPct" value="0" class="idInput"/>
</div>
<div id="wDamPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="fDamPct" class="idLabel" id="fDamPct-label">Fire Damage %:</label><br>
<input type="number" id="fDamPct" name="fDamPct" value="0" class="idInput"/>
</div>
<div id="fDamPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="aDamPct" class="idLabel" id="aDamPct-label">Air Damage %:</label><br>
<input type="number" id="aDamPct" name="aDamPct" value="0" class="idInput"/>
</div>
<div id="aDamPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="eDefPct" class="idLabel" id="eDefPct-label">Earth Defense %:</label><br>
<input type="number" id="eDefPct" name="eDefPct" value="0" class="idInput"/>
</div>
<div id="eDefPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="tDefPct" class="idLabel" id="tDefPct-label">Thunder Defense %:</label><br>
<input type="number" id="tDefPct" name="tDefPct" value="0" class="idInput"/>
</div>
<div id="tDefPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="wDefPct" class="idLabel" id="wDefPct-label">Water Defense %:</label><br>
<input type="number" id="wDefPct" name="wDefPct" value="0" class="idInput"/>
</div>
<div id="wDefPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="fDefPct" class="idLabel" id="fDefPct-label">Fire Defense %:</label><br>
<input type="number" id="fDefPct" name="fDefPct" value="0" class="idInput"/>
</div>
<div id="fDefPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="aDefPct" class="idLabel" id="aDefPct-label">Air Defense %:</label><br>
<input type="number" id="aDefPct" name="aDefPct" value="0" class="idInput"/>
</div>
<div id="aDefPct-base">
Original Value: 0
</div>
</div>
</div>
</div>
<div class="id-edit2">
<div class="idCenter">
<div class="idWrap">
<div>
<label for="hprRaw" class="idLabel" id="hprRaw-label">Health Regen Raw:</label><br>
<input type="number" id="hprRaw" name="hprRaw" value="0" class="idInput"/>
</div>
<div id="hprRaw-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="hprPct" class="idLabel" id="hprPct-label">Health Regen %:</label><br>
<input type="number" id="hprPct" name="hprPct" value="0" class="idInput"/>
</div>
<div id="hprPct-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="hpBonus" class="idLabel" id="hpBonus-label">Health Bonus:</label><br>
<input type="number" id="hpBonus" name="hpBonus" value="0" class="idInput"/>
</div>
<div id="hpBonus-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="atkTier" class="idLabel" id="atkTier-label">Attack Speed Bonus:</label><br>
<input type="number" id="atkTier" name="atkTier" value="0" class="idInput"/>
</div>
<div id="atkTier-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spPct1" class="idLabel" id="spPct1-label">1st Spell Cost %:</label><br>
<input type="number" id="spPct1" name="spPct1" value="0" class="idInput"/>
</div>
<div id="spPct1-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spPct2" class="idLabel" id="spPct2-label">2nd Spell Cost %:</label><br>
<input type="number" id="spPct2" name="spPct2" value="0" class="idInput"/>
</div>
<div id="spPct2-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spPct3" class="idLabel" id="spPct3-label">3rd Spell Cost %:</label><br>
<input type="number" id="spPct3" name="spPct3" value="0" class="idInput"/>
</div>
<div id="spPct3-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spPct4" class="idLabel" id="spPct4-label">4th Spell Cost %:</label><br>
<input type="number" id="spPct4" name="spPct4" value="0" class="idInput"/>
</div>
<div id="spPct4-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spRaw1" class="idLabel" id="spRaw1-label">1st Spell Cost Raw:</label><br>
<input type="number" id="spRaw1" name="spRaw1" value="0" class="idInput"/>
</div>
<div id="spRaw1-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spRaw2" class="idLabel" id="spRaw2-label">2nd Spell Cost Raw:</label><br>
<input type="number" id="spRaw2" name="spRaw2" value="0" class="idInput"/>
</div>
<div id="spRaw2-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spRaw3" class="idLabel" id="spRaw3-label">3rd Spell Cost Raw:</label><br>
<input type="number" id="spRaw3" name="spRaw3" value="0" class="idInput"/>
</div>
<div id="spRaw3-base">
Original Value: 0
</div>
</div>
</div>
<div class="idCenter">
<div class="idWrap">
<div>
<label for="spRaw4" class="idLabel" id="spRaw4-label">4th Spell Cost Raw:</label><br>
<input type="number" id="spRaw4" name="spRaw4" value="0" class="idInput"/>
</div>
<div id="spRaw4-base">
Original Value: 0
</div>
</div>
</div>
</div>
</div>
<br>
<div class="center">
<button class = "button" id = "update-button" onclick = "updateStats()">
Update Stats
</button>
<!--button class = "button" id = "show-id-button" onclick = "showIDs()">
<button class = "button" id = "show-id-button" onclick = "toggleID()">
Edit IDs
</button-->
</button>
</div>
<div class = "build hide-container-grid" style="display: none;">
<div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">

View file

@ -33,40 +33,9 @@
max-height: 50px;
}
.skp-input {
width: 15vw;
.skpInput, .idInput {
width: 90%;
height: 7vw;
max-height: 30px;
}
.hide-container-block {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.hide-container-grid {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.set-info-div {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View file

@ -28,7 +28,7 @@ div {
grid-template-rows: min-content min-content auto;
}
.skillpoints {
.skillpoints, .id-edit1 {
padding: 0% 4% 2%;
display: grid;
grid-template-columns: repeat(5, 1fr);
@ -36,6 +36,14 @@ div {
grid-auto-rows: minmax(60px, auto);
}
.id-edit2 {
padding: 0% 4% 2%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
grid-auto-rows: minmax(60px, auto);
}
.powder-specials{
padding: 0% 4% 2%;
display: grid;
@ -67,6 +75,7 @@ a.link{
}
.center {
text-align: center;
position: relative;
}
table.center{
margin: 10px;
@ -83,7 +92,7 @@ table.center{
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, .crafter, .recipe-stats, .craft-stats, .ing-stats {
.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, .crafter, .recipe-stats, .craft-stats, .ing-stats, .id-box {
color: #aaa;
background: #121516;
border: 3px solid #BCBCBC;
@ -177,11 +186,21 @@ table.center{
content: "\2764" ' ';
}
.skpInput, .skplabel {
.skplabel {
display: block;
margin: auto;
}
.idCenter {
text-align: center;
padding: 1em 0px 0px 0px;
position: relative;
display: flex;
}
.idWrap {
align-self: flex-end;
}
/*Scrollbar*/
/* width */
::-webkit-scrollbar {
@ -301,3 +320,23 @@ button.toggleOn{
.externalBuffs {
width: 100%;
}
.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View file

@ -43,38 +43,7 @@
}
.skp-input {
.skpInput, .idInput {
}
.hide-container-block {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.hide-container-grid {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.set-info-div {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}