Jump to content

Gear Hides Test: Difference between revisions

From Once Human Guide
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="h1">Basic Helmet</option></select></div>
   <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</option><option value="tp1">Basic Top</option></select></div>
   <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</option><option value="b1">Basic Bottoms</option></select></div>
   <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</option><option value="g1">Basic Gloves</option></select></div>
   <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</option><option value="bo1">Basic Boot</option></select></div>
   <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</option><option value="m1">Basic Mask</option></select></div>
   <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 data = {
const helmetData = {
   helmet: {
   bear_skin:     { label:"Bear Skin",                   content:"Fullness DMG Reduction; DMG Reduction +3% when Energy is at 100." },
    h1: { title:"Basic Helmet", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
  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." },
   top: {
  coastal_croc:  { label:"Coastal Bay Crocodile Skin",   content:"Invisibility DMG Reduction; DMG Reduction +10% while invisible." },
    tp1: { title:"Basic Top", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
   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." },
   bottoms: {
   desert_fox:    { label:"Desert Fox Skin",             content:"Non-Combat DMG Reduction; Recover 0.5% HP per second; Lose Hydration 50% more quickly." },
    b1: { title:"Basic Bottoms", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
  hide:          { label:"Hide",                         content:"Max HP; Max HP +100." },
  },
   military_helmet:{ label:"Old Military Helmet",         content:"Max HP +75." },
   gloves: {
  raw:            { label:"Raw Hide",                     content:"No perk applied." }
     g1: { title:"Basic Gloves", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
};
  },
 
   boot: {
document.getElementById("helmetSelect").onchange = function() {
    bo1: { title:"Basic Boot", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
   const val = this.value;
   },
   const output = document.getElementById("helmetOutput");
   mask: {
  if (!val) { output.style.display="none"; return; }
    m1: { title:"Basic Mask", lines:["Tech Level 1: YOUR DATA HERE","Tech Level 8: YOUR DATA HERE","Tech Level 12: YOUR DATA HERE"] }
  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, category) {
function bindSelect(selectId, outputId) {
   document.getElementById(selectId).onchange = function() {
   document.getElementById(selectId).onchange = function() {
    const val = this.value;
     const output = document.getElementById(outputId);
     const output = document.getElementById(outputId);
     if (!val) { output.style.display="none"; return; }
     output.style.display = "none";
    const item = data[category][val];
    output.innerHTML = `<div class="output-title">${item.title}</div>` + item.lines.map(l=>`<div class="output-line">${l}</div>`).join("");
    output.style.display = "block";
   };
   };
}
}


bindSelect("helmetSelect","helmetOutput","helmet");
bindSelect("topSelect","topOutput");
bindSelect("topSelect","topOutput","top");
bindSelect("bottomsSelect","bottomsOutput");
bindSelect("bottomsSelect","bottomsOutput","bottoms");
bindSelect("glovesSelect","glovesOutput");
bindSelect("glovesSelect","glovesOutput","gloves");
bindSelect("bootSelect","bootOutput");
bindSelect("bootSelect","bootOutput","boot");
bindSelect("maskSelect","maskOutput");
bindSelect("maskSelect","maskOutput","mask");
</script>
</script>


</html>
</html>

Revision as of 13:25, 24 April 2026

Return to Front Page

Helmet
Top
Bottoms
Gloves
Boot
Mask