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-direction="previous">&lt;</button>
	<button data-view="quest">Quests</button>
	<button data-view="region">Regions</button>
	<button data-view="vendor">Vendors</button>
	<button data-view="manufacture">Manufacture</button>
	<button data-view="character">Characters</button>
	<button data-view="stash">Stash</button>
	<button data-view="secret">Secret Storage</button>
	<button data-view="squad">Squads</button>
	<button data-view="ready">Ready Room</button>
	<button data-direction="next">&gt;</button>
</header>
<div class="flex_auto">
	<main class="flex_auto">
		<nav>
			<div class="important">Filter</div>
			<input placeholder="Search" type="text">
			<select name="type">
				<option value="" selected>Type</option>
				<option value="all">All</option>
				<option value="assasin">Assasination</option>
				<option value="loot">Looting</option>
				<option value="extract">Extract</option>
				<option value="fetch">Fetch</option>
				<option value="kill">Kill</option>
			</select>
		</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 class="background">
							<span>Scorched Earth</span>
						</td>
						<td>...</td>
						<td class="subtle">Available</td>
					</tr>
					<tr>
						<td class="background">
							<span>Location name</span>
						</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 class="background"></td>
						<td>King Of Kings</td>
						<td class="subtle">Active</td>
					</tr>
					<tr>
						<td class="background"></td>
						<td>Garage Days Pt. 1</td>
						<td class="subtle success">Complete</td>
					</tr>
				</table>
			</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>
			<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 placeholder = document.querySelectorAll('.background');

	class Menu {
		constructor(element) {
			this._element = element;
			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
		}

		escape() {
			console.log('escape');
		}

		quest() {
			console.log('quest');
		}

		onClick(event) {
			const action = event.target.dataset.action;
			const view = event.target.dataset.view;
			const direction = event.target.dataset.direction;
			const siblings = this._element.querySelectorAll('button[data-view]');

			if (event.button !== 0) return;

			if (direction) {
				const current = this._element.querySelector('.active');
				let view = undefined;
				console.log(direction, current);

				if (current === null) return;

				view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling;

				current.classList.remove('active');

				if (view.dataset.view) {
					view.classList.add('active');
				} else {
					view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
					view.classList.add('active');
				}
			}

			if (view) {
				for (const sibling of siblings) {
					sibling.classList.remove('active');
				}

				event.target.classList.add('active');
				this[view]();
			}

			if (action) this[action]();
		};
	}

	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),
			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
		});
	});

	new Menu(menu);
</script>
{% endblock %}