Territory Traits: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| (38 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style=" | <html> | ||
<div style="margin:0;padding:24px;background:#0b0f14;color:#e6edf3;font-family:Arial,sans-serif;"> | |||
< | <a href="https://ohwikiguide.com" style="color:#1ec8ff;">Return to Front Page</a> | ||
<br> | |||
<a href="https://ohwikiguide.com/index.php/Deviation_Trait_Page" style="color:#1ec8ff;">Deviant Trait Page</a> | |||
<br><br> | |||
<div style="max-width:420px;margin:0 auto;"> | |||
<div style="display:flex;width:100%;background:#0b0f14;border-radius:10px;padding:4px;gap:4px;box-sizing:border-box;"> | |||
<div class="tab" data-tab="slot1" style="flex:1;text-align:center;padding:10px 0;font-weight:600;color:#001018;background:#0ea5e9;border-radius:6px;cursor:pointer;">Slot 1</div> | |||
<div class="tab" data-tab="slot2" style="flex:1;text-align:center;padding:10px 0;font-weight:600;color:#cfd6df;background:#11161c;border-radius:6px;cursor:pointer;">Slot 2</div> | |||
<div class="tab" data-tab="slot3" style="flex:1;text-align:center;padding:10px 0;font-weight:600;color:#cfd6df;background:#11161c;border-radius:6px;cursor:pointer;">Slot 3</div> | |||
</div> | |||
<div id="slot1" class="panel" style="display:block;"> | |||
<select id="sel1" style="width:100%;margin-top:10px;padding:10px;background:#11161c;color:#e6edf3;border:1px solid #1f2a35;border-radius:8px;font-size:14px;box-sizing:border-box;"> | |||
<option value="">Select Trait</option> | |||
<option value="cheer_up">Cheer Up</option> | |||
<option value="covert_energy">Covert Energy</option> | |||
<option value="feeling_blue">Feeling Blue</option> | |||
<option value="growing_pains">Growing Pains</option> | |||
<option value="optimist">Optimist</option> | |||
<option value="power_rewind">Power Rewind</option> | |||
<option value="rise_and_shine">Rise and Shine</option> | |||
<option value="stable_energy">Stable Energy</option> | |||
<option value="stable_vitality">Stable Vitality</option> | |||
<option value="upper_hand">Upper Hand</option> | |||
<option value="worn_out">Worn-out</option> | |||
<option value="pumpkin">Pumpkin Lantern (Buzzy Bee)</option> | |||
<option value="gold_lightning">Gold Lightning (Electric Eel)</option> | |||
<option value="good_fortune">Optimism - Cat</option> | |||
<option value="aquarius">Aquarius (Fetch-A-Lot)</option> | |||
<option value="golden_toad">Golden Toad</option> | |||
<option value="shadow_shroom">Growshroom - Shadowshroom</option> | |||
</select> | |||
<div id="out1" style="display:none;margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12px;"></div> | |||
</div> | |||
<div id="slot2" class="panel" style="display:none;"> | |||
<select id="sel2" style="width:100%;margin-top:10px;padding:10px;background:#11161c;color:#e6edf3;border:1px solid #1f2a35;border-radius:8px;font-size:14px;box-sizing:border-box;"> | |||
<option value="">Select Trait</option> | |||
<option value="world_charm">A World of Charm</option> | |||
<option value="anti_burnout">Anti-Burnout</option> | |||
<option value="devoted">Devoted Laborer</option> | |||
<option value="dream_wild">Dream Wild</option> | |||
<option value="hydrophilic">Hydrophilic</option> | |||
<option value="lazy">Lazy Bones</option> | |||
<option value="living_map">Living Map</option> | |||
<option value="oneplus">OnePlus</option> | |||
<option value="panovision">Panovision</option> | |||
<option value="slacking">Slacking Off</option> | |||
<option value="stardust">Stardust Affinity</option> | |||
<option value="sweet_talk">Sweet Talk</option> | |||
<option value="overtime">Voluntary Overtime</option> | |||
<option value="workaholic">Workaholic</option> | |||
<option value="lunar_oracle">Lunar Oracle</option> | |||
<option value="daydreaming">Daydreaming</option> | |||
<option value="toxicologist">Toxicologist</option> | |||
<option value="admiral">Admiral</option> | |||
<option value="diamond_duke">Diamond Duke</option> | |||
<option value="workaholic_lights">Workaholic - Lights</option> | |||
<option value="gold_speaker">Gold Speaker</option> | |||
</select> | |||
<div id="out2" style="display:none;margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12px;"></div> | |||
</div> | |||
<div style=" | <div id="slot3" class="panel" style="display:none;"> | ||
<select id="sel3" style="width:100%;margin-top:10px;padding:10px;background:#11161c;color:#e6edf3;border:1px solid #1f2a35;border-radius:8px;font-size:14px;box-sizing:border-box;"> | |||
<option value="">Select Trait</option> | |||
<option value="brute_force">Brute Force Rules</option> | |||
<option value="clean">Clean and Hygienic</option> | |||
<option value="extra_load">Extra Load</option> | |||
<option value="feline">Feline Creatures</option> | |||
<option value="herbivore">Herbivore</option> | |||
<option value="moonlight">Moonlight Assault</option> | |||
<option value="top_grunt">Top Grunt</option> | |||
</select> | |||
<div id="out3" style="display:none;margin-top:10px;background:#0d1319;border:1px solid #1f2a35;border-radius:10px;padding:12px;"></div> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<script> | |||
var data1 = { | |||
cheer_up:["Cheer Up",["Max Mood +30% / +40% / +50%"]], | |||
covert_energy:["Covert Energy",["Max Deviant Power +10% to +35%"]], | |||
feeling_blue:["Feeling Blue",["Max Mood -5% / -10%"]], | |||
growing_pains:["Growing Pains",["Max Power +30 to 50%; Mood recovery -5%"]], | |||
optimist:["Optimist",["Max Mood +15 to 35%"]], | |||
power_rewind:["Power Rewind",["Power recovery +5 to 10%"]], | |||
rise_and_shine:["Rise and Shine",["Mood recovery +5 to 25%"]], | |||
stable_energy:["Stable Energy",["Max Deviant Power +30"]], | |||
stable_vitality:["Stable Vitality",["Max Mood +30"]], | |||
upper_hand:["Upper Hand",["Convert Mood to Power at 0"]], | |||
worn_out:["Worn-out",["Max Power -5% / -10%"]], | |||
pumpkin:["Pumpkin Lantern (Buzzy Bee)",["+10% Power"]], | |||
gold_lightning:["Gold Lightning (Electric Eel)",["+15% Recovery"]], | |||
good_fortune:["Optimism - Cat",["+40% Mood"]], | |||
aquarius:["Aquarius (Fetch-A-Lot)",["+30% Recovery"]], | |||
golden_toad:["Golden Toad",["+20% Recovery"]], | |||
shadow_shroom:["Growshroom - Shadowshroom",["Max Energy +40%"]] | |||
}; | |||
var data2 = { | |||
world_charm:["A World of Charm",["10% give +20 Mood"]], | |||
anti_burnout:["Anti-Burnout",["20% give +5 Power"]], | |||
devoted:["Devoted Laborer",["+20% duration"]], | |||
dream_wild:["Dream Wild",["10% give +10 Power"]], | |||
hydrophilic:["Hydrophilic",["+30% near water"]], | |||
lazy:["Lazy Bones",["-5% speed"]], | |||
living_map:["Living Map",["-5% interval"]], | |||
oneplus:["OnePlus",["Rare crystals chance"]], | |||
panovision:["Panovision",["-10% speed"]], | |||
slacking:["Slacking Off",["+5% consumption"]], | |||
stardust:["Stardust Affinity",["20% no Mood cost"]], | |||
sweet_talk:["Sweet Talk",["20% give Mood"]], | |||
overtime:["Voluntary Overtime",["10% no cost"]], | |||
workaholic:["Workaholic",["+10% duration"]], | |||
lunar_oracle:["Lunar Oracle",["+20% duration"]], | |||
daydreaming:["Daydreaming",["Restore Power"]], | |||
toxicologist:["Toxicologist",["25% no cost"]], | |||
admiral:["Admiral",["3% no cost"]], | |||
diamond_duke:["Diamond Duke",["5% no cost"]], | |||
workaholic_lights:["Workaholic - Lights",["+20% duration"]], | |||
gold_speaker:["Gold Speaker",["Extra ores"]] | |||
}; | |||
var data3 = { | |||
brute_force:["Brute Force Rules",["10% double output"]], | |||
clean:["Clean and Hygienic",["Sanity over 20%"]], | |||
extra_load:["Extra Load",["+15% storage"]], | |||
feline:["Feline Creatures",["Extra lightweight item"]], | |||
herbivore:["Herbivore",["Animal: Deer","Chance to yield an additional deviated plant during production"]], | |||
moonlight:["Moonlight Assault",["+15% at night"]], | |||
top_grunt:["Top Grunt",["Convert Mood to Energy"]] | |||
}; | |||
function bind(selId, outId, data) { | |||
var sel = document.getElementById(selId); | |||
var out = document.getElementById(outId); | |||
sel.onchange = function() { | |||
var v = sel.value; | |||
if (!v) { out.style.display = "none"; return; } | |||
var row = data[v]; | |||
var html = '<div style="font-weight:700;margin-bottom:8px;color:#e6edf3;">' + row[0] + '</div>'; | |||
for (var i = 0; i < row[1].length; i++) { | |||
var border = i === 0 ? '' : 'border-top:1px solid #1a222b;'; | |||
html += '<div style="font-size:13px;color:#9fb0c3;padding:4px 0;' + border + '">' + row[1][i] + '</div>'; | |||
} | |||
out.innerHTML = html; | |||
out.style.display = "block"; | |||
}; | |||
} | |||
bind("sel1","out1",data1); | |||
bind("sel2","out2",data2); | |||
bind("sel3","out3",data3); | |||
var tabs = document.querySelectorAll(".tab"); | |||
for (var i = 0; i < tabs.length; i++) { | |||
tabs[i].onclick = function(e) { | |||
var target = e.currentTarget.getAttribute("data-tab"); | |||
var allTabs = document.querySelectorAll(".tab"); | |||
for (var j = 0; j < allTabs.length; j++) { | |||
allTabs[j].style.background = "#11161c"; | |||
allTabs[j].style.color = "#cfd6df"; | |||
} | |||
e.currentTarget.style.background = "#0ea5e9"; | |||
e.currentTarget.style.color = "#001018"; | |||
var panels = document.querySelectorAll(".panel"); | |||
for (var k = 0; k < panels.length; k++) panels[k].style.display = "none"; | |||
document.getElementById(target).style.display = "block"; | |||
}; | |||
} | |||
</script> | |||
</html> | |||
Latest revision as of 16:28, 27 April 2026