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>
/* ===== TABS ===== */
.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%;
.dropdown { width: 100%; margin-top: 10px; }
  background: #0b0f14;
.dropdown select { width: 100%; padding: 10px; background: #11161c; color: #e6edf3; border: 1px solid #1f2a35; border-radius: 8px; font-size: 14px; }
  border-radius: 10px;
.output { margin-top: 10px; background: #0d1319; border: 1px solid #1f2a35; border-radius: 10px; padding: 12px; }
  padding: 4px;
.output-title { font-weight: 700; margin-bottom: 8px; color: #e6edf3; }
  gap: 4px;
.output-line { font-size: 13px; color: #9fb0c3; padding: 4px 0; border-top: 1px solid #1a222b; }
}
.output-line:first-of-type { border-top: none; }
.mw-tab-btn {
.mw-tab-content { display: none; }
  flex: 1;
.mw-tab-content.active { display: block; }
  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 UI ===== */
.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;
}
/* ===== OUTPUT PANEL ===== */
.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-line {
  font-size: 13px;
  color: #9fb0c3;
  padding: 4px 0;
  border-top: 1px solid #1a222b;
}
.output-line:first-of-type {
  border-top: none;
}
.mw-tab-content {
  display: none;
}
.mw-tab-content.active {
  display: block;
}
</style>
</style>
<!-- TABS -->
<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 78: Line 23:
   <div class="mw-tab-btn" data-tab="slot3">Slot 3</div>
   <div class="mw-tab-btn" data-tab="slot3">Slot 3</div>
</div>
</div>
<!-- ================= SLOT 1 ================= -->
<div id="slot1" class="mw-tab-content active">
<div id="slot1" class="mw-tab-content active">
<div class="dropdown">
<div class="dropdown">
Line 104: Line 48:
<div id="slot1Output" class="output" style="display:none;"></div>
<div id="slot1Output" class="output" style="display:none;"></div>
</div>
</div>
<!-- ================= SLOT 2 ================= -->
<div id="slot2" class="mw-tab-content">
<div id="slot2" class="mw-tab-content">
<div class="dropdown">
<div class="dropdown">
Line 134: Line 77:
<div id="slot2Output" class="output" style="display:none;"></div>
<div id="slot2Output" class="output" style="display:none;"></div>
</div>
</div>
<!-- ================= SLOT 3 ================= -->
<div id="slot3" class="mw-tab-content">
<div id="slot3" class="mw-tab-content">
<div class="dropdown">
<div class="dropdown">
Line 143: Line 85:
   <option value="extra_load">Extra Load</option>
   <option value="extra_load">Extra Load</option>
   <option value="feline">Feline Creatures</option>
   <option value="feline">Feline Creatures</option>
  <option value="herbivore">Herbivore (Deer)</option>
   <option value="moonlight">Moonlight Assault</option>
   <option value="moonlight">Moonlight Assault</option>
   <option value="top_grunt">Top Grunt</option>
   <option value="top_grunt">Top Grunt</option>
Line 151: Line 94:
</div>
</div>
<script>
<script>
/* TAB SYSTEM */
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');
   };
   };
});
});
/* DATA */
var slot1Data = {
const slot1Data = {
   cheer_up: { title: "Cheer Up", lines: ["Max Mood +30% / +40% / +50%"] },
   cheer_up: {
   covert_energy: { title: "Covert Energy", lines: ["Max Deviant Power +10% to +35%"] },
    title: "Cheer Up",
   feeling_blue: { title: "Feeling Blue", lines: ["Max Mood -5% / -10%"] },
    lines: ["Max Mood +30% / +40% / +50%"]
   growing_pains: { title: "Growing Pains", lines: ["Max Power +30 to 50%; Mood recovery -5%"] },
  },
   optimist: { title: "Optimist", lines: ["Max Mood +15 to 35%"] },
   covert_energy: {
   power_rewind: { title: "Power Rewind", lines: ["Power recovery +5 to 10%"] },
    title: "Covert Energy",
   rise_and_shine: { title: "Rise and Shine", lines: ["Mood recovery +5 to 25%"] },
    lines: ["Max Deviant Power +10% to +35%"]
   stable_energy: { title: "Stable Energy", lines: ["Max Deviant Power +30"] },
  },
   stable_vitality: { title: "Stable Vitality", lines: ["Max Mood +30"] },
   feeling_blue: {
   upper_hand: { title: "Upper Hand", lines: ["Convert Mood to Power at 0"] },
    title: "Feeling Blue",
   worn_out: { title: "Worn-out", lines: ["Max Power -5% / -10%"] },
    lines: ["Max Mood -5% / -10%"]
   pumpkin: { title: "Pumpkin Lantern (Buzzy Bee)", lines: ["+10% Power"] },
  },
   gold_lightning: { title: "Gold Lightning (Electric Eel)", lines: ["+15% Recovery"] },
   growing_pains: {
   good_fortune: { title: "Optimism - Cat", lines: ["+40% Mood"] },
    title: "Growing Pains",
   aquarius: { title: "Aquarius (Fetch-A-Lot)", lines: ["+30% Recovery"] },
    lines: ["Max Power +30–50%; Mood recovery -5%"]
   golden_toad: { title: "Golden Toad", lines: ["+20% Recovery"] },
  },
   shadow_shroom: { title: "Shadow Shroom", lines: ["+40% Energy"] }
   optimist: {
    title: "Optimist",
    lines: ["Max Mood +15–35%"]
  },
   power_rewind: {
    title: "Power Rewind",
    lines: ["Power recovery +5–10%"]
  },
   rise_and_shine: {
    title: "Rise and Shine",
    lines: ["Mood recovery +5–25%"]
  },
   stable_energy: {
    title: "Stable Energy",
    lines: ["Max Deviant Power +30"]
  },
   stable_vitality: {
    title: "Stable Vitality",
    lines: ["Max Mood +30"]
  },
   upper_hand: {
    title: "Upper Hand",
    lines: ["Convert Mood to Power at 0"]
  },
   worn_out: {
    title: "Worn-out",
    lines: ["Max Power -5% / -10%"]
  },
   pumpkin: {
    title: "Pumpkin Lantern (Buzzy Bee)",
    lines: ["+10% Power"]
  },
   gold_lightning: {
    title: "Gold Lightning (Electric Eel)",
    lines: ["+15% Recovery"]
  },
   good_fortune: {
    title: "Optimism – Cat",
    lines: ["+40% Mood"]
  },
   aquarius: {
    title: "Aquarius (Fetch-A-Lot)",
    lines: ["+30% Recovery"]
  },
   golden_toad: {
    title: "Golden Toad",
    lines: ["+20% Recovery"]
  },
   shadow_shroom: {
    title: "Shadow Shroom",
    lines: ["+40% Energy"]
  }
};
};
const slot2Data = {
var slot2Data = {
   world_charm: {
   world_charm: { title: "A World of Charm", lines: ["10% give +20 Mood"] },
    title: "A World of Charm",
   anti_burnout: { title: "Anti-Burnout", lines: ["20% give +5 Power"] },
    lines: ["10% give +20 Mood"]
   devoted: { title: "Devoted Laborer", lines: ["+20% duration"] },
  },
   dream_wild: { title: "Dream Wild", lines: ["10% give +10 Power"] },
   anti_burnout: {
   hydrophilic: { title: "Hydrophilic", lines: ["+30% near water"] },
    title: "Anti-Burnout",
   lazy: { title: "Lazy Bones", lines: ["-5% speed"] },
    lines: ["20% give +5 Power"]
   living_map: { title: "Living Map", lines: ["-5% interval"] },
  },
   oneplus: { title: "OnePlus", lines: ["Rare crystals chance"] },
   devoted: {
   panovision: { title: "Panovision", lines: ["-10% speed"] },
    title: "Devoted Laborer",
   slacking: { title: "Slacking Off", lines: ["+5% consumption"] },
    lines: ["+20% duration"]
   stardust: { title: "Stardust Affinity", lines: ["20% no Mood cost"] },
  },
   sweet_talk: { title: "Sweet Talk", lines: ["20% give Mood"] },
   dream_wild: {
   overtime: { title: "Voluntary Overtime", lines: ["10% no cost"] },
    title: "Dream Wild",
   workaholic: { title: "Workaholic", lines: ["+10% duration"] },
    lines: ["10% give +10 Power"]
   lunar_oracle: { title: "Lunar Oracle", lines: ["+20% duration"] },
  },
   daydreaming: { title: "Daydreaming", lines: ["Restore Power"] },
   hydrophilic: {
   toxicologist: { title: "Toxicologist", lines: ["25% no cost"] },
    title: "Hydrophilic",
   admiral: { title: "Admiral", lines: ["3% no cost"] },
    lines: ["+30% near water"]
   diamond_duke: { title: "Diamond Duke", lines: ["5% no cost"] },
  },
   workaholic_lights: { title: "Workaholic - Lights", lines: ["+20% duration"] },
   lazy: {
   gold_speaker: { title: "Gold Speaker", lines: ["Extra ores"] }
    title: "Lazy Bones",
    lines: ["-5% speed"]
  },
   living_map: {
    title: "Living Map",
    lines: ["-5% interval"]
  },
   oneplus: {
    title: "OnePlus",
    lines: ["Rare crystals chance"]
  },
   panovision: {
    title: "Panovision",
    lines: ["-10% speed"]
  },
   slacking: {
    title: "Slacking Off",
    lines: ["+5% consumption"]
  },
   stardust: {
    title: "Stardust Affinity",
    lines: ["20% no Mood cost"]
  },
   sweet_talk: {
    title: "Sweet Talk",
    lines: ["20% give Mood"]
  },
   overtime: {
    title: "Voluntary Overtime",
    lines: ["10% no cost"]
  },
   workaholic: {
    title: "Workaholic",
    lines: ["+10% duration"]
  },
   lunar_oracle: {
    title: "Lunar Oracle",
    lines: ["+20% duration"]
  },
   daydreaming: {
    title: "Daydreaming",
    lines: ["Restore Power"]
  },
   toxicologist: {
    title: "Toxicologist",
    lines: ["25% no cost"]
  },
   admiral: {
    title: "Admiral",
    lines: ["3% no cost"]
  },
   diamond_duke: {
    title: "Diamond Duke",
    lines: ["5% no cost"]
  },
   workaholic_lights: {
    title: "Workaholic – Lights",
    lines: ["+20% duration"]
  },
   gold_speaker: {
    title: "Gold Speaker",
    lines: ["Extra ores"]
  }
};
};
const slot3Data = {
var slot3Data = {
   brute_force: {
   brute_force: { title: "Brute Force Rules", lines: ["10% double output"] },
    title: "Brute Force Rules",
   clean: { title: "Clean and Hygienic", lines: ["Sanity over 20%"] },
    lines: ["10% double output"]
   extra_load: { title: "Extra Load", lines: ["+15% storage"] },
  },
   feline: { title: "Feline Creatures", lines: ["Extra lightweight item"] },
   clean: {
   herbivore: { title: "Herbivore (Deer)", lines: ["Chance to yield an additional deviated plant during production"] },
    title: "Clean and Hygienic",
   moonlight: { title: "Moonlight Assault", lines: ["+15% at night"] },
    lines: ["Sanity ≥ 20%"]
   top_grunt: { title: "Top Grunt", lines: ["Convert Mood to Energy"] }
  },
   extra_load: {
    title: "Extra Load",
    lines: ["+15% storage"]
  },
   feline: {
    title: "Feline Creatures",
    lines: ["Extra lightweight item"]
   },
   moonlight: {
    title: "Moonlight Assault",
    lines: ["+15% at night"]
  },
   top_grunt: {
    title: "Top Grunt",
    lines: ["Convert Mood to Energy"]
  }
};
};
/* DROPDOWN LOGIC */
function bindDropdown(selectId, outputId, data) {
function bindDropdown(selectId, outputId, data) {
   document.getElementById(selectId).onchange = function () {
   document.getElementById(selectId).onchange = function() {
     const val = this.value;
     var val = this.value;
     const output = document.getElementById(outputId);
     var output = document.getElementById(outputId);
     if (!val) {
     if (!val) { output.style.display = "none"; return; }
      output.style.display = "none";
     var item = data[val];
      return;
     output.innerHTML = '<div class="output-title">' + item.title + '</div>' +
    }
       item.lines.map(function(line) { return '<div class="output-line">' + line + '</div>'; }).join("");
     const item = data[val];
     output.innerHTML =
      `<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:09, 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=1205"