From 88c7974d5c2464f79fd2a759ab7ea31597193702 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 10:39:29 +0100
Subject: [PATCH 01/12] feat: Add style block to default template

---
 source/screens/demo/examples/10print.liquid | 4 +---
 source/templates/hippie/default.liquid      | 2 ++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 9ee9246..8ed878e 100644
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@@ -5,8 +5,7 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block head %}
-{{ block.super -}}
+{% block style %}
 <style>
 	canvas {
 		display: block;
@@ -20,7 +19,6 @@ tags:
 
 {% block script %}
 <script>
-	// Page script
 	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 0d6c050..4ff5f5a 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -17,12 +17,14 @@
 		{% block title %}{% endblock -%}
 		{{ hippie.titlePostfix -}}
 	</title>
+
 	{% block meta -%}
 	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
 	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
+	{% block style -%}{% endblock -%}
 	{% endblock -%}
 </head>
 

From 4f6af7e200ec717b7e98fa942b3d3e486136adc2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 10:51:10 +0100
Subject: [PATCH 02/12] feat: Rearrange HippieClock class fields

---
 source/screens/demo/examples/clock.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 3740eaa..57cdd7c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -27,6 +27,8 @@ tags:
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
+			this.element = element;
+			this.date = date;
 			this.defaults = {
 				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
@@ -35,8 +37,6 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
-			this.element = element;
-			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];

From e7aaf257e39afc6af3315bb8f5ca873286e2bd5f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 11:48:20 +0100
Subject: [PATCH 03/12] refactor: Standardize order of @use

---
 source/style/hippie-style        | 2 +-
 source/style/modules/_clock.scss | 4 ++--
 source/style/modules/_login.scss | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/source/style/hippie-style b/source/style/hippie-style
index 43f66d8..5b5944e 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d
+Subproject commit 5b5944e22912d8c4c9bf7b7747a45fb80fea262a
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 0965587..6ffbc12 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,7 +1,7 @@
-@use "../hippie-style/hippie";
-
 @use "sass:map";
 
+@use "../hippie-style/hippie";
+
 .body_clock {
 	header {
 		z-index: map.get(hippie.$z-indexes, "content-top");
diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss
index 3382d86..42c57a0 100644
--- a/source/style/modules/_login.scss
+++ b/source/style/modules/_login.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+
 @use "../hippie-style/hippie";
 
 form[name="login"] {

From ebed5a2d424ca720c20c99f3b68e88691c1f93e3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 14:49:10 +0100
Subject: [PATCH 04/12] feat: Add new game screen

- Add first person view screen
- Add HippieCrosshair class
- Controls for crosshair options
- Add styles to game module
---
 source/code/game.js                          | 230 +++++++++++++++++++
 source/screens/demo/examples/game/fpv.liquid |  79 +++++++
 source/style/modules/_game.scss              |  19 ++
 3 files changed, 328 insertions(+)
 create mode 100644 source/code/game.js
 create mode 100644 source/screens/demo/examples/game/fpv.liquid

diff --git a/source/code/game.js b/source/code/game.js
new file mode 100644
index 0000000..1492a63
--- /dev/null
+++ b/source/code/game.js
@@ -0,0 +1,230 @@
+class HippieCrosshair {
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.ctx = canvas.getContext('2d');
+
+		this.debug = options.debug || false;
+
+		// Crosshair options
+		this.size = options.size || 16;
+		this.thickness = options.thickness || 2;
+		this.color = options.color || '#000';
+		this.gapSize = options.gapSize || 8;
+		this.style = options.style || 'cross';
+
+		// Line options
+		this.lineColor = options.lineColor || '#fff';
+		this.lineWidth = options.lineWidth || 1;
+		this.showConnector = options.showConnector !== false;
+
+		// Symbol options
+		this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
+		this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
+		this.symbolSize = options.symbolSize || 8;
+		this.symbolColor = options.symbolColor || '#000';
+		this.symbolStyle = options.symbolStyle || 'arrow';
+
+		this.mouseX = canvas.width / 2;
+		this.mouseY = canvas.height / 2;
+
+		this.setupEventListeners();
+		this.animate();
+	}
+
+	setupEventListeners() {
+		document.addEventListener('mousemove', (e) => {
+			this.mouseX = e.clientX;
+			this.mouseY = e.clientY;
+		});
+	}
+
+	animate() {
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+		if (this.showConnector) {
+			if (this.debug) this.drawLine();
+			this.drawConnector();
+		}
+
+		// TODO: Autom. Zug zum Zentrum hin ermöglichen
+		this.drawCrosshair();
+
+		requestAnimationFrame(() => this.animate());
+	}
+
+	drawLine() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		this.ctx.strokeStyle = this.lineColor;
+		this.ctx.lineWidth = this.lineWidth;
+		this.ctx.beginPath();
+		this.ctx.moveTo(centerX, centerY);
+		this.ctx.lineTo(this.mouseX, this.mouseY);
+		this.ctx.stroke();
+	}
+
+	// TODO: Ausblenden nach Distanz
+	drawConnector() {
+		const centerX = this.canvas.width / 2;
+		const centerY = this.canvas.height / 2;
+
+		const dx = this.mouseX - centerX;
+		const dy = this.mouseY - centerY;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		// Only draw symbols if cursor is far enough from center
+		if (distance < this.symbolDistance) {
+			return;
+		}
+
+		const angle = Math.atan2(dy, dx);
+
+		// Calculate how many symbols to draw
+		const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
+
+		for (let i = 0; i < symbolCount; i++) {
+			const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
+			const symbolX = centerX + Math.cos(angle) * symbolDistance;
+			const symbolY = centerY + Math.sin(angle) * symbolDistance;
+
+			this.drawSymbol(symbolX, symbolY, angle);
+		}
+	}
+
+	drawSymbol(x, y, angle = 0) {
+		this.ctx.fillStyle = this.symbolColor;
+		this.ctx.strokeStyle = this.symbolColor;
+		this.ctx.lineWidth = 1;
+
+		switch (this.symbolStyle) {
+			case 'circle':
+				this.ctx.beginPath();
+				this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
+				this.ctx.fill();
+				break;
+			case 'diamond':
+				const size = this.symbolSize - (this.symbolSize / 4);
+				this.ctx.beginPath();
+				this.ctx.moveTo(x, y - size);
+				this.ctx.lineTo(x + size, y);
+				this.ctx.lineTo(x, y + size);
+				this.ctx.lineTo(x - size, y);
+				this.ctx.closePath();
+				this.ctx.fill();
+				break;
+			case 'square':
+				this.ctx.fillRect(
+					x - this.symbolSize / 2,
+					y - this.symbolSize / 2,
+					this.symbolSize,
+					this.symbolSize
+				);
+				break;
+			case 'arrow':
+				this.arrow(x, y, angle);
+				break;
+		}
+	}
+
+	arrow(x, y, angle) {
+		const size = this.symbolSize - (this.symbolSize / 4);
+
+		this.ctx.save();
+		this.ctx.translate(x, y);
+		this.ctx.rotate(angle);
+
+		// Arrow pointing right
+		this.ctx.beginPath();
+		this.ctx.moveTo(size, 0); // Tip
+		this.ctx.lineTo(-size, -size); // Back left
+		// this.ctx.lineTo(-size * 0.4, 0); // Middle
+		this.ctx.lineTo(-size, size); // Back right
+		this.ctx.closePath();
+		this.ctx.fill();
+
+		this.ctx.restore();
+	}
+
+	drawCrosshair() {
+		this.ctx.strokeStyle = this.color;
+		this.ctx.lineWidth = this.thickness;
+		this.ctx.lineCap = 'round';
+
+		switch (this.style) {
+			case 'cross':
+				this.cross();
+				break;
+			case 'circle':
+				this.circle();
+				break;
+			case 'dot':
+				this.dot();
+				break;
+		}
+	}
+
+	cross() {
+		// Horizontal line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size, this.mouseY);
+		this.ctx.stroke();
+
+		// Vertical line
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY - this.size);
+		this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize);
+		this.ctx.lineTo(this.mouseX, this.mouseY + this.size);
+		this.ctx.stroke();
+	}
+
+	circle() {
+		// Outer circle
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2);
+		this.ctx.stroke();
+
+		// Inner dot
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness * 1.5, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	dot() {
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
+	setCrosshairStyle(style) {
+		this.style = style;
+	}
+
+	setColor(color) {
+		this.color = color;
+	}
+
+	setSymbolStyle(style) {
+		this.symbolStyle = style;
+	}
+
+	setSymbolColor(color) {
+		this.symbolColor = color;
+	}
+
+	setLineVisible(visible) {
+		this.showConnector = visible;
+	}
+}
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
new file mode 100644
index 0000000..a4f53a7
--- /dev/null
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -0,0 +1,79 @@
+---
+title: FPV
+tags:
+- game
+---
+{% assign bodyClass = 'body_fpv' -%}
+{% layout 'hippie/simple.liquid' %}
+
+{% block links %}
+{{ block.super -}}
+<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+{% endblock %}
+
+{% block body %}
+<canvas id="view"></canvas>
+
+<header class="io controls">
+	<nav>
+		<span>Color</span>
+		<button onclick="changeColor('black')">Black</button>
+		<button onclick="changeColor('white')">White</button>
+		<button onclick="changeColor('crimson')">Red</button>
+		<button onclick="changeColor('#00ffff')">Cyan</button>
+	</nav>
+	<nav>
+		<span>Crosshair</span>
+		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
+		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
+		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
+	</nav>
+	<nav>
+		<span>Connector</span>
+		<button onclick="toggleLine()">Toggle</button>
+		<hr class="vertical">
+		<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
+		<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
+		<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
+		<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
+	</nav>
+</header>
+{% endblock %}
+
+{% block assets %}
+<script src="/js/game.js"></script>
+{% endblock %}
+
+{% block script %}
+<script>
+	const canvas = document.getElementById('view');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	const crosshair = new HippieCrosshair(canvas);
+
+	function changeCrosshairStyle(style) {
+		crosshair.setCrosshairStyle(style);
+	}
+
+	function changeSymbolStyle(style) {
+		crosshair.setSymbolStyle(style);
+	}
+
+	function changeColor(color) {
+		crosshair.setColor(color);
+		crosshair.setSymbolColor(color);
+		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
+	}
+
+	function toggleLine() {
+		crosshair.setLineVisible(!crosshair.showConnector);
+	}
+
+	window.addEventListener('resize', () => {
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+	});
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 6d49400..d9a36f1 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "../hippie-style/hippie";
 
 .body_game {
@@ -24,4 +26,21 @@
 			}
 		}
 	}
