play timeline with button

src/app/football-field/football-field.component.html

@@ -41,6 +41,7 @@
 		<button (click)="setInteractionMode('animate')">Dessiner Vecteur</button>
   		<button (click)="toggleLoop()">Boucle d'Animation</button>
 		<button (click)="replayTimeline()">Play again</button>
+		<button (click)="playTimeline()">Play</button>
        </div>
 
 <!--	<canvas #canvas width="800" height="600"

src/app/football-field/football-field.component.ts

@@ -76,7 +76,11 @@ export class FootballFieldComponent {
 	private endX: number = 0;
 	private endY: number = 0;
 	private isAnimating: boolean = false;
-	private animationSpeed: number = 0.01;
+	private animationSpeed: number = 0.04;
+	// Flag pour savoir si la lecture est en cours
+	private isPlaying: boolean = false;
+	// Timestamp de début de l'animation
+	private animationStartTime: number = 0;
 
 	//public colors: string[] = ['#ff0000', '#00ff00',
 	//			   '#0000ff', '#ffff00',
@@ -226,18 +230,43 @@ export class FootballFieldComponent {
 		//if (this.isAnimating && this.selectedPlayer) {
 		//	this.updatePlayerPosition(this.selectedPlayer);
 		//}
-		if (this.isAnimating) {
 		// Effacer le canvas pour redessiner
 		this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); 
+		
+		const currentTime = performance.now() - this.animationStartTime;
+		let hasAnimation = false;
+
 		// Mettre à jour la position de tous les joueurs en suivant leur timeline
 		this.players.forEach(player => {
+			if (this.isAnimating) {
 				if (player.timeline.length > 0) {
 						this.updatePlayerPosition(player);
 				}
+			} else if (this.isPlaying) {
+				player.timeline.forEach(step => {
+					if (currentTime >= step.startTime && currentTime <= step.endTime) {
+						const progress = ((currentTime - step.startTime) / (step.endTime - step.startTime));
+						player.x = step.startX + (step.endX - step.startX) * progress;
+						player.y = step.startY + (step.endY - step.startY) * progress;
+						hasAnimation = true;  // Indiquer qu'il y a encore de l'animation
+					}
 		  		});
 			}
+		});
+
 		this.drawField();
 		requestAnimationFrame(() => this.animate());
+		// Continuer l'animation seulement si au moins un joueur est encore en mouvement
+		//if ((this.isAnimating) || (hasAnimation && this.isPlaying)) {
+		//	requestAnimationFrame(() => this.animate());
+		//} else {
+		//	this.stopTimeline(); // Arrêter l'animation
+		//}
+	}
+
+	stopTimeline() {
+		// Arrêter la lecture (par exemple quand la timeline est terminée ou si tu veux ajouter un bouton de pause)
+		this.isPlaying = false;
 	}
 
 	private updatePlayerPosition(player: Circle) {
@@ -1044,4 +1073,12 @@ export class FootballFieldComponent {
 		// Calculer la durée totale de la timeline, par exemple basée sur la durée totale de l'animation
 		return 10000; // Par exemple, 10 000 ms pour une timeline de 10 secondes
 	}
+
+	playTimeline() {
+		if (this.isPlaying) return; // Ne pas relancer si déjà en cours
+
+		this.isPlaying = true;
+		this.animationStartTime = performance.now(); // Obtenir le timestamp de départ
+		this.animate();
+	}
 }