chore: Resolve problems

- Missing labels - Deprecated attributes - Missing attribute alt - Redundant info
feat: Change game screen and menu class
2026-04-04 13:57:48 +02:00 · 2026-04-04 13:03:59 +02:00 · 2026-04-04 12:12:21 +02:00 · 2026-04-04 11:31:52 +02:00 · 2026-04-04 11:17:54 +02:00 · 2026-04-04 11:11:32 +02:00
18 changed files with 650 additions and 152 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -31,7 +31,8 @@ export default async function (eleventyConfig) {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});

-	const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
+	// TODO: Demo entfernen
+	const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';

 	eleventyConfig.addGlobalData('hippie', {
 		brand: 'hippie',
@ -44,7 +45,7 @@ export default async function (eleventyConfig) {
 			mail: 'name@domain.tld',
 			domain: 'https://domain.tld'
 		},
-		demoPath: demoPath,
+		permalink: permalinkPath,
 		debugMode: true,
 		legacyMode: false
 	});
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,5 @@
 | Commit                                   | Version | Description                                     |
-| :--- | :----: | :--- |
+|:-----------------------------------------|:-------:|:------------------------------------------------|
 | 6095870ce33fd3775718a1de3d33f604fd0630ab |  0.4.2  | Javascript again                                |
 | 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 |  0.5.0  | Changes to content                              |
 | e2bbe9273a292a3806de1599f752258a2721d067 |  0.5.1  |                                                 |
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@ -1,3 +1,5 @@
+/* jshint strict: false */
+
 // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
 // Benennung und Beschreibungen verbessern.

@ -190,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 		el.innerHTML = elContent + text;
 		el.setAttribute('href', 'mailto:' + mailString + topic);
 	} else {
-		const els = document.getElementsByClassName(tag.slice(1));
+		const elements = document.getElementsByClassName(tag.slice(1));

-		for (let el of els) {
-			const elContent = el.innerHTML;
+		for (const element of elements) {
+			const content = element.innerHTML;

-			el.innerHTML = elContent + text;
-			el.setAttribute('href', 'mailto:' + mailString + topic);
+			element.innerHTML = content + text;
+			element.setAttribute('href', 'mailto:' + mailString + topic);
 		}
 	}
 }
@ -424,10 +426,10 @@ function randomIntFrom(min, max, pos = 0) {
 	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 }

