feat: Add content for quest view

- New faction selection
- New detail structure
- Refactor behavior for deselecting elements
- Add events

source/style/modules/game/_tfw.scss

@@ -30,7 +30,8 @@
 		font-weight: bold;
 	}
 
-	.subtle {
+	.subtle,
+	hgroup p {
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
@@ -45,10 +46,13 @@
 		position: relative;
 		overflow: hidden;
 
+		h2, span {
+			color: white;
+		}
+
 		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
-			color: white;
 		}
 
 		canvas, img {
@@ -86,11 +90,23 @@
 			gap: hippie.$space_double;
 			min-height: 0;
 
-			& > div:last-child {
-				flex: 2;
+			nav {
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+
+				select {
+					@extend .io_select;
+				}
 			}
 
-			& > div:nth-child(2) {
+			& > div {
 				flex: 4;
 				display: flex;
 				flex-flow: column nowrap;
@@ -108,19 +124,15 @@
 				}
 			}
 
-			nav {
-				flex: 1;
-				display: flex;
-				flex-flow: column nowrap;
-				gap: hippie.$space_basic;
-				min-height: 0;
+			aside {
+				flex: 2;
 
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
+				.background {
+					border-bottom: 1px solid hippie.basic_color(echo);
 				}
 
-				select {
-					@extend .io_select;
+				& > div {
+					display: none;
 				}
 			}
 
@@ -134,7 +146,6 @@
 				}
 
 				td {
-					height: 4em;
 					vertical-align: top;
 
 					span {
@@ -143,12 +154,24 @@
 						color: white;
 					}
 
-					&:last-child {
+					&.subtle {
 						text-align: center;
 						vertical-align: middle;
 					}
 				}
 
+				&#questSelection {
+					display: none;
+				}
+
+				&[data-type="faction"] td {
+					height: 6em;
+				}
+
+				&[data-type="quest"] td {
+					height: 4em;
+				}
+
 				.l {
 					width: 30%;
 				}
@@ -157,7 +180,11 @@
 					width: 50%;
 				}
 
-				.t, .s {
+				.g {
+					width: 40%;
+				}
+
+				.t, .s, .c, .f {
 					width: 20%;
 				}
 			}
@@ -173,10 +200,6 @@
 		}
 	}
 
-	.quest {
-		opacity: 0;
-	}
-
 	footer *:not(button[data-action="back"]) {
 		display: none;
 	}

source/view/demo/examples/game/tfw.liquid

@@ -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 %}