Jump to content

Territory Traits: Difference between revisions

From Once Human Guide
← Older editNewer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
No edit summary
No edit summary
Line 6: Line 6:
<div style="max-width:420px; margin:0 auto;">
<div style="max-width:420px; margin:0 auto;">
<style>
<style>
.mw-tab-buttons { display: flex; width: 100%; background: #0b0f14; border-radius: 10px; padding: 4px; gap: 4px; }
.mw-tab-buttons {
.mw-tab-btn { flex: 1; text-align: center; padding: 10px 0; font-weight: 600; color: #cfd6df; background: #11161c; border-radius: 6px; cursor: pointer; }
  display: flex;
.mw-tab-btn.active { background: linear-gradient(180deg, #1ec8ff, #0ea5e9); color: #001018; }
  width: 100%;
  background: #0b0f14;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.mw-tab-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
  color: #cfd6df;
  background: #11161c;
  border-radius: 6px;
  cursor: pointer;
}
.mw-tab-btn.active {
  background: linear-gradient(180deg, #1ec8ff, #0ea5e9);
  color: #001018;
}
.dropdown { width: 100%; margin-top: 10px; }
.dropdown { width: 100%; margin-top: 10px; }
.dropdown select { width: 100%; padding: 10px; background: #11161c; color: #e6edf3; border: 1px solid #1f2a35; border-radius: 8px; font-size: 14px; }
.dropdown select {
.output { margin-top: 10px; background: #0d1319; border: 1px solid #1f2a35; border-radius: 10px; padding: 12px; }
  width: 100%;
  padding: 10px;
  background: #11161c;
  color: #e6edf3;
  border: 1px solid #1f2a35;
  border-radius: 8px;
  font-size: 14px;
}
.output {
  margin-top: 10px;
  background: #0d1319;
  border: 1px solid #1f2a35;
  border-radius: 10px;
  padding: 12px;
}
.output-title { font-weight: 700; margin-bottom: 8px; color: #e6edf3; }
.output-title { font-weight: 700; margin-bottom: 8px; color: #e6edf3; }
.output-line { font-size: 13px; color: #9fb0c3; padding: 4px 0; border-top: 1px solid #1a222b; }
.output-line {
  font-size: 13px;
  color: #9fb0c3;
  padding: 4px 0;
  border-top: 1px solid #1a222b;
}
.output-line:first-of-type { border-top: none; }
.output-line:first-of-type { border-top: none; }
.mw-tab-content { display: none; }
.mw-tab-content { display: none; }
.mw-tab-content.active { display: block; }
.mw-tab-content.active { display: block; }
</style>
</style>
<div class="mw-tab-buttons">
<div class="mw-tab-buttons">
   <div class="mw-tab-btn active" data-tab="slot1">Slot 1</div>
   <div class="mw-tab-btn active" data-tab="slot1">Slot 1</div>
Line 23: Line 62:
   <div class="mw-tab-btn" data-tab="slot3">Slot 3</div>
   <div class="mw-tab-btn" data-tab="slot3">Slot 3</div>
</div>
</div>
<div id="slot1" class="mw-tab-content active">
<div id="slot1" class="mw-tab-content active">
<div class="dropdown">
<div class="dropdown">
Line 43: Line 83:
   <option value="aquarius">Aquarius (Fetch-A-Lot)</option>
   <option value="aquarius">Aquarius (Fetch-A-Lot)</option>
   <option value="golden_toad">Golden Toad</option>
   <option value="golden_toad">Golden Toad</option>
   <option value="shadow_shroom">Shadow Shroom</option>
   <option value="shadow_shroom">Growshroom - Shadowshroom</option>
</select>
</select>
</div>
</div>
<div id="slot1Output" class="output" style="display:none;"></div>
<div id="slot1Output" class="output" style="display:none;"></div>
</div>
</div>
<div id="slot2" class="mw-tab-content">
<div id="slot2" class="mw-tab-content">
<div class="dropdown">
<div class="dropdown">
Line 77: Line 118:
<div id="slot2Output" class="output" style="display:none;"></div>
<div id="slot2Output" class="output" style="display:none;"></div>
</div>
</div>
<div id="slot3" class="mw-tab-content">
<div id="slot3" class="mw-tab-content">
<div class="dropdown">
<div class="dropdown">
Line 93: Line 135:
</div>
</div>
</div>
</div>
<script>
<script>
document.querySelectorAll('.mw-tab-btn').forEach(function(btn) {
document.querySelectorAll('.mw-tab-btn').forEach(btn => {
   btn.onclick = function() {
   btn.onclick = () => {
     document.querySelectorAll('.mw-tab-btn').forEach(function(b) { b.classList.remove('active'); });
     document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.mw-tab-content').forEach(function(c) { c.classList.remove('active'); });
     document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));
     btn.classList.add('active');
     btn.classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
     document.getElementById(btn.dataset.tab).classList.add('active');
   };
   };
});
});
var slot1Data = {
 
const slot1Data = {
   cheer_up: { title: "Cheer Up", lines: ["Max Mood +30% / +40% / +50%"] },
   cheer_up: { title: "Cheer Up", lines: ["Max Mood +30% / +40% / +50%"] },
   covert_energy: { title: "Covert Energy", lines: ["Max Deviant Power +10% to +35%"] },
   covert_energy: { title: "Covert Energy", lines: ["Max Deviant Power +10% to +35%"] },
   feeling_blue: { title: "Feeling Blue", lines: ["Max Mood -5% / -10%"] },
   feeling_blue: { title: "Feeling Blue", lines: ["Max Mood -5% / -10%"] },
   growing_pains: { title: "Growing Pains", lines: ["Max Power +30 to 50%; Mood recovery -5%"] },
   growing_pains: { title: "Growing Pains", lines: ["Max Power +30–50%; Mood recovery -5%"] },
   optimist: { title: "Optimist", lines: ["Max Mood +15 to 35%"] },
   optimist: { title: "Optimist", lines: ["Max Mood +15–35%"] },
   power_rewind: { title: "Power Rewind", lines: ["Power recovery +5 to 10%"] },
   power_rewind: { title: "Power Rewind", lines: ["Power recovery +5–10%"] },
   rise_and_shine: { title: "Rise and Shine", lines: ["Mood recovery +5 to 25%"] },
   rise_and_shine: { title: "Rise and Shine", lines: ["Mood recovery +5–25%"] },
   stable_energy: { title: "Stable Energy", lines: ["Max Deviant Power +30"] },
   stable_energy: { title: "Stable Energy", lines: ["Max Deviant Power +30"] },
   stable_vitality: { title: "Stable Vitality", lines: ["Max Mood +30"] },
   stable_vitality: { title: "Stable Vitality", lines: ["Max Mood +30"] },
Line 116: Line 160:
   pumpkin: { title: "Pumpkin Lantern (Buzzy Bee)", lines: ["+10% Power"] },
   pumpkin: { title: "Pumpkin Lantern (Buzzy Bee)", lines: ["+10% Power"] },
   gold_lightning: { title: "Gold Lightning (Electric Eel)", lines: ["+15% Recovery"] },
   gold_lightning: { title: "Gold Lightning (Electric Eel)", lines: ["+15% Recovery"] },
   good_fortune: { title: "Optimism - Cat", lines: ["+40% Mood"] },
   good_fortune: { title: "Optimism – Cat", lines: ["+40% Mood"] },
   aquarius: { title: "Aquarius (Fetch-A-Lot)", lines: ["+30% Recovery"] },
   aquarius: { title: "Aquarius (Fetch-A-Lot)", lines: ["+30% Recovery"] },
   golden_toad: { title: "Golden Toad", lines: ["+20% Recovery"] },
   golden_toad: { title: "Golden Toad", lines: ["+20% Recovery"] },
   shadow_shroom: { title: "Shadow Shroom", lines: ["+40% Energy"] }
   shadow_shroom: { title: "Growshroom - Shadowshroom", lines: ["Max Energy +40%"] }
};
};
var slot2Data = {
 
const slot2Data = {
   world_charm: { title: "A World of Charm", lines: ["10% give +20 Mood"] },
   world_charm: { title: "A World of Charm", lines: ["10% give +20 Mood"] },
   anti_burnout: { title: "Anti-Burnout", lines: ["20% give +5 Power"] },
   anti_burnout: { title: "Anti-Burnout", lines: ["20% give +5 Power"] },
Line 141: Line 186:
   admiral: { title: "Admiral", lines: ["3% no cost"] },
   admiral: { title: "Admiral", lines: ["3% no cost"] },
   diamond_duke: { title: "Diamond Duke", lines: ["5% no cost"] },
   diamond_duke: { title: "Diamond Duke", lines: ["5% no cost"] },
   workaholic_lights: { title: "Workaholic - Lights", lines: ["+20% duration"] },
   workaholic_lights: { title: "Workaholic – Lights", lines: ["+20% duration"] },
   gold_speaker: { title: "Gold Speaker", lines: ["Extra ores"] }
   gold_speaker: { title: "Gold Speaker", lines: ["Extra ores"] }
};
};
var slot3Data = {
 
const slot3Data = {
   brute_force: { title: "Brute Force Rules", lines: ["10% double output"] },
   brute_force: { title: "Brute Force Rules", lines: ["10% double output"] },
   clean: { title: "Clean and Hygienic", lines: ["Sanity over 20%"] },
   clean: { title: "Clean and Hygienic", lines: ["Sanity ≥ 20%"] },
   extra_load: { title: "Extra Load", lines: ["+15% storage"] },
   extra_load: { title: "Extra Load", lines: ["+15% storage"] },
   feline: { title: "Feline Creatures", lines: ["Extra lightweight item"] },
   feline: { title: "Feline Creatures", lines: ["Extra lightweight item"] },
Line 153: Line 199:
   top_grunt: { title: "Top Grunt", lines: ["Convert Mood to Energy"] }
   top_grunt: { title: "Top Grunt", lines: ["Convert Mood to Energy"] }
};
};
function bindDropdown(selectId, outputId, data) {
function bindDropdown(selectId, outputId, data) {
   document.getElementById(selectId).onchange = function() {
   document.getElementById(selectId).onchange = function () {
     var val = this.value;
     const val = this.value;
     var output = document.getElementById(outputId);
     const output = document.getElementById(outputId);
     if (!val) { output.style.display = "none"; return; }
     if (!val) { output.style.display = "none"; return; }
     var item = data[val];
     const item = data[val];
     output.innerHTML = '<div class="output-title">' + item.title + '</div>' +
     output.innerHTML =
       item.lines.map(function(line) { return '<div class="output-line">' + line + '</div>'; }).join("");
      `<div class="output-title">${item.title}</div>` +
       item.lines.map(line => `<div class="output-line">${line}</div>`).join("");
     output.style.display = "block";
     output.style.display = "block";
   };
   };

Revision as of 16:19, 27 April 2026

Return to Front Page
Deviant Trait Page

Slot 1
Slot 2
Slot 3

Retrieved from "https://ohwikiguide.com/index.php?title=Territory_Traits&oldid=1206"