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 id="factionSelection" data-type="faction">
					<colgroup>
						<col class="g">
						<col class="c">
						<col class="f">
						<col class="s">
					</colgroup>
					<tr>
						<th>Giver</th>
						<th>Category</th>
						<th>Faction</th>
						<th>Status</th>
					</tr>
					<tr>
						<td class="background">
							<span>Scavengers</span>
						</td>
						<td class="subtle">All</td>
						<td class="subtle">Scav</td>
						<td class="subtle">Open</td>
					</tr>
					<tr>
						<td class="background">
							<span>Eastern Consulate</span>
						</td>
						<td class="subtle">All</td>
						<td class="subtle">Eurasia</td>
						<td class="subtle">Closed</td>
					</tr>
					<tr>
						<td class="background">
							<span>СПЕЦНАЗ Commission</span>
						</td>
						<td class="subtle">All</td>
						<td class="subtle">Euruska</td>
						<td class="subtle">Open</td>
					</tr>
				</table>
				<table id="questSelection" data-type="quest">
					<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 id="questActive" data-type="quest">
					<colgroup>
						<col class="l">
						<col class="q">
						<col class="s">
					</colgroup>
					<thead>
					<tr>
						<th colspan="3">Active quests (Max.: 4)</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td class="background"></td>
						<td>King Of Kings</td>
						<td class="subtle">Active</td>
					</tr>
					<tr class="complete">
						<td class="background"></td>
						<td>Garage Days Pt. 1</td>
						<td class="subtle">Complete</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
		<aside>
			<div class="faction">
				<div class="background">
					<hgroup>
						<h2>Western Embassy</h2>
						<p>Europa</p>
					</hgroup>
				</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 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>
		</aside>
	</main>
	<footer class="io">
		<button data-action="back">Back</button>
		<button data-action="accept">Accept quest</button>
		<button data-action="abandon">Abandon quest</button>
		<button data-action="claim">Claim reward</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 tableTarget = event.target.closest('table');
		const rows = viewQuest.querySelectorAll('tr');
		const rowTarget = event.target.closest('tr');
		const rowFaction = event.target.closest('#factionSelection tr');
		const rowSelection = event.target.closest('#questSelection tr');
		const rowActive = event.target.closest('#questActive tr:not(.complete)');
		const rowComplete = event.target.closest('#questActive tr.complete');
		const buttonAccept = viewQuest.querySelector('footer button[data-action=accept]');
		const buttonAbandon = viewQuest.querySelector('footer button[data-action=abandon]');
		const buttonClaim = viewQuest.querySelector('footer button[data-action=claim]');

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

		if (rowTarget) {
			const rowsRemain = Array.from(rows).filter(
				element => element !== rowTarget
			);
			const type = tableTarget.dataset.type;
			const tableSibling = tableTarget.nextElementSibling;

			rowsRemain.forEach((element) => {
				element.classList.remove('active');
			});

			rowTarget.classList.add('active');

			viewQuest.querySelector('aside > :not(.' + type + ')').style.display = 'none';
			viewQuest.querySelector('aside > .' + type).style.display = 'block';

			if (rowFaction) {
				tableTarget.style.display = 'none';
				tableSibling.style.display = 'table';
			}

			if (rowSelection) {
				buttonClaim.style.display = 'none';
				buttonAbandon.style.display = 'none';
				buttonAccept.style.display = 'inline-block';
			}

			if (rowActive) {
				buttonAccept.style.display = 'none';
				buttonClaim.style.display = 'none';
				buttonAbandon.style.display = 'inline-block';
			}

			if (rowComplete) {
				buttonAccept.style.display = 'none';
				buttonAbandon.style.display = 'none';
				buttonClaim.style.display = 'inline-block';
			}
		} else {
			deselector('quest');
		}
	});

	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);

	function deselector(type) {
		const id = 'view' + capitalizeFirstLetter(type);
		const view = document.getElementById(id);
		const rows = view.querySelectorAll('tr');
		const buttonAccept = view.querySelector('footer button[data-action=accept]');
		const buttonAbandon = view.querySelector('footer button[data-action=abandon]');
		const buttonClaim = view.querySelector('footer button[data-action=claim]');

		for (const row of rows) {
			row.classList.remove('active');
		}

		view.querySelector('.' + type).style.opacity = 0;
		buttonAbandon.style.display = 'none';
		buttonAccept.style.display = 'none';
		buttonClaim.style.display = 'none';
	}
</script>
{% endblock %}