Redesign calculator flow and split operative armor/ability buffs

This commit is contained in:
2026-02-17 22:07:56 +01:00
parent c626538f06
commit d6ad232e29
5 changed files with 1124 additions and 180 deletions
+59 -31
View File
@@ -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 &amp; 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>