feat: Change clock layout

- Clock is now centered in window
- Clock is resized according to window

source/screens/demo/examples/clock.liquid

@@ -25,8 +25,7 @@ tags:
 	const ctxBkg = canvasBkg.getContext('2d');
 	const canvasRings = document.getElementById('rings');
 	const ctxRings = canvasRings.getContext('2d');
-	const centerX = canvasRings.width / 2;
+	const wrap = document.querySelector('.wrap');
-	const centerY = canvasRings.height / 2;
 
 	let is24HourFormat = true;
 	let drawSections = false;
@@ -37,7 +36,12 @@ tags:
 	const outerMargin = 8;
 	const ringWidth = 16;
 	const ringGap = 8;
-	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+	let centerX = canvasRings.width / 2;
+	let centerY = canvasRings.height / 2;
+	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+
+	resizeClock();
+
 	const rings = [
 		{
 			radius: maxSize,
@@ -141,24 +145,8 @@ tags:
 		drawBackground();
 	});
 
-	markers.forEach((marker) => {
+	// FIXME: Konstanten mit maxSize werden nicht verändert
-		for (let i = 0; i < marker.amount; i++) {
+	window.addEventListener('resize', resizeClock);
-			const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
-			const outerRadius = marker.radius + ringWidth / 2;
-			const outerX = centerX + outerRadius * Math.cos(angle);
-			const outerY = centerY + outerRadius * Math.sin(angle);
-			const innerRadius = marker.radius - ringWidth / 2;
-			const innerX = centerX + innerRadius * Math.cos(angle);
-			const innerY = centerY + innerRadius * Math.sin(angle);
-
-			ctxBkg.strokeStyle = markerColor;
-			ctxBkg.lineWidth = marker.width;
-			ctxBkg.beginPath();
-			ctxBkg.moveTo(outerX, outerY);
-			ctxBkg.lineTo(innerX, innerY);
-			ctxBkg.stroke();
-		}
-	});
 
 	drawBackground();
 	updateRings();
@@ -275,5 +263,35 @@ tags:
 			});
 		}
 	}
+
+	function resizeClock() {
+		const height = window.innerHeight;
+		const width = window.innerWidth;
+		const windowDimension = {
+			value: Math.min(height, width),
+			smaller: height < width ? 'height' : 'width'
+		};
+		const clockSize = Math.floor(windowDimension.value * 0.9);
+
+		canvasBkg.style.width = clockSize + 'px';
+		canvasBkg.style.height = clockSize + 'px';
+		canvasRings.style.width = clockSize + 'px';
+		canvasRings.style.height = clockSize + 'px';
+		canvasBkg.width = clockSize;
+		canvasBkg.height = clockSize;
+		canvasRings.width = clockSize;
+		canvasRings.height = clockSize;
+
+		centerX = canvasRings.width / 2;
+		centerY = canvasRings.height / 2;
+		maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+
+		wrap.style.width = clockSize + 'px';
+		wrap.style.height = clockSize + 'px';
+
+		console.debug(windowDimension);
+		console.debug('Clock size: ', clockSize);
+		console.debug('Radius: ', maxSize);
+	}
 </script>
 {% endblock %}

source/style/modules/_clock.scss

@@ -20,13 +20,11 @@
 		align-items: center;
 		height: 100vh;
 		width: 100%;
+		overflow: hidden;
 	}
 
 	.wrap {
 		position: relative;
-		height: 768px;
-		width: 768px;
-		margin: 0 auto;
 	}
 
 	canvas {