source/code/hippie/app.js

@@ -657,10 +657,6 @@ class RandomPixelPlaceholder {
 	}
 }
 
-function sample(array) {
-	return array[Math.floor(Math.random() * array.length)];
-}
-
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit a66010a9ed535ad8ca5bbb7faed222861fc40ad4
+Subproject commit 80a0deedd5ec1858c2f9f201412da282462c3a99

source/style/modules/game/_tfw.scss

@@ -30,8 +30,7 @@
 		font-weight: bold;
 	}
 
-	.subtle,
+	.subtle {
-	hgroup p {
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
@@ -46,13 +45,10 @@
 		position: relative;
 		overflow: hidden;
 
-		h2, span {
-			color: white;
-		}
-
 		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
+			color: white;
 		}
 
 		canvas, img {
@@ -90,23 +86,11 @@
 			gap: hippie.$space_double;
 			min-height: 0;
 
-			nav {
+			& > div:last-child {
-				flex: 1;
+				flex: 2;
-				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;
-				}
 			}
 
-			& > div {
+			& > div:nth-child(2) {
 				flex: 4;
 				display: flex;
 				flex-flow: column nowrap;
@@ -124,15 +108,19 @@
 				}
 			}
 
-			aside {
+			nav {
-				flex: 2;
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
 
-				.background {
+				input:not([type="checkbox"], [type="range"]) {
-					border-bottom: 1px solid hippie.basic_color(echo);
+					@extend .input_io;
 				}
 
-				& > div {
+				select {
-					display: none;
+					@extend .io_select;
 				}
 			}
 
@@ -146,6 +134,7 @@
 				}
 
 				td {
+					height: 4em;
 					vertical-align: top;
 
 					span {
@@ -154,24 +143,12 @@
 						color: white;
 					}
 
-					&.subtle {
+					&:last-child {
 						text-align: center;
 						vertical-align: middle;
 					}
 				}
 
-				&#questSelection {
-					display: none;
-				}
-
-				&[data-type="faction"] td {
-					height: 6em;
-				}
-
-				&[data-type="quest"] td {
-					height: 4em;
-				}
-
 				.l {
 					width: 30%;
 				}
@@ -180,11 +157,7 @@
 					width: 50%;
 				}
 
-				.g {
+				.t, .s {
-					width: 40%;
-				}
-
-				.t, .s, .c, .f {
 					width: 20%;
 				}
 			}
@@ -200,6 +173,10 @@
 		}
 	}
 
+	.quest {
+		opacity: 0;
+	}
+
 	footer *:not(button[data-action="back"]) {
 		display: none;
 	}

source/view/demo/art/squares2.liquid

@@ -1,178 +0,0 @@
----
-title: Squares²
-tags:
-- demoArt
----
-{% layout 'hippie/simple.liquid' %}
-
-{% block style %}
-<style>
-	canvas {
-		display: block;
-	}
-</style>
-{% endblock %}
-
-{% block body %}{% endblock %}
-
-{% block script %}
-<script>
-	function fillCanvasWithSquares(maxSquareSize = 128, steps = 3, percentages = [40, 30, 20]) {
-		const canvas = document.createElement('canvas');
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		document.body.appendChild(canvas);
-
-		const ctx = canvas.getContext('2d');
-		const colors = [
-			'#e1d170',
-			'#cfb16a',
-			'#8b3050',
-			'#683657',
-			'#354063',
-			'#4b5776',
-			'#c8dbe2',
-			'#90bac2',
-			'#7daeb7'
-		];
-		/*const colors = [
-			'#fad803',
-			'#f2af13',
-			'#d30a51',
-			'#8e1f68',
-			'#273f8b',
-			'#3c579a',
-			'#b7e0f0',
-			'#6bc7d9',
-			'#52bed1'
-		];*/
-
-		function isPowerOfTwo(n) {
-			return n > 0 && (n & (n - 1)) === 0;
-		}
-
-		if (!isPowerOfTwo(maxSquareSize)) {
-			console.error('maxSquareSize must be a power of 2');
-			return;
-		}
-
-		if (steps < 1) {
-			console.error('steps must be at least 1');
-			return;
-		}
-
-		// Generate sizes by halving for each step
-		const sizes = [];
-		for (let i = 0; i < steps; i++) {
-			sizes.push(maxSquareSize / Math.pow(2, i));
-		}
-
-		// Validate percentages array
-		if (!Array.isArray(percentages)) {
-			console.error('percentages must be an array');
-			return;
-		}
-
-		if (percentages.length !== sizes.length - 1) {
-			console.warn(`percentages array should have ${sizes.length - 1} elements. Adjusting...`);
-			percentages = percentages.slice(0, sizes.length - 1);
-			while (percentages.length < sizes.length - 1) {
-				percentages.push(50);
-			}
-		}
-
-		const minSize = sizes[sizes.length - 1];
-
-		let grid = Array(Math.ceil(canvas.height / minSize))
-			.fill(null)
-			.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
-
-		function canPlace(gridX, gridY, sizeInCells) {
-			if (gridY + sizeInCells > grid.length || gridX + sizeInCells > grid[0].length) return false;
-			for (let y = gridY; y < gridY + sizeInCells; y++) {
-				for (let x = gridX; x < gridX + sizeInCells; x++) {
-					if (grid[y][x]) return false;
-				}
-			}
-			return true;
-		}
-
-		function markOccupied(gridX, gridY, sizeInCells) {
-			for (let y = gridY; y < gridY + sizeInCells; y++) {
-				for (let x = gridX; x < gridX + sizeInCells; x++) {
-					grid[y][x] = true;
-				}
-			}
-		}
-
-		function draw(gridX, gridY, sizeInPixels) {
-			const x = gridX * minSize;
-			const y = gridY * minSize;
-			const type = Math.random() < 0.5;
-
-			ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
-			ctx.fillRect(x, y, sizeInPixels, sizeInPixels);
-			// TODO: Linie anpassen und wiederholen
-			ctx.strokeStyle = '#404040';
-			// ctx.strokeStyle = type ? '#fff' : '#000';
-			ctx.lineWidth = 1;
-			ctx.strokeRect(x, y, sizeInPixels, sizeInPixels);
-		}
-
-		function fill() {
-			// Process each size with its corresponding percentage
-			for (let sizeIndex = 0; sizeIndex < sizes.length; sizeIndex++) {
-				const size = sizes[sizeIndex];
-				const sizeInCells = size / minSize;
-				const percentage = sizeIndex < percentages.length ? percentages[sizeIndex] : 0;
-
-				if (sizeIndex < sizes.length - 1) {
-					// For all sizes except the last, apply percentage
-					const positions = [];
-					for (let gridY = 0; gridY < grid.length; gridY++) {
-						for (let gridX = 0; gridX < grid[0].length; gridX++) {
-							if (canPlace(gridX, gridY, sizeInCells)) {
-								positions.push({ gridX, gridY });
-							}
-						}
-					}
-					positions.sort(() => Math.random() - 0.5);
-
-					const target = Math.floor(positions.length * percentage / 100);
-					for (let i = 0; i < target; i++) {
-						const { gridX, gridY } = positions[i];
-						if (canPlace(gridX, gridY, sizeInCells)) {
-							markOccupied(gridX, gridY, sizeInCells);
-							draw(gridX, gridY, size);
-						}
-					}
-				} else {
-					// Fill remaining space with the smallest size
-					for (let gridY = 0; gridY < grid.length; gridY++) {
-						for (let gridX = 0; gridX < grid[0].length; gridX++) {
-							if (canPlace(gridX, gridY, sizeInCells)) {
-								markOccupied(gridX, gridY, sizeInCells);
-								draw(gridX, gridY, size);
-							}
-						}
-					}
-				}
-			}
-		}
-
-		fill();
-
-		window.addEventListener('resize', () => {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
-			grid = Array(Math.ceil(canvas.height / minSize))
-				.fill(null)
-				.map(() => Array(Math.ceil(canvas.width / minSize)).fill(false));
-			ctx.clearRect(0, 0, canvas.width, canvas.height);
-			fill();
-		});
-	}
-
-	fillCanvasWithSquares(128, 4, [2, 24, 64]);
-</script>
-{% endblock %}

source/view/demo/basics.liquid

@@ -561,7 +561,7 @@ order: 2
 		<h2>Änderungen</h2>
 		<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser
 			nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
-		<aside class="left">
+		<aside>
 			<ins>Dies ist auch wichtig.</ins>
 		</aside>
 		<p>Der Inhalt wird dann mit

source/view/demo/components.liquid

@@ -65,7 +65,7 @@ order: 3
 		<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
 		<pre class="pre_code"><code>aside.right+div.bside</code></pre>
 		<section>
-			<aside class="right">Seitenbereich, rechts ausgerichtet.</aside>
+			<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
 			<div class="bside">Hauptbereich</div>
 		</section>
 		<h2>&lt;h*&gt;</h2>

source/view/demo/examples/10print.liquid

@@ -1,7 +1,7 @@
 ---
 title: 10print
 tags:
-- demoArt
+- demoExample
 ---
 {% layout 'hippie/simple.liquid' %}
 

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

@@ -38,45 +38,7 @@ tags:
 		</nav>
 		<div>
 			<div>
-				<table id="factionSelection" data-type="faction">
+				<table id="questSelection">
-					<colgroup>
-						<col class="g">
-						<col class="c">
-						<col class="f">
-						<col class="s">
-					</colgroup>
-					<tr>
-						<th>Giver</th>
-						<th>Category</th>
-						<th>Faction</th>
-						<th>Status</th>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Scavengers</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Scav</td>
-						<td class="subtle">Open</td>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>Eastern Consulate</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Eurasia</td>
-						<td class="subtle">Closed</td>
-					</tr>
-					<tr>
-						<td class="background">
-							<span>СПЕЦНАЗ Commission</span>
-						</td>
-						<td class="subtle">All</td>
-						<td class="subtle">Euruska</td>
-						<td class="subtle">Open</td>
-					</tr>
-				</table>
-				<table id="questSelection" data-type="quest">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -104,7 +66,7 @@ tags:
 				</table>
 			</div>
 			<div>
-				<table id="questActive" data-type="quest">
+				<table id="questActive">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -130,21 +92,7 @@ tags:
 				</table>
 			</div>
 		</div>
-		<aside>
+		<div>
-			<div class="faction">
-				<div class="background">
-					<hgroup>
-						<h2>Western Embassy</h2>
-						<p>Europa</p>
-					</hgroup>
-				</div>
-				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
-				<hr class="dotted">
-				<p>Collect Rat King residue.</p>
-				<hr>
-				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
-					rating</p>
-			</div>
 			<div class="quest">
 				<div class="background">
 					<h2>King Of Kings</h2>
@@ -156,7 +104,7 @@ tags:
 				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
 					rating</p>
 			</div>
-		</aside>
+		</div>
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
@@ -259,10 +207,8 @@ tags:
 
 	// TODO: Allgemeinere Umsetzung anstreben
 	viewQuest.addEventListener('click', (event) => {
-		const tableTarget = event.target.closest('table');
 		const rows = viewQuest.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
-		const rowFaction = event.target.closest('#factionSelection tr');
 		const rowSelection = event.target.closest('#questSelection tr');
 		const rowActive = event.target.closest('#questActive tr:not(.complete)');
 		const rowComplete = event.target.closest('#questActive tr.complete');
@@ -272,26 +218,14 @@ tags:
 
 		if (event.button !== 0) return;
 
+		// TODO: Ziele unterscheiden
 		if (rowTarget) {
-			const rowsRemain = Array.from(rows).filter(
+			for (const row of rows) {
-				element => element !== rowTarget
+				row.classList.remove('active');
-			);
+			}
-			const type = tableTarget.dataset.type;
-			const tableSibling = tableTarget.nextElementSibling;
-
-			rowsRemain.forEach((element) => {
-				element.classList.remove('active');
-			});
 
 			rowTarget.classList.add('active');
-
+			viewQuest.querySelector('.quest').style.opacity = 1;
-			viewQuest.querySelector('aside > :not(.' + type + ')').style.display = 'none';
-			viewQuest.querySelector('aside > .' + type).style.display = 'block';
-
-			if (rowFaction) {
-				tableTarget.style.display = 'none';
-				tableSibling.style.display = 'table';
-			}
 
 			if (rowSelection) {
 				buttonClaim.style.display = 'none';
@@ -310,8 +244,6 @@ tags:
 				buttonAbandon.style.display = 'none';
 				buttonClaim.style.display = 'inline-block';
 			}
-		} else {
-			deselector('quest');
 		}
 	});
 
@@ -329,23 +261,5 @@ tags:
 	});
 
 	new Menu(menu);
