Highlight changed fields, toggle color
This commit is contained in:
parent
4097dd033c
commit
6a9e31d5a7
5 changed files with 46 additions and 25 deletions
25
builder.js
25
builder.js
|
@ -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
10
index.html
|
@ -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
10
narrow.css
|
@ -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
16
styles.css
|
@ -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
10
wide.css
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue