feat: Add toggle for animation to FPV

source/code/game.js

@@ -27,18 +27,27 @@ class HippieCrosshair {
 		this.mouseX = canvas.width / 2;
 		this.mouseY = canvas.height / 2;
 
+		// Animation control
+		this.isAnimating = true;
+		this.animationFrameId = null;
+
 		this.setupEventListeners();
 		this.animate();
 	}
 
 	setupEventListeners() {
-		document.addEventListener('mousemove', (e) => {
+		document.addEventListener('mousemove', (event) => {
-			this.mouseX = e.clientX;
+			this.mouseX = event.clientX;
-			this.mouseY = e.clientY;
+			this.mouseY = event.clientY;
 		});
 	}
 
 	animate() {
+		if (!this.isAnimating) {
+			this.animationFrameId = requestAnimationFrame(() => this.animate());
+			return;
+		}
+
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
 		if (this.showConnector) {
@@ -49,7 +58,7 @@ class HippieCrosshair {
 		// TODO: Autom. Zug zum Zentrum hin ermöglichen
 		this.drawCrosshair();
 
-		requestAnimationFrame(() => this.animate());
+		this.animationFrameId = requestAnimationFrame(() => this.animate());
 	}
 
 	drawLine() {
@@ -227,4 +236,16 @@ class HippieCrosshair {
 	setLineVisible(visible) {
 		this.showConnector = visible;
 	}
+
+	startAnimation() {
+		this.isAnimating = true;
+	}
+
+	stopAnimation() {
+		this.isAnimating = false;
+	}
+
+	toggleAnimation() {
+		this.isAnimating = !this.isAnimating;
+	}
 }

source/screens/demo/examples/game/fpv.liquid

@@ -15,6 +15,9 @@ tags:
 <canvas id="view"></canvas>
 
 <header class="io controls">
+	<nav>
+		<button onclick="toggleAnimation()">Toggle</button>
+	</nav>
 	<nav>
 		<span>Color</span>
 		<button onclick="changeColor('black')">Black</button>
@@ -70,6 +73,10 @@ tags:
 		crosshair.setLineVisible(!crosshair.showConnector);
 	}
 
+	function toggleAnimation() {
+		crosshair.toggleAnimation();
+	}
+
 	window.addEventListener('resize', () => {
 		canvas.width = window.innerWidth;
 		canvas.height = window.innerHeight;