feat: add initial ammo chart, update dbs, and update docs.

CHANGELOG.md

@@ -0,0 +1,62 @@
+# Changelog
+
+All notable changes to OnlyScavs will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.4.0] - 2026-04-06
+
+### Added
+- Ammo Chart page (`/ammo`) — scatter plot of damage vs. armor penetration, colored by caliber, with clickable legend, live search/filter, and sortable stats table
+- `import_ammo.py` — imports all ammo rounds from tarkov.dev GraphQL API into local `ammo` table
+
+## [0.3.0] - 2026-03-29
+
+### Added
+- Barter Calculator page (`/barters`) — shows all trader barters with true rouble cost breakdown
+- Carry Efficiency metric for rigs and backpacks (capacity per kg)
+- Landing page hero image and updated card grid
+
+### Changed
+- Keys page redesigned with grouped display by map and inline editing for ratings/notes
+
+### Fixed
+- Gear database refreshed from tarkov.dev API pull
+
+## [0.2.0] - 2026-03-01
+
+### Added
+- Loadout Planner (`/loadout`) — browse guns, armor, helmets, rigs, and backpacks; save builds
+- Quest Trees (`/quests`) — visualize quest chains and trader dependencies
+- Armor plate support with open slot system (`armor_open_slots`, `armor_slot_plates` tables)
+- Injectors page (`/meds`) — compare stim/stimulator effects, skills, and side effects
+- `import_gear.py` — imports weapons, armor, helmets, rigs, and mod attachments
+- `migrations_v2.sql` — unified `gear_items` schema with weapon slots and armor plate slots
+
+### Fixed
+- Quest tree display cleaned up
+- Key ratings not saving correctly
+
+## [0.1.1] - 2026-02-21
+
+### Added
+- Collector checklist (`/collector`) — track Kappa container quest progress with recursive prerequisite tree via SQL CTE
+- `import_quests.py` — imports all tasks and quest dependencies from tarkov.dev
+- `TARKOV_DEV_API.md` — full tarkov.dev GraphQL API reference for all queries used in the project
+- `.gitignore` and project docs
+
+## [0.1.0] - 2026-01-25
+
+### Added
+- Initial release — key ratings tool (`/keys`)
+- `import_keys.py` — fetches all key items from tarkov.dev GraphQL API
+- SQLite database with `keys`, `key_ratings`, and `maps` tables
+- Sorting and filtering on key ratings view
+- `migrations_v1.sql` — maps tagging and `used_in_quest` flag
+
+[Unreleased]: https://github.com/serversdwn/onlyscavs/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/serversdwn/onlyscavs/compare/v0.2.0...v0.3.0
+[0.2.0]: https://github.com/serversdwn/onlyscavs/compare/v0.1.1...v0.2.0
+[0.1.1]: https://github.com/serversdwn/onlyscavs/compare/v0.1.0...v0.1.1
+[0.1.0]: https://github.com/serversdwn/onlyscavs/releases/tag/v0.1.0

TARKOV_DEV_API.md

@@ -454,5 +454,6 @@ craftUnlock[]      – craft objects
 |---|---|---|
 | [import_keys.py](import_keys.py) | `items(types: [keys])` | Fetches all key items into `keys` table |
 | [import_quests.py](import_quests.py) | `tasks { id name wikiLink trader taskRequirements }` | Fetches all tasks and their dependencies into `quests` + `quest_deps` tables |
+| [import_ammo.py](import_ammo.py) | `ammo { item { id name } caliber damage penetrationPower ... }` | Fetches all ammo rounds into `ammo` table |
 
 The Collector prerequisite tree is computed from `quest_deps` using a recursive SQL CTE in [app.py](app.py) at `/collector`.

app.py

@@ -123,11 +123,29 @@ def _keys_context():
 
     key_query += f" ORDER BY {order_by} "
     keys = conn.execute(key_query, params).fetchall()
-    conn.close()
 
     key_maps = {k: sorted(v) for k, v in key_maps.items()}
+
+    # Build info view data: all keys (unfiltered), grouped by map then unassigned.
+    all_keys = conn.execute("""
+        SELECT k.id, k.name, k.grid_image_url, k.wiki_url,
+               r.priority, r.reason, COALESCE(r.used_in_quest, 0) AS used_in_quest
+        FROM keys k
+        LEFT JOIN key_ratings r ON k.id = r.key_id
+        ORDER BY k.name ASC
+    """).fetchall()
+    conn.close()
+
+    # keys_by_map: list of (map_row, [key_row, ...]) sorted by map name
+    keys_by_map = []
+    for m in sorted(maps, key=lambda r: r["name"]):
+        bucket = [k for k in all_keys if m["id"] in key_maps.get(k["id"], [])]
+        keys_by_map.append((m, bucket))
+    unassigned_keys = [k for k in all_keys if not key_maps.get(k["id"])]
+
     return dict(keys=keys, maps=maps, key_maps=key_maps,
-                map_filter=map_filter, sort=sort, show=show)
+                map_filter=map_filter, sort=sort, show=show,
+                keys_by_map=keys_by_map, unassigned_keys=unassigned_keys)
 
 
 @app.route("/keys")
@@ -183,6 +201,23 @@ def rate_key():
     return redirect(f"{base_url}#key-{key_id}")
 
 
