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

---
title: TFW
tags:
- game
---
{% assign bodyClass = 'body_tfw' -%}
{% layout 'hippie/game.liquid' %}

{% block body %}
<header class="io">
	<button data-action="escape">☰</button>
	<button data-action="previous">&lt;</button>
	<button data-action="quest">Quests</button>
	<button data-action="region">Regions</button>
	<button data-action="vendor">Vendors</button>
	<button data-action="manufacture">Manufacture</button>
	<button data-action="character">Characters</button>
	<button data-action="stash">Stash</button>
	<button data-action="secret">Secret Storage</button>
	<button data-action="squad">Squads</button>
	<button data-action="ready">Ready Room</button>
	<button data-action="next">&gt;</button>
</header>
<div>
	<main>
		<nav>
			<div class="important">Filter</div>
			<input placeholder="Search" type="text">
			<div>
				<p>Quest type</p>
				<menu>
					<li></li>
				</menu>
			</div>
		</nav>
		<div>
			<div>
				<table>
					<colgroup>
						<col class="l">
						<col class="q">
						<col class="t">
					</colgroup>
					<tr>
						<th>Location</th>
						<th>Quest</th>
						<th>Type</th>
					</tr>
					<tr>
						<td>
							<span>Scorched Earth</span>
							<div class="background"></div>
						</td>
						<td>...</td>
						<td class="subtle">Available</td>
					</tr>
					<tr>
						<td>
							<span>Location name</span>
							<div id="location" class="background"></div>
						</td>
						<td>...</td>
						<td class="subtle">Available</td>
					</tr>
				</table>
			</div>
			<div>
				<table>
					<colgroup>
						<col class="l">
						<col class="q">
						<col class="s">
					</colgroup>
					<tr>
						<th colspan="3">Active quests (Max.: 4)</th>
					</tr>
					<tr>
						<td>
							<div class="background"></div>
						</td>
						<td>King Of Kings</td>
						<td class="subtle">Active</td>
					</tr>
					<tr>
						<td>
							<div class="background"></div>
						</td>
						<td>Garage Days Pt. 1</td>
						<td class="subtle success">Complete</td>
					</tr>
				</table>
			</div>
		</div>
		<div>
			<h2>King Of Kings</h2>
			<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">
		<button data-action="back">Back</button>
		<button data-action="accept">Accept</button>
	</footer>
</div>
{% endblock %}

{%- block script %}
{{ block.super -}}
<script>
	const menu = document.querySelector('body > header');
	const locations = document.querySelectorAll('main table .background');

	menu.addEventListener('click', (event) => {
		const buttons = menu.querySelectorAll('button');
		const buttonTarget = event.target.closest('button');

		if (buttonTarget && event.button === 0) {
			for (button of buttons) {
				button.classList.remove('active');
			}

			buttonTarget.classList.add('active');
		}
	});

	locations.forEach(element => {
		const blur = randomIntFrom(0, 4);
		const grayscale = randomFloatFrom(0, 1);

		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)'
		});
	});
</script>
{% endblock %}