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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user