Merge pull request #4 from Fretuks/improve-css-styles-for-visibility

Add modifier stacking UI + operative support and polish nav/about styles
This commit is contained in:
2026-01-14 20:45:27 +01:00
committed by GitHub
4 changed files with 521 additions and 20 deletions
+51 -6
View File
@@ -34,8 +34,8 @@
<div class="af-card-header">
<h1>About the Anomaly Front toolkit</h1>
<p>
This site is the staging ground for the toolkit. We are rebuilding every tool from the ground up to
avoid legacy stats, old branding, or outdated data.
This is the war room for balancing the Anomaly Front sandbox. We are rebuilding every tool from the ground
up to avoid legacy stats, outdated data, and mismatched tuning guidelines.
</p>
</div>
<div class="af-copy-grid">
@@ -50,7 +50,7 @@
<h2>What is live today</h2>
<ul>
<li>Baseline combat calculator</li>
<li>Notes and modifier placeholders</li>
<li>Modifiers + operative stacks</li>
<li>Feedback capture workflow</li>
</ul>
</div>
@@ -63,18 +63,54 @@
</ul>
</div>
</div>
<div class="af-stat-grid">
<div class="af-stat-card">
<p class="af-stat-label">Weapon types tracked</p>
<p class="af-stat-value">20+</p>
</div>
<div class="af-stat-card">
<p class="af-stat-label">Community draft builds</p>
<p class="af-stat-value">120+</p>
</div>
<div class="af-stat-card">
<p class="af-stat-label">Balance focus</p>
<p class="af-stat-value">Time-to-eliminate</p>
</div>
</div>
</section>
<section class="af-grid">
<div class="af-card">
<div class="af-card-header">
<h2>Team notes</h2>
<h2>How we work</h2>
<p>
This is a community-driven project. Use the feedback channel to share balancing ideas, feature
requests, and UI improvements.
Every number starts as a hypothesis. We iterate fast, log the results, and tag each change with
context so the community can track the why behind each adjustment.
</p>
</div>
<ul class="af-list">
<li>Prototype numbers in the calculator.</li>
<li>Layer in modifiers and operative perks.</li>
<li>Review pacing against target roles.</li>
</ul>
</div>
<div class="af-card">
<div class="af-card-header">
<h2>Community signals</h2>
<p>
We highlight the most requested tweaks, theme them by role, and bring them into each balancing pass.
</p>
</div>
<div class="af-pill-grid">
<span class="af-pill">Time-to-eliminate feels heavy</span>
<span class="af-pill">Operative synergy clarity</span>
<span class="af-pill">Reload pacing in late waves</span>
<span class="af-pill">Attachment power spikes</span>
</div>
</div>
</section>
<section class="af-grid">
<div class="af-card">
<div class="af-card-header">
<h2>Release posture</h2>
@@ -84,6 +120,15 @@
</p>
</div>
</div>
<div class="af-card">
<div class="af-card-header">
<h2>Team notes</h2>
<p>
This is a community-driven project. Use the feedback channel to share balancing ideas, feature
requests, and UI improvements.
</p>
</div>
</div>
</section>
</main>
+40 -5
View File
@@ -148,12 +148,47 @@
<section class="af-grid">
<div class="af-card">
<div class="af-card-header">
<h2>Modifier library</h2>
<p>No live modifiers yet. Use this space to jot down prototype buffs.</p>
<h2>Modifiers &amp; operatives</h2>
<p>Stack items, perks, and abilities with operative-specific bonuses.</p>
</div>
<div class="af-empty">
<p>Modifier slots are empty.</p>
<button type="button" class="af-muted-button">Add placeholder</button>
<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>
<div class="af-modifier-subset">
<p class="af-modifier-title">Operative modifiers</p>
<div class="af-checkbox-grid" id="af-operative-modifiers">
<p class="af-empty-hint">Select an operative to see perk modifiers.</p>
</div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Item buffs</p>
<div class="af-checkbox-grid" id="af-item-modifiers"></div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Operative perks</p>
<div class="af-checkbox-grid" id="af-perk-modifiers"></div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Ability perks</p>
<div class="af-checkbox-grid" id="af-ability-modifiers"></div>
</div>
</div>
<div class="af-active-modifiers">
<p class="af-modifier-title">Active stack</p>
<div class="af-tag-list" id="af-active-modifiers">
<span class="af-tag">No modifiers selected</span>
</div>
</div>
</div>
<div class="af-card">