From 38274c127710039287e5016917b77ef5fa2d7a00 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 5 Apr 2026 12:18:40 +0200
Subject: [PATCH] feat: Update game screen

- Use new RandomPixelPlaceholder
- Add first event for view
---
 source/screens/demo/examples/game/tfw.liquid | 52 ++++++++++++++------
 source/style/modules/game/_tfw.scss          |  5 ++
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid
index ca55174..1365630 100644
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -25,8 +25,8 @@ tags:
 	<main>
 		<nav>
 			<div class="important">Filter</div>
-			<input placeholder="Search" type="text">
-			<select name="type">
+			<input placeholder="Search" aria-label="search" type="text">
+			<select name="type" aria-label="type">
 				<option value="" selected>Type</option>
 				<option value="all">All</option>
 				<option value="assasin">Assasination</option>
@@ -89,15 +89,17 @@ tags:
 			</div>
 		</div>
 		<div>
-			<div class="background">
-				<h2>King Of Kings</h2>
+			<div class="quest">
+				<div class="background">
+					<h2>King Of Kings</h2>
+				</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>
-			<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>
 	</main>
 	<footer class="io">
@@ -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, {
-			width: Math.floor(element.parentElement.clientWidth),
-			height: Math.floor(element.parentElement.clientHeight),
+		new RandomPixelPlaceholder(element, {
+			width: Math.floor(element.clientWidth),
+			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'
 		});
 	});
 
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
index 188660e..3c5e950 100644
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@@ -172,4 +172,9 @@
 			}
 		}
 	}
+
+	.quest,
+	footer *:not(button[data-action="back"]) {
+		opacity: 0;
+	}
 }
\ No newline at end of file