feat: Update game screen

- Use new RandomPixelPlaceholder
- Add first event for view

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

@@ -25,8 +25,8 @@ tags:
 	<main>
 		<nav>
 			<div class="important">Filter</div>
-			<input placeholder="Search" type="text">
+			<input placeholder="Search" aria-label="search" type="text">
-			<select name="type">
+			<select name="type" aria-label="type">
 				<option value="" selected>Type</option>
 				<option value="all">All</option>
 				<option value="assasin">Assasination</option>
@@ -89,6 +89,7 @@ tags:
 			</div>
 		</div>
 		<div>
+			<div class="quest">
 				<div class="background">
 					<h2>King Of Kings</h2>
 				</div>
@@ -99,6 +100,7 @@ tags:
 				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
 					rating</p>
 			</div>
+		</div>
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
@@ -114,6 +116,7 @@ tags:
 <script>
 	const menu = document.querySelector('body > header');
 	const placeholder = document.querySelectorAll('.background');
+	const viewQuest = document.getElementById('viewQuest');
 
 	class Menu {
 		constructor(element, options = {}) {
@@ -139,6 +142,7 @@ tags:
 			this.changeView(this.default);
 		}
 
+		// TODO: Sollte auch die Menüauswahl anpassen
 		changeView(type) {
 			console.debug(type);
 			const id = 'view' + capitalizeFirstLetter(type);
@@ -195,15 +199,35 @@ tags:
 		};
 	}
 
+	// TODO: Allgemeinere Umsetzung anstreben
+	viewQuest.addEventListener('click', (event) => {
+		const rows = viewQuest.querySelectorAll('tr');
+		const rowTarget = event.target.closest('tr');
+
+		if (event.button !== 0) return;
+
+		// TODO: Ziele unterscheiden
+		if (rowTarget) {
+			for (const row of rows) {
+				row.classList.remove('active');
+			}
+
+			rowTarget.classList.add('active');
+			document.querySelector('.quest').style.opacity = 1;
+			document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
+		}
+	});
+
 	placeholder.forEach(element => {
 		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
-		new RandomPixelCanvas(element, {
+		new RandomPixelPlaceholder(element, {
-			width: Math.floor(element.parentElement.clientWidth),
+			width: Math.floor(element.clientWidth),
-			height: Math.floor(element.parentElement.clientHeight),
+			height: Math.floor(element.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
+			type: 'img'
 		});
 	});
 

source/style/modules/game/_tfw.scss

@@ -172,4 +172,9 @@
 			}
 		}
 	}
+
+	.quest,
+	footer *:not(button[data-action="back"]) {
+		opacity: 0;
+	}
 }