feat: Update events and style for quest view

- New buttons
- Refine event delegation

source/style/modules/game/_tfw.scss

@@ -36,7 +36,8 @@
 		color: hippie.$color_darkest;
 	}
 
-	.success {
+	.complete .subtle,
+	button[data-action="claim"] {
 		color: hippie.basic_color(alpha);
 	}
 
@@ -166,15 +167,17 @@
 			justify-content: space-between;
 			padding: hippie.$space_basic;
 
-			& > button:last-child {
-				//margin-left: auto;
+			& > button:not(:first-child) {
 				padding-inline: 2em;
 			}
 		}
 	}
 
-	.quest,
-	footer *:not(button[data-action="back"]) {
+	.quest {
 		opacity: 0;
 	}
+
+	footer *:not(button[data-action="back"]) {
+		display: none;
+	}
 }

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

@@ -38,7 +38,7 @@ tags:
 		</nav>
 		<div>
 			<div>
-				<table>
+				<table id="questSelection">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -66,25 +66,29 @@ tags:
 				</table>
 			</div>
 			<div>
-				<table>
+				<table id="questActive">
 					<colgroup>
 						<col class="l">
 						<col class="q">
 						<col class="s">
 					</colgroup>
+					<thead>
 					<tr>
 						<th colspan="3">Active quests (Max.: 4)</th>
 					</tr>
+					</thead>
+					<tbody>
 					<tr>
 						<td class="background"></td>
 						<td>King Of Kings</td>
 						<td class="subtle">Active</td>
 					</tr>
-					<tr>
+					<tr class="complete">
 						<td class="background"></td>
 						<td>Garage Days Pt. 1</td>
-						<td class="subtle success">Complete</td>
+						<td class="subtle">Complete</td>
 					</tr>
+					</tbody>
 				</table>
 			</div>
 		</div>
@@ -104,7 +108,9 @@ tags:
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
-		<button data-action="accept">Accept</button>
+		<button data-action="accept">Accept quest</button>
+		<button data-action="abandon">Abandon quest</button>
+		<button data-action="claim">Claim reward</button>
 	</footer>
 </div>
 <div id="viewRegion" class="view"></div>
@@ -203,6 +209,12 @@ tags:
 	viewQuest.addEventListener('click', (event) => {
 		const rows = viewQuest.querySelectorAll('tr');
 		const rowTarget = event.target.closest('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');
+		const buttonAccept = viewQuest.querySelector('footer button[data-action=accept]');
+		const buttonAbandon = viewQuest.querySelector('footer button[data-action=abandon]');
+		const buttonClaim = viewQuest.querySelector('footer button[data-action=claim]');
 
 		if (event.button !== 0) return;
 
@@ -213,8 +225,25 @@ tags:
 			}
 
 			rowTarget.classList.add('active');
-			document.querySelector('.quest').style.opacity = 1;
-			document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
+			viewQuest.querySelector('.quest').style.opacity = 1;
+
+			if (rowSelection) {
+				buttonClaim.style.display = 'none';
+				buttonAbandon.style.display = 'none';
+				buttonAccept.style.display = 'inline-block';
+			}
+
+			if (rowActive) {
+				buttonAccept.style.display = 'none';
+				buttonClaim.style.display = 'none';
+				buttonAbandon.style.display = 'inline-block';
+			}
+
+			if (rowComplete) {
+				buttonAccept.style.display = 'none';
+				buttonAbandon.style.display = 'none';
+				buttonClaim.style.display = 'inline-block';
+			}
 		}
 	});