467 lines
No EOL
26 KiB
HTML
467 lines
No EOL
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Suitbuilder - Dereth Tracker</title>
|
|
<link rel="stylesheet" href="suitbuilder.css">
|
|
</head>
|
|
<body>
|
|
<div class="suitbuilder-container">
|
|
<!-- Header -->
|
|
<div class="suitbuilder-header">
|
|
<h1>🛡️ Suitbuilder</h1>
|
|
<p>Multi-Character Loadout Optimizer</p>
|
|
</div>
|
|
|
|
<!-- Three-Panel Layout -->
|
|
<div class="main-content">
|
|
<!-- Left Panel: Character Selection (15%) -->
|
|
<div class="characters-panel">
|
|
<div class="panel-header">
|
|
<h3>Characters</h3>
|
|
</div>
|
|
<div class="character-selection">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="char_all" class="character-checkbox" value="all" checked>
|
|
<label for="char_all">All Characters</label>
|
|
</div>
|
|
<div id="characterList" class="character-list">
|
|
<!-- Characters will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Panel: Constraints & Results (55%) -->
|
|
<div class="constraints-panel">
|
|
<!-- Constraints Form -->
|
|
<div class="constraints-form">
|
|
<div class="panel-header">
|
|
<h3>Constraints</h3>
|
|
</div>
|
|
|
|
<!-- Rating Constraints -->
|
|
<div class="constraint-section">
|
|
<h4>Rating Requirements</h4>
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Armor Level:</label>
|
|
<input type="number" id="minArmor" placeholder="Min" min="0" max="9999">
|
|
<span>-</span>
|
|
<input type="number" id="maxArmor" placeholder="Max" min="0" max="9999">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Crit Damage:</label>
|
|
<input type="number" id="minCritDmg" placeholder="Min" min="0" max="999">
|
|
<span>-</span>
|
|
<input type="number" id="maxCritDmg" placeholder="Max" min="0" max="999">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Damage Rating:</label>
|
|
<input type="number" id="minDmgRating" placeholder="Min" min="0" max="999">
|
|
<span>-</span>
|
|
<input type="number" id="maxDmgRating" placeholder="Max" min="0" max="999">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Status -->
|
|
<div class="constraint-section">
|
|
<h4>Equipment Status</h4>
|
|
<div class="filter-row">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="includeEquipped" checked>
|
|
<label for="includeEquipped">Equipped Items</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="includeInventory" checked>
|
|
<label for="includeInventory">Inventory Items</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Sets -->
|
|
<div class="constraint-section">
|
|
<h4>Equipment Sets</h4>
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Primary Set (5 pieces):</label>
|
|
<select id="primarySet">
|
|
<option value="">None</option>
|
|
<option value="14">Adept's</option>
|
|
<option value="16">Defender's</option>
|
|
<option value="13">Soldier's</option>
|
|
<option value="21">Wise</option>
|
|
<option value="40">Heroic Protector</option>
|
|
<option value="41">Heroic Destroyer</option>
|
|
<option value="46">Relic Alduressa</option>
|
|
<option value="47">Ancient Relic</option>
|
|
<option value="48">Noble Relic</option>
|
|
<option value="15">Archer's</option>
|
|
<option value="19">Hearty</option>
|
|
<option value="20">Dexterous</option>
|
|
<option value="22">Swift</option>
|
|
<option value="24">Reinforced</option>
|
|
<option value="26">Flame Proof</option>
|
|
<option value="29">Lightning Proof</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Secondary Set (4 pieces):</label>
|
|
<select id="secondarySet">
|
|
<option value="">None</option>
|
|
<option value="13">Soldier's</option>
|
|
<option value="14">Adept's</option>
|
|
<option value="16">Defender's</option>
|
|
<option value="21">Wise</option>
|
|
<option value="40">Heroic Protector</option>
|
|
<option value="41">Heroic Destroyer</option>
|
|
<option value="46">Relic Alduressa</option>
|
|
<option value="47">Ancient Relic</option>
|
|
<option value="48">Noble Relic</option>
|
|
<option value="15">Archer's</option>
|
|
<option value="19">Hearty</option>
|
|
<option value="20">Dexterous</option>
|
|
<option value="22">Swift</option>
|
|
<option value="24">Reinforced</option>
|
|
<option value="26">Flame Proof</option>
|
|
<option value="29">Lightning Proof</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legendary Cantrips (Same as inventory.html) -->
|
|
<div class="constraint-section">
|
|
<h4>Legendary Cantrips</h4>
|
|
<div class="cantrips-grid">
|
|
<!-- Legendary Attributes -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_strength" value="Legendary Strength">
|
|
<label for="cantrip_legendary_strength">Strength</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_endurance" value="Legendary Endurance">
|
|
<label for="cantrip_legendary_endurance">Endurance</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_quickness" value="Legendary Quickness">
|
|
<label for="cantrip_legendary_quickness">Quickness</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_coordination" value="Legendary Coordination">
|
|
<label for="cantrip_legendary_coordination">Coordination</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_willpower" value="Legendary Willpower">
|
|
<label for="cantrip_legendary_willpower">Willpower</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_focus" value="Legendary Focus">
|
|
<label for="cantrip_legendary_focus">Focus</label>
|
|
</div>
|
|
<!-- Legendary Weapon Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_finesse" value="Legendary Finesse Weapons">
|
|
<label for="cantrip_legendary_finesse">Finesse</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_heavy" value="Legendary Heavy Weapons">
|
|
<label for="cantrip_legendary_heavy">Heavy</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_light" value="Legendary Light Weapons">
|
|
<label for="cantrip_legendary_light">Light</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_missile" value="Legendary Missile Weapons">
|
|
<label for="cantrip_legendary_missile">Missile</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_twohanded" value="Legendary Two Handed Combat">
|
|
<label for="cantrip_legendary_twohanded">Two-handed</label>
|
|
</div>
|
|
<!-- Legendary Magic Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_war" value="Legendary War Magic">
|
|
<label for="cantrip_legendary_war">War Magic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_void" value="Legendary Void Magic">
|
|
<label for="cantrip_legendary_void">Void Magic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_creature" value="Legendary Creature Enchantment">
|
|
<label for="cantrip_legendary_creature">Creature</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_item" value="Legendary Item Enchantment">
|
|
<label for="cantrip_legendary_item">Item</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_life" value="Legendary Life Magic">
|
|
<label for="cantrip_legendary_life">Life Magic</label>
|
|
</div>
|
|
<!-- Legendary Defense -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_magic_defense" value="Legendary Magic Defense">
|
|
<label for="cantrip_legendary_magic_defense">Magic Def</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_melee_defense" value="Legendary Melee Defense">
|
|
<label for="cantrip_legendary_melee_defense">Melee Def</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legendary Wards -->
|
|
<div class="constraint-section">
|
|
<h4>Legendary Wards</h4>
|
|
<div class="cantrips-grid">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_flame" value="Legendary Flame Ward">
|
|
<label for="protection_flame">Flame</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_frost" value="Legendary Frost Ward">
|
|
<label for="protection_frost">Frost</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_acid" value="Legendary Acid Ward">
|
|
<label for="protection_acid">Acid</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_storm" value="Legendary Storm Ward">
|
|
<label for="protection_storm">Storm</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_slashing" value="Legendary Slashing Ward">
|
|
<label for="protection_slashing">Slashing</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_piercing" value="Legendary Piercing Ward">
|
|
<label for="protection_piercing">Piercing</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_bludgeoning" value="Legendary Bludgeoning Ward">
|
|
<label for="protection_bludgeoning">Bludgeoning</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_armor" value="Legendary Armor">
|
|
<label for="protection_armor">Armor</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<button type="button" class="btn btn-primary" id="searchSuits">Search Suits</button>
|
|
<button type="button" class="btn btn-secondary" id="clearAll">Clear All</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="results-section">
|
|
<div class="panel-header">
|
|
<h3>Suit Results</h3>
|
|
<span id="resultsCount" class="results-count"></span>
|
|
</div>
|
|
<div id="suitResults" class="suit-results">
|
|
<div class="no-results">Configure constraints above and click "Search Suits" to find optimal loadouts.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel: Visual Equipment Slots (30%) -->
|
|
<div class="slots-panel">
|
|
<div class="panel-header">
|
|
<h3>Equipment Slots</h3>
|
|
</div>
|
|
|
|
<!-- Armor Slots -->
|
|
<div class="slot-category">
|
|
<h4>Armor (9 slots)</h4>
|
|
<div class="slots-grid armor-slots">
|
|
<div class="slot-item" data-slot="Head">
|
|
<div class="slot-header">Head</div>
|
|
<div class="slot-content" id="slot_Head">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Head">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Chest">
|
|
<div class="slot-header">Chest</div>
|
|
<div class="slot-content" id="slot_Chest">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Chest">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Upper Arms">
|
|
<div class="slot-header">Upper Arms</div>
|
|
<div class="slot-content" id="slot_Upper_Arms">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Upper Arms">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Lower Arms">
|
|
<div class="slot-header">Lower Arms</div>
|
|
<div class="slot-content" id="slot_Lower_Arms">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Lower Arms">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Hands">
|
|
<div class="slot-header">Hands</div>
|
|
<div class="slot-content" id="slot_Hands">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Hands">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Abdomen">
|
|
<div class="slot-header">Abdomen</div>
|
|
<div class="slot-content" id="slot_Abdomen">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Abdomen">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Upper Legs">
|
|
<div class="slot-header">Upper Legs</div>
|
|
<div class="slot-content" id="slot_Upper_Legs">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Upper Legs">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Lower Legs">
|
|
<div class="slot-header">Lower Legs</div>
|
|
<div class="slot-content" id="slot_Lower_Legs">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Lower Legs">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Feet">
|
|
<div class="slot-header">Feet</div>
|
|
<div class="slot-content" id="slot_Feet">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Feet">🔒</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jewelry Slots -->
|
|
<div class="slot-category">
|
|
<h4>Jewelry (6 slots)</h4>
|
|
<div class="slots-grid jewelry-slots">
|
|
<div class="slot-item" data-slot="Neck">
|
|
<div class="slot-header">Neck</div>
|
|
<div class="slot-content" id="slot_Neck">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Neck">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Left Ring">
|
|
<div class="slot-header">Left Ring</div>
|
|
<div class="slot-content" id="slot_Left_Ring">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Left Ring">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Right Ring">
|
|
<div class="slot-header">Right Ring</div>
|
|
<div class="slot-content" id="slot_Right_Ring">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Right Ring">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Left Wrist">
|
|
<div class="slot-header">Left Wrist</div>
|
|
<div class="slot-content" id="slot_Left_Wrist">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Left Wrist">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Right Wrist">
|
|
<div class="slot-header">Right Wrist</div>
|
|
<div class="slot-content" id="slot_Right_Wrist">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Right Wrist">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Trinket">
|
|
<div class="slot-header">Trinket</div>
|
|
<div class="slot-content" id="slot_Trinket">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Trinket">🔒</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clothing Slots -->
|
|
<div class="slot-category">
|
|
<h4>Clothing (2 slots)</h4>
|
|
<div class="slots-grid clothing-slots">
|
|
<div class="slot-item" data-slot="Shirt">
|
|
<div class="slot-header">Shirt</div>
|
|
<div class="slot-content" id="slot_Shirt">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Shirt">🔒</button>
|
|
</div>
|
|
</div>
|
|
<div class="slot-item" data-slot="Pants">
|
|
<div class="slot-header">Pants</div>
|
|
<div class="slot-content" id="slot_Pants">
|
|
<span class="empty-slot">Empty</span>
|
|
</div>
|
|
<div class="slot-controls">
|
|
<button class="lock-btn" data-slot="Pants">🔒</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slot Controls -->
|
|
<div class="slot-controls-section">
|
|
<button type="button" class="btn btn-secondary" id="lockSelectedSlots">Lock Selected</button>
|
|
<button type="button" class="btn btn-secondary" id="clearAllLocks">Clear All Locks</button>
|
|
<button type="button" class="btn btn-secondary" id="resetSlotView">Reset View</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="suitbuilder.js"></script>
|
|
</body>
|
|
</html> |