From cc391bc7e43acba6d3e7f044ca8b115333f3cf8a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 22 Mar 2026 22:21:26 +0100
Subject: [PATCH] feat: Add toggle for animation to FPV

---
 source/code/game.js                          | 29 +++++++++++++++++---
 source/screens/demo/examples/game/fpv.liquid |  7 +++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/source/code/game.js b/source/code/game.js
index 1492a63..bab55c4 100644
--- a/source/code/game.js
+++ b/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) => {
-			this.mouseX = e.clientX;
-			this.mouseY = e.clientY;
+		document.addEventListener('mousemove', (event) => {
+			this.mouseX = event.clientX;
+			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;
+	}
 }
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
index a4f53a7..7dd1b54 100644
--- a/source/screens/demo/examples/game/fpv.liquid
+++ b/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;