morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Highlight changed fields, toggle color

Browse source
This commit is contained in:
b 2021-01-19 05:56:09 -06:00
parent 4097dd033c
commit 6a9e31d5a7
5 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
builder.js
View file

@ -21,7 +21,31 @@ let weaponTypes = [ "wand", "spear", "bow", "dagger", "relik" ];
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 editable_elems = [];
for (let i of editable_item_fields) {
let elem = document.getElementById(i);
elem.addEventListener("change", (event) => {
elem.classList.add("highlight");
});
editable_elems.push(elem);
}
let skp_order = ["str","dex","int","def","agi"];
for (let i of skp_order) {
let elem = document.getElementById(i+"-skp");
elem.addEventListener("change", (event) => {
elem.classList.add("highlight");
});
editable_elems.push(elem);
}
function clear_highlights() {
for (let i of editable_elems) {
i.classList.remove("highlight");
}
}
let skp_elements = ["e","t","w","f","a"];
let elementIcons = ["\u2724","\u2726", "\u2749", "\u2739", "\u274b" ];
let skpReqs = skp_order.map(x => x + "Req");
@ -838,6 +862,7 @@ function calculateBuildStats() {
}
location.hash = encodeBuild();
clear_highlights();
}
function copyBuild() {

10
index.html
View file

@ -206,27 +206,27 @@
</tr>
<tr>
<td>
<button class = "button-narrow" id = "vanish-boost" onclick = "updateBoosts('vanish-boost')">
<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')">
<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')">
<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')">
<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')">
<button class = "button-narrow" id = "bash-boost" onclick = "updateBoosts('bash-boost', true)">
Bash (+50%)
</button>
</td>

10
narrow.css
View file

@ -82,13 +82,3 @@ button {
font-size: 150%;
display: inline-block;
}
button:hover {
background-color: #556;
}
button:active {
background-color: #558;
box-shadow: 0 3px #666;
transform: translateY(1px);
}

16
styles.css
View file

@ -267,6 +267,17 @@ button.toggleOn{
background-color:#0a0;
border: 3 px solid rgb(0, 70, 0);
}
.toggleOn:hover {
background-color: #585;
}
button:hover {
background-color: #556;
}
button:active {
background-color: #558;
box-shadow: 0 3px #666;
transform: translateY(1px);
}
.funnynumber {
background-image: linear-gradient(to left, #f5f, #a0a, #5ff, #5f5, #ff5, #fa0, #a00); -webkit-background-clip: text;
@ -305,3 +316,8 @@ button.toggleOn{
opacity: 1;
}
}
.highlight {
color: #ff5;
background-color: #775;
}

10
wide.css
View file

@ -96,13 +96,3 @@ button {
font-size: 120%;
display: inline-block;
}
button:hover {
background-color: #556;
}
button:active {
background-color: #558;
box-shadow: 0 3px #666;
transform: translateY(1px);
}