hippie/source/view/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 id="viewQuest" class="view">
	<main>
		<nav>
			<div class="important">Filter</div>
			<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>
				<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="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>
		</div>
	</main>
	<footer class="io">
		<button data-action="back">Back</button>
		<button data-action="accept">Accept</button>
	</footer>
</div>
<div id="viewRegion" class="view"></div>
<div id="viewVendor" class="view"></div>
{% endblock %}

{%- block script %}
{{ block.super -}}
<script>
	const menu = document.querySelector('body > header');
	const placeholder = document.querySelectorAll('.background');
	const viewQuest = document.getElementById('viewQuest');

	class Menu {
		constructor(element, options = {}) {
			this._element = element;
			this._siblings = element.querySelectorAll('button[data-view]');
			this.default = options.default || 'quest';

			element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class

			this.#init();
		}

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

		#init() {
			const currentBtn = Array.from(this._siblings).find(
				el => el.dataset.view === this.default
			);

			currentBtn.classList.add('active');
			this.changeView(this.default);
		}

		// TODO: Sollte auch die Menüauswahl anpassen
		changeView(type) {
			console.debug(type);
			const id = 'view' + capitalizeFirstLetter(type);
			const views = document.querySelectorAll('.view');

			for (const view of views) {
				view.style.display = 'none';
			}

			document.getElementById(id).style.display = 'flex';
		}

		onClick(event) {
			const siblings = this._siblings;
			const action = event.target.dataset.action;
			const view = event.target.dataset.view;
			const direction = event.target.dataset.direction;

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

			if (direction) {
				const currentBtn = this._element.querySelector('.active');
				let newButton, newView = undefined;

				if (currentBtn === null) return;

				if (direction === 'next') {
					newButton = currentBtn.nextElementSibling;
					newView = currentBtn.nextElementSibling.dataset.view;
				} else {
					newButton = currentBtn.previousElementSibling;
					newView = currentBtn.previousElementSibling.dataset.view;
				}

				if (!newButton.dataset.view) {
					newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
				}

				currentBtn.classList.remove('active');
				newButton.classList.add('active');
				this.changeView(newView);
			}

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

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

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

	// 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 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)',
			type: 'img'
		});
	});

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