Redesign calculator flow and split operative armor/ability buffs
This commit is contained in:
+59
-31
@@ -54,21 +54,43 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="af-grid">
|
||||
<div class="af-card">
|
||||
<section class="af-grid af-grid-calculator">
|
||||
<div class="af-card af-card-builder">
|
||||
<div class="af-card-header">
|
||||
<h2>Base inputs</h2>
|
||||
<p>Enter a prototype loadout and tweak values to see combat pacing.</p>
|
||||
<h2>Loadout builder</h2>
|
||||
<p>Follow this flow: operative → slot → weapon → buffs. Results update right below.</p>
|
||||
</div>
|
||||
<form class="af-form" id="af-calculator">
|
||||
<label>
|
||||
Weapon library
|
||||
<select name="weaponSelect" id="af-weapon-select"
|
||||
data-source="{{ url_for('static', filename='json/data.json') }}">
|
||||
<option value="">Custom entry</option>
|
||||
</select>
|
||||
<span class="af-field-hint">Select a weapon to prefill values. You can still edit every field.</span>
|
||||
</label>
|
||||
<div class="af-flow-grid">
|
||||
<label>
|
||||
Step 1 · Operative
|
||||
<select id="af-operative-select" name="operativeSelect"
|
||||
data-source="{{ url_for('static', filename='json/operative.json') }}">
|
||||
<option value="">No operative selected</option>
|
||||
</select>
|
||||
<span class="af-field-hint">Pick an operative first. Weapon choices unlock after this step.</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Step 2 · Loadout slot
|
||||
<select id="af-loadout-slot" name="loadoutSlot" disabled>
|
||||
<option value="primary">Primary</option>
|
||||
<option value="secondary">Secondary</option>
|
||||
<option value="special">Special</option>
|
||||
</select>
|
||||
<span class="af-field-hint">Choose which slot to browse (primary / secondary / special).</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Step 3 · Weapon
|
||||
<select name="weaponSelect" id="af-weapon-select"
|
||||
data-source="{{ url_for('static', filename='json/data.json') }}">
|
||||
<option value="">Custom entry</option>
|
||||
</select>
|
||||
<span class="af-field-hint">Shows only weapons available for the selected operative + slot.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Weapon name
|
||||
<input type="text" name="weaponName" placeholder="Prototype AR" autocomplete="off">
|
||||
@@ -102,12 +124,10 @@
|
||||
<button type="button" id="af-copy">Copy summary</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="af-card">
|
||||
<div class="af-card-header">
|
||||
<div class="af-card-header af-results-header">
|
||||
<h2>Calculated outputs</h2>
|
||||
<p>Instantly generated from the values you enter.</p>
|
||||
<p>Instantly generated from your current loadout and active buffs.</p>
|
||||
</div>
|
||||
<div class="af-metrics" id="af-metrics">
|
||||
<div class="af-metric">
|
||||
@@ -136,25 +156,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="af-card">
|
||||
<div class="af-card-header">
|
||||
<h2>Modifiers & operatives</h2>
|
||||
<p>Stack items, perks, and abilities with operative-specific bonuses.</p>
|
||||
<h2>Buff stack</h2>
|
||||
<p>Class buffs are separated so armor and operative abilities are easy to toggle.</p>
|
||||
</div>
|
||||
<div class="af-modifier-stack" data-source="{{ url_for('static', filename='json/modifiers.json') }}">
|
||||
<label>
|
||||
Operative
|
||||
<select id="af-operative-select" name="operativeSelect"
|
||||
data-source="{{ url_for('static', filename='json/operative.json') }}">
|
||||
<option value="">No operative selected</option>
|
||||
</select>
|
||||
<span class="af-field-hint">Pick an operative to load their unique modifiers.</span>
|
||||
</label>
|
||||
<details class="af-details" open>
|
||||
<summary>Operative armor buffs</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-operative-armor-modifiers">
|
||||
<p class="af-empty-hint">Select an operative to see armor buffs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p class="af-field-hint">Expand each section to keep the page compact while you tweak modifiers.</p>
|
||||
<details class="af-details" open>
|
||||
<summary>Operative abilities</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-operative-ability-modifiers">
|
||||
<p class="af-empty-hint">Select an operative to see ability buffs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="af-details">
|
||||
<summary>Operative modifiers</summary>
|
||||
<summary>Operative perks</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-operative-modifiers">
|
||||
<p class="af-empty-hint">Select an operative to see perk modifiers.</p>
|
||||
@@ -163,21 +191,21 @@
|
||||
</details>
|
||||
|
||||
<details class="af-details">
|
||||
<summary>Item buffs</summary>
|
||||
<summary>Global item buffs</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-item-modifiers"></div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="af-details">
|
||||
<summary>Operative perks</summary>
|
||||
<summary>Global operative perks</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-perk-modifiers"></div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="af-details">
|
||||
<summary>Ability perks</summary>
|
||||
<summary>Global ability perks</summary>
|
||||
<div class="af-modifier-subset">
|
||||
<div class="af-checkbox-grid" id="af-ability-modifiers"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user