Gear Hides Test: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 30: | Line 30: | ||
<div id="t1" class="mw-tab-content active"> | <div id="t1" class="mw-tab-content active"> | ||
<div class="dropdown"><select id="helmetSelect"><option value="">Select Item</option><option value=" | <div class="dropdown"> | ||
<select id="helmetSelect"> | |||
<option value="">Select Item</option> | |||
<option value="bear_skin">Bear Skin</option> | |||
<option value="beach_croc">Beach Crocodile Skin</option> | |||
<option value="cave_bear">Cave Bear Skin</option> | |||
<option value="coastal_croc">Coastal Bay Crocodile Skin</option> | |||
<option value="cowhide">Cowhide</option> | |||
<option value="crocodile_hide">Crocodile Hide</option> | |||
<option value="desert_fox">Desert Fox Skin</option> | |||
<option value="hide">Hide</option> | |||
<option value="military_helmet">Old Military Helmet</option> | |||
<option value="raw">Raw Hide</option> | |||
</select> | |||
</div> | |||
<div id="helmetOutput" class="output" style="display:none;"></div> | <div id="helmetOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
<div id="t2" class="mw-tab-content"> | <div id="t2" class="mw-tab-content"> | ||
<div class="dropdown"><select id="topSelect"><option value="">Select Item | <div class="dropdown"><select id="topSelect"><option value="">Select Item</option></select></div> | ||
<div id="topOutput" class="output" style="display:none;"></div> | <div id="topOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
<div id="t3" class="mw-tab-content"> | <div id="t3" class="mw-tab-content"> | ||
<div class="dropdown"><select id="bottomsSelect"><option value="">Select Item | <div class="dropdown"><select id="bottomsSelect"><option value="">Select Item</option></select></div> | ||
<div id="bottomsOutput" class="output" style="display:none;"></div> | <div id="bottomsOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
<div id="t4" class="mw-tab-content"> | <div id="t4" class="mw-tab-content"> | ||
<div class="dropdown"><select id="glovesSelect"><option value="">Select Item | <div class="dropdown"><select id="glovesSelect"><option value="">Select Item</option></select></div> | ||
<div id="glovesOutput" class="output" style="display:none;"></div> | <div id="glovesOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
<div id="t5" class="mw-tab-content"> | <div id="t5" class="mw-tab-content"> | ||
<div class="dropdown"><select id="bootSelect"><option value="">Select Item | <div class="dropdown"><select id="bootSelect"><option value="">Select Item</option></select></div> | ||
<div id="bootOutput" class="output" style="display:none;"></div> | <div id="bootOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
<div id="t6" class="mw-tab-content"> | <div id="t6" class="mw-tab-content"> | ||
<div class="dropdown"><select id="maskSelect"><option value="">Select Item | <div class="dropdown"><select id="maskSelect"><option value="">Select Item</option></select></div> | ||
<div id="maskOutput" class="output" style="display:none;"></div> | <div id="maskOutput" class="output" style="display:none;"></div> | ||
</div> | </div> | ||
| Line 66: | Line 81: | ||
}); | }); | ||
const | const helmetData = { | ||
bear_skin: { label:"Bear Skin", content:"Fullness DMG Reduction; DMG Reduction +3% when Energy is at 100." }, | |||
beach_croc: { label:"Beach Crocodile Skin", content:"Hydration DMG Reduction; DMG Reduction +4%; Lose Hydration 30% more quickly while in combat." }, | |||
cave_bear: { label:"Cave Bear Skin", content:"DMG Recovery; Upon taking DMG, expend 10 Energy to recover 10% HP; Cooldown: 30 seconds." }, | |||
coastal_croc: { label:"Coastal Bay Crocodile Skin", content:"Invisibility DMG Reduction; DMG Reduction +10% while invisible." }, | |||
cowhide: { label:"Cowhide", content:"Crit DMG Reduction; Crit DMG Reduction +7%." }, | |||
crocodile_hide: { label:"Crocodile Hide", content:"Hydration Reduction; DMG Reduction +3% when Hydration is at 100." }, | |||
desert_fox: { label:"Desert Fox Skin", content:"Non-Combat DMG Reduction; Recover 0.5% HP per second; Lose Hydration 50% more quickly." }, | |||
hide: { label:"Hide", content:"Max HP; Max HP +100." }, | |||
military_helmet:{ label:"Old Military Helmet", content:"Max HP +75." }, | |||
raw: { label:"Raw Hide", content:"No perk applied." } | |||
}; | |||
document.getElementById("helmetSelect").onchange = function() { | |||
const val = this.value; | |||
const output = document.getElementById("helmetOutput"); | |||
if (!val) { output.style.display="none"; return; } | |||
const item = helmetData[val]; | |||
output.innerHTML = `<div class="output-title">${item.label}</div><div class="output-line">${item.content}</div>`; | |||
output.style.display = "block"; | |||
}; | }; | ||
function bindSelect(selectId, outputId | function bindSelect(selectId, outputId) { | ||
document.getElementById(selectId).onchange = function() { | document.getElementById(selectId).onchange = function() { | ||
const output = document.getElementById(outputId); | const output = document.getElementById(outputId); | ||
output.style.display = "none"; | |||
}; | }; | ||
} | } | ||
bindSelect("topSelect","topOutput"); | |||
bindSelect("topSelect","topOutput | bindSelect("bottomsSelect","bottomsOutput"); | ||
bindSelect("bottomsSelect","bottomsOutput | bindSelect("glovesSelect","glovesOutput"); | ||
bindSelect("glovesSelect","glovesOutput | bindSelect("bootSelect","bootOutput"); | ||
bindSelect("bootSelect","bootOutput | bindSelect("maskSelect","maskOutput"); | ||
bindSelect("maskSelect","maskOutput | |||
</script> | </script> | ||
</html> | </html> | ||