From 6292b640bd31bfff35e603231b2a5f57532042a8 Mon Sep 17 00:00:00 2001
From: vbenoit <vincent.benoit@benserv.fr>
Date: Tue, 8 Oct 2024 15:24:45 +0000
Subject: [PATCH] amelioration de l'animation

---
 .../football-field.component.html             |  17 +-
 .../football-field.component.ts               | 227 +++++++++---------
 2 files changed, 131 insertions(+), 113 deletions(-)

diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 3da797c..4397544 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -39,10 +39,9 @@
 		</div> -->
 		<button (click)="setInteractionMode('move')">Déplacer Élément</button>
 		<button (click)="setInteractionMode('animate')">Dessiner Vecteur</button>
-		<button (click)="setVectorType('linear')">Vecteur Linéaire</button>
-		<button (click)="setVectorType('curved')">Vecteur Courbé</button>
-  		<button (click)="toggleLoop()">Activer/Désactiver Boucle d'Animation</button>
-	</div>
+  		<button (click)="toggleLoop()">Boucle d'Animation</button>
+		<button (click)="replayTimeline()">Play again</button>
+       </div>
 
 <!--	<canvas #canvas width="800" height="600"
 				    (mousedown)="startDrawing($event)"
@@ -61,6 +60,16 @@
 				    (mousemove)="onCanvasMouseMove($event)"
 				    (mouseup)="onCanvasMouseUp($event)">
 	</canvas>
