Add Loadout Planner and Quest Trees templates
- Created loadout.html for a comprehensive loadout planner, allowing users to filter and view gear options across various categories including guns, armor, helmets, headwear, backpacks, and rigs. - Implemented a build builder feature to calculate total loadout weight and save builds. - Added quests.html to display quest trees with trader dependencies, filtering options, and quest completion tracking.
This commit is contained in:
serversdwn
@@ -101,7 +101,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav><a href="/">← Back to Keys</a></nav>
|
||||
<nav>
|
||||
<a href="/">← Keys</a>
|
||||
|
|
||||
<a href="/quests">Quest Trees</a>
|
||||
|
|
||||
<a href="/loadout">Loadout Planner</a>
|
||||
</nav>
|
||||
<h1>Collector Checklist</h1>
|
||||
<p class="subtitle">
|
||||
{{ done }} / {{ total }} quests completed
|
||||
@@ -120,24 +126,53 @@
|
||||
{% set ns.current_trader = quest.trader %}
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/collector/toggle" style="margin:0">
|
||||
<input type="hidden" name="quest_id" value="{{ quest.id }}">
|
||||
<input type="hidden" name="done" value="{{ '0' if quest.done else '1' }}">
|
||||
<div class="quest-row {% if quest.done %}done{% endif %}">
|
||||
<span class="quest-name">
|
||||
{{ quest.name }}
|
||||
{% if quest.wiki_link %}
|
||||
<a href="{{ quest.wiki_link }}" target="_blank">wiki</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
<button class="toggle-btn" type="submit">
|
||||
{{ '✓ Done' if quest.done else 'Mark done' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="quest-row {% if quest.done %}done{% endif %}" id="quest-{{ quest.id }}" data-id="{{ quest.id }}" data-done="{{ '1' if quest.done else '0' }}">
|
||||
<span class="quest-name">
|
||||
{{ quest.name }}
|
||||
{% if quest.wiki_link %}
|
||||
<a href="{{ quest.wiki_link }}" target="_blank">wiki</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
<button class="toggle-btn" onclick="toggle(this)">
|
||||
{{ '✓ Done' if quest.done else 'Mark done' }}
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if ns.current_trader is not none %}</div>{% endif %}
|
||||
|
||||
</div>
|
||||
<script>
|
||||
let doneCount = {{ done }};
|
||||
const total = {{ total }};
|
||||
|
||||
function updateProgress() {
|
||||
document.querySelector('.subtitle').textContent = doneCount + ' / ' + total + ' quests completed';
|
||||
const pct = total ? (doneCount / total * 100).toFixed(1) : 0;
|
||||
document.querySelector('.progress-bar-fill').style.width = pct + '%';
|
||||
}
|
||||
|
||||
function toggle(btn) {
|
||||
const row = btn.closest('.quest-row');
|
||||
const id = row.dataset.id;
|
||||
const nowDone = row.dataset.done === '1' ? 0 : 1;
|
||||
|
||||
const body = new URLSearchParams({ quest_id: id, done: nowDone });
|
||||
fetch('/collector/toggle', { method: 'POST', body })
|
||||
.then(r => r.json())
|
||||
.then(() => {
|
||||
row.dataset.done = nowDone;
|
||||
if (nowDone) {
|
||||
row.classList.add('done');
|
||||
btn.textContent = '✓ Done';
|
||||
doneCount++;
|
||||
} else {
|
||||
row.classList.remove('done');
|
||||
btn.textContent = 'Mark done';
|
||||
doneCount--;
|
||||
}
|
||||
updateProgress();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
319
templates/gun_detail.html
Normal file
319
templates/gun_detail.html
Normal file
@@ -0,0 +1,319 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OnlyScavs – {{ gun.name }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212;
|
||||
--panel: #1a1a1a;
|
||||
--text: #eee;
|
||||
--muted: #bbb;
|
||||
--border: #333;
|
||||
--accent: #9ccfff;
|
||||
--amber: #ffd580;
|
||||
--key-border: #5a7a3a;
|
||||
--key-bg: #141e10;
|
||||
}
|
||||
body { font-family: sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 16px; }
|
||||
.page { max-width: 900px; margin: 0 auto; }
|
||||
nav { margin-bottom: 20px; }
|
||||
nav a { color: var(--accent); font-size: 0.9rem; }
|
||||
a { color: var(--accent); }
|
||||
h1 { margin: 0 0 2px; font-size: 1.4rem; }
|
||||
.subtitle { color: var(--muted); font-size: 0.9rem; margin: 0 0 20px; }
|
||||
|
||||
/* Gun summary card */
|
||||
.gun-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.gun-card img { width: 96px; height: 96px; object-fit: contain; background: #222; border-radius: 6px; }
|
||||
.gun-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.stat { display: flex; flex-direction: column; }
|
||||
.stat .val { font-size: 1.1rem; font-weight: bold; color: var(--amber); }
|
||||
.stat .lbl { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.gun-name { flex: 1; }
|
||||
.gun-name h2 { margin: 0 0 4px; font-size: 1.2rem; }
|
||||
.gun-name .sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; }
|
||||
|
||||
/* Total bar */
|
||||
.total-bar {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
.total-bar .big { font-size: 1.6rem; font-weight: bold; color: var(--amber); }
|
||||
.total-bar .lbl { color: var(--muted); font-size: 0.9rem; }
|
||||
.total-bar .breakdown { color: var(--muted); font-size: 0.82rem; margin-left: auto; }
|
||||
|
||||
/* Section headers */
|
||||
.section-hdr {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
padding: 10px 0 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Slot cards */
|
||||
.slot-section { margin-bottom: 24px; }
|
||||
.slot-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slot-card.key-slot {
|
||||
border-color: var(--key-border);
|
||||
background: var(--key-bg);
|
||||
}
|
||||
.slot-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.slot-header:hover { background: rgba(255,255,255,0.06); }
|
||||
.slot-header .slot-name { font-weight: bold; font-size: 0.9rem; flex: 1; }
|
||||
.slot-header .slot-count { color: var(--muted); font-size: 0.8rem; }
|
||||
.slot-header .slot-lightest { color: var(--amber); font-size: 0.85rem; white-space: nowrap; }
|
||||
.slot-header .chevron { color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; }
|
||||
.slot-card.open .chevron { transform: rotate(90deg); }
|
||||
.required-badge {
|
||||
font-size: 0.7rem;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.key-badge {
|
||||
font-size: 0.7rem;
|
||||
background: #1a3010;
|
||||
border: 1px solid var(--key-border);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
color: #8fc87f;
|
||||
}
|
||||
|
||||
/* Mod list inside slot */
|
||||
.mod-list { display: none; border-top: 1px solid var(--border); }
|
||||
.slot-card.open .mod-list { display: block; }
|
||||
.mod-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.mod-row:last-child { border-bottom: none; }
|
||||
.mod-row:hover { background: rgba(255,255,255,0.03); }
|
||||
.mod-row img { width: 36px; height: 36px; object-fit: contain; background: #222; border-radius: 4px; flex-shrink: 0; }
|
||||
.mod-name { flex: 1; }
|
||||
.mod-name small { display: block; color: var(--muted); font-size: 0.78rem; }
|
||||
.mod-weight { font-weight: bold; color: var(--amber); white-space: nowrap; min-width: 60px; text-align: right; }
|
||||
.mod-weight.lightest { color: #8fc87f; }
|
||||
.mod-wiki { font-size: 0.78rem; color: var(--muted); }
|
||||
.no-mods { padding: 10px 12px; color: var(--muted); font-size: 0.85rem; font-style: italic; }
|
||||
|
||||
/* Toggle other slots */
|
||||
.toggle-other {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
padding: 5px 14px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.toggle-other:hover { border-color: var(--accent); color: var(--accent); }
|
||||
#other-slots { display: none; }
|
||||
#other-slots.visible { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav>
|
||||
<a href="/loadout?tab=guns">← Back to Guns</a>
|
||||
</nav>
|
||||
|
||||
<div class="gun-card">
|
||||
{% if gun.grid_image_url %}
|
||||
<img src="{{ gun.grid_image_url }}" alt="{{ gun.name }}">
|
||||
{% endif %}
|
||||
<div class="gun-name">
|
||||
<h2>{{ gun.name }}</h2>
|
||||
<div class="sub">
|
||||
{{ gun.caliber or '?' }}
|
||||
{% if gun.wiki_url %} <a href="{{ gun.wiki_url }}" target="_blank">wiki ↗</a>{% endif %}
|
||||
</div>
|
||||
<div class="gun-stats">
|
||||
<div class="stat">
|
||||
<span class="val">{{ "%.3f"|format(gun.weight_kg) if gun.weight_kg is not none else '?' }}</span>
|
||||
<span class="lbl">Base weight (kg)</span>
|
||||
</div>
|
||||
{% if gun.ergonomics %}
|
||||
<div class="stat">
|
||||
<span class="val">{{ gun.ergonomics }}</span>
|
||||
<span class="lbl">Ergonomics</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if gun.recoil_vertical %}
|
||||
<div class="stat">
|
||||
<span class="val">{{ gun.recoil_vertical }}</span>
|
||||
<span class="lbl">Recoil (V)</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if gun.fire_rate %}
|
||||
<div class="stat">
|
||||
<span class="val">{{ gun.fire_rate }}</span>
|
||||
<span class="lbl">Fire rate</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="total-bar">
|
||||
<span class="lbl">Lightest possible build:</span>
|
||||
<span class="big">{{ "%.3f"|format(lightest_total) }} kg</span>
|
||||
<span class="breakdown">base {{ "%.3f"|format(gun.weight_kg or 0) }} kg + lightest mod per slot</span>
|
||||
</div>
|
||||
|
||||
{% if key_slots %}
|
||||
<div class="slot-section">
|
||||
<div class="section-hdr">Key slots</div>
|
||||
{% for slot in key_slots %}
|
||||
{% set lightest = slot.mods[0] if slot.mods else none %}
|
||||
<div class="slot-card key-slot {% if loop.first %}open{% endif %}" id="slot-{{ slot.slot_id }}">
|
||||
<div class="slot-header" onclick="toggleSlot('slot-{{ slot.slot_id }}')">
|
||||
<span class="slot-name">{{ slot.slot_name }}</span>
|
||||
<span class="key-badge">key slot</span>
|
||||
{% if slot.required %}<span class="required-badge">required</span>{% endif %}
|
||||
<span class="slot-count">{{ slot.mods | length }} mods</span>
|
||||
<span class="slot-lightest">
|
||||
{% if lightest and lightest.weight_kg is not none %}
|
||||
lightest {{ "%.3f"|format(lightest.weight_kg) }} kg
|
||||
{% else %}—{% endif %}
|
||||
</span>
|
||||
<span class="chevron">▶</span>
|
||||
</div>
|
||||
<div class="mod-list">
|
||||
{% if slot.mods %}
|
||||
{% for mod in slot.mods %}
|
||||
<div class="mod-row">
|
||||
{% if mod.grid_image_url %}
|
||||
<img src="{{ mod.grid_image_url }}" loading="lazy" alt="">
|
||||
{% else %}
|
||||
<div style="width:36px;height:36px;background:#222;border-radius:4px;flex-shrink:0"></div>
|
||||
{% endif %}
|
||||
<div class="mod-name">
|
||||
{{ mod.mod_name }}
|
||||
{% if mod.mod_short and mod.mod_short != mod.mod_name %}
|
||||
<small>{{ mod.mod_short }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if mod.wiki_url %}
|
||||
<a class="mod-wiki" href="{{ mod.wiki_url }}" target="_blank">wiki</a>
|
||||
{% endif %}
|
||||
<span class="mod-weight {% if loop.first %}lightest{% endif %}">
|
||||
{% if mod.weight_kg is not none %}{{ "%.3f"|format(mod.weight_kg) }} kg{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="no-mods">No compatible mods found in database.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if other_slots %}
|
||||
<button class="toggle-other" onclick="toggleOther(this)">Show {{ other_slots | length }} other slots ▼</button>
|
||||
<div id="other-slots">
|
||||
<div class="slot-section">
|
||||
<div class="section-hdr">All other slots</div>
|
||||
{% for slot in other_slots %}
|
||||
{% set lightest = slot.mods[0] if slot.mods else none %}
|
||||
<div class="slot-card" id="slot-{{ slot.slot_id }}">
|
||||
<div class="slot-header" onclick="toggleSlot('slot-{{ slot.slot_id }}')">
|
||||
<span class="slot-name">{{ slot.slot_name }}</span>
|
||||
{% if slot.required %}<span class="required-badge">required</span>{% endif %}
|
||||
<span class="slot-count">{{ slot.mods | length }} mods</span>
|
||||
<span class="slot-lightest">
|
||||
{% if lightest and lightest.weight_kg is not none %}
|
||||
lightest {{ "%.3f"|format(lightest.weight_kg) }} kg
|
||||
{% else %}—{% endif %}
|
||||
</span>
|
||||
<span class="chevron">▶</span>
|
||||
</div>
|
||||
<div class="mod-list">
|
||||
{% if slot.mods %}
|
||||
{% for mod in slot.mods %}
|
||||
<div class="mod-row">
|
||||
{% if mod.grid_image_url %}
|
||||
<img src="{{ mod.grid_image_url }}" loading="lazy" alt="">
|
||||
{% else %}
|
||||
<div style="width:36px;height:36px;background:#222;border-radius:4px;flex-shrink:0"></div>
|
||||
{% endif %}
|
||||
<div class="mod-name">
|
||||
{{ mod.mod_name }}
|
||||
{% if mod.mod_short and mod.mod_short != mod.mod_name %}
|
||||
<small>{{ mod.mod_short }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if mod.wiki_url %}
|
||||
<a class="mod-wiki" href="{{ mod.wiki_url }}" target="_blank">wiki</a>
|
||||
{% endif %}
|
||||
<span class="mod-weight {% if loop.first %}lightest{% endif %}">
|
||||
{% if mod.weight_kg is not none %}{{ "%.3f"|format(mod.weight_kg) }} kg{% else %}—{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="no-mods">No compatible mods found in database.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<script>
|
||||
function toggleSlot(id) {
|
||||
document.getElementById(id).classList.toggle('open');
|
||||
}
|
||||
function toggleOther(btn) {
|
||||
const div = document.getElementById('other-slots');
|
||||
div.classList.toggle('visible');
|
||||
btn.textContent = div.classList.contains('visible')
|
||||
? 'Hide other slots ▲'
|
||||
: 'Show {{ other_slots | length }} other slots ▼';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -168,7 +168,13 @@
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav style="margin-bottom:12px"><a href="/collector">Collector Checklist →</a></nav>
|
||||
<nav style="margin-bottom:12px">
|
||||
<a href="/collector">Collector Checklist</a>
|
||||
|
|
||||
<a href="/quests">Quest Trees</a>
|
||||
|
|
||||
<a href="/loadout">Loadout Planner</a>
|
||||
</nav>
|
||||
<h1>OnlyScavs – Keys</h1>
|
||||
|
||||
<form method="get" class="filters">
|
||||
|
||||
748
templates/loadout.html
Normal file
748
templates/loadout.html
Normal file
@@ -0,0 +1,748 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OnlyScavs – Loadout Planner</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212;
|
||||
--panel: #1a1a1a;
|
||||
--text: #eee;
|
||||
--muted: #bbb;
|
||||
--border: #333;
|
||||
--accent: #9ccfff;
|
||||
--amber: #ffd580;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
.page { max-width: 1100px; margin: 0 auto; }
|
||||
h1 { margin-bottom: 4px; }
|
||||
nav { margin-bottom: 20px; }
|
||||
nav a { color: var(--accent); font-size: 0.9rem; }
|
||||
a { color: var(--accent); }
|
||||
|
||||
/* Tab bar */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab-bar a {
|
||||
text-decoration: none;
|
||||
color: var(--muted);
|
||||
padding: 8px 16px;
|
||||
font-size: 0.95rem;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.tab-bar a.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
.tab-bar a:hover { color: var(--text); }
|
||||
|
||||
/* Filter bar */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.filter-bar label { color: var(--muted); font-size: 0.9rem; }
|
||||
.filter-bar select, .filter-bar input[type=number] {
|
||||
background: #222;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.filter-bar button {
|
||||
background: #2a2a2a;
|
||||
color: var(--text);
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.filter-bar button:hover { border-color: var(--accent); }
|
||||
|
||||
/* Slot filter checkboxes */
|
||||
.slot-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: #222;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 3px 9px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
}
|
||||
.slot-check.active {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.slot-check input { cursor: pointer; }
|
||||
|
||||
/* Gear table */
|
||||
.gear-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.gear-table th {
|
||||
text-align: left;
|
||||
padding: 6px 10px;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.gear-table td {
|
||||
padding: 7px 10px;
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.gear-table tr:hover td { background: #1c1c1c; }
|
||||
.gear-table img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
background: #222;
|
||||
object-fit: contain;
|
||||
}
|
||||
.w { font-weight: bold; color: var(--amber); white-space: nowrap; }
|
||||
.muted { color: var(--muted); }
|
||||
.name-cell strong { display: block; }
|
||||
.name-cell small { color: var(--muted); font-size: 0.8rem; }
|
||||
|
||||
/* Armor class badges */
|
||||
.cls {
|
||||
display: inline-block;
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
.cls-1, .cls-2 { border-color: #444; color: #aaa; }
|
||||
.cls-3 { border-color: #5a7a3a; color: #8fc87f; }
|
||||
.cls-4 { border-color: #3a6a8a; color: #7fc4e8; }
|
||||
.cls-5 { border-color: #7a4a8a; color: #c090e0; }
|
||||
.cls-6 { border-color: #8a4a3a; color: #e09070; }
|
||||
|
||||
/* Empty state */
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
padding: 28px 14px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Build builder */
|
||||
.builder-total {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.builder-total .big { font-size: 2rem; font-weight: bold; color: var(--amber); }
|
||||
.builder-total .label { color: var(--muted); font-size: 0.9rem; }
|
||||
.builder-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.slot-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
.slot-card h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
.slot-card select {
|
||||
width: 100%;
|
||||
background: #222;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.slot-weight { margin-top: 6px; font-size: 0.85rem; color: var(--amber); min-height: 1.2em; }
|
||||
.save-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.save-row input[type=text] {
|
||||
background: #222;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.9rem;
|
||||
width: 200px;
|
||||
}
|
||||
.save-row button {
|
||||
background: #2a2a2a;
|
||||
color: var(--text);
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
padding: 5px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.save-row button:hover { border-color: var(--accent); }
|
||||
.save-status { color: var(--muted); font-size: 0.85rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav>
|
||||
<a href="/">← Keys</a> |
|
||||
<a href="/collector">Collector</a>
|
||||
</nav>
|
||||
<h1>Loadout Planner</h1>
|
||||
<p style="color:var(--muted);margin:0 0 16px;font-size:0.9rem;">
|
||||
Find the lightest gear for each slot. Filter by requirements.
|
||||
</p>
|
||||
|
||||
<div class="tab-bar">
|
||||
{% for t_id, t_label in [('guns','Guns'),('armor','Armor'),('helmets','Helmets'),('headwear','Headwear'),('backpacks','Backpacks'),('rigs','Rigs'),('builder','Build Builder')] %}
|
||||
<a href="/loadout?tab={{ t_id }}" class="{% if tab == t_id %}active{% endif %}">{{ t_label }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# =============================== GUNS TAB =============================== #}
|
||||
{% if tab == "guns" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="guns">
|
||||
<span style="color:var(--muted);font-size:0.85rem;">Must have slot:</span>
|
||||
{% for label, nameid in slot_filters %}
|
||||
<label class="slot-check {% if nameid in requires %}active{% endif %}">
|
||||
<input type="checkbox" name="requires" value="{{ nameid }}"
|
||||
{% if nameid in requires %}checked{% endif %}>
|
||||
{{ label }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
{% if requires %}<a href="/loadout?tab=guns" style="font-size:0.85rem;color:var(--muted)">clear</a>{% endif %}
|
||||
</form>
|
||||
|
||||
{% if requires %}
|
||||
<p style="color:var(--muted);font-size:0.85rem;margin-bottom:12px;">
|
||||
"Lightest build" = gun base weight + lightest compatible mod per required slot.
|
||||
Guns without all required slots are hidden.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Caliber</th>
|
||||
<th>Ergo</th>
|
||||
<th title="Vertical recoil">Recoil</th>
|
||||
<th>Base weight</th>
|
||||
<th>{% if requires %}Lightest build{% else %}Slots{% endif %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for gun in guns %}
|
||||
<tr class="gun-row" data-gun-id="{{ gun.id }}" onclick="toggleGunRow(this)" style="cursor:pointer">
|
||||
<td>
|
||||
{% if gun.grid_image_url %}
|
||||
<img src="{{ gun.grid_image_url }}" loading="lazy" alt="">
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ gun.short_name or gun.name }}</strong>
|
||||
{% if gun.short_name and gun.short_name != gun.name %}
|
||||
<small>{{ gun.name }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ gun.caliber or '—' }}</td>
|
||||
<td class="muted">{{ gun.ergonomics or '—' }}</td>
|
||||
<td class="muted">{{ gun.recoil_vertical or '—' }}</td>
|
||||
<td class="w">
|
||||
{% if gun.weight_kg is not none %}{{ "%.3f"|format(gun.weight_kg) }} kg{% else %}—{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if requires %}
|
||||
<span class="w">{% if gun.lightest_build_weight is not none %}{{ "%.3f"|format(gun.lightest_build_weight) }} kg{% else %}—{% endif %}</span>
|
||||
{% else %}
|
||||
<span class="muted" style="font-size:0.8rem">▶ expand</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gun-expand-row" id="expand-{{ gun.id }}" style="display:none">
|
||||
<td colspan="7" style="padding:0">
|
||||
<div class="gun-expand-inner" style="padding:10px 14px;background:#151515;border-bottom:1px solid var(--border)">
|
||||
<div class="expand-loading" style="color:var(--muted);font-size:0.85rem">Loading slots…</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="7" class="empty">No guns found matching those requirements.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.gun-row:hover td { background: #1c1c1c; }
|
||||
.gun-row.expanded td { background: #181818; }
|
||||
.slot-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
|
||||
.slot-pill {
|
||||
display: flex; flex-direction: column;
|
||||
background: #1e1e1e; border: 1px solid var(--border);
|
||||
border-radius: 6px; padding: 5px 10px; font-size: 0.8rem; min-width: 110px;
|
||||
}
|
||||
.slot-pill.key { border-color: #5a7a3a; background: #141e10; }
|
||||
.slot-pill .sp-name { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.slot-pill .sp-mod { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
|
||||
.slot-pill .sp-w { color: var(--amber); font-size: 0.82rem; font-weight: bold; margin-top: 2px; }
|
||||
.expand-footer { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #222; }
|
||||
.expand-total { color: var(--amber); font-weight: bold; font-size: 0.9rem; }
|
||||
.expand-link { font-size: 0.82rem; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const _gunSlotCache = {};
|
||||
|
||||
function toggleGunRow(tr) {
|
||||
const gunId = tr.dataset.gunId;
|
||||
const expandRow = document.getElementById('expand-' + gunId);
|
||||
const isOpen = expandRow.style.display !== 'none';
|
||||
|
||||
if (isOpen) {
|
||||
expandRow.style.display = 'none';
|
||||
tr.classList.remove('expanded');
|
||||
return;
|
||||
}
|
||||
|
||||
tr.classList.add('expanded');
|
||||
expandRow.style.display = '';
|
||||
|
||||
if (_gunSlotCache[gunId]) {
|
||||
renderGunExpand(gunId, _gunSlotCache[gunId]);
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/loadout/gun/' + gunId + '/slots.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
_gunSlotCache[gunId] = data;
|
||||
renderGunExpand(gunId, data);
|
||||
})
|
||||
.catch(() => {
|
||||
const inner = expandRow.querySelector('.gun-expand-inner');
|
||||
inner.innerHTML = '<span style="color:var(--muted)">Failed to load slots.</span>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderGunExpand(gunId, slots) {
|
||||
const inner = document.getElementById('expand-' + gunId).querySelector('.gun-expand-inner');
|
||||
if (!slots.length) {
|
||||
inner.innerHTML = '<span style="color:var(--muted);font-size:0.85rem">No slot data available for this gun.</span>';
|
||||
return;
|
||||
}
|
||||
|
||||
const KEY = new Set(['mod_muzzle', 'mod_magazine']);
|
||||
let baseWeight = 0;
|
||||
const baseCell = document.querySelector('[data-gun-id="' + gunId + '"] td:nth-child(6)');
|
||||
if (baseCell) baseWeight = parseFloat(baseCell.textContent) || 0;
|
||||
|
||||
let total = baseWeight;
|
||||
let pills = '';
|
||||
for (const s of slots) {
|
||||
const isKey = KEY.has(s.slot_nameid);
|
||||
const w = s.weight_kg != null ? s.weight_kg.toFixed(3) + ' kg' : '—';
|
||||
if (s.weight_kg != null) total += s.weight_kg;
|
||||
pills += `<div class="slot-pill${isKey ? ' key' : ''}">
|
||||
<span class="sp-name">${s.slot_name}</span>
|
||||
<span class="sp-mod">${s.mod_name || '—'}</span>
|
||||
<span class="sp-w">${w}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
inner.innerHTML = `
|
||||
<div class="slot-summary">${pills}</div>
|
||||
<div class="expand-footer">
|
||||
<span class="expand-total">Lightest build: ${total.toFixed(3)} kg</span>
|
||||
<a class="expand-link" href="/loadout/gun/${gunId}">Full breakdown →</a>
|
||||
</div>`;
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== ARMOR TAB =============================== #}
|
||||
{% if tab == "armor" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="armor">
|
||||
<label>Min class</label>
|
||||
<select name="min_class">
|
||||
<option value="0" {% if min_class==0 %}selected{% endif %}>Any</option>
|
||||
{% for c in range(1,7) %}
|
||||
<option value="{{ c }}" {% if min_class==c %}selected{% endif %}>Class {{ c }}+</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="class_desc" {% if sort=='class_desc' %}selected{% endif %}>Class ↓</option>
|
||||
<option value="class_asc" {% if sort=='class_asc' %}selected{% endif %}>Class ↑</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
</form>
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th><th>Name</th><th>Class</th>
|
||||
<th>Durability</th><th>Material</th><th>Zones</th><th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in armor %}
|
||||
<tr>
|
||||
<td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ item.short_name or item.name }}</strong>
|
||||
{% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
|
||||
{% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if item.armor_class %}
|
||||
<span class="cls cls-{{ item.armor_class }}">{{ item.armor_class }}</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ item.durability | int if item.durability else '—' }}</td>
|
||||
<td class="muted">{{ item.material or '—' }}</td>
|
||||
<td class="muted" style="font-size:0.8rem">{{ item.zones or '—' }}</td>
|
||||
<td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="7" class="empty">No armor found.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== HELMETS TAB =============================== #}
|
||||
{% if tab == "helmets" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="helmets">
|
||||
<label>Min class</label>
|
||||
<select name="min_class">
|
||||
<option value="0" {% if min_class==0 %}selected{% endif %}>Any</option>
|
||||
{% for c in range(1,7) %}
|
||||
<option value="{{ c }}" {% if min_class==c %}selected{% endif %}>Class {{ c }}+</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="class_desc" {% if sort=='class_desc' %}selected{% endif %}>Class ↓</option>
|
||||
<option value="class_asc" {% if sort=='class_asc' %}selected{% endif %}>Class ↑</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
</form>
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th><th>Name</th><th>Class</th>
|
||||
<th>Durability</th><th>Head zones</th><th>Deafening</th><th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in helmets %}
|
||||
<tr>
|
||||
<td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ item.short_name or item.name }}</strong>
|
||||
{% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
|
||||
{% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if item.armor_class %}
|
||||
<span class="cls cls-{{ item.armor_class }}">{{ item.armor_class }}</span>
|
||||
{% else %}<span class="muted">—</span>{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ item.durability | int if item.durability else '—' }}</td>
|
||||
<td class="muted" style="font-size:0.8rem">{{ item.head_zones or '—' }}</td>
|
||||
<td class="muted">{{ item.deafening or '—' }}</td>
|
||||
<td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="7" class="empty">No helmets found.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== HEADWEAR TAB =============================== #}
|
||||
{% if tab == "headwear" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="headwear">
|
||||
<label>Min class</label>
|
||||
<select name="min_class">
|
||||
<option value="0" {% if min_class==0 %}selected{% endif %}>Any</option>
|
||||
{% for c in range(1,7) %}
|
||||
<option value="{{ c }}" {% if min_class==c %}selected{% endif %}>Class {{ c }}+</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="class_desc" {% if sort=='class_desc' %}selected{% endif %}>Class ↓</option>
|
||||
<option value="class_asc" {% if sort=='class_asc' %}selected{% endif %}>Class ↑</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
</form>
|
||||
<p style="color:var(--muted);font-size:0.85rem;margin-bottom:12px;">Face masks, armored masks, and non-helmet head protection. Does not cover the top of the head.</p>
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th><th>Name</th><th>Class</th>
|
||||
<th>Durability</th><th>Head zones</th><th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in headwear %}
|
||||
<tr>
|
||||
<td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ item.short_name or item.name }}</strong>
|
||||
{% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
|
||||
{% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if item.armor_class %}
|
||||
<span class="cls cls-{{ item.armor_class }}">{{ item.armor_class }}</span>
|
||||
{% else %}<span class="muted">—</span>{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ item.durability | int if item.durability else '—' }}</td>
|
||||
<td class="muted" style="font-size:0.8rem">{{ item.head_zones or '—' }}</td>
|
||||
<td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" class="empty">No headwear found.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== BACKPACKS TAB =============================== #}
|
||||
{% if tab == "backpacks" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="backpacks">
|
||||
<label>Min slots</label>
|
||||
<input type="number" name="min_capacity" value="{{ min_capacity or '' }}" min="0" placeholder="0" style="width:60px">
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="capacity_desc" {% if sort=='capacity_desc' %}selected{% endif %}>Capacity ↓</option>
|
||||
<option value="capacity_asc" {% if sort=='capacity_asc' %}selected{% endif %}>Capacity ↑</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
</form>
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th><th>Name</th><th>Capacity (slots)</th><th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in backpacks %}
|
||||
<tr>
|
||||
<td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ item.short_name or item.name }}</strong>
|
||||
{% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
|
||||
{% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ item.capacity or '—' }}</td>
|
||||
<td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="4" class="empty">No backpacks found.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== RIGS TAB =============================== #}
|
||||
{% if tab == "rigs" %}
|
||||
<form method="get" class="filter-bar">
|
||||
<input type="hidden" name="tab" value="rigs">
|
||||
<label>Min slots</label>
|
||||
<input type="number" name="min_capacity" value="{{ min_capacity or '' }}" min="0" placeholder="0" style="width:60px">
|
||||
<label>Min class</label>
|
||||
<select name="min_class">
|
||||
<option value="0" {% if min_class==0 %}selected{% endif %}>Any</option>
|
||||
{% for c in range(1,7) %}
|
||||
<option value="{{ c }}" {% if min_class==c %}selected{% endif %}>Class {{ c }}+</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label>Sort</label>
|
||||
<select name="sort">
|
||||
<option value="weight_asc" {% if sort=='weight_asc' %}selected{% endif %}>Weight ↑</option>
|
||||
<option value="weight_desc" {% if sort=='weight_desc' %}selected{% endif %}>Weight ↓</option>
|
||||
<option value="capacity_desc" {% if sort=='capacity_desc' %}selected{% endif %}>Capacity ↓</option>
|
||||
<option value="class_desc" {% if sort=='class_desc' %}selected{% endif %}>Class ↓</option>
|
||||
<option value="name_asc" {% if sort=='name_asc' %}selected{% endif %}>Name A→Z</option>
|
||||
</select>
|
||||
<button type="submit">Filter</button>
|
||||
</form>
|
||||
<table class="gear-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th><th>Name</th><th>Class</th><th>Capacity (slots)</th><th>Zones</th><th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in rigs %}
|
||||
<tr>
|
||||
<td>{% if item.grid_image_url %}<img src="{{ item.grid_image_url }}" loading="lazy" alt="">{% endif %}</td>
|
||||
<td class="name-cell">
|
||||
<strong>{{ item.short_name or item.name }}</strong>
|
||||
{% if item.short_name and item.short_name != item.name %}<small>{{ item.name }}</small>{% endif %}
|
||||
{% if item.wiki_url %}<a href="{{ item.wiki_url }}" target="_blank" style="font-size:0.78rem;margin-left:4px">wiki</a>{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if item.armor_class %}
|
||||
<span class="cls cls-{{ item.armor_class }}">{{ item.armor_class }}</span>
|
||||
{% else %}<span class="muted">—</span>{% endif %}
|
||||
</td>
|
||||
<td class="muted">{{ item.capacity or '—' }}</td>
|
||||
<td class="muted" style="font-size:0.8rem">{{ item.zones or '—' }}</td>
|
||||
<td class="w">{% if item.weight_kg is not none %}{{ "%.3f"|format(item.weight_kg) }} kg{% else %}—{% endif %}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" class="empty">No rigs found.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{# =============================== BUILD BUILDER TAB =============================== #}
|
||||
{% if tab == "builder" %}
|
||||
<script>
|
||||
const WEIGHTS = {
|
||||
{% for item in builder_guns + builder_armor + builder_helmets + builder_rigs + builder_backpacks %}
|
||||
"{{ item.id }}": {{ item.weight_kg if item.weight_kg is not none else 0 }},
|
||||
{% endfor %}
|
||||
};
|
||||
|
||||
function recalcWeight() {
|
||||
const slots = ['gun', 'armor', 'helmet', 'rig', 'backpack'];
|
||||
let total = 0;
|
||||
for (const slot of slots) {
|
||||
const sel = document.getElementById('slot_' + slot);
|
||||
const id = sel ? sel.value : '';
|
||||
const w = id ? (WEIGHTS[id] || 0) : 0;
|
||||
const disp = document.getElementById('sw_' + slot);
|
||||
if (disp) disp.textContent = id ? w.toFixed(3) + ' kg' : '';
|
||||
total += w;
|
||||
}
|
||||
document.getElementById('total-weight').textContent = total.toFixed(3);
|
||||
}
|
||||
|
||||
function saveBuild() {
|
||||
const slots = ['gun', 'armor', 'helmet', 'rig', 'backpack'];
|
||||
const payload = { name: document.getElementById('build-name').value.trim() || 'My Build' };
|
||||
for (const s of slots) {
|
||||
const sel = document.getElementById('slot_' + s);
|
||||
payload[s + '_id'] = (sel && sel.value) ? sel.value : null;
|
||||
}
|
||||
fetch('/loadout/save-build', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
document.getElementById('save-status').textContent = 'Saved as "' + d.name + '" (build #' + d.build_id + ')';
|
||||
})
|
||||
.catch(() => {
|
||||
document.getElementById('save-status').textContent = 'Error saving build.';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="builder-total">
|
||||
<div class="label">Total loadout weight</div>
|
||||
<div class="big"><span id="total-weight">0.000</span> kg</div>
|
||||
</div>
|
||||
|
||||
<div class="builder-grid">
|
||||
{% set slot_defs = [
|
||||
('gun', 'Primary Weapon', builder_guns),
|
||||
('armor', 'Body Armor', builder_armor),
|
||||
('helmet', 'Helmet', builder_helmets),
|
||||
('rig', 'Chest Rig', builder_rigs),
|
||||
('backpack', 'Backpack', builder_backpacks),
|
||||
] %}
|
||||
{% for slot_id, slot_label, items in slot_defs %}
|
||||
<div class="slot-card">
|
||||
<h3>{{ slot_label }}</h3>
|
||||
<select id="slot_{{ slot_id }}" onchange="recalcWeight()">
|
||||
<option value="">— None —</option>
|
||||
{% for item in items %}
|
||||
<option value="{{ item.id }}">
|
||||
{{ item.name }}{% if item.weight_kg is not none %} ({{ "%.3f"|format(item.weight_kg) }} kg){% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="slot-weight" id="sw_{{ slot_id }}"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="save-row">
|
||||
<input type="text" id="build-name" placeholder="Build name…">
|
||||
<button onclick="saveBuild()">Save Build</button>
|
||||
<span class="save-status" id="save-status"></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
244
templates/quests.html
Normal file
244
templates/quests.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OnlyScavs – Quest Trees</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212;
|
||||
--panel: #1a1a1a;
|
||||
--text: #eee;
|
||||
--muted: #888;
|
||||
--border: #2a2a2a;
|
||||
--accent: #9ccfff;
|
||||
--done-text: #6ec96e;
|
||||
--done-bg: #1a2a1a;
|
||||
--kappa: #f0c040;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
.page { max-width: 960px; margin: 0 auto; }
|
||||
nav { margin-bottom: 16px; font-size: 0.9rem; }
|
||||
nav a { color: var(--accent); }
|
||||
h1 { margin: 0 0 4px; }
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-btn {
|
||||
background: var(--panel);
|
||||
border: 1px solid #444;
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.filter-btn.active {
|
||||
border-color: var(--kappa);
|
||||
color: var(--kappa);
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.legend span { display: flex; align-items: center; gap: 5px; }
|
||||
|
||||
/* Trader section */
|
||||
.trader-section { margin-bottom: 8px; }
|
||||
.trader-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.trader-header:hover { border-color: #444; }
|
||||
.trader-name {
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
flex: 1;
|
||||
}
|
||||
.trader-counts { font-size: 0.8rem; color: var(--muted); }
|
||||
.chevron { color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; }
|
||||
.trader-section.collapsed .chevron { transform: rotate(-90deg); }
|
||||
.trader-body { padding: 6px 0 6px 8px; }
|
||||
.trader-section.collapsed .trader-body { display: none; }
|
||||
|
||||
/* Tree nodes */
|
||||
.tree-root { margin: 4px 0; }
|
||||
.tree-children {
|
||||
margin-left: 20px;
|
||||
border-left: 1px solid var(--border);
|
||||
padding-left: 10px;
|
||||
}
|
||||
.quest-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 4px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.quest-node:hover { background: #1e1e1e; }
|
||||
.quest-node.done .quest-label { text-decoration: line-through; color: var(--done-text); }
|
||||
.quest-node.done { background: var(--done-bg); }
|
||||
.quest-label { flex: 1; font-size: 0.9rem; }
|
||||
.quest-label a { color: var(--accent); font-size: 0.75rem; margin-left: 6px; }
|
||||
.kappa-star { color: var(--kappa); font-size: 0.75rem; flex-shrink: 0; }
|
||||
.cross-trader {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #444;
|
||||
color: var(--muted);
|
||||
border-radius: 4px;
|
||||
padding: 2px 7px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quest-node.done .toggle-btn {
|
||||
border-color: #3a6a3a;
|
||||
color: var(--done-text);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<nav>
|
||||
<a href="/">← Keys</a>
|
||||
|
|
||||
<a href="/collector">Collector Checklist</a>
|
||||
</nav>
|
||||
<h1>Quest Trees</h1>
|
||||
|
||||
<div class="toolbar">
|
||||
<a class="filter-btn {% if not only_collector %}active{% endif %}" href="/quests">All quests</a>
|
||||
<a class="filter-btn {% if only_collector %}active{% endif %}" href="/quests?collector=1">★ Collector only</a>
|
||||
<div class="legend">
|
||||
<span><span style="color:var(--kappa)">★</span> Required for Collector</span>
|
||||
<span><span style="color:var(--done-text)">✓</span> Marked done</span>
|
||||
<span><span style="color:var(--muted);font-style:italic">← Trader</span> Cross-trader dependency</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% macro render_node(qid, quest_by_id, children, visible, collector_prereqs) %}
|
||||
{% set q = quest_by_id[qid] %}
|
||||
{% set visible_kids = [] %}
|
||||
{% for cid in children.get(qid, []) %}
|
||||
{% if cid in visible %}{% set _ = visible_kids.append(cid) %}{% endif %}
|
||||
{% endfor %}
|
||||
<div class="tree-root">
|
||||
<div class="quest-node {% if q.done %}done{% endif %}"
|
||||
id="qnode-{{ qid }}" data-id="{{ qid }}" data-done="{{ '1' if q.done else '0' }}">
|
||||
{% if qid in collector_prereqs %}<span class="kappa-star" title="Required for Collector">★</span>{% endif %}
|
||||
<span class="quest-label">
|
||||
{{ q.name }}
|
||||
{% if q.wiki_link %}<a href="{{ q.wiki_link }}" target="_blank">wiki</a>{% endif %}
|
||||
</span>
|
||||
<button class="toggle-btn" onclick="toggle(this)">
|
||||
{{ '✓' if q.done else '○' }}
|
||||
</button>
|
||||
</div>
|
||||
{% if visible_kids %}
|
||||
<div class="tree-children">
|
||||
{% for cid in visible_kids %}
|
||||
{% set child = quest_by_id[cid] %}
|
||||
{% if child.trader != q.trader %}
|
||||
<div class="quest-node {% if child.done %}done{% endif %}"
|
||||
data-id="{{ cid }}" data-done="{{ '1' if child.done else '0' }}">
|
||||
{% if cid in collector_prereqs %}<span class="kappa-star">★</span>{% endif %}
|
||||
<span class="quest-label">
|
||||
{{ child.name }}
|
||||
{% if child.wiki_link %}<a href="{{ child.wiki_link }}" target="_blank">wiki</a>{% endif %}
|
||||
</span>
|
||||
<span class="cross-trader">← {{ child.trader }}</span>
|
||||
<button class="toggle-btn" onclick="toggle(this)">{{ '✓' if child.done else '○' }}</button>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ render_node(cid, quest_by_id, children, visible, collector_prereqs) }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% for trader in traders %}
|
||||
{% set roots = trader_roots[trader] %}
|
||||
{% set total_trader = namespace(n=0) %}
|
||||
{% set done_trader = namespace(n=0) %}
|
||||
{# count visible quests for this trader #}
|
||||
{% for qid in visible %}
|
||||
{% if quest_by_id[qid].trader == trader %}
|
||||
{% set total_trader.n = total_trader.n + 1 %}
|
||||
{% if quest_by_id[qid].done %}{% set done_trader.n = done_trader.n + 1 %}{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="trader-section" id="trader-{{ trader | replace(' ', '-') }}">
|
||||
<div class="trader-header" onclick="toggleTrader(this)">
|
||||
<span class="trader-name">{{ trader }}</span>
|
||||
<span class="trader-counts">{{ done_trader.n }} / {{ total_trader.n }}</span>
|
||||
<span class="chevron">▾</span>
|
||||
</div>
|
||||
<div class="trader-body">
|
||||
{% for root_id in roots %}
|
||||
{{ render_node(root_id, quest_by_id, children, visible, collector_prereqs) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleTrader(header) {
|
||||
header.closest('.trader-section').classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
function toggle(btn) {
|
||||
const node = btn.closest('.quest-node');
|
||||
const id = node.dataset.id;
|
||||
const nowDone = node.dataset.done === '1' ? 0 : 1;
|
||||
|
||||
fetch('/collector/toggle', {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams({ quest_id: id, done: nowDone })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(() => {
|
||||
// Update all nodes with this quest id (may appear as cross-trader duplicate)
|
||||
document.querySelectorAll(`.quest-node[data-id="${id}"]`).forEach(n => {
|
||||
n.dataset.done = nowDone;
|
||||
const b = n.querySelector('.toggle-btn');
|
||||
if (nowDone) { n.classList.add('done'); b.textContent = '✓'; }
|
||||
else { n.classList.remove('done'); b.textContent = '○'; }
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user