source/code/hippie/app.js

@@ -559,59 +559,28 @@ 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.type = options.type || 'canvas'; // 'canvas' or 'img'
-		this.element = this.createElement();
+		this.canvas = this.createCanvas();
 
-		this.addContextToElement();
+		this.fillWithRandomPixels();
 	}
 
-	createElement() {
-		if (this.type === 'img') {
-			const img = document.createElement('img');
-			img.style.filter = this.filter;
+	createCanvas() {
+		const canvas = document.createElement('canvas');
+		canvas.width = this.width;
+		canvas.height = this.height;
+		canvas.style.filter = this.filter;
 
-			this.container.appendChild(img);
+		this.container.appendChild(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;
-		}
+		return canvas;
 	}
 
-	addContextToElement() {
-		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');
+	fillWithRandomPixels() {
+		const ctx = this.canvas.getContext('2d');
 		const imageData = ctx.createImageData(this.width, this.height);
 		const data = imageData.data;
 

source/screens/demo/examples/clock.liquid

@@ -61,7 +61,6 @@ 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');
@@ -78,16 +77,13 @@ tags:
 					part.element.style.width = this.options.size + 'px';
 				}
 
-				// part.element.width = part.element.offsetWidth;
-				// part.element.height = part.element.offsetHeight;
-				part.element.width = this.options.size;
-				part.element.height = this.options.size;
+				part.element.width = part.element.offsetWidth;
+				part.element.height = part.element.offsetHeight;
 
 				this.draw();
 			});
 		}
 
-		// TODO: Zuweisung von shapes zu parts anpassen
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
@@ -307,6 +303,7 @@ tags:
 		}
 
 		#createContext(names) {
+			let parts = [];
 			const wrap = document.createElement('div');
 
 			wrap.style.position = 'relative';
@@ -447,7 +444,6 @@ 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" aria-label="search" type="text">
-			<select name="type" aria-label="type">
+			<input placeholder="Search" type="text">
+			<select name="type">
 				<option value="" selected>Type</option>
 				<option value="all">All</option>
 				<option value="assasin">Assasination</option>
@@ -89,17 +89,15 @@ tags:
 			</div>
 		</div>
 		<div>
-			<div class="quest">
-				<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 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>
 	</main>
 	<footer class="io">
@@ -116,7 +114,6 @@ tags:
 <script>
 	const menu = document.querySelector('body > header');
 	const placeholder = document.querySelectorAll('.background');
-	const viewQuest = document.getElementById('viewQuest');
 
 	class Menu {
 		constructor(element, options = {}) {
@@ -142,7 +139,6 @@ tags:
 			this.changeView(this.default);
 		}
 
-		// TODO: Sollte auch die Menüauswahl anpassen
 		changeView(type) {
 			console.debug(type);
 			const id = 'view' + capitalizeFirstLetter(type);
@@ -199,35 +195,15 @@ 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 RandomPixelPlaceholder(element, {
-			width: Math.floor(element.clientWidth),
-			height: Math.floor(element.clientHeight),
+		new RandomPixelCanvas(element, {
+			width: Math.floor(element.parentElement.clientWidth),
+			height: Math.floor(element.parentElement.clientHeight),
 			colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
-			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
-			type: 'img'
+			filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
 		});
 	});
 

source/style/hippie-style

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

source/style/modules/game/_tfw.scss

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