feat: Change colors for square2

- Fill is now determined by max size, steps and percentage
- Steps reduce size by half
- Percentages are given for every but the last step

source/code/hippie/app.js

@@ -657,6 +657,10 @@ 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 80a0deedd5ec1858c2f9f201412da282462c3a99
+Subproject commit a66010a9ed535ad8ca5bbb7faed222861fc40ad4

source/style/modules/game/_tfw.scss

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

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

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

source/view/demo/art/matrix.liquid

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

source/view/demo/art/squares2.liquid

@@ -0,0 +1,178 @@
+---
+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>
+		<aside class="left">
 			<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, recht ausgerichtet.</aside>
+			<aside class="right">Seitenbereich, rechts ausgerichtet.</aside>
 			<div class="bside">Hauptbereich</div>
 		</section>
 		<h2>&lt;h*&gt;</h2>

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

@@ -38,7 +38,45 @@ tags:
 		</nav>
 		<div>
 			<div>
-				<table id="questSelection">
+				<table id="factionSelection" data-type="faction">
+					<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">
@@ -66,7 +104,7 @@ tags:
 				</table>
 			</div>
 			<div>
-				<table id="questActive">
+				<table id="questActive" data-type="quest">
 					<colgroup>
 						<col class="l">
 						<col class="q">
@@ -92,7 +130,21 @@ tags:
 				</table>
 			</div>
 		</div>
-		<div>
+		<aside>
+			<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>
@@ -104,7 +156,7 @@ tags:
 				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
 					rating</p>
 			</div>
-		</div>
+		</aside>
 	</main>
 	<footer class="io">
 		<button data-action="back">Back</button>
@@ -207,8 +259,10 @@ 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');
@@ -218,14 +272,26 @@ tags:
 
 		if (event.button !== 0) return;
 
-		// TODO: Ziele unterscheiden
 		if (rowTarget) {
-			for (const row of rows) {
-				row.classList.remove('active');
-			}
+			const rowsRemain = Array.from(rows).filter(
+				element => element !== rowTarget
+			);
+			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';
@@ -244,6 +310,8 @@ tags:
 				buttonAbandon.style.display = 'none';
 				buttonClaim.style.display = 'inline-block';
 			}
+		} else {
+			deselector('quest');
 		}
 	});
 
@@ -261,5 +329,23 @@ 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/index.liquid

@@ -64,6 +64,17 @@ 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>