+}
+
+.body_fpv {
+	@extend .h_full_view;
+
+	canvas {
+		display: block;
+		cursor: none;
+		background-color: lightblue;
+	}
+
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		border-radius: hippie.$radius_basic;
+	}
 }
\ No newline at end of file

From 2387e08ad0d86e391b5f7b63971cbf38dcfa9218 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 17:49:48 +0100
Subject: [PATCH 05/12] feat: Combine start and tile screens

- Combine start and tile content to start screen
- Remove tile screen
- Remove new css module
- Integrate style to start module
---
 source/code/hippie/app.js                     |  94 ++---------
 source/screens/demo/basics.liquid             |   8 +-
 source/screens/demo/components.liquid         |  13 +-
 .../screens/demo/examples/game/index.liquid   |   2 -
 source/screens/demo/examples/start.liquid     | 152 +++++++++++++++---
 source/screens/demo/examples/ui/tile.liquid   |  45 ------
 source/style/hippie-style                     |   2 +-
 source/style/modules/_start.scss              |  98 ++++++++++-
 source/style/modules/ui/_new_module.scss      |  99 ------------
 source/style/ui.scss                          |   1 -
 10 files changed, 247 insertions(+), 267 deletions(-)
 delete mode 100644 source/screens/demo/examples/ui/tile.liquid
 delete mode 100755 source/style/modules/ui/_new_module.scss

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 7cda8b6..eb6eda9 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -540,6 +540,15 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }
 
