interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add content for quest view

Browse source 
- New faction selection
- New detail structure
- Refactor behavior for deselecting elements
- Add events
This commit is contained in:
sthag 2026-04-19 12:21:38 +02:00
parent 1d4d5624d5
commit 5cd55ab2bc
2 changed files with 140 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

104
source/view/demo/examples/game/tfw.liquid
View file

@ -38,7 +38,45 @@ tags:
</nav>
<div>
<div>
<table id="questSelection">
<table id="factionSelection" data-type="faction">
<colgroup>
<col class="g">
<col class="c">
<col class="f">
<col class="s">
</colgroup>
<tr>
<th>Giver</th>
<th>Category</th>
<th>Faction</th>
<th>Status</th>
</tr>
<tr>
<td class="background">
<span>Scavengers</span>
</td>
<td class="subtle">All</td>
<td class="subtle">Scav</td>
<td class="subtle">Open</td>
</tr>
<tr>
<td class="background">
<span>Eastern Consulate</span>
</td>
<td class="subtle">All</td>
<td class="subtle">Eurasia</td>
<td class="subtle">Closed</td>
</tr>
<tr>
<td class="background">
<span>СПЕЦНАЗ Commission</span>
</td>
<td class="subtle">All</td>
<td class="subtle">Euruska</td>
<td class="subtle">Open</td>
</tr>
</table>
<table id="questSelection" data-type="quest">
<colgroup>
<col class="l">
<col class="q">
@ -66,7 +104,7 @@ tags:
</table>
</div>
<div>
<table id="questActive">
<table id="questActive" data-type="quest">
<colgroup>
<col class="l">
<col class="q">
@ -92,7 +130,21 @@ tags:
</table>
</div>
</div>
<div>
<aside>
<div class="faction">
<div class="background">
<hgroup>
<h2>Western Embassy</h2>
<p>Europa</p>
</hgroup>
</div>
<p>A hijacked medium mech dubbed the "Rat King" ...</p>
<hr class="dotted">
<p>Collect Rat King residue.</p>
<hr>
<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
rating</p>
</div>
<div class="quest">
<div class="background">
<h2>King Of Kings</h2>
@ -104,7 +156,7 @@ tags:
<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
rating</p>
</div>
</div>
</aside>
</main>
<footer class="io">
<button data-action="back">Back</button>
@ -207,8 +259,10 @@ tags:
// TODO: Allgemeinere Umsetzung anstreben
viewQuest.addEventListener('click', (event) => {
const tableTarget = event.target.closest('table');
const rows = viewQuest.querySelectorAll('tr');
const rowTarget = event.target.closest('tr');
const rowFaction = event.target.closest('#factionSelection tr');
const rowSelection = event.target.closest('#questSelection tr');
const rowActive = event.target.closest('#questActive tr:not(.complete)');
const rowComplete = event.target.closest('#questActive tr.complete');
@ -218,14 +272,26 @@ tags:
if (event.button !== 0) return;
// TODO: Ziele unterscheiden
if (rowTarget) {
for (const row of rows) {
row.classList.remove('active');
}
const rowsRemain = Array.from(rows).filter(
element => element !== rowTarget
);
const type = tableTarget.dataset.type;
const tableSibling = tableTarget.nextElementSibling;
rowsRemain.forEach((element) => {
element.classList.remove('active');
});
rowTarget.classList.add('active');
viewQuest.querySelector('.quest').style.opacity = 1;
viewQuest.querySelector('aside > :not(.' + type + ')').style.display = 'none';
viewQuest.querySelector('aside > .' + type).style.display = 'block';
if (rowFaction) {
tableTarget.style.display = 'none';
tableSibling.style.display = 'table';
}
if (rowSelection) {
buttonClaim.style.display = 'none';
@ -244,6 +310,8 @@ tags:
buttonAbandon.style.display = 'none';
buttonClaim.style.display = 'inline-block';
}
} else {
deselector('quest');
}
});
@ -261,5 +329,23 @@ tags:
});
new Menu(menu);
function deselector(type) {
const id = 'view' + capitalizeFirstLetter(type);
const view = document.getElementById(id);
const rows = view.querySelectorAll('tr');
const buttonAccept = view.querySelector('footer button[data-action=accept]');
const buttonAbandon = view.querySelector('footer button[data-action=abandon]');
const buttonClaim = view.querySelector('footer button[data-action=claim]');
for (const row of rows) {
row.classList.remove('active');
}
view.querySelector('.' + type).style.opacity = 0;
buttonAbandon.style.display = 'none';
buttonAccept.style.display = 'none';
buttonClaim.style.display = 'none';
}
</script>
{% endblock %}