Combat Traits: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<html> | |||
<a href="https://ohwikiguide.com">Return to Front Page</a> | |||
<br> | <br> | ||
<a href="https://ohwikiguide.com/index.php/Deviation_Trait_Page">Deviant Trait Page</a> | |||
<br><br> | |||
<br> | |||
<div style="max-width:420px; margin:0 auto;"> | <div style="max-width:420px; margin:0 auto;"> | ||
<style> | |||
/* ===== TABS ===== */ | |||
.mw-tab-buttons { | |||
display: flex; | |||
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 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> | |||
<!-- TABS --> | |||
<div class="mw-tab-buttons"> | <div class="mw-tab-buttons"> | ||
<div class="mw-tab-btn" data-tab="slot1">Slot 1</div> | <div class="mw-tab-btn active" data-tab="slot1">Slot 1</div> | ||
<div class="mw-tab-btn" data-tab="slot2">Slot 2</div> | <div class="mw-tab-btn" data-tab="slot2">Slot 2</div> | ||
<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 ================= --> | |||
<!-- SLOT 1 --> | <div id="slot1" class="mw-tab-content active"> | ||
<div id="slot1" class="mw-tab-content"> | <div class="dropdown"> | ||
<select id="slot1Select"> | |||
<div class=" | <option value="">Select Trait</option> | ||
<option value="cheer_up">Cheer Up (1-3)</option> | |||
"cheer_up" | <option value="covert_energy">Covert Energy (1-5)</option> | ||
"covert_energy" | <option value="feeling_blue">Feeling Blue (1-2)</option> | ||
"feeling_blue" | <option value="growing_pains">Growing Pains (1-3)</option> | ||
"growing_pains" | <option value="optimist">Optimist (1-5)</option> | ||
"optimist" | <option value="power_rewind">Power Rewind (1-2)</option> | ||
"power_rewind" | <option value="rise_shine">Rise and Shine (1-5)</option> | ||
"rise_shine" | <option value="stable_energy">Stable Energy</option> | ||
"stable_energy" | <option value="stable_vitality">Stable Vitality</option> | ||
"stable_vitality" | <option value="upper_hand">Upper Hand</option> | ||
"upper_hand" | <option value="worn_out">Worn-out (1-2)</option> | ||
"worn_out" | <option value="bursting_magma_btwind">Bursting Magma (By-The-Wind)</option> | ||
<option value="infrasonic_illusion">Infrasonic Illusion (Dr. Teddy)</option> | |||
"bursting_magma_btwind" | <option value="pharaoh_void">Pharaoh (Enchanting Void)</option> | ||
"infrasonic_illusion" | <option value="violet_robe_bulb">Violet Robe (Grumpy Bulb)</option> | ||
"pharaoh_void" | <option value="bursting_magma_lone">Bursting Magma (Lonewolf Whisper)</option> | ||
"violet_robe_bulb" | <option value="distant_tears">Distant Tears (Lonewolf Whisper)</option> | ||
"bursting_magma_lone" | <option value="radiant_variant">Radiant Variant (Lonewolf Whisper)</option> | ||
"distant_tears" | <option value="radiant_jelly">Radiant (Polar Jellyfish)</option> | ||
"radiant_variant" | <option value="wandering_witch">Wandering Witch (Shattered Maiden)</option> | ||
"radiant_jelly" | <option value="fluffy_curse">Fluffy Curse (Voodoo Doll)</option> | ||
"wandering_witch" | <option value="fools_memory">Fools Memory (Zapcam)</option> | ||
"fluffy_curse" | <option value="milk_sugar">Milk Sugar (Festering Gel)</option> | ||
"fools_memory" | <option value="ancient_scroll">Ancient Scroll (Butterfly Emissary)</option> | ||
"milk_sugar" | <option value="springs_return">Springs Return (Snowsprite)</option> | ||
"ancient_scroll" | </select> | ||
"springs_return" | </div> | ||
<div id="slot1Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
<!-- ================= SLOT 2 ================= --> | |||
<!-- SLOT 2 --> | |||
<div id="slot2" class="mw-tab-content"> | <div id="slot2" class="mw-tab-content"> | ||
<div class="dropdown"> | |||
<div class=" | <select id="slot2Select"> | ||
"beast_burden" | <option value="">Select Trait</option> | ||
"brute_force" | <option value="beast_burden">Beast of Burden</option> | ||
"city_folk" | <option value="brute_force">Brute Force</option> | ||
"crack_shot" | <option value="city_folk">City Folk</option> | ||
"durability" | <option value="crack_shot">Crack Shot</option> | ||
"heavy_solid" | <option value="durability">Durability</option> | ||
"lighten_mind" | <option value="heavy_solid">Heavy and Solid</option> | ||
"long_runner" | <option value="lighten_mind">Lighten Your Mind</option> | ||
"move_more" | <option value="long_runner">Long Distance Runner</option> | ||
"power_king" | <option value="move_more">Move More Live Better</option> | ||
"psychic_kid" | <option value="power_king">Power King</option> | ||
"run_fast" | <option value="psychic_kid">Psychic Kid</option> | ||
"save_energy" | <option value="run_fast">Run Fast</option> | ||
"sedentary" | <option value="save_energy">Save Energy</option> | ||
"stay_indoors" | <option value="sedentary">Sedentary</option> | ||
"street_rascal" | <option value="stay_indoors">Stay Indoors</option> | ||
"two_shift" | <option value="street_rascal">Street Rascal</option> | ||
"vegetative_calm" | <option value="two_shift">Two Shift System</option> | ||
"wellbeing" | <option value="vegetative_calm">Vegetative Calm</option> | ||
<option value="wellbeing">Wellbeing</option> | |||
</select> | |||
</div> | |||
<div id="slot2Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
<!-- ================= SLOT 3 ================= --> | |||
<!-- SLOT 3 --> | |||
<div id="slot3" class="mw-tab-content"> | <div id="slot3" class="mw-tab-content"> | ||
<div class="dropdown"> | |||
<div class=" | <select id="slot3Select"> | ||
"brute_force_rules" | <option value="">Select Trait</option> | ||
"clean_hygienic" | <option value="brute_force_rules">Brute Force Rules</option> | ||
"eureka" | <option value="clean_hygienic">Clean and Hygienic</option> | ||
"extra_load" | <option value="eureka">Eureka Moment</option> | ||
"feline" | <option value="extra_load">Extra Load</option> | ||
"foul_symbiosis" | <option value="feline">Feline Creatures</option> | ||
"herbivore" | <option value="foul_symbiosis">Foul Symbiosis</option> | ||
"knights" | <option value="herbivore">Herbivore</option> | ||
"temperature" | <option value="knights">Knights of The Round Table</option> | ||
"mind_massage" | <option value="temperature">Master of Temperatures</option> | ||
"moonlight" | <option value="mind_massage">Mind Massage</option> | ||
"music_resonance" | <option value="moonlight">Moonlight Assault</option> | ||
"neon" | <option value="music_resonance">Music Resonance</option> | ||
"nightmare" | <option value="neon">Neon Flicker</option> | ||
"polar_beast" | <option value="nightmare">Nightmare Waters</option> | ||
"pollution" | <option value="polar_beast">Polar Beast Polar</option> | ||
"precision" | <option value="pollution">Pollution Adaptation</option> | ||
"top_grunt" | <option value="precision">Precision Moment</option> | ||
"warm_flame" | <option value="top_grunt">Top Grunt</option> | ||
<option value="warm_flame">Warm Flame</option> | |||
</select> | |||
</div> | |||
<div id="slot3Output" class="output" style="display:none;"></div> | |||
</div> | </div> | ||
</div> | </div> | ||
<script> | |||
/* TAB SYSTEM */ | |||
document.querySelectorAll('.mw-tab-btn').forEach(btn => { | |||
btn.onclick = () => { | |||
document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active')); | |||
document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active')); | |||
btn.classList.add('active'); | |||
document.getElementById(btn.dataset.tab).classList.add('active'); | |||
}; | |||
}); | |||
/* DATA */ | |||
const slot1Data = { | |||
cheer_up: { | |||
title: "Cheer Up (1-3)", | |||
lines: ["Max Mood +30% / +40% / +50%; Deviant Power recovery speed -5%"] | |||
}, | |||
covert_energy: { | |||
title: "Covert Energy (1-5)", | |||
lines: ["Max Deviant Power +10% / +20% / +25% / +30% / +35%"] | |||
}, | |||
feeling_blue: { | |||
title: "Feeling Blue (1-2)", | |||
lines: ["Max Mood -5% / -10%"] | |||
}, | |||
growing_pains: { | |||
title: "Growing Pains (1-3)", | |||
lines: ["Max Deviant Power +30% / +40% / +50%; Mood recovery speed -5%"] | |||
}, | |||
optimist: { | |||
title: "Optimist (1-5)", | |||
lines: ["Max Mood +15% / +20% / +25% / +30% / +35%"] | |||
}, | |||
power_rewind: { | |||
title: "Power Rewind (1-2)", | |||
lines: ["Deviant Power recovery speed +5% / +10%"] | |||
}, | |||
rise_shine: { | |||
title: "Rise and Shine (1-5)", | |||
lines: ["Mood recovery speed +5% / +10% / +15% / +20% / +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: ["When Deviant Power drops to 0, automatically consume Mood to recover Deviant Power"] | |||
}, | |||
worn_out: { | |||
title: "Worn-out (1-2)", | |||
lines: ["Max Deviant Power -5% / -10%"] | |||
}, | |||
bursting_magma_btwind: { | |||
title: "Bursting Magma (By-The-Wind)", | |||
lines: ["Deviant Power recovery speed +10%"] | |||
}, | |||
infrasonic_illusion: { | |||
title: "Infrasonic Illusion (Dr. Teddy)", | |||
lines: ["Deviant Power recovery speed +20%"] | |||
}, | |||
pharaoh_void: { | |||
title: "Pharaoh (Enchanting Void)", | |||
lines: ["Mood recovery speed +30%"] | |||
}, | |||
violet_robe_bulb: { | |||
title: "Violet Robe (Grumpy Bulb)", | |||
lines: ["Max Deviant Power +40%"] | |||
}, | |||
bursting_magma_lone: { | |||
title: "Bursting Magma (Lonewolf Whisper)", | |||
lines: ["Max Deviant Power +40%"] | |||
}, | |||
distant_tears: { | |||
title: "Distant Tears (Lonewolf Whisper)", | |||
lines: ["Max Deviant Power +40%"] | |||
}, | |||
radiant_variant: { | |||
title: "Radiant Variant (Lonewolf Whisper)", | |||
lines: ["Max Mood +7%"] | |||
}, | |||
radiant_jelly: { | |||
title: "Radiant (Polar Jellyfish)", | |||
lines: ["Mood recovery speed +20%"] | |||
}, | |||
wandering_witch: { | |||
title: "Wandering Witch (Shattered Maiden)", | |||
lines: ["Max Deviant Power +10%"] | |||
}, | |||
fluffy_curse: { | |||
title: "Fluffy Curse (Voodoo Doll)", | |||
lines: ["Deviant Power recovery speed +10%"] | |||
}, | |||
fools_memory: { | |||
title: "Fools Memory (Zapcam)", | |||
lines: ["Deviant Power recovery speed +10%"] | |||
}, | |||
milk_sugar: { | |||
title: "Milk Sugar (Festering Gel)", | |||
lines: ["Max Mood +35%"] | |||
}, | |||
ancient_scroll: { | |||
title: "Ancient Scroll (Butterfly Emissary)", | |||
lines: ["Max Deviant Power +40%"] | |||
}, | |||
springs_return: { | |||
title: "Springs Return (Snowsprite)", | |||
lines: ["Max Mood +35"] | |||
} | |||
}; | |||
const slot2Data = { | |||
beast_burden: { | |||
title: "Beast of Burden", | |||
lines: ["Max Load +8"] | |||
}, | |||
brute_force: { | |||
title: "Brute Force", | |||
lines: ["Max Load +15 and Movement Speed -5%"] | |||
}, | |||
city_folk: { | |||
title: "City Folk", | |||
lines: ["Max Load +15 in settlements"] | |||
}, | |||
crack_shot: { | |||
title: "Crack Shot", | |||
lines: ["Weapon DMG +5%"] | |||
}, | |||
durability: { | |||
title: "Durability", | |||
lines: ["Stamina Consumption -5%"] | |||
}, | |||
heavy_solid: { | |||
title: "Heavy and Solid", | |||
lines: ["Torso damage reduction scaling"] | |||
}, | |||
lighten_mind: { | |||
title: "Lighten Your Mind", | |||
lines: ["Head damage reduction scaling"] | |||
}, | |||
long_runner: { | |||
title: "Long Distance Runner", | |||
lines: ["Stamina -20% and Movement Speed -10%"] | |||
}, | |||
move_more: { | |||
title: "Move More Live Better", | |||
lines: ["Gain +1 Deviant Power every 8 seconds while sprinting"] | |||
}, | |||
power_king: { | |||
title: "Power King", | |||
lines: ["Max Load +25 and Movement Speed -5%"] | |||
}, | |||
psychic_kid: { | |||
title: "Psychic Kid", | |||
lines: ["Status DMG +5%"] | |||
}, | |||
run_fast: { | |||
title: "Run Fast", | |||
lines: ["Movement Speed +5%"] | |||
}, | |||
save_energy: { | |||
title: "Save Energy", | |||
lines: ["Stamina Consumption -10% and Movement Speed -5%"] | |||
}, | |||
sedentary: { | |||
title: "Sedentary", | |||
lines: ["Max Load -8 in settlements"] | |||
}, | |||
stay_indoors: { | |||
title: "Stay Indoors", | |||
lines: ["Stamina +8% in settlements"] | |||
}, | |||
street_rascal: { | |||
title: "Street Rascal", | |||
lines: ["Movement Speed +10% in settlements"] | |||
}, | |||
two_shift: { | |||
title: "Two Shift System", | |||
lines: ["Day load and night speed bonuses"] | |||
}, | |||
vegetative_calm: { | |||
title: "Vegetative Calm", | |||
lines: ["Max Stamina +15 and Movement Speed -5%"] | |||
}, | |||
wellbeing: { | |||
title: "Wellbeing", | |||
lines: ["Max Stamina +10"] | |||
} | |||
}; | |||
const slot3Data = { | |||
brute_force_rules: { | |||
title: "Brute Force Rules", | |||
lines: ["Dodging destroys ores or trees"] | |||
}, | |||
clean_hygienic: { | |||
title: "Clean and Hygienic", | |||
lines: ["Sanity recovers to 20%"] | |||
}, | |||
eureka: { | |||
title: "Eureka Moment", | |||
lines: ["Reveal attacker and reduce damage"] | |||
}, | |||
extra_load: { | |||
title: "Extra Load", | |||
lines: ["Max Load +20"] | |||
}, | |||
feline: { | |||
title: "Feline Creatures", | |||
lines: ["No fall damage"] | |||
}, | |||
foul_symbiosis: { | |||
title: "Foul Symbiosis", | |||
lines: ["10% chance to gain Acid"] | |||
}, | |||
herbivore: { | |||
title: "Herbivore", | |||
lines: ["Animals do not flee"] | |||
}, | |||
knights: { | |||
title: "Knights of The Round Table", | |||
lines: ["Damage reduction"] | |||
}, | |||
temperature: { | |||
title: "Master of Temperatures", | |||
lines: ["Heat Resist +10"] | |||
}, | |||
mind_massage: { | |||
title: "Mind Massage", | |||
lines: ["Sanity recovery"] | |||
}, | |||
moonlight: { | |||
title: "Moonlight Assault", | |||
lines: ["Night recovery boost"] | |||
}, | |||
music_resonance: { | |||
title: "Music Resonance", | |||
lines: ["No music needed"] | |||
}, | |||
neon: { | |||
title: "Neon Flicker", | |||
lines: ["+1 Mood per trait"] | |||
}, | |||
nightmare: { | |||
title: "Nightmare Waters", | |||
lines: ["Dive boost"] | |||
}, | |||
polar_beast: { | |||
title: "Polar Beast Polar", | |||
lines: ["+10% attack below 0C"] | |||
}, | |||
pollution: { | |||
title: "Pollution Adaptation", | |||
lines: ["90% slower sanity loss"] | |||
}, | |||
precision: { | |||
title: "Precision Moment", | |||
lines: ["Hourly buffs"] | |||
}, | |||
top_grunt: { | |||
title: "Top Grunt", | |||
lines: ["No stamina gathering"] | |||
}, | |||
warm_flame: { | |||
title: "Warm Flame", | |||
lines: ["Cold Resist +10"] | |||
} | |||
}; | |||
/* DROPDOWN LOGIC */ | |||
function bindDropdown(selectId, outputId, data) { | |||
document.getElementById(selectId).onchange = function () { | |||
const val = this.value; | |||
const output = document.getElementById(outputId); | |||
if (!val) { | |||
output.style.display = "none"; | |||
return; | |||
} | |||
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"; | |||
}; | |||
} | |||
bindDropdown("slot1Select", "slot1Output", slot1Data); | |||
bindDropdown("slot2Select", "slot2Output", slot2Data); | |||
bindDropdown("slot3Select", "slot3Output", slot3Data); | |||
</script> | |||
</html> | |||