-
-	function deselector(type) {
-		const id = 'view' + capitalizeFirstLetter(type);
-		const view = document.getElementById(id);
-		const rows = view.querySelectorAll('tr');
-		const buttonAccept = view.querySelector('footer button[data-action=accept]');
-		const buttonAbandon = view.querySelector('footer button[data-action=abandon]');
-		const buttonClaim = view.querySelector('footer button[data-action=claim]');
-
-		for (const row of rows) {
-			row.classList.remove('active');
-		}
-
-		view.querySelector('.' + type).style.opacity = 0;
-		buttonAbandon.style.display = 'none';
-		buttonAccept.style.display = 'none';
-		buttonClaim.style.display = 'none';
-	}
 </script>
 {% endblock %}

source/view/demo/examples/matrix.liquid

@@ -1,7 +1,7 @@
 ---
 title: Matrix
 tags:
-- demoArt
+- demoExample
 ---
 {% layout 'hippie/simple.liquid' %}
 

source/view/demo/index.liquid

@@ -64,17 +64,6 @@ title: Index
 					{% endfor %}
 				</ul>
 			</section>
-			<section>
-				<h3>Art</h3>
-				<ul class="block link">
-					{% assign artByTitle = collections.demoArt | sort: 'data.title' %}
-					{% for link in artByTitle %}
-						<li>
-							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
-						</li>
-					{% endfor %}
-				</ul>
-			</section>
 		</div>
 	</div>
 </div>