From 19577eca8cc64a94e783bec101032621ac7a6a41 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 4 Apr 2026 09:21:34 +0200
Subject: [PATCH] feat: Change game structure

- New template
- Rename screens
- New partial for menu
- New data file for menu content
- Separate styles
---
 source/data/menu.json                         |  18 ++
 source/screens/demo/examples/game/menu.liquid |  15 +-
 .../examples/game/{fpv.liquid => mwo.liquid}  |   7 +-
 .../examples/game/{new.liquid => tfw.liquid}  |  10 +-
 source/style/modules/_game.scss               | 197 +-----------------
 source/style/modules/game/_mwo.scss           |  48 +++++
 source/style/modules/game/_tfw.scss           | 155 ++++++++++++++
 source/style/ui.scss                          |   2 +
 source/templates/hippie/game.liquid           |  15 ++
 .../hippie/partials/game-menu.liquid          |  15 ++
 10 files changed, 261 insertions(+), 221 deletions(-)
 create mode 100644 source/data/menu.json
 rename source/screens/demo/examples/game/{fpv.liquid => mwo.liquid} (96%)
 rename source/screens/demo/examples/game/{new.liquid => tfw.liquid} (94%)
 create mode 100644 source/style/modules/game/_mwo.scss
 create mode 100644 source/style/modules/game/_tfw.scss
 create mode 100644 source/templates/hippie/game.liquid
 create mode 100644 source/templates/hippie/partials/game-menu.liquid

diff --git a/source/data/menu.json b/source/data/menu.json
new file mode 100644
index 0000000..f437630
--- /dev/null
+++ b/source/data/menu.json
@@ -0,0 +1,18 @@
+[
+	{
+		"text": "New",
+		"href": "#new"
+	},
+	{
+		"text": "Continue",
+		"href": "#continue"
+	},
+	{
+		"text": "Settings",
+		"href": "#options"
+	},
+	{
+		"text": "Leave",
+		"href": "/"
+	}
+]
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid
index 34e00e7..c29a2ed 100644
--- a/source/screens/demo/examples/game/menu.liquid
+++ b/source/screens/demo/examples/game/menu.liquid
@@ -7,20 +7,7 @@ tags:
 {% 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.html">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>
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/mwo.liquid
similarity index 96%
rename from source/screens/demo/examples/game/fpv.liquid
rename to source/screens/demo/examples/game/mwo.liquid
index a4c61a6..ccce96e 100644
--- a/source/screens/demo/examples/game/fpv.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 %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/new.liquid b/source/screens/demo/examples/game/tfw.liquid
similarity index 94%
rename from source/screens/demo/examples/game/new.liquid
rename to source/screens/demo/examples/game/tfw.liquid
index a799fef..4736098 100644
--- a/source/screens/demo/examples/game/new.liquid
+++ b/source/screens/demo/examples/game/tfw.liquid
@@ -1,8 +1,10 @@
 ---
 title: TFW
+tags:
+- game
 ---
 {% assign bodyClass = 'body_tfw' -%}
-{% layout 'hippie/simple.liquid' %}
+{% layout 'hippie/game.liquid' %}
 
 {% block body %}
 <header class="io">
@@ -106,12 +108,6 @@ title: TFW
 </div>
 {% 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 %}
 {{ block.super -}}
 <script>
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 7ad3f4d..0c679d5 100644
--- 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_menu {
 	@extend .h_full_view;
-	background-color: hotpink;
+	background-color: hippie.basic_color(delta);
 
 	footer {
 		@extend .pos_abs;
@@ -54,172 +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;
-	}
-}
-
-.body_tfw {
-	@extend .h_full_view;
-
-	display: flex;
-	flex-flow: column nowrap;
-
-	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;
-		text-transform: uppercase;
-	}
-
-	.success {
-		color: hippie.basic_color(alpha);
-	}
-
-	& > 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;
-		}
-	}
-
-	& > div {
-		display: flex;
-		flex-flow: column nowrap;
-		flex: auto;
-		min-height: 0;
-
-		& > main {
-			display: flex;
-			flex-flow: row nowrap;
-			flex: auto;
-			gap: hippie.$space_double;
-			min-height: 0;
-
-			& > div:first-child {
-				flex: 1;
-			}
-
-			& > 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 {
-				& > *:not(:last-child) {
-					margin-bottom: hippie.$space_basic;
-				}
-
-				input:not([type="checkbox"], [type="range"]) {
-					@extend .input_io;
-				}
-			}
-
-			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;
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/source/style/modules/game/_mwo.scss b/source/style/modules/game/_mwo.scss
new file mode 100644
index 0000000..89259ff
--- /dev/null
+++ 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;
+	}
+}
diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss
new file mode 100644
index 0000000..8931705
--- /dev/null
+++ b/source/style/modules/game/_tfw.scss
@@ -0,0 +1,155 @@
+@use 'sass:list';
+@use "sass:map";
+
+@use "../../hippie-style/hippie";
+
+.body_tfw {
+	@extend .h_full_view;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	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;
+		text-transform: uppercase;
+	}
+
+	.success {
+		color: hippie.basic_color(alpha);
+	}
+
+	& > 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;
+		}
+	}
+
+	& > div {
+		display: flex;
+		flex-flow: column nowrap;
+		flex: auto;
+		min-height: 0;
+
+		& > main {
+			display: flex;
+			flex-flow: row nowrap;
+			flex: auto;
+			gap: hippie.$space_double;
+			min-height: 0;
+
+			& > div:first-child {
+				flex: 1;
+			}
+
+			& > 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 {
+				& > *:not(:last-child) {
+					margin-bottom: hippie.$space_basic;
+				}
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+			}
+
+			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;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f396598..97d7c8f 100644
--- 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;
diff --git a/source/templates/hippie/game.liquid b/source/templates/hippie/game.liquid
new file mode 100644
index 0000000..37c890b
--- /dev/null
+++ 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 %}
diff --git a/source/templates/hippie/partials/game-menu.liquid b/source/templates/hippie/partials/game-menu.liquid
new file mode 100644
index 0000000..c59d802
--- /dev/null
+++ 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>