feat: New game screen

- Basic layout
- Menu structure
- First screen
- Add RandomPixelCanvas class

source/code/hippie/app.js

@@ -554,6 +554,62 @@ function zeroFill(number, width) {
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
+class RandomPixelCanvas {
+	constructor(containerElement, options = {}) {
+		this.container = containerElement;
+		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.fillWithRandomPixels();
+	}
+
+	createCanvas() {
+		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() {
+		const ctx = this.canvas.getContext('2d');
+		const imageData = ctx.createImageData(this.width, this.height);
+		const data = imageData.data;
+
+		for (let i = 0; i < data.length; i += 4) {
+			const color = this.getRandomColor();
+			const rgb = this.hexToRgb(color);
+
+			data[i] = rgb.r;     // Red
+			data[i + 1] = rgb.g; // Green
+			data[i + 2] = rgb.b; // Blue
+			data[i + 3] = 255;   // Alpha
+		}
+
+		ctx.putImageData(imageData, 0, 0);
+	}
+
+	getRandomColor() {
+		return this.colors[Math.floor(Math.random() * this.colors.length)];
+	}
+
+	hexToRgb(hex) {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+		return result ? {
+			r: parseInt(result[1], 16),
+			g: parseInt(result[2], 16),
+			b: parseInt(result[3], 16)
+		} : {r: 0, g: 0, b: 0};
+	}
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen