Crafting 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"> | ||
<div class=" | <select id="slot1Select"> | ||
"cheer_up" | <option value="">Select Trait</option> | ||
"covert_energy" | <option value="cheer_up">Cheer Up (1-3)</option> | ||
"feeling_blue" | <option value="covert_energy">Covert Energy (1-5)</option> | ||
"growing_pains" | <option value="feeling_blue">Feeling Blue (1-2)</option> | ||
"optimist" | <option value="growing_pains">Growing Pains (1-3)</option> | ||
"power_rewind" | <option value="optimist">Optimist (1-5)</option> | ||
"rise_shine" | <option value="power_rewind">Power Rewind (1-2)</option> | ||
"stable_energy" | <option value="rise_shine">Rise and Shine (1-5)</option> | ||
"stable_vitality" | <option value="stable_energy">Stable Energy</option> | ||
"upper_hand" | <option value="stable_vitality">Stable Vitality</option> | ||
"worn_out" | <option value="upper_hand">Upper Hand</option> | ||
<option value="worn_out">Worn-out (1-2)</option> | |||
</select> | |||
</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=" | <div class="dropdown"> | ||
"big_cup" | <select id="slot2Select"> | ||
"buy_1_get_2" | <option value="">Select Trait</option> | ||
"byproduct" | <option value="big_cup">Big Cup</option> | ||
"clumsy" | <option value="buy_1_get_2">Buy 1 Get 2</option> | ||
"collection_1" | <option value="byproduct">Byproduct</option> | ||
"come_as_one" | <option value="clumsy">Clumsy</option> | ||
"efficiency_above_all" | <option value="collection_1">Collection +1</option> | ||
"efficiency_first" | <option value="come_as_one">Come As One</option> | ||
"eureka" | <option value="efficiency_above_all">Efficiency Above All</option> | ||
"lazy" | <option value="efficiency_first">Efficiency First</option> | ||
"leftover" | <option value="eureka">Eureka Moment</option> | ||
"medium_cup" | <option value="lazy">Lazy</option> | ||
"mineral_talent" | <option value="leftover">Leftover</option> | ||
"no_small_cup" | <option value="medium_cup">Medium Cup</option> | ||
"one_more_bottle" | <option value="mineral_talent">Mineral Talent</option> | ||
"out_of_scratch" | <option value="no_small_cup">No Such Thing As a Small Cup</option> | ||
"piece_of_cake" | <option value="one_more_bottle">One More Bottle</option> | ||
"productivity_first" | <option value="out_of_scratch">Out of Scratch</option> | ||
"speed_up" | <option value="piece_of_cake">Piece of Cake</option> | ||
"super_big_cup" | <option value="productivity_first">Productivity First</option> | ||
<option value="speed_up">Speed Up</option> | |||
<option value="super_big_cup">Super Big Cup</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=" | <div class="dropdown"> | ||
"brute_force_rules" | <select id="slot3Select"> | ||
"clean_hygienic" | <option value="">Select Trait</option> | ||
"eureka" | <option value="brute_force_rules">Brute Force Rules</option> | ||
"extra_load" | <option value="clean_hygienic">Clean and Hygienic</option> | ||
"feline" | <option value="eureka">Eureka Moment</option> | ||
"foul_symbiosis" | <option value="extra_load">Extra Load</option> | ||
"herbivore" | <option value="feline">Feline Creatures</option> | ||
"knights" | <option value="foul_symbiosis">Foul Symbiosis</option> | ||
"temperature" | <option value="herbivore">Herbivore</option> | ||
"mind_massage" | <option value="knights">Knights of The Round Table</option> | ||
"moonlight" | <option value="temperature">Master of Temperatures</option> | ||
<option value="mind_massage">Mind Massage</option> | |||
<option value="moonlight">Moonlight Assault</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%"] | |||
} | |||
}; | |||
const slot2Data = { | |||
big_cup: { | |||
title: "Big Cup", | |||
lines: ["Max storage capacity +20%"] | |||
}, | |||
buy_1_get_2: { | |||
title: "Buy 1 Get 2", | |||
lines: ["5% chance to produce 1 extra unit"] | |||
}, | |||
byproduct: { | |||
title: "Byproduct", | |||
lines: ["When Mood greater than 90 percent, 10 percent chance to increase other Deviations Power by 2"] | |||
}, | |||
clumsy: { | |||
title: "Clumsy", | |||
lines: ["5% chance to produce 1 fewer unit"] | |||
}, | |||
collection_1: { | |||
title: "Collection +1", | |||
lines: ["5% chance for +2 units, speed -20%"] | |||
}, | |||
come_as_one: { | |||
title: "Come As One", | |||
lines: ["+1 unit per Territory Deviation"] | |||
}, | |||
efficiency_above_all: { | |||
title: "Efficiency Above All", | |||
lines: ["Speed +20%, storage -30%"] | |||
}, | |||
efficiency_first: { | |||
title: "Efficiency First", | |||
lines: ["Power consumption interval -5%"] | |||
}, | |||
eureka: { | |||
title: "Eureka Moment", | |||
lines: ["1% chance for +10 units, speed -50%"] | |||
}, | |||
lazy: { | |||
title: "Lazy", | |||
lines: ["Crafting speed -10%"] | |||
}, | |||
leftover: { | |||
title: "Leftover", | |||
lines: ["When Mood greater than 20 percent, boost others, storage -20%"] | |||
}, | |||
medium_cup: { | |||
title: "Medium Cup", | |||
lines: ["Max storage +10%"] | |||
}, | |||
mineral_talent: { | |||
title: "Mineral Talent", | |||
lines: ["20% chance extra unit in Oil Field"] | |||
}, | |||
no_small_cup: { | |||
title: "No Such Thing As a Small Cup", | |||
lines: ["Max storage -10%"] | |||
}, | |||
one_more_bottle: { | |||
title: "One More Bottle", | |||
lines: ["2% chance for +2 units"] | |||
}, | |||
out_of_scratch: { | |||
title: "Out of Scratch", | |||
lines: ["3% chance no Power consumed"] | |||
}, | |||
piece_of_cake: { | |||
title: "Piece of Cake", | |||
lines: ["5% chance no Mood consumed"] | |||
}, | |||
productivity_first: { | |||
title: "Productivity First", | |||
lines: ["Production interval -5%"] | |||
}, | |||
speed_up: { | |||
title: "Speed Up", | |||
lines: ["Production interval -10%"] | |||
}, | |||
super_big_cup: { | |||
title: "Super Big Cup", | |||
lines: ["Max storage +30%"] | |||
} | |||
}; | |||
const slot3Data = { | |||
brute_force_rules: { | |||
title: "Brute Force Rules", | |||
lines: ["10% chance to double output"] | |||
}, | |||
clean_hygienic: { | |||
title: "Clean and Hygienic", | |||
lines: ["Sanity will not drop below 20%"] | |||
}, | |||
eureka: { | |||
title: "Eureka Moment", | |||
lines: ["No light needed for boost"] | |||
}, | |||
extra_load: { | |||
title: "Extra Load", | |||
lines: ["Max storage capacity +15%"] | |||
}, | |||
feline: { | |||
title: "Feline Creatures", | |||
lines: ["Chance for extra lightweight item"] | |||
}, | |||
foul_symbiosis: { | |||
title: "Foul Symbiosis", | |||
lines: ["10% chance to yield 1 extra Acid"] | |||
}, | |||
herbivore: { | |||
title: "Herbivore", | |||
lines: ["Chance to yield extra plant"] | |||
}, | |||
knights: { | |||
title: "Knights of The Round Table", | |||
lines: ["Defense +5%"] | |||
}, | |||
temperature: { | |||
title: "Master of Temperatures", | |||
lines: ["Heat Resist +10"] | |||
}, | |||
mind_massage: { | |||
title: "Mind Massage", | |||
lines: ["Recover 10% Sanity"] | |||
}, | |||
moonlight: { | |||
title: "Moonlight Assault", | |||
lines: ["Night recovery speed increased"] | |||
} | |||
}; | |||
/* 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> | |||