feat: Update HippieClock

- Add sections
- Sections now use ring max value

source/screens/demo/examples/clock.liquid

@@ -295,7 +295,8 @@ tags:
 			this.date = this.getTime(date);
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
-				h24: true
+				h24: true,
+				sections: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -332,37 +333,67 @@ tags:
 				part.context.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
-			this.shapes.forEach(shape => {
-				if (shape.type === 'circle') {
-					const radius = this.toPixelSize(shape.radius) / 2;
+			let ctx = undefined;
 
-					this.parts[0].context.fillStyle = shape.color;
-					this.parts[0].context.beginPath();
-					this.parts[0].context.arc(
+			this.shapes
+				.filter(item => item.type === 'circle')
+				.forEach((shape) => {
+					const radius = this.toPixelSize(shape.radius) / 2;
+					ctx = this.parts[0].context;
+
+					ctx.fillStyle = shape.color;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
 					);
-					this.parts[0].context.fill();
-				} else if (shape.type === 'ring') {
+					ctx.fill();
+				});
+
+			this.shapes
+				.filter(item => item.type === 'ring')
+				.forEach((shape) => {
+					if (this.options.sections) {
+						const outerRadius = this.toPixelSize(shape.radius) / 2;
+						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						ctx = this.parts[0].context;
+
+						for (let i = 0; i < shape.max; i++) {
+							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
+							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+
+							ctx.strokeStyle = 'black';
+							// TODO: Stärke an shape.max orientieren
+							ctx.lineWidth = 1;
+							ctx.beginPath();
+							ctx.moveTo(outerX, outerY);
+							ctx.lineTo(innerX, innerY);
+							ctx.stroke();
+						}
+					}
+
 					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
+					ctx = this.parts[1].context;
 
-					this.parts[1].context.strokeStyle = shape.color;
-					this.parts[1].context.lineWidth = shape.stroke;
-					this.parts[1].context.beginPath();
-					this.parts[1].context.arc(
+					ctx.strokeStyle = shape.color;
+					ctx.lineWidth = shape.stroke;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						start,
 						angle
 					);
-					this.parts[1].context.stroke();
-				}
+					ctx.stroke();
 				});
 		}
 
@@ -484,27 +515,38 @@ tags:
 		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
+
+		addSection(id, radius, color = 'black', center = .5, stroke = 1) {
+			this.shapes.push({type: 'section', id, radius, color, center, stroke});
+		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
+
 	clock.addCircle('base', .5, 1);
-	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
 
+	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
 			clock.updateOptions({h24: !clock.options.h24})
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
-			console.debug(clock);
 		} else {
 			console.log('No clock available');
 		}
 	});
 
+	document.getElementById('tglSections').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({sections: !clock.options.sections})
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}