+function zeroFill(number, width) {
+	width -= number.toString().length;
+
+	if (width > 0) {
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
+	}
+	return number + ''; // always return a string
+}
+
 // Source - https://stackoverflow.com/a/47480429
 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
@@ -603,91 +612,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-function ongoing() {
-
-	var now = new Date();
-
-	var w = Math.floor(now.getDay());
-	var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-	var DNumb = Math.floor(now.getDate());
-	var MNumb = Math.floor(now.getMonth());
-	var M = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember'];
-	var y = Math.floor(now.getYear());
-	if (y < 999) y += 1900;
-
-	var ms = Math.floor(now.getMilliseconds());
-	var s = Math.floor(now.getSeconds());
-	var m = Math.floor(now.getMinutes() + s / 60);
-	var h = Math.floor(now.getHours() + m / 60);
-
-	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-	j2000.setUTCFullYear(2000, 0, 1);
-	j2000.setUTCHours(0, 0, 0, 0);
-
-	var utc = new Date();
-	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h, m, s, ms);
-
-	var utc0 = new Date();
-	utc0.setUTCFullYear(y, MNumb, DNumb);
-	utc0.setUTCHours(0, 0, 0, 0);
-
-	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-	var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
-
-	var N = jd - 2451545.0;
-	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
-	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
-	var e = 23.439 - 0.0000004 * N;
-	var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
-
-	var T = (jdUTC0 - 2451545.0) / 36525;
-	var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
-
-	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
-	var hWGMT = stGMT2 * 15;
-	var hW = hWGMT + 11.9566185772;
-
-	var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
-	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
-	var stH = Math.floor(st24);
-	var stM = Math.floor((st24 % 1) * 60);
-	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-
-	var travelWidth = document.body.clientWidth;
-	var travelHeight = document.body.clientHeight;
-	var sunPosX = 0;
-	var sunPosY = 0;
-	var moonPosX = 0;
-	var moonPosY = 0;
-
-	var sun = $('#sun').css({
-		'left': (s / 60) * travelWidth,
-		'top': (m / 60) * travelHeight
-	});
-
-	$('#day').text(D[w]);
-	$('#dayNumb').text(DNumb);
-	$('#month').text(M[MNumb]);
-	$('#year').text(y);
-	$('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
-
-	$('#julian').text(jd.toFixed(6));
-	//$('#star').text(stH + ':' + stM + ':' + stS);
-	$('#star').text(stH + ':' + stM);
-	$('#star1').text(stGMT);
-	$('#star2').text(stGMT2);
-}
-
-function zeroFill(number, width) {
-	width -= number.toString().length;
-	if (width > 0) {
-		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
-	}
-	return number + ''; // always return a string
-}
-
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index d3c7a08..f1c8560 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -801,7 +801,7 @@ order: 2
 			<code>&lt;fieldset&gt;</code>
 			realisiert.</p>
 		<fieldset>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
 															  readonly="readonly" id="demo__input">
 				<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@@ -813,7 +813,7 @@ order: 2
 			auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabeelemente</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div>
 					<button>Senden</button>
@@ -846,7 +846,7 @@ order: 2
 		</fieldset>
 		<fieldset>
 			<legend>Einfache Eingabeelemente mit Stil</legend>
-			<div class="grid grid_column_2">
+			<div class="dis_grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div class="flex inline">
 					<button class="button_io">Senden</button>
@@ -883,7 +883,7 @@ order: 2
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
 			<form action="">
-				<div class="grid grid_column_2">
+				<div class="dis_grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 2ea1d8d..98f582c 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -286,12 +286,17 @@ order: 3
 				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
-		<table class="flexible">
+		<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
+		<table class="grid">
 			<tr>
 				<td>Index</td>