+	<div class="timeline">
+		<h3>Timeline du joueur sélectionné</h3>
+		<div *ngIf="selectedPlayer">
+			<ul>
+				<li *ngFor="let step of selectedPlayer.timeline; let i = index">
+					Étape {{ i + 1 }} : Départ ({{ step.startX }}, {{ step.startY }}), Arrivée ({{ step.endX }}, {{ step.endY }}), Durée : {{ step.duration }}
+				</li>
+			</ul>
+		</div>
+	</div>
 	<div class="debug">
 		<p>Debug Info: {{ debugInfo }}</p>
 	</div>
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index c6c5333..c6badcc 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -2,6 +2,14 @@ import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
+interface TimelineStep {
+	startX: number;
+	startY: number;
+	endX: number;
+	endY: number;
+	duration: number; // Temps d'animation (en secondes ou ticks)
+}
+
 interface Circle {
 	x: number;
 	y: number;
@@ -18,6 +26,8 @@ interface Circle {
 	progress: number; // Paramètre de progression sur la courbe
 	startX: number;
 	startY: number;
+	timeline: TimelineStep[];  // Nouvelle propriété pour stocker les étapes d'aniion
+	currentStepIndex: number;  // Suivre l'étape actuelle dans la timeline
 }
 
 interface Rectangle {
@@ -41,39 +51,39 @@ interface Rectangle {
 export class FootballFieldComponent {
 	@ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;
  	private ctx!: CanvasRenderingContext2D;
-  	private drawing = false;
-  	private lastX = 0;
-  	private lastY = 0;
+  	//private drawing = false;
+  	//private lastX = 0;
+  	//private lastY = 0;
   	private startX = 0;
   	private startY = 0;
 	private draggingPlayer: Circle | null = null;
 	private draggingBall: Circle | null = null;
-	private draggingPlot: Circle | null = null;
-	private draggingPiquet: Rectangle | null = null;
+	//private draggingPlot: Circle | null = null;
+	//private draggingPiquet: Rectangle | null = null;
 	private draggingElement: any = null;
 	private attachedPlayer: Circle | null = null;
 	private magnetRadius: number = 35; // Distance à laquelle le ballon s'attache au joueur
-	private attachedToPlayer: boolean = false; // indique si le ballon est attache a un joueur
+	//private attachedToPlayer: boolean = false; // indique si le ballon est attache a un joueur
 	private offsetX: number = 0;
 	private offsetY: number = 0;
 	private test: boolean = false;
 	private prevAngle: number = 0;
-	private isDrawingVector: boolean = false;
+	//private isDrawingVector: boolean = false;
 
 	private endX: number = 0;
 	private endY: number = 0;
 	private isAnimating: boolean = false;
 	private animationSpeed: number = 0.01;
 
-	public colors: string[] = ['#ff0000', '#00ff00',
-				   '#0000ff', '#ffff00',
-				   '#ff00ff', '#00ffff',
-				   '#000000', '#808080',
-	                           '#ffa500', '#8a2be2'];
-	public selectedColor: string = this.colors[0]; // Couleur sélectionné par défaut (rouge)
+	//public colors: string[] = ['#ff0000', '#00ff00',
+	//			   '#0000ff', '#ffff00',
+	//			   '#ff00ff', '#00ffff',
+	//			   '#000000', '#808080',
+	//                           '#ffa500', '#8a2be2'];
+	//public selectedColor: string = this.colors[0]; // Couleur sélectionné par défaut (rouge)
 	// Options de forme
-	public selectedShape: string = 'none'; // Par défaut, aucune forme
-	public playerCount: number = 4; // Nombre de joueurs par défaut
+	//public selectedShape: string = 'none'; // Par défaut, aucune forme
+	public playerCount: number = 8; // Nombre de joueurs par défaut
 	public plotCount: number = 2; // Nombre de plots par défaut
 	public piquetCount: number = 2; // Nombre de plots par défaut
 	public ballCount: number = 1; // Nombre de ballons par defaut
@@ -92,10 +102,12 @@ export class FootballFieldComponent {
 				isMoving:false,
        				progress: 0,
        				startX: 150,
-				startY: 150 };
+				startY: 150,
+       				timeline: null,
+				currentStepIndex: 0 };
 	public selectedPlayer: Circle | null = null;
 	public isDrawingLine: boolean = false;
-	public loopAnimation: boolean = true; // Pour répéter l'animation
+	public loopAnimation: boolean = false; // Pour répéter l'animation
 	public debugInfo: string = ""; // Variable pour les informations de debogage
 	public vectorType: 'linear' | 'curved' = 'linear'; // Type de vecteur sélectionné 
 	public interactionMode: 'move' | 'animate' = 'move'; // Mode d'interaction sélectionné
@@ -184,78 +196,65 @@ export class FootballFieldComponent {
 
 		// Dessiner la ligne si en mode dessin
 		if (this.isDrawingLine && this.selectedPlayer) {
-			console.log("[Draw Field] drawing vector");
+			//console.log("[Draw Field] drawing vector");
 			ctx.beginPath();
 			ctx.moveTo(this.startX, this.startY);
 			ctx.lineTo(this.endX, this.endY);
 			ctx.strokeStyle = '#FF0000';
-			ctx.lineWidth = 2;
+			ctx.lineWidth = 4;
 			ctx.stroke();
 		}
 	}
 
 	private animate() {
 		//this.updatePositions();
-		if (this.isAnimating && this.selectedPlayer) {
-			this.updatePlayerPosition(this.selectedPlayer);
+		//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); 
+			// Mettre à jour la position de tous les joueurs en suivant leur timeline
+			this.players.forEach(player => {
+				if (player.timeline.length > 0) {
+					this.updatePlayerPosition(player);
+				}
+			});
 		}
 		this.drawField();
 		requestAnimationFrame(() => this.animate());
 	}
 
 	private updatePlayerPosition(player: Circle) {
+		if (player.timeline.length === 0 || player.currentStepIndex >= player.timeline.length) {
+			return; // Pas d'animation si la timeline est vide
+		}
+		
+		const step = player.timeline[player.currentStepIndex];
 		// Avancer le joueur sur la ligne avec un LERP (Linear Interpolation)
 		player.progress += this.animationSpeed;
 
 		if (player.progress >= 1) {
-			if (this.loopAnimation) {
-				player.progress = 0; // Répéter l'animation
-				player.x = player.startX;
-				player.y = player.startY;
-			} else {
-				this.isAnimating = false;
-				this.selectedPlayer = null;
+			player.progress = 0; // Réinitialiser la progression
+			player.x = step.endX;
+			player.y = step.endY;
+			player.currentStepIndex++; // Passer à l'étape suivante
+
+			// Si on atteint la fin de la timeline, recommencer ou arrêter
+			if (player.currentStepIndex >= player.timeline.length) {
+				if (this.loopAnimation) {
+					player.currentStepIndex = 0; // Boucle l'animation
+				} else {
+					this.isAnimating = false;
+				}
 			}
 		} else {
 			const t = player.progress;
-			player.x = (1 - t) * player.startX + t * this.endX;
-			player.y = (1 - t) * player.startY + t * this.endY;
+			player.x = (1 - t) * step.startX + t * step.endX;
+			player.y = (1 - t) * step.startY + t * step.endY;
 		}
 	}
 
-//	private updatePositions() {
-//		// Mettre à jour les positions des joueurs
-//		this.players.forEach(player => {
-//			player.x += player.vx;
-//			player.y += player.vy;
-//
-//			// Collision avec les bords
-//			if (player.x - player.radius < 0 || player.x + player.radius > this.canvas.nativeElement.width) {
-//				player.vx = -player.vx;
-//			}
-//			if (player.y - player.radius < 0 || player.y + player.radius > this.canvas.nativeElement.height) {
-//				player.vy = -player.vy;
-//			}
-//		});
-//
-//		// Si le ballon est attaché à un joueur, le suivre
-//		if (this.attachedPlayer) {
-//			this.updateBallPositionOnPlayer();
-//		} else {
-//			// Mise à jour de la position du ballon
-//			this.ball.x += this.ball.vx;
-//			this.ball.y += this.ball.vy;
-//
-//			// Collision avec les bords pour le ballon
-//			if (this.ball.x - this.ball.radius < 0 || this.ball.x + this.ball.radius > this.canvas.nativeElement.width) {
-//				this.ball.vx = -this.ball.vx;
-//			}
-//			if (this.ball.y - this.ball.radius < 0 || this.ball.y + this.ball.radius > this.canvas.nativeElement.height) {
-//				this.ball.vy = -this.ball.vy;
-//			}
-//		}
-//	}
-
 	// Mettre à jour debugInfo avec les positions des joueurs et du ballon
 	private updateDebugInfo() {
 		const playerPositions = this.players.map((player, index) => `Joueur ${index + 1}: (${player.x.toFixed(1)}, ${player.y.toFixed(1)})`).join(', ');
@@ -281,13 +280,15 @@ export class FootballFieldComponent {
 					    destinationY: null,
 					    isMoving:false,
 					    progress: 0,
-		       			    startX: 150,
-					    startY: 150 });
+		       			    startX: 0,
+					    startY: 0,
+       					    timeline: [],
+					    currentStepIndex: 0 });
 		}
 		this.drawField();
 	}
 