-function randomFloatFrom(min, max, dec = 0) {
+function randomFloatFrom(min, max, dec = 1) {
 	dec = Math.pow(10, dec);

-	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
+	return Math.round((Math.random() * (max - min) + min) * dec) / dec;
 }

 /**
@ -554,6 +556,62 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));

+class RandomPixelCanvas {
+	constructor(containerElement, options = {}) {
+		this.container = containerElement;
+		this.width = options.width || 400;
+		this.height = options.height || 300;
+		this.colors = options.colors || ['#000000', '#ffffff'];
+		this.filter = options.filter || '';
+		this.canvas = this.createCanvas();
+
+		this.fillWithRandomPixels();
+	}
+
+	createCanvas() {
+		const canvas = document.createElement('canvas');
+		canvas.width = this.width;
+		canvas.height = this.height;
+		canvas.style.filter = this.filter;
+
+		this.container.appendChild(canvas);
+
+		return canvas;
+	}
+
+	fillWithRandomPixels() {
+		const ctx = this.canvas.getContext('2d');
+		const imageData = ctx.createImageData(this.width, this.height);
+		const data = imageData.data;
+
+		for (let i = 0; i < data.length; i += 4) {
+			const color = this.getRandomColor();
+			const rgb = this.hexToRgb(color);
+
+			data[i] = rgb.r;     // Red
+			data[i + 1] = rgb.g; // Green
+			data[i + 2] = rgb.b; // Blue
+			data[i + 3] = 255;   // Alpha
+		}
+
+		ctx.putImageData(imageData, 0, 0);
+	}
+
+	getRandomColor() {
+		return this.colors[Math.floor(Math.random() * this.colors.length)];
+	}
+
+	hexToRgb(hex) {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+		return result ? {
+			r: parseInt(result[1], 16),
+			g: parseInt(result[2], 16),
+			b: parseInt(result[3], 16)
+		} : {r: 0, g: 0, b: 0};
+	}
+}
+
 // CONCEPTS

 // NOTE: Benutzt private Zuweisungen
--- a/source/data/menu.json
+++ b/source/data/menu.json
@ -0,0 +1,18 @@
+[
+	{
+		"text": "New",
+		"href": "#new"
+	},
+	{
+		"text": "Continue",
+		"href": "#continue"
+	},
+	{
+		"text": "Settings",
+		"href": "#options"
+	},
+	{
+		"text": "Leave",
+		"href": "/"
+	}
+]
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@ -208,7 +208,7 @@ order: 2
 		<figure class="js_pop">
 			<figcaption>Fahne</figcaption>
 			{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
-			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 				 y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
 				<desc>Flag</desc>
 				<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
@ -243,7 +243,7 @@ order: 2
 	<article>
 		<h1 id="textlevel">Textebene</h1>
 		<h2>Verweise</h2>
-		<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
+		<p id="links">Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
 			<code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
 			und externen Verweisen unterschieden werden.
 			<a class="a_internal js_pop" href="#links">Interne Verweise</a>
@ -948,7 +948,7 @@ order: 2
 		<div class="box_placeholder"></div>
 		<hr class="hidden"/>
 		<div class="box_placeholder">
-			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 				 y="0px" width="100%" height="100%">
 				<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
 				<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
--- a/source/screens/demo/examples/game/menu.liquid
+++ b/source/screens/demo/examples/game/menu.liquid
@ -3,24 +3,11 @@ title: Menu
 tags:
 - game
 ---
-{% assign bodyClass = 'body_game' -%}
+{% assign bodyClass = 'body_menu' -%}
 {% layout 'hippie/simple.liquid' %}

 {% block body %}
-<div class="sec_main_center">
-	<nav role="doc-toc">
-		<hgroup>
-			<h1>Game - TFW</h1>
-			<p>Additional name</p>
-		</hgroup>
-		<ul class="link">
-			<li><a href="#new">Neues Spiel</a></li>
-			<li><a href="#continue">Spiel fortsetzen</a></li>
-			<li><a href="#options">Einstellungen</a></li>
-			<li><a href="#quit">Spiel beenden</a></li>
-		</ul>
-	</nav>
-</div>
+{% render 'hippie/partials/game-menu.liquid', links: menu %}
 <footer>
 	{% brand 'brand', 'last' %}
 	<p>Marke</p>
--- a/source/screens/demo/examples/game/mwo.liquid
+++ b/source/screens/demo/examples/game/mwo.liquid
@ -1,10 +1,10 @@
 ---
-title: FPV
+title: MWO
 tags:
 - game
 ---
-{% assign bodyClass = 'body_fpv' -%}
-{% layout 'hippie/simple.liquid' %}
+{% assign bodyClass = 'body_mwo' -%}
+{% layout 'hippie/game.liquid' %}

 {% block links %}
 {{ block.super -}}
@ -83,5 +83,4 @@ tags:
 		canvas.height = window.innerHeight;
 	});
 </script>
-
 {% endblock %}
--- a/source/screens/demo/examples/game/tfw.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@ -0,0 +1,212 @@
+---
+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" 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>
+<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');
+
+	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);
+		}
+
+		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]();
+		};
+	}
+
+	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 %}
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@ -25,7 +25,7 @@ tags:
 					<i class="bi bi-hash"></i>
 				</button>
 				<div class="group_nav">
-					<select id="sltNum" name="position-number">
+					<select id="sltNum" name="position-number" aria-label="numbering">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
 						<option value="latin">ABC</option>
@ -62,26 +62,26 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td><input class="input_io" name="number" type="text"></td>
-		<td><input class="input_io" name="name" type="text"></td>
+		<td><input class="input_io" name="number" aria-label="number" type="text"></td>
+		<td><input class="input_io" name="name" aria-label="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input class="input_io" name="amount" type="number"></td>
+		<td><input class="input_io" name="amount" aria-label="amount" type="number"></td>
 		<td>
-			<select class="io_select" name="units">
+			<select class="io_select" name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td><input class="input_io" name="price" type="text"></td>
+		<td><input class="input_io" name="price" aria-label="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@ -97,7 +97,7 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
@ -105,11 +105,11 @@ tags:
 		<td class="rigid"></td>
 		<td></td>
 		<td>
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
-		<td><input name="amount" type="number"></td>
+		<td><input name="amount" aria-label="number" type="number"></td>
 		<td>
-			<select name="units">
+			<select name="unit" aria-label="unit">
 				<option value="">None</option>
 				<option value="piece">Piece(s)</option>
 				<option value="hour">Hour(s)</option>
@ -131,13 +131,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td colspan="7">
-			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+			<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
 		</td>
 		<td class="io">
 			<nav>
@ -151,7 +151,7 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
+				<input class="input_io" name="active" aria-label="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
@ -230,15 +230,17 @@ tags:
 		const rowTarget = event.target.closest('tr');
 		const groupTarget = event.target.closest('[name="group"]');

-		if (rowTarget && event.button === 0) {
-			for (row of rows) {
+		if (event.button !== 0) return;
+
+		if (rowTarget) {
+			for (const row of rows) {
 				row.classList.remove('active');
 			}

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

-		if (groupTarget && event.button === 0) {
+		if (groupTarget) {
 			console.log('group');
 			let currentRow = groupTarget.closest('tr').nextElementSibling;

@ -296,7 +298,7 @@ tags:
 		const cells = content.querySelectorAll('th:first-child');
 		const isHidden = cells[0].classList.contains('di_none');

-		for (cell of cells) {
+		for (const cell of cells) {
 			if (isHidden) {
 				cell.classList.remove('di_none');
 			} else {
@ -312,7 +314,7 @@ tags:
 		const clone = cloneRow();
 		const viewportHeight = window.innerHeight;
 		const elementActive = tbodyPosition.querySelector('tr.active');
-		let elementNew = undefined;
+		let elementNew;
 		let elementBound = undefined;

 		if (elementActive) {
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@ -1,5 +1,5 @@
 ---
-permalink: "{{ hippie.demoPath }}"
+permalink: "{{ hippie.permalink }}"
 title: Index
 ---
 {% assign pageId = page.fileSlug -%}
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@ -3,35 +3,9 @@

@use "../hippie-style/hippie";

-$colors: hippie.$color_palette;
-$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
-
-@function getColor($index, $colors) {
-	$color_keys: map.keys($colors);
-	$key_count: list.length($color_keys);
-	$cycled_index: ($index % $key_count) + 1;
-	$key: list.nth($color_keys, $cycled_index);
-	@return map.get($colors, $key);
-}
-
-@mixin fadeColors($steps, $colors) {
-	@keyframes fadeColor {
-		@for $i from 1 through list.length($steps) {
-			$percent: list.nth($steps, $i);
-			$color: getColor($i - 1, $colors);
-
-			#{$percent}% {
-				background-color: $color;
-			}
-		}
-	}
-
-	animation: fadeColor 16s infinite linear;
-}
-
-.body_game {
+.body_menu {
 	@extend .h_full_view;
-	background-color: hotpink;
+	background-color: hippie.basic_color(delta);

 	footer {
 		@extend .pos_abs;
@ -54,21 +28,3 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 		}
 	}
 }
-
-.body_fpv {
-	@extend .h_full_view;
-
-	canvas {
-		@include fadeColors($steps, $colors);
-
-		display: block;
-		cursor: none;
-	}
-
-	.controls {
-		position: fixed;
-		top: 0;
-		left: 0;
-		border-radius: hippie.$radius_basic;
-	}
-}
--- a/source/style/modules/game/_mwo.scss
+++ b/source/style/modules/game/_mwo.scss
@ -0,0 +1,48 @@
+@use 'sass:list';
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+$colors: hippie.$color_palette;
+$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
+
+@function getColor($index, $colors) {
+	$color_keys: map.keys($colors);
+	$key_count: list.length($color_keys);
+	$cycled_index: ($index % $key_count) + 1;
+	$key: list.nth($color_keys, $cycled_index);
+	@return map.get($colors, $key);
+}
+
+@mixin fadeColors($steps, $colors) {
+	@keyframes fadeColor {
+		@for $i from 1 through list.length($steps) {
+			$percent: list.nth($steps, $i);
+			$color: getColor($i - 1, $colors);
+
+			#{$percent}% {
+				background-color: $color;
+			}
+		}
+	}
+
+	animation: fadeColor 16s infinite linear;
+}
+
+.body_mwo {
+	@extend .h_full_view;
+
+	canvas {
+		@include fadeColors($steps, $colors);
+
+		display: block;
+		cursor: none;
+	}
+
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		border-radius: hippie.$radius_basic;
+	}
+}
--- a/source/style/modules/game/_tfw.scss
+++ b/source/style/modules/game/_tfw.scss
@ -0,0 +1,185 @@
+@use 'sass:list';
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+.body_tfw {
+	@extend .h_full_view;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	th,
+	.important,
+	.subtle,
+	button,
+	input[type="text"],
+	select {
+		text-transform: uppercase;
+	}
+
+	th,
+	.important {
+		color: white;
+		background-color: hippie.basic_color(echo);
+	}
+
+	.important {
+		padding: hippie.$space_half;
+		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
+		font-weight: bold;
+	}
+
+	.subtle {
+		@extend .txt_smaller;
+
+		color: hippie.$color_darkest;
+	}
+
+	.success {
+		color: hippie.basic_color(alpha);
+	}
+
+	.background {
+		position: relative;
+		overflow: hidden;
+
+		*:not(canvas) {
+			z-index: map.get(hippie.$z-indexes, "content-bottom");
+			position: relative;
+			color: white;
+		}
+
+		canvas {
+			z-index: map.get(hippie.$z-indexes, "default");
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	& > header {
+		& > button.active {
+			border-color: hippie.$color_highlight_basic;
+			color: hippie.$color_highlight_basic;
+			background-color: hippie.$color_action_basic;
+		}
+
+		& > button:not(:first-child, :last-child, :nth-child(2)) {
+			flex: 1;
+		}
+	}
+
+	.view {
+		flex: auto;
+		display: flex;
+		flex-flow: column nowrap;
+		min-height: 0;
+
+		& > main {
+			flex: auto;
+			display: flex;
+			flex-flow: row nowrap;
+			gap: hippie.$space_double;
+			min-height: 0;
+
+			& > div:last-child {
+				flex: 2;
+			}
+
+			& > div:nth-child(2) {
+				flex: 4;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				div:first-child {
+					flex: auto;
+					overflow: auto;
+					min-height: 0;
+				}
+
+				div:last-child {
+					flex: 0 0 auto;
+				}
+			}
+
+			nav {
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+
+				select {
+					@extend .io_select;
+				}
+			}
+
+			table {
+				table-layout: fixed;
+				width: 100%;
+				margin: 0;
+
+				th {
+					text-align: center;
+				}
+
+				td {
+					position: relative;
+					height: 4em;
+					vertical-align: top;
+
+					span {
+						z-index: map.get(hippie.$z-indexes, "content-bottom");
+						position: relative;
+						color: white;
+					}
+
+					canvas {
+						z-index: map.get(hippie.$z-indexes, "default");
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+					}
+
+					&:last-child {
+						text-align: center;
+						vertical-align: middle;
+					}
+				}
+
+				.l {
+					width: 30%;
+				}
+
+				.q {
+					width: 50%;
+				}
+
+				.t, .s {
+					width: 20%;
+				}
+			}
+		}
+
+		& > footer {
+			justify-content: space-between;
+			padding: hippie.$space_basic;
+
+			& > button:last-child {
+				//margin-left: auto;
+				padding-inline: 2em;
+			}
+		}
+	}
+}
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@ -9,6 +9,8 @@
@use "modules/ui/gallery_module";
@use "modules/ui/windows_module";
@use "modules/ui/table_module";
+@use "modules/game/mwo";
+@use "modules/game/tfw";

 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;
--- a/source/templates/hippie/game.liquid
+++ b/source/templates/hippie/game.liquid
@ -0,0 +1,15 @@
+{% assign pageId = page.fileSlug -%}
+{% layout 'hippie/default.liquid' %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
--- a/source/templates/hippie/partials/game-menu.liquid
+++ b/source/templates/hippie/partials/game-menu.liquid
@ -0,0 +1,15 @@
+<div class="sec_main_center">
+	<nav role="doc-toc">
+		<hgroup>
+			<h1>{{ title | default: 'Game title' }}</h1>
+			<p>{{ additional | default: 'Additional name' }}</p>
+		</hgroup>
+		<ul class="link">
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+</div>
--- a/source/templates/hippie/partials/gate-list.liquid
+++ b/source/templates/hippie/partials/gate-list.liquid
@ -10,7 +10,7 @@
 			<ul class="portal__list">
 				{% for link in links %}
 					<li>
-						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
+						<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16" alt="icon"/>{{ link.name }}</a>
 					</li>
 				{% endfor %}
 			</ul>
--- a/source/templates/hippie/partials/placeholder-flag.liquid
+++ b/source/templates/hippie/partials/placeholder-flag.liquid
@ -1,7 +1,7 @@
 {% assign height = width | divided_by: 1.6 %}

 {% if type == 'svg' or type == '' %}
-	<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
+	<svg id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
 		{% comment %}<defs>
 			<filter id="turb3">
 				<feColorMatrix type="saturate" values="1" />
Author	SHA1	Message	Date
sthag	d5dfacb9a9	chore: Resolve problems - Missing labels - Deprecated attributes - Missing attribute alt - Redundant info	2026-04-04 13:57:48 +02:00
sthag	46491f8df7	feat: Change game screen and menu class - Add default option - Add init and changeView - Change style to be more specific - Rename constants and variables	2026-04-04 13:03:59 +02:00
sthag	019e25945e	feat: Change menu for game - Add next and previous behaviour - Separate views, directions and actions	2026-04-04 12:12:21 +02:00
sthag	ba96b889da	refactor: Mouse button of event	2026-04-04 11:31:52 +02:00
sthag	aa40877469	feat: Add a menu class to game Use event delegation and the data-action attribute.	2026-04-04 11:17:54 +02:00
sthag	e698161a2d	refactor: Improve for...of	2026-04-04 11:11:32 +02:00
sthag	afcb06a808	feat: Change styles for game	2026-04-04 10:22:04 +02:00
sthag	a67a36decb	fix: randomFloatFrom now correctly stays in range	2026-04-04 09:59:43 +02:00
sthag	19577eca8c	feat: Change game structure - New template - Rename screens - New partial for menu - New data file for menu content - Separate styles	2026-04-04 09:21:34 +02:00
sthag	a1b5aa8c59	feat: New game screen - Basic layout - Menu structure - First screen - Add RandomPixelCanvas class	2026-04-04 08:17:56 +02:00
sthag	c518672db0	feat: Demo config changed	2026-04-03 13:15:13 +02:00