-				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td>Zelle mit Angabe der Breite.</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Inhalt bestimmt die Breite</td>
+			</tr>
+			<tr>
+				<td>101</td>
+				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle</td>
 			</tr>
 		</table>
 	</article>
diff --git a/source/screens/demo/examples/game/index.liquid b/source/screens/demo/examples/game/index.liquid
index d939850..6dc8d2f 100644
--- a/source/screens/demo/examples/game/index.liquid
+++ b/source/screens/demo/examples/game/index.liquid
@@ -6,8 +6,6 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block title %}{{ title }}{% endblock %}
-
 {% block body %}
 <div class="sec_main_center">
 	<nav role="doc-toc">
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 4c68c5a..5e3d261 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -8,34 +8,44 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
-	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
-		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
-		<input class="button_io" value="Suchen" type="submit"/>
-	</form>
-	<div class="blocks">
-		<article>
-			<section>
-				<h2><a href="">Name</a></h2>
-				<ul>
-					<li>
-						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
-					</li>
-				</ul>
-			</section>
-		</article>
-		<article>
-			<section>
-				<h2><a href="">Name</a></h2>
-			</section>
-		</article>
+	<header class="io">
+		<form id="wwwForm" class="group-input" action="https://duckduckgo.com/">
+			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+			<input class="button_io" value="Suchen" type="submit"/>
+		</form>
+		<nav>
+			<hr class="vertical">
+			<ul>
+				<li>
+					<a href="" class="a_button">A</a>
+				</li>
+				<li>
+					<a href="" class="a_button">B</a>
+				</li>
+			</ul>
+		</nav>
+	</header>
+	<div class="area">
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
 	</div>
 </main>
 {% endblock %}
 
+{% block assets %}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
+{% endblock %}
+
 {% block script %}
 <script>
