Add weapon library dropdown and restyle UI

static/filterWeapons.js

@@ -1,4 +1,5 @@
 const form = document.getElementById('af-calculator');
+const weaponSelect = document.getElementById('af-weapon-select');
 const outputs = {
     shotDamage: document.querySelector('[data-output="shotDamage"]'),
     burstDps: document.querySelector('[data-output="burstDps"]'),
@@ -10,6 +11,7 @@ const outputs = {
 
 const resetButton = document.getElementById('af-reset');
 const copyButton = document.getElementById('af-copy');
+const weaponsById = new Map();
 
 const numberOrNull = (value) => {
     const parsed = Number.parseFloat(value);
@@ -64,6 +66,72 @@ const calculate = () => {
     outputs.ttk.textContent = formatValue(ttk, 's');
 };
 
+const setFormValue = (name, value) => {
+    const field = form.elements[name];
+    if (!field) {
+        return;
+    }
+    field.value = value ?? '';
+};
+
+const applyWeapon = (weapon) => {
+    if (!weapon) {
+        return;
+    }
+    setFormValue('weaponName', weapon.name ?? '');
+    setFormValue('baseDamage', weapon.damage ?? '');
+    setFormValue('projectiles', weapon.damage_multiplier ?? 1);
+    setFormValue('rpm', weapon.rpm ?? '');
+    setFormValue('magazine', weapon.mag_size ?? '');
+    setFormValue('reload', weapon.reload_time ?? '');
+    calculate();
+};
+
+const loadWeaponLibrary = async () => {
+    if (!weaponSelect) {
+        return;
+    }
+    const source = weaponSelect.dataset.source;
+    if (!source) {
+        return;
+    }
+
+    try {
+        const response = await fetch(source);
+        if (!response.ok) {
+            throw new Error('Failed to load weapons');
+        }
+        const weapons = await response.json();
+        const normalized = weapons
+            .filter((weapon) => weapon && weapon.name)
+            .map((weapon) => ({
+                id: weapon.id ?? weapon.name,
+                name: weapon.name,
+                damage: weapon.damage,
+                damage_multiplier: weapon.damage_multiplier ?? 1,
+                rpm: weapon.rpm,
+                mag_size: weapon.mag_size,
+                reload_time: weapon.reload_time
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+
+        normalized.forEach((weapon) => {
+            const key = String(weapon.id);
+            weaponsById.set(key, weapon);
+            const option = document.createElement('option');
+            option.value = key;
+            option.textContent = weapon.name;
+            weaponSelect.appendChild(option);
+        });
+    } catch (error) {
+        console.error('Weapon library load failed', error);
+        const option = document.createElement('option');
+        option.textContent = 'Weapon library unavailable';
+        option.disabled = true;
+        weaponSelect.appendChild(option);
+    }
+};
+
 form.addEventListener('input', calculate);
 
 resetButton.addEventListener('click', () => {
@@ -71,6 +139,16 @@ resetButton.addEventListener('click', () => {
     calculate();
 });
 
+if (weaponSelect) {
+    weaponSelect.addEventListener('change', (event) => {
+        const selected = weaponsById.get(event.target.value);
+        if (!selected) {
+            return;
+        }
+        applyWeapon(selected);
+    });
+}
+
 copyButton.addEventListener('click', async () => {
     const data = new FormData(form);
     const name = data.get('weaponName') || 'Unnamed loadout';
@@ -100,3 +178,4 @@ copyButton.addEventListener('click', async () => {
 });
 
 calculate();
+loadWeaponLibrary();