+@app.route("/rate_json", methods=["POST"])
+def rate_json():
+    data = request.get_json(force=True)
+    key_id = data.get("key_id")
+    if not key_id:
+        return jsonify({"ok": False, "error": "missing key_id"}), 400
+    priority = data.get("priority")  # None or int
+    reason = data.get("reason", "")
+    used_in_quest = 1 if data.get("used_in_quest") else 0
+    map_ids = [int(m) for m in data.get("map_ids", [])]
+    conn = get_db()
+    _update_key(conn, key_id, priority, reason, used_in_quest, map_ids)
+    conn.commit()
+    conn.close()
+    return jsonify({"ok": True})
+
+
 def _update_key(conn, key_id, priority, reason, used_in_quest, map_ids):
     conn.execute("""
         INSERT INTO key_ratings (key_id, priority, reason, used_in_quest)
@@ -1067,5 +1102,40 @@ def barters():
     return render_template("barters.html", barters=barter_list)
 
 
+@app.route("/ammo")
+def ammo():
+    caliber_filter = request.args.get("caliber", "").strip()
+    search = request.args.get("q", "").strip().lower()
+
+    conn = get_db()
+    try:
+        exists = conn.execute(
+            "SELECT name FROM sqlite_master WHERE type='table' AND name='ammo'"
+        ).fetchone()
+        if not exists:
+            return render_template("ammo.html", rounds=[], calibers=[], caliber=caliber_filter, q=search)
+
+        calibers = [r["caliber"] for r in conn.execute(
+            "SELECT DISTINCT caliber FROM ammo WHERE caliber IS NOT NULL ORDER BY caliber"
+        ).fetchall()]
+
+        query = "SELECT * FROM ammo WHERE 1=1"
+        params = []
+        if caliber_filter:
+            query += " AND caliber = ?"
+            params.append(caliber_filter)
+        if search:
+            query += " AND (LOWER(name) LIKE ? OR LOWER(short_name) LIKE ?)"
+            params.extend([f"%{search}%", f"%{search}%"])
+        query += " ORDER BY caliber, penetration_power DESC"
+
+        rows = conn.execute(query, params).fetchall()
+        rounds = [dict(r) for r in rows]
+    finally:
+        conn.close()
+
+    return render_template("ammo.html", rounds=rounds, calibers=calibers, caliber=caliber_filter, q=search)
+
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=True)

import_ammo.py

@@ -0,0 +1,183 @@
+import requests
+import sqlite3
+import sys
+
+DB_PATH = "tarkov.db"
+API_URL = "https://api.tarkov.dev/graphql"
+
+GRAPHQL_QUERY = """
+{
+  ammo {
+    item {
+      id
+      name
+      shortName
+      gridImageLink
+      wikiLink
+    }
+    caliber
+    damage
+    armorDamage
+    penetrationPower
+    penetrationChance
+    fragmentationChance
+    ricochetChance
+    initialSpeed
+    lightBleedModifier
+    heavyBleedModifier
+    projectileCount
+    tracer
+    tracerColor
+    ammoType
+    accuracyModifier
+    recoilModifier
+    staminaBurnPerDamage
+  }
+}
+"""
+
+
+def fetch_ammo():
+    response = requests.post(
+        API_URL,
+        json={"query": GRAPHQL_QUERY},
+        timeout=30
+    )
+    response.raise_for_status()
+    data = response.json()
+
+    if "errors" in data:
+        raise RuntimeError(data["errors"])
+
+    return data["data"]["ammo"]
+
+
+def ensure_schema(conn):
+    conn.executescript("""
+        CREATE TABLE IF NOT EXISTS ammo (
+            id                      TEXT PRIMARY KEY,
+            name                    TEXT NOT NULL,
+            short_name              TEXT,
+            caliber                 TEXT,
+            damage                  INTEGER,
+            armor_damage            INTEGER,
+            penetration_power       INTEGER,
+            penetration_chance      REAL,
+            fragmentation_chance    REAL,
+            ricochet_chance         REAL,
+            initial_speed           REAL,
+            light_bleed_modifier    REAL,
+            heavy_bleed_modifier    REAL,
+            projectile_count        INTEGER DEFAULT 1,
+            tracer                  INTEGER DEFAULT 0,
+            tracer_color            TEXT,
+            ammo_type               TEXT,
+            accuracy_modifier       REAL,
+            recoil_modifier         REAL,
+            stamina_burn_per_damage REAL,
+            grid_image_url          TEXT,
+            wiki_url                TEXT,
+            imported_at             TEXT DEFAULT CURRENT_TIMESTAMP,
+            updated_at              TEXT DEFAULT CURRENT_TIMESTAMP
+        );
+
+        CREATE INDEX IF NOT EXISTS idx_ammo_caliber    ON ammo(caliber);
+        CREATE INDEX IF NOT EXISTS idx_ammo_damage     ON ammo(damage);
+        CREATE INDEX IF NOT EXISTS idx_ammo_pen        ON ammo(penetration_power);
+    """)
+    conn.commit()
+
+
+def upsert_ammo(conn, rounds):
+    inserted = 0
+    updated = 0
+    skipped = 0
+
+    cursor = conn.cursor()
+
+    for r in rounds:
+        item = r.get("item") or {}
+        api_id = item.get("id")
+        name = item.get("name")
+
+        if not api_id or not name:
+            skipped += 1
+            continue
+
+        row_data = (
+            name,
+            item.get("shortName"),
+            r.get("caliber"),
+            r.get("damage"),
+            r.get("armorDamage"),
+            r.get("penetrationPower"),
+            r.get("penetrationChance"),
+            r.get("fragmentationChance"),
+            r.get("ricochetChance"),
+            r.get("initialSpeed"),
+            r.get("lightBleedModifier"),
+            r.get("heavyBleedModifier"),
+            r.get("projectileCount") or 1,
+            1 if r.get("tracer") else 0,
+            r.get("tracerColor"),
+            r.get("ammoType"),
+            r.get("accuracyModifier"),
+            r.get("recoilModifier"),
+            r.get("staminaBurnPerDamage"),
+            item.get("gridImageLink"),
+            item.get("wikiLink"),
+        )
+
+        cursor.execute("SELECT id FROM ammo WHERE id = ?", (api_id,))
+        exists = cursor.fetchone()
+
+        if exists:
+            cursor.execute("""
+                UPDATE ammo SET
+                    name = ?, short_name = ?, caliber = ?,
+                    damage = ?, armor_damage = ?, penetration_power = ?,
+                    penetration_chance = ?, fragmentation_chance = ?, ricochet_chance = ?,
+                    initial_speed = ?, light_bleed_modifier = ?, heavy_bleed_modifier = ?,
+                    projectile_count = ?, tracer = ?, tracer_color = ?, ammo_type = ?,
+                    accuracy_modifier = ?, recoil_modifier = ?, stamina_burn_per_damage = ?,
+                    grid_image_url = ?, wiki_url = ?,
+                    updated_at = CURRENT_TIMESTAMP
+                WHERE id = ?
+            """, (*row_data, api_id))
+            updated += 1
+        else:
+            cursor.execute("""
+                INSERT INTO ammo (
+                    id, name, short_name, caliber,
+                    damage, armor_damage, penetration_power,
+                    penetration_chance, fragmentation_chance, ricochet_chance,
+                    initial_speed, light_bleed_modifier, heavy_bleed_modifier,
+                    projectile_count, tracer, tracer_color, ammo_type,
+                    accuracy_modifier, recoil_modifier, stamina_burn_per_damage,
+                    grid_image_url, wiki_url
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+            """, (api_id, *row_data))
+            inserted += 1
+
+    conn.commit()
+    return inserted, updated, skipped
+
+
+def main():
+    print("Fetching ammo data from tarkov.dev...")
+    rounds = fetch_ammo()
+    print(f"  Got {len(rounds)} rounds")
+
+    conn = sqlite3.connect(DB_PATH)
+    try:
+        ensure_schema(conn)
+        inserted, updated, skipped = upsert_ammo(conn, rounds)
+        print(f"  Inserted: {inserted}  Updated: {updated}  Skipped: {skipped}")
+    finally:
+        conn.close()
+
+    print("Done.")
+
+
+if __name__ == "__main__":
+    main()

templates/ammo.html

@@ -0,0 +1,587 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Ammo Chart — OnlyScavs</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
+  <style>
+    :root {
+      --bg: #0e0e0e;
+      --panel: #161616;
+      --panel2: #1c1c1c;
+      --text: #e8e8e8;
+      --muted: #777;
+      --muted2: #555;
+      --border: #262626;
+      --accent: #9ccfff;
+      --accent2: #ffd580;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+
+    /* ── NAV ─────────────────────────────────────────────────── */
+    .site-nav {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 32px;
+      height: 52px;
+      background: rgba(14,14,14,0.88);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+    }
+    .nav-brand {
+      font-size: 0.95rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent);
+      text-decoration: none;
+    }
+    .nav-links { display: flex; gap: 4px; }
+    .nav-links a {
+      color: var(--muted);
+      text-decoration: none;
+      font-size: 0.82rem;
+      padding: 6px 12px;
+      border-radius: 6px;
+      transition: color 0.15s, background 0.15s;
+    }
+    .nav-links a:hover, .nav-links a.active {
+      color: var(--text);
+      background: rgba(255,255,255,0.06);
+    }
+
+    /* ── LAYOUT ───────────────────────────────────────────────── */
+    .page {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 80px 32px 60px;
+    }
+
+    .page-header {
+      margin-bottom: 28px;
+    }
+    .page-header h1 {
+      font-size: 1.6rem;
+      font-weight: 800;
+      letter-spacing: -0.01em;
+      color: #fff;
+    }
+    .page-header p {
+      font-size: 0.85rem;
+      color: var(--muted);
+      margin-top: 4px;
+    }
+
+    /* ── CONTROLS ─────────────────────────────────────────────── */
+    .controls {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 20px;
+      align-items: center;
+    }
+    .controls input, .controls select {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 7px 12px;
+      border-radius: 7px;
+      font-size: 0.83rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .controls input:focus, .controls select:focus {
+      border-color: var(--accent);
+    }
+    .controls input { width: 200px; }
+    .controls select { cursor: pointer; }
+    .controls label {
+      font-size: 0.8rem;
+      color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+    }
+    .controls label input[type=checkbox] {
+      width: auto;
+      padding: 0;
+      accent-color: var(--accent);
+      cursor: pointer;
+    }
+    .count-badge {
+      font-size: 0.75rem;
+      color: var(--muted2);
+      margin-left: auto;
+    }
+
+    /* ── CHART ────────────────────────────────────────────────── */
+    .chart-wrap {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      position: relative;
+      margin-bottom: 28px;
+    }
+    .chart-wrap canvas {
+      display: block;
+    }
+
+    /* ── LEGEND ───────────────────────────────────────────────── */
+    .legend-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 24px;
+    }
+    .legend-chip {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.75rem;
+      color: var(--muted);
+      padding: 4px 10px;
+      border-radius: 20px;
+      border: 1px solid var(--border);
+      cursor: pointer;
+      transition: border-color 0.15s, color 0.15s, opacity 0.15s;
+    }
+    .legend-chip:hover { border-color: #444; color: var(--text); }
+    .legend-chip.hidden { opacity: 0.35; }
+    .legend-dot {
+      width: 9px; height: 9px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    /* ── TABLE ────────────────────────────────────────────────── */
+    .table-wrap {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: auto;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.82rem;
+    }
+    thead th {
+      background: var(--panel2);
+      color: var(--muted);
+      font-weight: 600;
+      font-size: 0.72rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      padding: 10px 14px;
+      text-align: left;
+      white-space: nowrap;
+      position: sticky;
+      top: 0;
+      cursor: pointer;
+      user-select: none;
+    }
+    thead th:hover { color: var(--text); }
+    thead th.sort-asc::after  { content: " ↑"; color: var(--accent); }
+    thead th.sort-desc::after { content: " ↓"; color: var(--accent); }
+    tbody tr {
+      border-top: 1px solid var(--border);
+      transition: background 0.1s;
+    }
+    tbody tr:hover { background: var(--panel2); }
+    tbody td { padding: 9px 14px; vertical-align: middle; white-space: nowrap; }
+    td.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+    .tier-bar {
+      display: inline-block;
+      height: 6px;
+      border-radius: 3px;
+      min-width: 2px;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+
+    .tag {
+      display: inline-block;
+      font-size: 0.68rem;
+      font-weight: 600;
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: rgba(156,207,255,0.12);
+      color: var(--accent);
+    }
+    .tag.tracer {
+      background: rgba(255,213,128,0.12);
+      color: var(--accent2);
+    }
+
+    /* ── EMPTY ────────────────────────────────────────────────── */
+    .empty {
+      text-align: center;
+      padding: 80px 20px;
+      color: var(--muted2);
+    }
+    .empty strong { display: block; font-size: 1.1rem; margin-bottom: 8px; color: var(--muted); }
+
+    /* ── TOOLTIP OVERRIDE ─────────────────────────────────────── */
+    #chartjs-tooltip {
+      background: #1a1a1a;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 10px 14px;
+      color: var(--text);
+      font-size: 0.78rem;
+      pointer-events: none;
+      position: fixed;
+      transition: opacity 0.15s;
+      max-width: 220px;
+      line-height: 1.6;
+      z-index: 9999;
+    }
+    #chartjs-tooltip .tt-name { font-weight: 700; margin-bottom: 4px; color: #fff; }
+    #chartjs-tooltip .tt-row { color: var(--muted); }
+    #chartjs-tooltip .tt-row span { color: var(--text); }
+  </style>
+</head>
+<body>
+
+<nav class="site-nav">
+  <a class="nav-brand" href="/">OnlyScavs</a>
+  <div class="nav-links">
+    <a href="/keys">Keys</a>
+    <a href="/collector">Collector</a>
+    <a href="/quests">Quests</a>
+    <a href="/loadout">Loadout</a>
+    <a href="/meds">Injectors</a>
+    <a href="/barters">Barters</a>
+    <a href="/ammo" class="active">Ammo</a>
+  </div>
+</nav>
+
+<div class="page">
+  <div class="page-header">
+    <h1>Ammo Chart</h1>
+    <p>Damage vs. Armor Penetration — scatter plot by caliber</p>
+  </div>
+
+  {% if not rounds %}
+    <div class="empty">
+      <strong>No ammo data yet.</strong>
+      Run <code>python import_ammo.py</code> to import from tarkov.dev.
+    </div>
+  {% else %}
+
+  <div class="controls">
+    <input type="text" id="search" placeholder="Search ammo…" value="{{ q }}">
+    <select id="caliberFilter">
+      <option value="">All calibers</option>
+      {% for c in calibers %}
+        <option value="{{ c }}" {% if c == caliber %}selected{% endif %}>{{ c }}</option>
+      {% endfor %}
+    </select>
+    <label>
+      <input type="checkbox" id="tracerOnly"> Tracer only
+    </label>
+    <span class="count-badge" id="countBadge"></span>
+  </div>
+
+  <div class="chart-wrap">
+    <canvas id="ammoChart" height="460"></canvas>
+  </div>
+
+  <div class="legend-wrap" id="legendWrap"></div>
+
+  <div class="table-wrap">
+    <table id="ammoTable">
+      <thead>
+        <tr>
+          <th data-col="name">Name</th>
+          <th data-col="caliber">Caliber</th>
+          <th data-col="damage" class="sort-desc">Damage</th>
+          <th data-col="penetration_power">Pen</th>
+          <th data-col="armor_damage">Armor Dmg</th>
+          <th data-col="fragmentation_chance">Frag %</th>
+          <th data-col="initial_speed">Velocity</th>
+          <th data-col="projectile_count">Pellets</th>
+          <th data-col="tracer">Tracer</th>
+        </tr>
+      </thead>
+      <tbody id="tableBody"></tbody>
+    </table>
+  </div>
+
+  {% endif %}
+</div>
+
+<div id="chartjs-tooltip" style="opacity:0;"></div>
+
+<script>
+const ALL_ROUNDS = {{ rounds | tojson }};
+
+// ── Color palette per caliber ──────────────────────────────────────────────
+const PALETTE = [
+  "#9ccfff","#ffd580","#7ee8a2","#ff9eb5","#c9b1ff",
+  "#ffb347","#80deea","#f48fb1","#a5d6a7","#ffe082",
+  "#90caf9","#ef9a9a","#ce93d8","#80cbc4","#ffcc02",
+  "#ff7043","#66bb6a","#ab47bc","#26c6da","#d4e157",
+];
+
+function caliberColor(caliber, idx) {
+  return PALETTE[idx % PALETTE.length];
+}
+
+// ── State ──────────────────────────────────────────────────────────────────
+let sortCol = "damage";
+let sortAsc  = false;
+let hiddenCalibers = new Set();
+
+// ── Filter rounds ──────────────────────────────────────────────────────────
+function filteredRounds() {
+  const q      = document.getElementById("search").value.trim().toLowerCase();
+  const cal    = document.getElementById("caliberFilter").value;
+  const tracer = document.getElementById("tracerOnly").checked;
+
+  return ALL_ROUNDS.filter(r => {
+    if (cal    && r.caliber !== cal) return false;
+    if (tracer && !r.tracer)         return false;
+    if (q && !r.name.toLowerCase().includes(q) &&
+             !(r.short_name || "").toLowerCase().includes(q)) return false;
+    return true;
+  });
+}
+
+// ── Caliber list ───────────────────────────────────────────────────────────
+function getCalibers(rounds) {
+  const seen = new Map();
+  rounds.forEach(r => { if (r.caliber && !seen.has(r.caliber)) seen.set(r.caliber, seen.size); });
+  return seen;
+}
+
+// ── Chart ──────────────────────────────────────────────────────────────────
+const ctx = document.getElementById("ammoChart");
+let chart = null;
+
+function buildDatasets(rounds) {
+  const calibers = getCalibers(rounds);
+  const groups = {};
+  calibers.forEach((_, cal) => { groups[cal] = []; });
+
+  rounds.forEach(r => {
+    if (r.damage == null || r.penetration_power == null) return;
+    if (hiddenCalibers.has(r.caliber)) return;
+    const key = r.caliber || "Unknown";
+    if (!groups[key]) groups[key] = [];
+    groups[key].push({ x: r.damage, y: r.penetration_power, r: r });
+  });
+
+  const caliberList = [...calibers.keys()];
+  return caliberList.map((cal, idx) => ({
+    label: cal,
+    data: (groups[cal] || []).map(p => ({ x: p.x, y: p.y, r: p.r })),
+    backgroundColor: caliberColor(cal, idx) + "cc",
+    borderColor:     caliberColor(cal, idx),
+    borderWidth: 1,
+    pointRadius: 6,
+    pointHoverRadius: 9,
+    _calIdx: idx,
+  }));
+}
+
+function renderChart(rounds) {
+  const datasets = buildDatasets(rounds);
+
+  if (chart) {
+    chart.data.datasets = datasets;
+    chart.update("none");
+    return;
+  }
+
+  const tooltip = document.getElementById("chartjs-tooltip");
+
+  chart = new Chart(ctx, {
+    type: "scatter",
+    data: { datasets },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 200 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          enabled: false,
+          external(context) {
+            const { chart, tooltip: tt } = context;
+            if (tt.opacity === 0) { tooltip.style.opacity = 0; return; }
+
+            const point = tt.dataPoints?.[0];
+            if (!point) return;
+            const r = point.raw.r;
+
+            tooltip.innerHTML = `
+              <div class="tt-name">${r.name}</div>
+              <div class="tt-row">Caliber: <span>${r.caliber || "—"}</span></div>
+              <div class="tt-row">Damage: <span>${r.damage ?? "—"}</span></div>
+              <div class="tt-row">Pen: <span>${r.penetration_power ?? "—"}</span></div>
+              <div class="tt-row">Armor Dmg: <span>${r.armor_damage ?? "—"}</span></div>
+              <div class="tt-row">Frag: <span>${r.fragmentation_chance != null ? (r.fragmentation_chance * 100).toFixed(0) + "%" : "—"}</span></div>
+              ${r.tracer ? '<div class="tt-row"><span style="color:var(--accent2)">Tracer</span></div>' : ""}
+            `;
+
+            const pos = chart.canvas.getBoundingClientRect();
+            const x = pos.left + tt.caretX + 12;
+            const y = pos.top  + tt.caretY - 10;
+            tooltip.style.left    = x + "px";
+            tooltip.style.top     = y + "px";
+            tooltip.style.opacity = 1;
+          }
+        },
+      },
+      scales: {
+        x: {
+          title: { display: true, text: "Damage", color: "#777", font: { size: 12 } },
+          grid:  { color: "rgba(255,255,255,0.05)" },
+          ticks: { color: "#666" },
+          min: 0,
+        },
+        y: {
+          title: { display: true, text: "Armor Penetration", color: "#777", font: { size: 12 } },
+          grid:  { color: "rgba(255,255,255,0.05)" },
+          ticks: { color: "#666" },
+          min: 0,
+        },
+      },
+    },
+  });
+}
+
+// ── Legend ─────────────────────────────────────────────────────────────────
+function renderLegend(rounds) {
+  const calibers = getCalibers(ALL_ROUNDS); // always all calibers in legend
+  const wrap = document.getElementById("legendWrap");
+  wrap.innerHTML = "";
+  calibers.forEach((idx, cal) => {
+    const chip = document.createElement("div");
+    chip.className = "legend-chip" + (hiddenCalibers.has(cal) ? " hidden" : "");
+    chip.innerHTML = `<span class="legend-dot" style="background:${caliberColor(cal, idx)}"></span>${cal}`;
+    chip.addEventListener("click", () => {
+      if (hiddenCalibers.has(cal)) hiddenCalibers.delete(cal);
+      else hiddenCalibers.add(cal);
+      refresh();
+    });
+    wrap.appendChild(chip);
+  });
+}
+
+// ── Table ──────────────────────────────────────────────────────────────────
+const caliberColorMap = new Map();
+
+function calForRound(r) {
+  if (!caliberColorMap.has(r.caliber)) {
+    const idx = caliberColorMap.size;
+    caliberColorMap.set(r.caliber, PALETTE[idx % PALETTE.length]);
+  }
+  return caliberColorMap.get(r.caliber);
+}
+
+// Pre-populate color map from all rounds so it's stable
+(function() {
+  const seen = new Set();
+  ALL_ROUNDS.forEach(r => {
+    if (r.caliber && !seen.has(r.caliber)) {
+      seen.add(r.caliber);
+      caliberColorMap.set(r.caliber, PALETTE[caliberColorMap.size % PALETTE.length]);
+    }
+  });
+})();
+
+function renderTable(rounds) {
+  const sorted = [...rounds].sort((a, b) => {
+    const va = a[sortCol] ?? (typeof a[sortCol] === "number" ? -Infinity : "");
+    const vb = b[sortCol] ?? (typeof b[sortCol] === "number" ? -Infinity : "");
+    if (va < vb) return sortAsc ? -1 : 1;
+    if (va > vb) return sortAsc ?  1 : -1;
+    return 0;
+  });
+
+  const maxPen = Math.max(...ALL_ROUNDS.map(r => r.penetration_power || 0), 1);
+  const tbody  = document.getElementById("tableBody");
+  tbody.innerHTML = "";
+
+  sorted.forEach(r => {
+    const color   = calForRound(r);
+    const penPct  = Math.round(((r.penetration_power || 0) / maxPen) * 100);
+    const fragPct = r.fragmentation_chance != null
+      ? (r.fragmentation_chance * 100).toFixed(0) + "%" : "—";
+
+    const tr = document.createElement("tr");
+    tr.innerHTML = `
+      <td>${r.name}</td>
+      <td><span class="tag">${r.caliber || "—"}</span></td>
+      <td class="num">${r.damage ?? "—"}</td>
+      <td class="num">
+        <span class="tier-bar" style="width:${penPct}%;background:${color}"></span>${r.penetration_power ?? "—"}
+      </td>
+      <td class="num">${r.armor_damage ?? "—"}</td>
+      <td class="num">${fragPct}</td>
+      <td class="num">${r.initial_speed != null ? Math.round(r.initial_speed) + " m/s" : "—"}</td>
+      <td class="num">${r.projectile_count && r.projectile_count > 1 ? r.projectile_count : "—"}</td>
+      <td>${r.tracer ? '<span class="tag tracer">T</span>' : ""}</td>
+    `;
+    tbody.appendChild(tr);
+  });
+
+  document.getElementById("countBadge").textContent = `${sorted.length} rounds`;
+
+  // Update sort header indicators
+  document.querySelectorAll("thead th[data-col]").forEach(th => {
+    th.classList.remove("sort-asc", "sort-desc");
+    if (th.dataset.col === sortCol) {
+      th.classList.add(sortAsc ? "sort-asc" : "sort-desc");
+    }
+  });
+}
+
+// ── Sort clicks ────────────────────────────────────────────────────────────
+document.querySelectorAll("thead th[data-col]").forEach(th => {
+  th.addEventListener("click", () => {
+    if (sortCol === th.dataset.col) sortAsc = !sortAsc;
+    else { sortCol = th.dataset.col; sortAsc = false; }
+    renderTable(filteredRounds());
+  });
+});
+
+// ── Refresh ────────────────────────────────────────────────────────────────
+function refresh() {
+  const rounds = filteredRounds();
+  renderChart(rounds);
+  renderLegend(rounds);
+  renderTable(rounds);
+}
+
+// ── Init ───────────────────────────────────────────────────────────────────
+document.getElementById("search").addEventListener("input", refresh);
+document.getElementById("caliberFilter").addEventListener("change", refresh);
+document.getElementById("tracerOnly").addEventListener("change", refresh);
+
+// Set chart container height explicitly for Chart.js
+ctx.style.height = "460px";
+
+refresh();
+</script>
+
+</body>
+</html>

templates/keys.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>OnlyScavs – Key Ratings</title>
+  <title>OnlyScavs – Keys</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
     :root {
@@ -34,7 +34,7 @@
       z-index: 0;
     }
     .page {
-      max-width: 980px;
+      max-width: 1020px;
       margin: 0 auto;
       padding: 24px 16px;
       position: relative;
@@ -51,214 +51,155 @@
       height: 52px;
       background: rgba(14,14,14,0.92);
       backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
       border-bottom: 1px solid rgba(255,255,255,0.06);
     }
     .nav-brand {
-      font-size: 0.85rem;
+      font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
-      font-weight: 700;
+      text-transform: uppercase; color: var(--accent); text-decoration: none; flex-shrink: 0;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      color: var(--accent);
-      text-decoration: none;
-      flex-shrink: 0;
-    }
-    .nav-links {
-      display: flex;
-      gap: 2px;
-      flex-wrap: wrap;
     }
+    .nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
     .nav-links a {
-      color: #666;
+      color: #666; text-decoration: none; font-size: 0.8rem;
-      text-decoration: none;
+      padding: 5px 10px; border-radius: 5px; transition: color 0.15s, background 0.15s;
-      font-size: 0.8rem;
-      padding: 5px 10px;
-      border-radius: 5px;
-      transition: color 0.15s, background 0.15s;
     }
     .nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
     .nav-links a.active { color: var(--accent); background: rgba(156,207,255,0.08); }
-    h1 {
-      font-size: 1.4rem;
-      margin: 0 0 16px;
-      color: var(--accent);
-      letter-spacing: 0.02em;
-    }
-
-    /* ── filters ───────────────────────────────────────────── */
-    .filters {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    }
-    .filters label { color: var(--muted); font-size: 0.85rem; }
-    select, input[type="text"] {
-      background: #222;
-      color: var(--text);
-      border: 1px solid #3a3a3a;
-      border-radius: 6px;
-      padding: 7px 10px;
-      font-size: 0.9rem;
-    }
-    select:focus, input:focus { outline: 1px solid var(--accent); }
-    button {
-      background: #2a2a2a;
-      color: var(--text);
-      border: 1px solid #444;
-      cursor: pointer;
-      padding: 7px 14px;
-      border-radius: 6px;
-      font-size: 0.9rem;
-      transition: background 0.15s;
-    }
-    button:hover { background: #333; }
-
-    /* ── save-all bar ──────────────────────────────────────── */
-    .save-all {
-      margin: 4px 0 18px;
-    }
-    .save-all button {
-      background: #1d3a52;
-      border-color: #2d5a7a;
-      color: var(--accent);
-      font-weight: 600;
-    }
-    .save-all button:hover { background: #254a66; }
-
-    /* ── key card ──────────────────────────────────────────── */
-    .key {
-      display: grid;
-      grid-template-columns: 56px 1fr auto;
-      gap: 12px;
-      align-items: start;
-      padding: 14px 10px;
-      border-bottom: 1px solid var(--border);
-      transition: background 0.1s;
-    }
-    .key:hover { background: #161616; }
-
-    .key-thumb {
-      width: 56px;
-      height: 56px;
-      border-radius: 6px;
-      background: #1a1a1a;
-      object-fit: contain;
-      flex-shrink: 0;
-    }
-
-    /* left column: name + tags */
-    .key-info { min-width: 0; }
-    .key-title {
-      display: flex;
-      align-items: baseline;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-    .key-title strong { font-size: 0.95rem; line-height: 1.3; }
-    .key-title a { color: var(--accent); font-size: 0.8rem; }
-    .map-tags {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      margin-top: 6px;
-    }
-    .map-tag {
-      background: #1e2e1e;
-      border: 1px solid #2a3f2a;
-      color: #8fbc8f;
-      border-radius: 999px;
-      padding: 1px 8px;
-      font-size: 0.75rem;
-    }
-
-    /* right column: controls */
-    .key-controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      align-items: center;
-      justify-content: flex-end;
-      min-width: 280px;
-    }
-
-    .priority-select {
-      min-width: 100px;
-    }
-
-    /* priority colour coding */
-    option[value="4"], select.p4 { color: #ff6b6b; }
-    option[value="3"], select.p3 { color: var(--accent2); }
-    option[value="2"], select.p2 { color: #9ccfff; }
-    option[value="1"], select.p1 { color: var(--muted); }
-    option[value="0"], select.p0 { color: #555; }
-
-    .quest-flag {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 5px 9px;
-      font-size: 0.82rem;
-      color: var(--muted);
-      white-space: nowrap;
-      cursor: pointer;
-    }
-    .quest-flag input { margin: 0; cursor: pointer; }
-
-    .note-input {
-      flex: 1 1 160px;
-      min-width: 120px;
-      max-width: 260px;
-      font-size: 0.85rem;
-      padding: 6px 9px;
-    }
-
-    .map-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      width: 100%;
-    }
-    .map-checkbox {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 4px 8px;
-      font-size: 0.8rem;
-      cursor: pointer;
-    }
-    .map-checkbox input { margin: 0; cursor: pointer; }
-
-    .save-btn {
-      font-size: 0.82rem;
-      padding: 6px 12px;
-      white-space: nowrap;
-    }
 
+    h1 { font-size: 1.4rem; margin: 0 0 14px; color: var(--accent); letter-spacing: 0.02em; }
     a { color: var(--accent); }
 
-    @media (max-width: 720px) {
+    /* ── toolbar ───────────────────────────────────────────── */
-      .key {
+    .toolbar {
-        grid-template-columns: 48px 1fr;
+      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
-        grid-template-rows: auto auto;
     }
-      .key-controls {
+    .toolbar input[type="text"] {
-        grid-column: 1 / -1;
+      flex: 1 1 200px; max-width: 340px;
-        min-width: unset;
+      background: #1e1e1e; color: var(--text); border: 1px solid #3a3a3a;
-        justify-content: flex-start;
+      border-radius: 6px; padding: 7px 11px; font-size: 0.9rem;
     }
+    .toolbar input[type="text"]:focus { outline: 1px solid var(--accent); }
+
+    /* ── map sections ──────────────────────────────────────── */
+    .map-section { margin-bottom: 28px; }
+    .map-section.empty-section { display: none; }
+    .map-section-header {
+      font-size: 0.9rem; font-weight: 700; color: var(--accent2);
+      letter-spacing: 0.06em; text-transform: uppercase;
+      padding: 6px 0 5px; border-bottom: 1px solid #2a3a1e; margin-bottom: 0;
     }
-    @media (max-width: 480px) {
+
-      .key { grid-template-columns: 1fr; }
+    /* ── table ─────────────────────────────────────────────── */
-      .key-thumb { width: 48px; height: 48px; }
+    .key-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
-      select, input, button { min-height: 38px; font-size: 0.95rem; }
+    .key-table th {
+      text-align: left; color: var(--muted); font-weight: 600;
+      font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
+      padding: 7px 10px 5px; border-bottom: 1px solid var(--border);
+    }
+    .key-table td { padding: 8px 10px; border-bottom: 1px solid #1e1e1e; vertical-align: middle; }
+    .key-table tr:hover td { background: #161616; }
+    .key-table tr.hidden-row { display: none; }
+
+    .key-thumb {
+      width: 36px; height: 36px; border-radius: 4px;
+      object-fit: contain; background: #1a1a1a; display: block;
+    }
+
+    /* ── priority badge / picker ───────────────────────────── */
+    .priority-badge {
+      display: inline-block; border-radius: 4px; padding: 2px 7px;
+      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
+      white-space: nowrap; cursor: pointer; user-select: none;
+      transition: opacity 0.1s;
+    }
+    .priority-badge:hover { opacity: 0.75; }
+    .pb-4 { background: rgba(255,107,107,0.15); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); }
+    .pb-3 { background: rgba(255,213,128,0.12); color: var(--accent2); border: 1px solid rgba(255,213,128,0.25); }
+    .pb-2 { background: rgba(156,207,255,0.1); color: var(--accent); border: 1px solid rgba(156,207,255,0.2); }
+    .pb-1 { background: rgba(153,153,153,0.1); color: var(--muted); border: 1px solid rgba(153,153,153,0.2); }
+    .pb-0 { background: rgba(80,80,80,0.1); color: #555; border: 1px solid #333; }
+    .pb-none { background: transparent; color: #555; border: 1px solid #2a2a2a; font-style: italic; }
+
+    /* inline priority dropdown */
+    .priority-select {
+      background: #222; color: var(--text); border: 1px solid var(--accent);
+      border-radius: 4px; padding: 2px 4px; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer;
+    }
+    option[value="4"] { color: #ff6b6b; }
+    option[value="3"] { color: var(--accent2); }
+    option[value="2"] { color: #9ccfff; }
+    option[value="1"] { color: var(--muted); }
+    option[value="0"] { color: #555; }
+
+    /* ── quest toggle ──────────────────────────────────────── */
+    .quest-cell { text-align: center; }
+    .quest-dot {
+      display: inline-block; width: 10px; height: 10px;
+      border-radius: 50%; background: var(--accent2);
+      cursor: pointer; transition: opacity 0.15s;
+    }
+    .quest-dot:hover { opacity: 0.6; }
+    .quest-empty {
+      display: inline-block; width: 10px; height: 10px;
+      border-radius: 50%; border: 1px solid #333;
+      cursor: pointer; transition: border-color 0.15s;
+    }
+    .quest-empty:hover { border-color: var(--accent2); }
+
+    /* ── map tags + popover ────────────────────────────────── */
+    .map-cell { position: relative; }
+    .map-tags { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
+    .map-tag {
+      background: #1e2e1e; border: 1px solid #2a3f2a; color: #8fbc8f;
+      border-radius: 999px; padding: 1px 8px; font-size: 0.73rem;
+    }
+    .map-add-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 18px; height: 18px; border-radius: 50%;
+      background: transparent; border: 1px dashed #444; color: #555;
+      font-size: 0.8rem; line-height: 1; cursor: pointer;
+      transition: border-color 0.15s, color 0.15s;
+    }
+    .map-add-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+    .map-popover {
+      display: none;
+      position: absolute; top: 100%; left: 0; z-index: 200;
+      background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
+      padding: 10px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.6);
+      min-width: 200px;
+    }
+    .map-popover.open { display: block; }
+    .map-popover label {
+      display: flex; align-items: center; gap: 7px;
+      padding: 4px 0; font-size: 0.83rem; cursor: pointer;
+    }
+    .map-popover label:hover { color: var(--accent); }
+    .map-popover input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--accent); }
+
+    /* ── note inline edit ──────────────────────────────────── */
+    .note-cell { max-width: 200px; }
+    .note-text {
+      color: var(--muted); font-style: italic; font-size: 0.83rem;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      cursor: text; padding: 2px 4px; border-radius: 4px;
+      border: 1px solid transparent; display: block;
+      transition: border-color 0.15s;
+    }
+    .note-text:hover { border-color: #3a3a3a; }
+    .note-text.empty { color: #444; font-style: italic; }
+    .note-input {
+      width: 100%; background: #222; color: var(--text);
+      border: 1px solid var(--accent); border-radius: 4px;
+      padding: 3px 6px; font-size: 0.83rem; display: none;
+    }
+
+    /* save flash */
+    @keyframes flash { 0%,100% { opacity:1; } 50% { opacity: 0.4; } }
+    .saving { animation: flash 0.5s ease; }
+
+    .no-results {
+      color: var(--muted); font-style: italic; padding: 10px; font-size: 0.88rem;
     }
   </style>
 </head>
@@ -276,107 +217,284 @@
       <a href="/barters">Barters</a>
     </div>
   </nav>
-  <h1>Key Ratings</h1>
 
-  <form method="get" class="filters">
+  <h1>Keys</h1>
-    <label for="map_id">Map</label>
-    <select id="map_id" name="map_id">
-      <option value="">All maps</option>
-      {% for map in maps %}
-        <option value="{{ map.id }}" {% if map_filter == map.id %}selected{% endif %}>
-          {{ map.name }}
-        </option>
-      {% endfor %}
-    </select>
 
-    <label for="show">Show</label>
+  <div class="toolbar">
-    <select id="show" name="show">
+    <input type="text" id="key-search" placeholder="Search keys…" autocomplete="off" oninput="applySearch()">
-      <option value="all"     {% if show == "all" %}selected{% endif %}>All</option>
-      <option value="rated"   {% if show == "rated" %}selected{% endif %}>Rated</option>
-      <option value="unrated" {% if show == "unrated" %}selected{% endif %}>Unrated</option>
-      <option value="quest"   {% if show == "quest" %}selected{% endif %}>Quest keys</option>
-    </select>
-
-    <label for="sort">Sort</label>
-    <select id="sort" name="sort">
-      <option value="priority_desc" {% if sort == "priority_desc" %}selected{% endif %}>Priority ↓</option>
-      <option value="priority_asc"  {% if sort == "priority_asc"  %}selected{% endif %}>Priority ↑</option>
-      <option value="name_asc"      {% if sort == "name_asc"      %}selected{% endif %}>Name A–Z</option>
-      <option value="name_desc"     {% if sort == "name_desc"     %}selected{% endif %}>Name Z–A</option>
-    </select>
-
-    <button type="submit">Apply</button>
-  </form>
-
-  <form method="post" action="/rate_all">
-    {% if map_filter %}<input type="hidden" name="map_id"  value="{{ map_filter }}">{% endif %}
-    {% if sort       %}<input type="hidden" name="sort"    value="{{ sort }}">{% endif %}
-    {% if show       %}<input type="hidden" name="show"    value="{{ show }}">{% endif %}
-
-    <div class="save-all">
-      <button type="submit" name="save_all" value="1">Save all changes</button>
   </div>
 
-    {% for key in keys %}
+  {# Embed map list for JS #}
+  <script>
+    const MAPS = {{ maps | map(attribute='name') | list | tojson }};
+    const MAP_IDS = {{ maps | map(attribute='id') | list | tojson }};
+  </script>
+
+  {% macro priority_badge(key) %}
+    {% if key.priority == 4 %}<span class="priority-badge pb-4" title="Click to change">SUPER</span>
+    {% elif key.priority == 3 %}<span class="priority-badge pb-3" title="Click to change">HIGH</span>
+    {% elif key.priority == 2 %}<span class="priority-badge pb-2" title="Click to change">MED</span>
+    {% elif key.priority == 1 %}<span class="priority-badge pb-1" title="Click to change">LOW</span>
+    {% elif key.priority == 0 %}<span class="priority-badge pb-0" title="Click to change">IGNORE</span>
+    {% else %}<span class="priority-badge pb-none" title="Click to set priority">—</span>{% endif %}
+  {% endmacro %}
+
+  {% macro key_row(key, show_maps=true) %}
   {% set selected_maps = key_maps.get(key.id, []) %}
-    <div class="key" id="key-{{ key.id }}">
+  <tr data-key-id="{{ key.id }}"
-
+      data-priority="{{ key.priority if key.priority is not none else '' }}"
-      <img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt="">
+      data-quest="{{ '1' if key.used_in_quest else '0' }}"
-
+      data-reason="{{ key.reason or '' }}"
-      <div class="key-info">
+      data-map-ids="{{ selected_maps | join(',') }}">
-        <div class="key-title">
+    <td><img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt=""></td>
+    <td>
       <strong>{{ key.name }}</strong>
-          {% if key.wiki_url %}<a href="{{ key.wiki_url }}" target="_blank">wiki ↗</a>{% endif %}
+      {% if key.wiki_url %}<br><a href="{{ key.wiki_url }}" target="_blank" style="font-size:0.78rem">wiki ↗</a>{% endif %}
-        </div>
+    </td>
-        {% if selected_maps %}
+    <td class="priority-cell">{{ priority_badge(key) }}</td>
+    <td class="quest-cell">
+      {% if key.used_in_quest %}
+        <span class="quest-dot" title="Quest key — click to toggle"></span>
+      {% else %}
+        <span class="quest-empty" title="Not a quest key — click to toggle"></span>
+      {% endif %}
+    </td>
+    <td class="map-cell">
       <div class="map-tags">
-          {% for map in maps %}
+        {% if show_maps %}
-            {% if map.id in selected_maps %}
+          {% for m in maps %}{% if m.id in selected_maps %}<span class="map-tag">{{ m.name }}</span>{% endif %}{% endfor %}
-              <span class="map-tag">{{ map.name }}</span>
         {% endif %}
-          {% endfor %}
+        <span class="map-add-btn" title="Edit maps">+</span>
       </div>
-        {% endif %}
+      <div class="map-popover">
-      </div>
+        {% for m in maps %}
-
+        <label>
-      <div class="key-controls">
+          <input type="checkbox" value="{{ m.id }}" {% if m.id in selected_maps %}checked{% endif %}>
-        <input type="hidden" name="key_ids" value="{{ key.id }}">
+          {{ m.name }}
-
-        <select name="priority_{{ key.id }}" class="priority-select">
-          <option value="" {% if key.priority is none %}selected{% endif %}>— unrated</option>
-          {% for i, label in [(0,'IGNORE'),(1,'LOW'),(2,'MED'),(3,'HIGH'),(4,'SUPER')] %}
-            <option value="{{ i }}" {% if key.priority == i %}selected{% endif %}>{{ label }}</option>
-          {% endfor %}
-        </select>
-
-        <label class="quest-flag" title="Used in a quest?">
-          <input type="checkbox" name="used_in_quest_{{ key.id }}" {% if key.used_in_quest %}checked{% endif %}>
-          <span>Quest</span>
-        </label>
-
-        <input class="note-input" name="reason_{{ key.id }}" placeholder="note…" value="{{ key.reason or '' }}">
-
-        <div class="map-list">
-          {% for map in maps %}
-            <label class="map-checkbox">
-              <input type="checkbox" name="map_ids_{{ key.id }}" value="{{ map.id }}"
-                     {% if map.id in selected_maps %}checked{% endif %}>
-              <span>{{ map.name }}</span>
         </label>
         {% endfor %}
       </div>
+    </td>
+    <td class="note-cell">
+      <span class="note-text {% if not key.reason %}empty{% endif %}" title="Click to edit">{{ key.reason or 'add note…' }}</span>
+      <input class="note-input" type="text" value="{{ key.reason or '' }}" placeholder="note…">
+    </td>
+  </tr>
+  {% endmacro %}
 
-        <button class="save-btn" type="submit" name="save_one" value="{{ key.id }}">Save</button>
+  {% for map, map_keys in keys_by_map %}
-      </div>
+  <div class="map-section{% if not map_keys %} empty-section{% endif %}" id="section-{{ map.id }}">
-
+    <div class="map-section-header">{{ map.name }}</div>
+    <table class="key-table">
+      <thead><tr>
+        <th style="width:40px"></th>
+        <th>Key</th>
+        <th>Priority</th>
+        <th>Quest</th>
+        <th>Maps</th>
+        <th>Note</th>
+      </tr></thead>
+      <tbody>
+        {% for key in map_keys %}{{ key_row(key) }}{% endfor %}
+        {% if not map_keys %}<tr><td colspan="6" class="no-results">No keys assigned to this map.</td></tr>{% endif %}
+      </tbody>
+    </table>
   </div>
   {% endfor %}
 
-    <div class="save-all">
+  <div class="map-section{% if not unassigned_keys %} empty-section{% endif %}" id="section-unassigned">
-      <button type="submit" name="save_all" value="1">Save all changes</button>
+    <div class="map-section-header" style="color: var(--muted)">Unassigned</div>
+    <table class="key-table">
+      <thead><tr>
+        <th style="width:40px"></th>
+        <th>Key</th>
+        <th>Priority</th>
+        <th>Quest</th>
+        <th>Maps</th>
+        <th>Note</th>
+      </tr></thead>
+      <tbody>
+        {% for key in unassigned_keys %}{{ key_row(key, show_maps=false) }}{% endfor %}
+        {% if not unassigned_keys %}<tr><td colspan="6" class="no-results">All keys assigned to maps.</td></tr>{% endif %}
+      </tbody>
+    </table>
   </div>
-  </form>
 
 </div>
+
+<script>
+  // ── save helper ─────────────────────────────────────────────
+  function saveKey(row) {
+    const id = row.dataset.keyId;
+    const priority = row.dataset.priority === '' ? null : parseInt(row.dataset.priority);
+    const payload = {
+      key_id:       id,
+      priority:     priority,
+      used_in_quest: row.dataset.quest === '1',
+      reason:       row.dataset.reason,
+      map_ids:      row.dataset.mapIds ? row.dataset.mapIds.split(',').filter(Boolean).map(Number) : [],
+    };
+    row.classList.add('saving');
+    fetch('/rate_json', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(payload),
+    }).then(() => row.classList.remove('saving'));
+  }
+
+  // ── priority: click badge → inline select → save on change ─
+  const PRIORITY_LABELS = ['IGNORE','LOW','MED','HIGH','SUPER'];
+  const PRIORITY_CLASSES = ['pb-0','pb-1','pb-2','pb-3','pb-4'];
+
+  function renderBadge(cell, val) {
+    const label = val === '' ? '—' : PRIORITY_LABELS[parseInt(val)];
+    const cls   = val === '' ? 'pb-none' : PRIORITY_CLASSES[parseInt(val)];
+    cell.innerHTML = `<span class="priority-badge ${cls}" title="Click to change">${label}</span>`;
+    cell.querySelector('.priority-badge').addEventListener('click', () => openPrioritySelect(cell));
+  }
+
+  function openPrioritySelect(cell) {
+    const row = cell.closest('tr');
+    const current = row.dataset.priority;
+    const sel = document.createElement('select');
+    sel.className = 'priority-select';
+    sel.innerHTML = `<option value="">— unrated</option>` +
+      PRIORITY_LABELS.map((l, i) => `<option value="${i}">${l}</option>`).join('');
+    sel.value = current;
+    cell.innerHTML = '';
+    cell.appendChild(sel);
+    sel.focus();
+    sel.addEventListener('change', () => {
+      row.dataset.priority = sel.value;
+      renderBadge(cell, sel.value);
+      saveKey(row);
+    });
+    sel.addEventListener('blur', () => {
+      if (cell.contains(sel)) renderBadge(cell, row.dataset.priority);
+    });
+  }
+
+  // ── quest: click dot to toggle ──────────────────────────────
+  function renderQuest(cell, val) {
+    if (val === '1') {
+      cell.innerHTML = `<span class="quest-dot" title="Quest key — click to toggle"></span>`;
+    } else {
+      cell.innerHTML = `<span class="quest-empty" title="Not a quest key — click to toggle"></span>`;
+    }
+    cell.firstChild.addEventListener('click', () => {
+      const row = cell.closest('tr');
+      row.dataset.quest = row.dataset.quest === '1' ? '0' : '1';
+      renderQuest(cell, row.dataset.quest);
+      saveKey(row);
+    });
+  }
+
+  // ── maps: + button opens popover, checkboxes save on change ─
+  function bindMapPopover(row) {
+    const addBtn  = row.querySelector('.map-add-btn');
+    const popover = row.querySelector('.map-popover');
+    const tagsDiv = row.querySelector('.map-tags');
+
+    addBtn.addEventListener('click', e => {
+      e.stopPropagation();
+      popover.classList.toggle('open');
+    });
+
+    popover.querySelectorAll('input[type="checkbox"]').forEach(cb => {
+      cb.addEventListener('change', () => {
+        // rebuild map-ids from checked boxes
+        const checked = [...popover.querySelectorAll('input:checked')].map(c => c.value);
+        row.dataset.mapIds = checked.join(',');
+        // rebuild tag display
+        const names = [...popover.querySelectorAll('input:checked')]
+          .map(c => c.closest('label').textContent.trim());
+        tagsDiv.innerHTML = names.map(n => `<span class="map-tag">${n}</span>`).join('') +
+          `<span class="map-add-btn" title="Edit maps">+</span>`;
+        // re-bind the new add btn
+        tagsDiv.querySelector('.map-add-btn').addEventListener('click', e => {
+          e.stopPropagation();
+          popover.classList.toggle('open');
+        });
+        saveKey(row);
+      });
+    });
+  }
+
+  // ── note: click text → input, blur → save ──────────────────
+  function bindNote(row) {
+    const span  = row.querySelector('.note-text');
+    const input = row.querySelector('.note-input');
+
+    span.addEventListener('click', () => {
+      span.style.display = 'none';
+      input.style.display = 'block';
+      input.focus();
+      input.select();
+    });
+
+    function commitNote() {
+      const val = input.value.trim();
+      row.dataset.reason = val;
+      span.textContent = val || 'add note…';
+      span.classList.toggle('empty', !val);
+      input.style.display = 'none';
+      span.style.display = 'block';
+      saveKey(row);
+    }
+
+    input.addEventListener('blur', commitNote);
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter') { e.preventDefault(); commitNote(); }
+      if (e.key === 'Escape') { input.value = row.dataset.reason; commitNote(); }
+    });
+  }
+
+  // ── fuzzy search ────────────────────────────────────────────
+  function fuzzyMatch(query, target) {
+    if (!query) return true;
+    let qi = 0;
+    for (let i = 0; i < target.length && qi < query.length; i++) {
+      if (target[i] === query[qi]) qi++;
+    }
+    return qi === query.length;
+  }
+
+  function applySearch() {
+    const q = document.getElementById('key-search').value.toLowerCase().trim();
+    document.querySelectorAll('.map-section:not(.empty-section)').forEach(section => {
+      let visible = 0;
+      section.querySelectorAll('tr[data-key-id]').forEach(row => {
+        const name = row.querySelector('strong').textContent.toLowerCase();
+        const match = fuzzyMatch(q, name);
+        row.classList.toggle('hidden-row', !match);
+        if (match) visible++;
+      });
+      section.style.display = visible === 0 ? 'none' : '';
+    });
+  }
+
+  // ── close popovers when clicking outside ───────────────────
+  document.addEventListener('click', () => {
+    document.querySelectorAll('.map-popover.open').forEach(p => p.classList.remove('open'));
+  });
+
+  // ── init all rows ───────────────────────────────────────────
+  document.querySelectorAll('tr[data-key-id]').forEach(row => {
+    const priorityCell = row.querySelector('.priority-cell');
+    const questCell    = row.querySelector('.quest-cell');
+
+    priorityCell.querySelector('.priority-badge')
+      .addEventListener('click', () => openPrioritySelect(priorityCell));
+
+    questCell.firstElementChild.addEventListener('click', () => {
+      row.dataset.quest = row.dataset.quest === '1' ? '0' : '1';
+      renderQuest(questCell, row.dataset.quest);
+      saveKey(row);
+    });
+
+    bindMapPopover(row);
+    bindNote(row);
+  });
+</script>
 </body>
 </html>

templates/landing.html

@@ -233,6 +233,7 @@
       <a href="/loadout">Loadout</a>
       <a href="/meds">Injectors</a>
       <a href="/barters">Barters</a>
+      <a href="/ammo">Ammo</a>
     </div>
   </nav>
 
@@ -284,6 +285,12 @@
         <div class="card-desc">Calculate the true rouble cost of any barter deal.</div>
         <div class="card-arrow">Open →</div>
       </a>
+      <a class="card" href="/ammo">
+        <div class="card-icon">◎</div>
+        <div class="card-title">Ammo Chart</div>
+        <div class="card-desc">Scatter plot of damage vs. armor penetration for every caliber.</div>
+        <div class="card-arrow">Open →</div>
+      </a>
     </div>
   </div>