-	// Page script
+	const timeElement = document.getElementById('time');
+	const dateElement = document.getElementById('date');
 	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
 	const defaultOptions = {
 		kl: 'de-de',
@@ -65,8 +75,26 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www_search').addEventListener('submit', function (e) {
-		e.preventDefault();
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+
+	new TimeDisplay(timeElement, {hour: '2-digit', minute: '2-digit'});
+	new DateDisplay(dateElement, {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+	// ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+
+	document.getElementById('wwwForm').addEventListener('submit', function (event) {
+		event.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
@@ -76,7 +104,81 @@ tags:
 		window.open(url, '_blank', 'noopener');
 	});
 
-	// Example of setting options programmatically:
-	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
+	function ongoing() {
+		var now = new Date();
+		var w = Math.floor(now.getDay());
+		var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+		var DNumb = Math.floor(now.getDate());
+		var MNumb = Math.floor(now.getMonth());
+		var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+		var y = Math.floor(now.getYear());
+		if (y < 999) y += 1900;
+
+		var ms = Math.floor(now.getMilliseconds());
+		var s = Math.floor(now.getSeconds());
+		var m = Math.floor(now.getMinutes() + s / 60);
+		var h = Math.floor(now.getHours() + m / 60);
+
+		var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
+		j2000.setUTCFullYear(2000, 0, 1);
+		j2000.setUTCHours(0, 0, 0, 0);
+
+		var utc = new Date();
+		utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+		utc.setUTCHours(h, m, s, ms);
+
+		var utc0 = new Date();
+		utc0.setUTCFullYear(y, MNumb, DNumb);
+		utc0.setUTCHours(0, 0, 0, 0);
+
+		var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+		var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
+
+		var N = jd - 2451545.0;
+		var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
+		var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
+		var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
+		var e = 23.439 - 0.0000004 * N;
+		var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
+
+		var T = (jdUTC0 - 2451545.0) / 36525;
+		var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
+
+		var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
+		var hWGMT = stGMT2 * 15;
+		var hW = hWGMT + 11.9566185772;
+
+		var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
+		var st24 = Math.abs(st - (Math.round(st / 24) * 24));
+		var stH = Math.floor(st24);
+		var stM = Math.floor((st24 % 1) * 60);
+		var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
+
+		const travelWidth = document.body.clientWidth;
+		const travelHeight = document.body.clientHeight;
+		var sunPosX = 0;
+		var sunPosY = 0;
+		var moonPosX = 0;
+		var moonPosY = 0;
+
+		const sun = document.getElementById('sun');
+
+		if (sun) {
+			sun.style.left = (s / 60) * travelWidth;
+			sun.style.top = (m / 60) * travelHeight;
+		}
+
+		/*document.getElementById('time').textContent = '' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2);
+		document.getElementById('day').textContent = D[w];
+		document.getElementById('dayNumb').textContent = DNumb;
+		document.getElementById('month').textContent = M[MNumb];
+		document.getElementById('year').textContent = y;
+
+		document.getElementById('julian').textContent = jd.toFixed(6);
+		document.getElementById('star').textContent = stH + ':' + stM + ':' + stS;
+		document.getElementById('star').textContent = stH + ':' + stM;
+		document.getElementById('star1').textContent = stGMT;
+		document.getElementById('star2').textContent = stGMT2;*/
+	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid
deleted file mode 100644
index be51071..0000000
--- a/source/screens/demo/examples/ui/tile.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Tile
-tags:
-- ui
----
-{% assign bodyClass = 'body_new' -%}
-{% layout 'hippie/app.liquid' %}
-
-{% block body %}
-{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
-<header class="area menu io">
-	<nav>
-		<ul>
-			<li>
-				<a href="" class="a_button">Func 1</a>
-			</li>
-			<li>
-				<a href="" class="a_button">Func 2</a>
-			</li>
-		</ul>
-	</nav>
-</header>
-<div class="area grid">
-	<div class="item">1</div>
-	<div class="item">2</div>
-	<div class="item">3</div>
-	<div class="item">4</div>
-</div>
-{% endblock %}
-
-{%- block script %}
-{{ block.super -}}
-<script>
-	const timeElement = document.getElementById('time');
-	const timeDisplay = new TimeDisplay(timeElement);
-
-	ongoing();
-
-	document.addEventListener('mousemove', (event) => {
-		document
-			.getElementById('log')
-			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-	});
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 5b5944e..2ae3075 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 5b5944e22912d8c4c9bf7b7747a45fb80fea262a
+Subproject commit 2ae30754f0ce21e0de1c229992f4ea1ae82730ba
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index 564e8a3..d2f31f9 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -1,15 +1,111 @@
+@use "sass:color";
+
 @use "../hippie-style/hippie";
 
+$module_top_height: 32px;
+$body_top_space: $module_top_height + hippie.$space_basic;
+
 .body_start {
+	@extend .h_full_view;
+
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
+
 	main {
 		@extend .sec_main_center;
+		@extend %flex_column;
+
+		height: 100%;
 	}
 
-	#www_search {
+	form {
+		flex: 1;
+
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
 			line-height: hippie.$line_text_basic;
 		}
 	}
+
+	.area {
+		display: grid;
+		grid-gap: hippie.$space_basic;
+		flex: 1;
+		// grid-template-rows: repeat(2, 1fr);
+		// grid-template-columns: repeat(2, 1fr);
+		grid-template-areas: "a a";
+		grid-auto-rows: 1fr;
+		grid-auto-columns: 1fr;
+		transition: hippie.$transition_best;
+
+		&:hover {
+			background-color: #999;
+		}
+
+		& > div {
+			// height: unset;
+			border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
+			border-style: dotted;
+			border-width: hippie.$width_border_8;
+			border-radius: hippie.$width_border_8;
+			padding: hippie.$space_basic;
+			background-color: rgb(hippie.$color_back_basic, .5);
+			// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
+			// background-color: gold;
+		}
+	}
+}
+
+#top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: $module_top_height;
+	background-color: rgb(0, 0, 0, .8);
+	z-index: hippie.$z_top;
+
+	div:last-child {
+		flex: 1;
+	}
+
+	p,
+	li {
+		color: #fff;
+	}
+
+	h1 a {
+		color: #000;
+	}
+
+	p,
+	li {
+		margin-top: 8px;
+		margin-bottom: 7px;
+		padding: 0 4px;
+		font-size: 12px;
+		line-height: 17px;
+	}
+
+	nav ul {
+		display: flex;
+		margin: 0 0 0 16px;
+	}
+
+	.brand {
+		height: 36px;
+		background-color: #fff;
+		margin: 0 0 0 128px;
+		padding: 7px 24px;
+		font-size: 16px;
+		line-height: 22px;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.state {
+		margin-right: 16px;
+		text-align: right;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
deleted file mode 100755
index bc4fbcf..0000000
--- a/source/style/modules/ui/_new_module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@use "sass:color";
-
-@use "../../hippie-style/hippie";
-
-$module_top_height: 32px;
-$body_top_space: $module_top_height + hippie.$space_basic;
-
-.body_new {
-	@extend %flex_column;
-	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
-}
-
-.area {
-	transition: hippie.$transition_best;
-
-	&:hover {
-		background-color: #999;
-	}
-}
-
-.grid {
-	display: grid;
-	flex: 1;
-	// grid-template-rows: repeat(2, 1fr);
-	// grid-template-columns: repeat(2, 1fr);
-	grid-template-areas: "a a";
-	grid-auto-rows: 1fr;
-	grid-auto-columns: 1fr;
-}
-
-.item {
-	// height: unset;
-	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
-	border-style: dotted;
-	border-width: hippie.$width_border_8;
-	border-radius: hippie.$width_border_8;
-	padding: hippie.$space_basic;
-	background-color: rgb(hippie.$color_back_basic, .5);
-	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
-	// background-color: gold;
-}
-
-.float {
-	min-height: 50%;
-}
-
-#top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: flex;
-	width: 100%;
-	height: $module_top_height;
-	background-color: rgb(0, 0, 0, .8);
-	z-index: hippie.$z_top;
-
-	div:last-child {
-		flex: 1;
-	}
-
-	p,
-	li {
-		color: #fff;
-	}
-
-	h1 a {
-		color: #000;
-	}
-
-	p,
-	li {
-		margin-top: 8px;
-		margin-bottom: 7px;
-		padding: 0 4px;
-		font-size: 12px;
-		line-height: 17px;
-	}
-
-	nav ul {
-		display: flex;
-		margin: 0 0 0 16px;
-	}
-
-	.brand {
-		height: 36px;
-		background-color: #fff;
-		margin: 0 0 0 128px;
-		padding: 7px 24px;
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.state {
-		margin-right: 16px;
-		text-align: right;
-	}
-}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 8663bfc..f396598 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -4,7 +4,6 @@
 @use "hippie-style/hippie";
 
 @use "modules/ui/frame_module";
-@use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
 @use "modules/ui/gallery_module";

From a83dc59eb2015d21e943399419791966fea58086 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 21 Mar 2026 17:50:12 +0100
Subject: [PATCH 06/12] docs: Add TODO

---
 TODO.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/TODO.md b/TODO.md
index 6af7f1b..5c33350 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,6 +20,9 @@
   - Keep placeholder and demo stuff
   - Move other things
   - Prevent styles to be global
+- Adapt bootstrap utility API
+  - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
+  - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
 
 # JS
 

From 65eec5f6bd87675f7bc59961dc2b9ec4b72091b3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 19:39:23 +0100
Subject: [PATCH 07/12] feat: Rename nav classes

---
 source/screens/demo/examples/start.liquid      | 2 +-
 source/screens/demo/examples/ui/gallery.liquid | 2 +-
 source/screens/demo/examples/ui/table.liquid   | 6 +++---
 source/style/hippie-style                      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 5e3d261..1b4a39c 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -11,7 +11,7 @@ tags:
 {% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
 	<header class="io">
-		<form id="wwwForm" class="group-input" action="https://duckduckgo.com/">
+		<form id="wwwForm" class="group_nav" action="https://duckduckgo.com/">
 			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
 			<input class="button_io" value="Suchen" type="submit"/>
 		</form>
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index 0d372d4..b2871d2 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -12,7 +12,7 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
 					<label class="right" for="setSize">Größe</label>
 				</div>
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 570d1dc..bd0bbbb 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -12,11 +12,11 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group-input">
+				<div class="group_nav">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
+					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,7 +24,7 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group-input">
+				<div class="group_nav">
 					<select id="sltNum" name="position-number">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 2ae3075..848754c 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 2ae30754f0ce21e0de1c229992f4ea1ae82730ba
+Subproject commit 848754c6150df95207dffa36f388c696330cf56b

From cc391bc7e43acba6d3e7f044ca8b115333f3cf8a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 22:21:26 +0100
Subject: [PATCH 08/12] feat: Add toggle for animation to FPV

---
 source/code/game.js                          | 29 +++++++++++++++++---
 source/screens/demo/examples/game/fpv.liquid |  7 +++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/source/code/game.js b/source/code/game.js
index 1492a63..bab55c4 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -27,18 +27,27 @@ class HippieCrosshair {
 		this.mouseX = canvas.width / 2;
 		this.mouseY = canvas.height / 2;
 
+		// Animation control
+		this.isAnimating = true;
+		this.animationFrameId = null;
+
 		this.setupEventListeners();
 		this.animate();
 	}
 
 	setupEventListeners() {
-		document.addEventListener('mousemove', (e) => {
-			this.mouseX = e.clientX;
-			this.mouseY = e.clientY;
+		document.addEventListener('mousemove', (event) => {
+			this.mouseX = event.clientX;
+			this.mouseY = event.clientY;
 		});
 	}
 
 	animate() {
+		if (!this.isAnimating) {
+			this.animationFrameId = requestAnimationFrame(() => this.animate());
+			return;
+		}
+
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
 		if (this.showConnector) {
@@ -49,7 +58,7 @@ class HippieCrosshair {
 		// TODO: Autom. Zug zum Zentrum hin ermöglichen
 		this.drawCrosshair();
 
-		requestAnimationFrame(() => this.animate());
+		this.animationFrameId = requestAnimationFrame(() => this.animate());
 	}
 
 	drawLine() {
@@ -227,4 +236,16 @@ class HippieCrosshair {
 	setLineVisible(visible) {
 		this.showConnector = visible;
 	}
+
+	startAnimation() {
+		this.isAnimating = true;
+	}
+
+	stopAnimation() {
+		this.isAnimating = false;
+	}
+
+	toggleAnimation() {
+		this.isAnimating = !this.isAnimating;
+	}
 }
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index a4f53a7..7dd1b54 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -15,6 +15,9 @@ tags:
 <canvas id="view"></canvas>
 
 <header class="io controls">
+	<nav>
+		<button onclick="toggleAnimation()">Toggle</button>
+	</nav>
 	<nav>
 		<span>Color</span>
 		<button onclick="changeColor('black')">Black</button>
@@ -70,6 +73,10 @@ tags:
 		crosshair.setLineVisible(!crosshair.showConnector);
 	}
 
+	function toggleAnimation() {
+		crosshair.toggleAnimation();
+	}
+
 	window.addEventListener('resize', () => {
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;

From 5480e83e29f60402083fd08bb0d816f033d6bffa Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 22:21:42 +0100
Subject: [PATCH 09/12] feat: Change start links

---
 source/data/start.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/data/start.json b/source/data/start.json
index cc0da22..65bfb14 100644
--- a/source/data/start.json
+++ b/source/data/start.json
@@ -8,7 +8,7 @@
 		"href": "/demo/basics.html"
 	},
 	{
-		"text": "Drag",
-		"href": "/demo/examples/ui/drag.html"
+		"text": "Portal",
+		"href": "/demo/examples/portal.html"
 	}
 ]
\ No newline at end of file

From 45b0aef67d5994bea35c1cbb7b4f3b5f2adf0e3e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 20:43:53 +0100
Subject: [PATCH 10/12] feat: Add background animation to FPV

---
 source/style/modules/_game.scss | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index d9a36f1..1c24812 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,7 +1,34 @@
+@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_game {
 	@extend .h_full_view;
 	background-color: hotpink;
@@ -32,9 +59,10 @@
 	@extend .h_full_view;
 
 	canvas {
+		@include fadeColors($steps, $colors);
+
 		display: block;
 		cursor: none;
-		background-color: lightblue;
 	}
 
 	.controls {

From 4f029a1a73e77fa4d11c4c3c7b085ef18703ec51 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 20:59:14 +0100
Subject: [PATCH 11/12] feat: Change HippieCrosshair

- Change structure for options
- Add mergeOptions method to combine defaults with options
- Rename stuff
---
 source/code/game.js                          | 126 ++++++++++++-------
 source/screens/demo/examples/game/fpv.liquid |  22 ++--
 2 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/source/code/game.js b/source/code/game.js
index bab55c4..9b75f3f 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -5,24 +5,48 @@ class HippieCrosshair {
 
 		this.debug = options.debug || false;
 
+		const defaults = {
+			crosshair: {
+				size: 16,
+				thickness: 2,
+				color: '#000',
+				gapSize: 8,
+				style: 'cross'
+			},
+			connector: {
+				distance: 128, // Distance to draw next symbol
+				spacing: 64, // Space between symbols
+				size: 8,
+				color: '#000',
+				style: 'arrow',
+				visibility: true
+			},
+			line: {
+				color: 'rgba(0, 0, 0, 0.1)',
+				width: 1
+			}
+		};
+		const merged = this.mergeOptions(defaults, options);
+		const { crosshair, connector, line } = merged;
+
 		// Crosshair options
-		this.size = options.size || 16;
-		this.thickness = options.thickness || 2;
-		this.color = options.color || '#000';
-		this.gapSize = options.gapSize || 8;
-		this.style = options.style || 'cross';
+		this.size = crosshair.size;
+		this.thickness = crosshair.thickness;
+		this.color = crosshair.color;
+		this.gapSize = crosshair.gapSize;
+		this.style = crosshair.style;
+
+		// Connector options
+		this.distance = connector.distance;
+		this.spacing = connector.spacing;
+		this.connectorSize = connector.size;
+		this.connectorColor = connector.color;
+		this.connectorStyle = connector.style;
+		this.connectorShow = connector.visibility;
 
 		// Line options
-		this.lineColor = options.lineColor || '#fff';
-		this.lineWidth = options.lineWidth || 1;
-		this.showConnector = options.showConnector !== false;
-
-		// Symbol options
-		this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
-		this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
-		this.symbolSize = options.symbolSize || 8;
-		this.symbolColor = options.symbolColor || '#000';
-		this.symbolStyle = options.symbolStyle || 'arrow';
+		this.lineColor = line.color || '#fff';
+		this.lineWidth = line.width || 1;
 
 		this.mouseX = canvas.width / 2;
 		this.mouseY = canvas.height / 2;
@@ -35,6 +59,22 @@ class HippieCrosshair {
 		this.animate();
 	}
 
+	mergeOptions(defaults, options) {
+		const merged = JSON.parse(JSON.stringify(defaults));
+
+		if (options.crosshair) {
+			Object.assign(merged.crosshair, options.crosshair);
+		}
+		if (options.connector) {
+			Object.assign(merged.connector, options.connector);
+		}
+		if (options.line) {
+			Object.assign(merged.line, options.line);
+		}
+
+		return merged;
+	}
+
 	setupEventListeners() {
 		document.addEventListener('mousemove', (event) => {
 			this.mouseX = event.clientX;
@@ -50,7 +90,7 @@ class HippieCrosshair {
 
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-		if (this.showConnector) {
+		if (this.connectorShow) {
 			if (this.debug) this.drawLine();
 			this.drawConnector();
 		}
@@ -80,40 +120,38 @@ class HippieCrosshair {
 
 		const dx = this.mouseX - centerX;
 		const dy = this.mouseY - centerY;
-		const distance = Math.sqrt(dx * dx + dy * dy);
+		const delta = Math.sqrt(dx * dx + dy * dy);
 
-		// Only draw symbols if cursor is far enough from center
-		if (distance < this.symbolDistance) {
+		// Only draw connectors if cursor is far enough from center
+		if (delta < this.distance) {
 			return;
 		}
 
 		const angle = Math.atan2(dy, dx);
+		const count = Math.floor((delta - this.distance) / this.spacing);
 
-		// Calculate how many symbols to draw
-		const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
+		for (let i = 0; i < count; i++) {
+			const distance = this.distance + (i * this.spacing);
+			const x = centerX + Math.cos(angle) * distance;
+			const y = centerY + Math.sin(angle) * distance;
 
-		for (let i = 0; i < symbolCount; i++) {
-			const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
-			const symbolX = centerX + Math.cos(angle) * symbolDistance;
-			const symbolY = centerY + Math.sin(angle) * symbolDistance;
-
-			this.drawSymbol(symbolX, symbolY, angle);
+			this.drawSymbol(x, y, angle);
 		}
 	}
 
 	drawSymbol(x, y, angle = 0) {
-		this.ctx.fillStyle = this.symbolColor;
-		this.ctx.strokeStyle = this.symbolColor;
+		this.ctx.fillStyle = this.connectorColor;
+		this.ctx.strokeStyle = this.connectorColor;
 		this.ctx.lineWidth = 1;
 
-		switch (this.symbolStyle) {
+		switch (this.connectorStyle) {
 			case 'circle':
 				this.ctx.beginPath();
-				this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
+				this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2);
 				this.ctx.fill();
 				break;
 			case 'diamond':
-				const size = this.symbolSize - (this.symbolSize / 4);
+				const size = this.connectorSize - (this.connectorSize / 4);
 				this.ctx.beginPath();
 				this.ctx.moveTo(x, y - size);
 				this.ctx.lineTo(x + size, y);
@@ -124,10 +162,10 @@ class HippieCrosshair {
 				break;
 			case 'square':
 				this.ctx.fillRect(
-					x - this.symbolSize / 2,
-					y - this.symbolSize / 2,
-					this.symbolSize,
-					this.symbolSize
+					x - this.connectorSize / 2,
+					y - this.connectorSize / 2,
+					this.connectorSize,
+					this.connectorSize
 				);
 				break;
 			case 'arrow':
@@ -137,7 +175,7 @@ class HippieCrosshair {
 	}
 
 	arrow(x, y, angle) {
-		const size = this.symbolSize - (this.symbolSize / 4);
+		const size = this.connectorSize - (this.connectorSize / 4);
 
 		this.ctx.save();
 		this.ctx.translate(x, y);
@@ -221,20 +259,20 @@ class HippieCrosshair {
 		this.style = style;
 	}
 
-	setColor(color) {
+	setCrosshairColor(color) {
 		this.color = color;
 	}
 
-	setSymbolStyle(style) {
-		this.symbolStyle = style;
+	setConnectorStyle(style) {
+		this.connectorStyle = style;
 	}
 
-	setSymbolColor(color) {
-		this.symbolColor = color;
+	setConnectorColor(color) {
+		this.connectorColor = color;
 	}
 
-	setLineVisible(visible) {
-		this.showConnector = visible;
+	setConnectorVisibility(visible) {
+		this.connectorShow = visible;
 	}
 
 	startAnimation() {
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index 7dd1b54..1a1fa13 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -33,12 +33,12 @@ tags:
 	</nav>
 	<nav>
 		<span>Connector</span>
-		<button onclick="toggleLine()">Toggle</button>
+		<button onclick="toggleConnector()">Toggle</button>
 		<hr class="vertical">
-		<button onclick="changeSymbolStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
-		<button onclick="changeSymbolStyle('square')"><i class="bi bi-square-fill"></i></button>
-		<button onclick="changeSymbolStyle('circle')"><i class="bi bi-circle-fill"></i></button>
-		<button onclick="changeSymbolStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
+		<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
+		<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
+		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
+		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
 	</nav>
 </header>
 {% endblock %}
@@ -59,18 +59,18 @@ tags:
 		crosshair.setCrosshairStyle(style);
 	}
 
-	function changeSymbolStyle(style) {
-		crosshair.setSymbolStyle(style);
+	function changeConnectorStyle(style) {
+		crosshair.setConnectorStyle(style);
 	}
 
 	function changeColor(color) {
-		crosshair.setColor(color);
-		crosshair.setSymbolColor(color);
+		crosshair.setCrosshairColor(color);
+		crosshair.setConnectorColor(color);
 		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
 	}
 
-	function toggleLine() {
-		crosshair.setLineVisible(!crosshair.showConnector);
+	function toggleConnector() {
+		crosshair.setConnectorVisibility(!crosshair.connectorShow);
 	}
 
 	function toggleAnimation() {

From a56b8f8ca719710bf9bf24e22575473477d2da7c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 23:05:09 +0100
Subject: [PATCH 12/12] feat: New style for HippieCrosshair

---
 source/code/game.js                          | 26 +++++++++++++++++++-
 source/screens/demo/examples/game/fpv.liquid |  1 +
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/source/code/game.js b/source/code/game.js
index 9b75f3f..b961fdb 100644
--- a/source/code/game.js
+++ b/source/code/game.js
@@ -208,6 +208,9 @@ class HippieCrosshair {
 			case 'dot':
 				this.dot();
 				break;
+			case 'level':
+				this.level();
+				break;
 		}
 	}
 
@@ -244,7 +247,7 @@ class HippieCrosshair {
 		// Inner dot
 		this.ctx.fillStyle = this.color;
 		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.thickness * 1.5, 0, Math.PI * 2);
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
 		this.ctx.fill();
 	}
 
@@ -255,6 +258,27 @@ class HippieCrosshair {
 		this.ctx.fill();
 	}
 
+	level() {
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI);
+		this.ctx.stroke();
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY);
+		this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY);
+		this.ctx.stroke();
+
+		this.ctx.fillStyle = this.color;
+		this.ctx.beginPath();
+		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
+		this.ctx.fill();
+	}
+
 	setCrosshairStyle(style) {
 		this.style = style;
 	}
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index 1a1fa13..a4c61a6 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/source/screens/demo/examples/game/fpv.liquid
@@ -30,6 +30,7 @@ tags:
 		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
 		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
 		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
+		<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
 	</nav>
 	<nav>
 		<span>Connector</span>