feat: Update app and windows

- Move setAttributesAccordingToPosition to HippieTaskbar
- Use TimeDisplay inside HippieTaskbar
- Add readJsonFile and loadJson to app
- Initialize taskbar with config from data/windows.json
- Update jshint globals

source/code/hippie/app.js

@@ -394,20 +394,6 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
-function setAttributesAccordingToPosition(element, position, attributes) {
-	'use strict';
-
-	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-	Object.keys(attributes[position].styles).forEach(key => {
-		element.style[key] = '';
-	});
-
-	element.classList.add(attributes[position].className);
-	Object.entries(attributes[position].styles).forEach(([key, value]) => {
-		element.style[key] = value;
-	});
-}
-
 /**
  * Gibt eine Zahl zwischen <min> und <max> aus.
  * Die Werte <min> und <max> sind dabei mit eingeschlossen.
@@ -556,9 +542,37 @@ 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;
+async function readJsonFile(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+
+		reader.readAsText(file);
+		reader.onload = function () {
+			try {
+				resolve(JSON.parse(reader.result));
+			} catch (error) {
+				reject(error);
+			}
+		};
+		reader.onerror = function () {
+			reject(reader.error);
+		};
+	});
+}
+
+async function loadJson(filePath) {
+	try {
+		const response = await fetch(filePath);
+
+		if (!response.ok) throw new Error(`Failed to load file: ${response.status}`);
+
+		return await response.json();
+	} catch (error) {
+		console.error('Error loading file:', error);
+		throw error;
+	}
+}
+
 class RandomPixelPlaceholder {
 	constructor(parent, options = {}) {
 		this.container = parent;

source/code/windows.js

@@ -3,9 +3,10 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
+		this.time = null;
 		this.isDragging = false;
 		this.barSize = '';
-		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		// TODO: Ergänzen und nicht ersetzen
 		this.options = options || {
 			direction: 0,
 			position: 'bottom',
@@ -13,7 +14,8 @@ class HippieTaskBar {
 				year: 'numeric',
 				month: '2-digit',
 				day: '2-digit'
-			}
+			},
+			time: {hour: '2-digit', minute: '2-digit'}
 		};
 
 		this.init();
@@ -25,11 +27,20 @@ class HippieTaskBar {
 		document.addEventListener('pointermove', this.onMove.bind(this));
 		document.addEventListener('pointerup', this.onUp.bind(this));
 
+		const clock = this.element.querySelector('.clock');
 		const dateElement = document.createElement('span');
+		const timeElement = document.createElement('span');
+		const br = document.createElement('br');
 
 		dateElement.id = 'date';
-		this.element.querySelector('.clock').appendChild(dateElement);
+		timeElement.id = 'time';
 		this.date = new DateDisplay(dateElement, this.options.date);
+		this.time = new TimeDisplay(timeElement, this.options.time);
+
+		// TODO: Reihenfolge anpassbar machen
+		clock.appendChild(timeElement);
+		clock.appendChild(br);
+		clock.appendChild(dateElement);
 
 		this.setOptions(this.options.position);
 	}
@@ -111,7 +122,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
+			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -142,6 +153,18 @@ class HippieTaskBar {
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
+	setAttributesAccordingToPosition(element, position, attributes) {
+		element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+		Object.keys(attributes[position].styles).forEach(key => {
+			element.style[key] = '';
+		});
+
+		element.classList.add(attributes[position].className);
+		Object.entries(attributes[position].styles).forEach(([key, value]) => {
+			element.style[key] = value;
+		});
+	}
+
 	setOptions(position) {
 		const attributes = {
 			top: {
@@ -182,7 +205,7 @@ class HippieTaskBar {
 			}
 		};
 
-		setAttributesAccordingToPosition(this.element, position, attributes);
+		this.setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':