feat: Change styles for game

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

@@ -21,17 +21,20 @@ tags:
 	<button data-action="ready">Ready Room</button>
 	<button data-action="next">&gt;</button>
 </header>
-<div>
+<div class="flex_auto">
-	<main>
+	<main class="flex_auto">
 		<nav>
 			<div class="important">Filter</div>
 			<input placeholder="Search" type="text">
-			<div>
+			<select name="type">
-				<p>Quest type</p>
+				<option value="" selected>Type</option>
-				<menu>
+				<option value="all">All</option>
-					<li></li>
+				<option value="assasin">Assasination</option>
-				</menu>
+				<option value="loot">Looting</option>
-			</div>
+				<option value="extract">Extract</option>
+				<option value="fetch">Fetch</option>
+				<option value="kill">Kill</option>
+			</select>
 		</nav>
 		<div>
 			<div>
@@ -47,17 +50,15 @@ tags:
 						<th>Type</th>
 					</tr>
 					<tr>
-						<td>
+						<td class="background">
 							<span>Scorched Earth</span>
-							<div class="background"></div>
 						</td>
 						<td>...</td>
 						<td class="subtle">Available</td>
 					</tr>
 					<tr>
-						<td>
+						<td class="background">
 							<span>Location name</span>
-							<div id="location" class="background"></div>
 						</td>
 						<td>...</td>
 						<td class="subtle">Available</td>
@@ -75,16 +76,12 @@ tags:
 						<th colspan="3">Active quests (Max.: 4)</th>
 					</tr>
 					<tr>
-						<td>
+						<td class="background"></td>
-							<div class="background"></div>
-						</td>
 						<td>King Of Kings</td>
 						<td class="subtle">Active</td>
 					</tr>
 					<tr>
-						<td>
+						<td class="background"></td>
-							<div class="background"></div>
-						</td>
 						<td>Garage Days Pt. 1</td>
 						<td class="subtle success">Complete</td>
 					</tr>
@@ -92,7 +89,9 @@ tags:
 			</div>
 		</div>
 		<div>
+			<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>
@@ -112,7 +111,7 @@ tags:
 {{ block.super -}}
 <script>
 	const menu = document.querySelector('body > header');
-	const locations = document.querySelectorAll('main table .background');
+	const placeholder = document.querySelectorAll('.background');
 
 	menu.addEventListener('click', (event) => {
 		const buttons = menu.querySelectorAll('button');
@@ -127,15 +126,17 @@ tags:
 		}
 	});
 
-	locations.forEach(element => {
+	placeholder.forEach(element => {
-		const blur = randomIntFrom(0, 4);
+		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
+		console.log(hue, grayscale);
+
 		new RandomPixelCanvas(element, {
 			width: Math.floor(element.parentElement.clientWidth),
 			height: Math.floor(element.parentElement.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') blur(' + blur + 'px)'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
 		});
 	});
 </script>

source/style/modules/game/_tfw.scss

@@ -9,6 +9,21 @@
 	display: flex;
 	flex-flow: column nowrap;
 
+	.flex_auto {
+		display: flex;
+		flex: auto;
+		min-height: 0;
+	}
+
+	th,
+	.important,
+	.subtle,
+	button,
+	input[type="text"],
+	select {
+		text-transform: uppercase;
+	}
+
 	th,
 	.important {
 		color: white;
@@ -25,13 +40,32 @@
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
-		text-transform: uppercase;
 	}
 
 	.success {
 		color: hippie.basic_color(alpha);
 	}
 
+	.background {
+		position: relative;
+		overflow: hidden;
+
+		*:not(canvas) {
+			z-index: map.get(hippie.$z-indexes, "content-bottom");
+			position: relative;
+			color: white;
+		}
+
+		canvas {
+			z-index: map.get(hippie.$z-indexes, "default");
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	& > header {
 		& > button.active {
 			border-color: hippie.$color_highlight_basic;
@@ -45,21 +79,11 @@
 	}
 
 	& > div {
-		display: flex;
 		flex-flow: column nowrap;
-		flex: auto;
-		min-height: 0;
 
 		& > main {
-			display: flex;
 			flex-flow: row nowrap;
-			flex: auto;
 			gap: hippie.$space_double;
-			min-height: 0;
-
-			& > div:first-child {
-				flex: 1;
-			}
 
 			& > div:last-child {
 				flex: 2;
@@ -84,13 +108,19 @@
 			}
 
 			nav {
-				& > *:not(:last-child) {
+				flex: 1;
-					margin-bottom: hippie.$space_basic;
+				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;
+				}
 			}
 
 			table {