feat: Change game structure

- New template
- Rename screens
- New partial for menu
- New data file for menu content
- Separate styles

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

@@ -0,0 +1,142 @@
+---
+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 %}