-	// Créer les cerclesrepresentant les plots 
+	// Créer les cercle representant les plots 
 	private createPlots() {
 		this.plots = [];
 		const radius = 10; // Rayon des cercles
@@ -304,8 +305,10 @@ export class FootballFieldComponent {
 					  destinationY: null,
 					  isMoving:false,
 					  progress: 0,
-		       			  startX: 150,
-					  startY: 150 });
+		       			  startX: 0,
+					  startY: 0,
+       					  timeline: null,
+					  currentStepIndex: 0 });
 		}
 		this.drawField();
 	}
@@ -416,41 +419,27 @@ export class FootballFieldComponent {
 		ctx.fillText(circle.number.toString(), circle.x, circle.y);
 	}
 
-	private drawVectors() {
-		const ctx = this.ctx;
-		this.players.forEach(player => {
-			ctx.beginPath();
-			ctx.moveTo(player.x, player.y);
-			ctx.lineTo(player.x + player.vx * 20, player.y + player.vy * 20); // Longueur du vecteur
-			ctx.strokeStyle = '#FF0000';
-			ctx.lineWidth = 2;
-			ctx.stroke();
-		});
-
-		// Dessiner le vecteur de mouvement du ballon
-		ctx.beginPath();
-		ctx.moveTo(this.ball.x, this.ball.y);
-		ctx.lineTo(this.ball.x + this.ball.vx * 20, this.ball.y + this.ball.vy * 20);
-		ctx.strokeStyle = '#FFA500';
-		ctx.lineWidth = 2;
-		ctx.stroke();
-	}
-
 	onCanvasMouseDown(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
 		if (this.interactionMode === 'animate') {
 			console.log("[Mouse Down] animate elements");
-			//this.startDrawingVector(x, y);
+			this.selectedPlayer = null;
+			for (const player of this.players) {
+				if (this.isInsideCircle(player, x, y)) {
+					// Sélectionner le joueur
+					this.selectedPlayer = player; 
+					console.log("[Mouse Down|Animate] selecting player :", this.selectedPlayer);
+					break;
+				}
+			}
+
 			if (!this.selectedPlayer) {
-				console.log("[Mouse Down|Animate] select player");
 				this.selectPlayer(x, y);
 			} else if (!this.isDrawingLine) {
 				this.startX = this.selectedPlayer.x;
 				this.startY = this.selectedPlayer.y;
-				this.endX = x;
-				this.endY = y;
 				this.isDrawingLine = true;
-				console.log("[Mouse Down|Animate] Draw line - Start:(",
+				console.log("[Mouse Down|Animate] drawing line - Start:(",
 					    this.startX,",",
 					    this.startY,"), End:(",
 					    this.endX,",",
@@ -466,35 +455,55 @@ export class FootballFieldComponent {
 	onCanvasMouseMove(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
 		if (this.interactionMode === 'animate') {
-			//console.log("[Mouse Move] animate elements");
+			// Pour déssiner les vecteurs de déplacement des joueurs
+			this.endX = x;
+			this.endY = y;
 		} else if (this.interactionMode === 'move') {
 			this.drag(x, y);
 		}
+
 	}
 
 	onCanvasMouseUp(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
 		if (this.interactionMode === 'animate') {
 			console.log("[Mouse Up] Stop animating elements");
-			//this.finishDrawingVector(x,y);
 			if (this.isDrawingLine && this.selectedPlayer) {
 				console.log("[Mouse Up|Animate] Stop drawing vector");
 				this.endX = x;
 				this.endY = y;
 				this.isDrawingLine = false;
+				// Ajouter l'étape dans la timeline du joueur
+				console.log("timeline:", this.selectedPlayer.timeline);
+				this.selectedPlayer.timeline.push({
+					startX: this.startX,
+					startY: this.startY,
+					endX: this.endX,
+					endY: this.endY,
+					duration: 100 // Durée d'animation arbitraire, peut être ajustée
+				});
+				this.selectedPlayer.currentStepIndex = 0; // Réinitialiser au début de la timeline
 				this.startAnimation();
 			}
 		} else if (this.interactionMode === 'move') {
 			console.log("[Mouse Up] Stop moving elements");
 			this.stopDragging();
+
+			// Si on déplace un joueur alors que celui-ci a une animation,
+			// on supprime toute sa timeline
+			for (const player of this.players) {
+				if (this.isInsideCircle(player, x, y)) {
+					// Sélectionner le joueur
+					this.selectedPlayer = player; 
+					this.selectedPlayer.timeline = [];
+					break;
+				}
+			}
 		}
 	}
 
 	// Commencer a déplacer un élément du canvas 
-	//startDragging(event: MouseEvent) {
 	startDragging(x:number, y:number) {
-		//const { x, y } = this.getMousePos(event);
-
 		if (this.isInsideCircle(this.ball, x, y)) {
 			console.log("inside ball");
 			this.ball.isDragging = true;
@@ -523,19 +532,10 @@ export class FootballFieldComponent {
 			this.offsetY = y - this.draggingPlayer.y;
 			this.test = true;
 		}
-
-//		// Vérifier si le joueur touche le ballon
-//		if (this.draggingPlayer && this.isInsideCircle(this.ball, this.draggingPlayer.x, this.draggingPlayer.y)) {
-//			this.attachedToPlayer = true;
-//		}
-
 	}
 
-	// Déplacer le cercle sélectionné
-	//drag(event: MouseEvent) {
+	// Déplacer l'élément sélectionné sur le canvas
 	drag(x:number, y:number) {
-		//const { x, y } = this.getMousePos(event);
-
 		if (this.ball.isDragging) {
 			console.log("dragging ball");
 			this.ball.x = x - this.offsetX;
@@ -586,7 +586,7 @@ export class FootballFieldComponent {
 		if (this.draggingPlayer) {
 			this.draggingPlayer.isDragging = false;
 			this.draggingPlayer = null;
-			this.attachedToPlayer = false; // Détacher le ballon après avoi relache le joueur
+			//this.attachedToPlayer = false; // Détacher le ballon après avoi relache le joueur
 		}
 
 		if (this.draggingElement) {
@@ -864,4 +864,13 @@ export class FootballFieldComponent {
 	toggleLoop() {
 		this.loopAnimation = !this.loopAnimation;
 	}
+
+	replayTimeline() {
+		// Réinitialiser la progression et l'étape actuelle
+		this.players.forEach(player => {
+			player.progress = 0;
+			player.currentStepIndex = 0;
+		});
+		this.isAnimating = true; // Redémarrer l'animation
+	}
 }