feat: Update hippie-style

- Use new RandomPixelPlaceholder
- Add first event for view

source/code/hippie/app.js

@@ -559,28 +559,59 @@ const delay = ms => new Promise(res => setTimeout(res, ms));
 class RandomPixelCanvas {
 	constructor(containerElement, options = {}) {
 		this.container = containerElement;
+class RandomPixelPlaceholder {
+	constructor(parent, options = {}) {
+		this.container = parent;
 		this.width = options.width || 400;
 		this.height = options.height || 300;
 		this.colors = options.colors || ['#000000', '#ffffff'];
 		this.filter = options.filter || '';
-		this.canvas = this.createCanvas();
+		this.type = options.type || 'canvas'; // 'canvas' or 'img'
+		this.element = this.createElement();
 
-		this.fillWithRandomPixels();
+		this.addContextToElement();
 	}
 
-	createCanvas() {
+	createElement() {
-		const canvas = document.createElement('canvas');
+		if (this.type === 'img') {
-		canvas.width = this.width;
+			const img = document.createElement('img');
-		canvas.height = this.height;
+			img.style.filter = this.filter;
-		canvas.style.filter = this.filter;
 
-		this.container.appendChild(canvas);
+			this.container.appendChild(img);
 
-		return canvas;
+			return img;
+		} else {
+			const canvas = document.createElement('canvas');
+			canvas.width = this.width;
+			canvas.height = this.height;
+			canvas.style.filter = this.filter;
+
+			this.container.appendChild(canvas);
+
+			return canvas;
+		}
 	}
 
-	fillWithRandomPixels() {
+	addContextToElement() {
-		const ctx = this.canvas.getContext('2d');
+		if (this.type === 'img') {
+			// Create intermediate canvas
+			const canvas = document.createElement('canvas');
+			canvas.width = this.width;
+			canvas.height = this.height;
+
+			this.fillWithRandomPixels(canvas);
+
+			// Convert canvas to image data URL and set as img src
+			this.element.src = canvas.toDataURL();
+			this.element.width = this.width;
+			this.element.height = this.height;
+		} else {
+			this.fillWithRandomPixels(this.element);
+		}
+	}
+
+	fillWithRandomPixels(canvas) {
+		const ctx = canvas.getContext('2d');
 		const imageData = ctx.createImageData(this.width, this.height);
 		const data = imageData.data;
 

source/screens/demo/examples/clock.liquid

@@ -61,6 +61,7 @@ tags:
 			this.#resize();
 			window.addEventListener('resize', () => this.#resize());
 
+			// console.debug(this);
 			if (this.options.debug) {
 				console.group('Clock');
 				console.info('\nOptions:', this.options, '\n\n');
@@ -77,13 +78,16 @@ tags:
 					part.element.style.width = this.options.size + 'px';
 				}
 
-				part.element.width = part.element.offsetWidth;
+				// part.element.width = part.element.offsetWidth;
-				part.element.height = part.element.offsetHeight;
+				// part.element.height = part.element.offsetHeight;
+				part.element.width = this.options.size;
+				part.element.height = this.options.size;
 
 				this.draw();
 			});
 		}
 
+		// TODO: Zuweisung von shapes zu parts anpassen
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
@@ -303,7 +307,6 @@ tags:
 		}
 
 		#createContext(names) {
-			let parts = [];
 			const wrap = document.createElement('div');
 
 			wrap.style.position = 'relative';
@@ -444,6 +447,7 @@ tags:
 	clock.draw();
 
 	// TODO: Alternative mit requestAnimationFrame()
+	// TODO: Möglichkeit für Start/Stop wie bei TimeDisplay
 	setInterval(() => {
 		clock.update();
 	}, 1000);

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

@@ -25,8 +25,8 @@ tags:
 	<main>
 		<nav>
 			<div class="important">Filter</div>
-			<input placeholder="Search" type="text">
+			<input placeholder="Search" aria-label="search" type="text">
-			<select name="type">
+			<select name="type" aria-label="type">
 				<option value="" selected>Type</option>
 				<option value="all">All</option>
 				<option value="assasin">Assasination</option>
@@ -89,15 +89,17 @@ tags:
 			</div>
 		</div>
 		<div>
-			<div class="background">
+			<div class="quest">
-				<h2>King Of Kings</h2>
+				<div class="background">
+					<h2>King Of Kings</h2>
+				</div>
+				<p>A hijacked medium mech dubbed the "Rat King" ...</p>
+				<hr class="dotted">
+				<p>Collect Rat King residue.</p>
+				<hr>
+				<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
+					rating</p>
 			</div>
-			<p>A hijacked medium mech dubbed the "Rat King" ...</p>
-			<hr class="dotted">
-			<p>Collect Rat King residue.</p>
-			<hr>
-			<p>Multiple rig container upgrades, 5000&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
-				rating</p>
 		</div>
 	</main>
 	<footer class="io">
@@ -114,6 +116,7 @@ tags:
 <script>
 	const menu = document.querySelector('body > header');
 	const placeholder = document.querySelectorAll('.background');
+	const viewQuest = document.getElementById('viewQuest');
 
 	class Menu {
 		constructor(element, options = {}) {
@@ -139,6 +142,7 @@ tags:
 			this.changeView(this.default);
 		}
 
+		// TODO: Sollte auch die Menüauswahl anpassen
 		changeView(type) {
 			console.debug(type);
 			const id = 'view' + capitalizeFirstLetter(type);
@@ -195,15 +199,35 @@ tags:
 		};
 	}
 
+	// TODO: Allgemeinere Umsetzung anstreben
+	viewQuest.addEventListener('click', (event) => {
+		const rows = viewQuest.querySelectorAll('tr');
+		const rowTarget = event.target.closest('tr');
+
+		if (event.button !== 0) return;
+
+		// TODO: Ziele unterscheiden
+		if (rowTarget) {
+			for (const row of rows) {
+				row.classList.remove('active');
+			}
+
+			rowTarget.classList.add('active');
+			document.querySelector('.quest').style.opacity = 1;
+			document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
+		}
+	});
+
 	placeholder.forEach(element => {
 		const hue = randomIntFrom(0, 360);
 		const grayscale = randomFloatFrom(0, 1);
 
-		new RandomPixelCanvas(element, {
+		new RandomPixelPlaceholder(element, {
-			width: Math.floor(element.parentElement.clientWidth),
+			width: Math.floor(element.clientWidth),
-			height: Math.floor(element.parentElement.clientHeight),
+			height: Math.floor(element.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
+			type: 'img'
 		});
 	});
 

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 848754c6150df95207dffa36f388c696330cf56b
+Subproject commit 80a0deedd5ec1858c2f9f201412da282462c3a99

source/style/modules/game/_tfw.scss

@@ -44,13 +44,13 @@
 		position: relative;
 		overflow: hidden;
 
-		*:not(canvas) {
+		*:not(canvas, img) {
 			z-index: map.get(hippie.$z-indexes, "content-bottom");
 			position: relative;
 			color: white;
 		}
 
-		canvas {
+		canvas, img {
 			z-index: map.get(hippie.$z-indexes, "default");
 			position: absolute;
 			top: 0;
@@ -133,7 +133,6 @@
 				}
 
 				td {
-					position: relative;
 					height: 4em;
 					vertical-align: top;
 
@@ -143,15 +142,6 @@
 						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;
@@ -182,4 +172,9 @@
 			}
 		}
 	}
+
+	.quest,
+	footer *:not(button[data-action="back"]) {
+		opacity: 0;
+	}
 }