From 245c9acf7ad6d98374ec75b6c102f320f6478e69 Mon Sep 17 00:00:00 2001
From: BENOIT Vincent <vincent.benoit@benserv.fr>
Date: Thu, 10 Oct 2024 17:43:59 +0200
Subject: [PATCH] correction bug sur timeline

---
 src/app/app.module.ts                         |   7 +-
 .../football-field.component.css              |  15 +-
 .../football-field.component.html             |  21 +--
 .../football-field.component.ts               | 142 ++++++++++++------
 4 files changed, 124 insertions(+), 61 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3d42796..247cb1f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { FootballFieldComponent } from './football-field/football-field.component';
 
 @NgModule({
-    declarations: [
-	FootballFieldComponent
-    ],
+    imports: [
+        FormsModule
+    ]
 })
 export class AppModule {}
diff --git a/src/app/football-field/football-field.component.css b/src/app/football-field/football-field.component.css
index addf118..1eabb83 100644
--- a/src/app/football-field/football-field.component.css
+++ b/src/app/football-field/football-field.component.css
@@ -76,17 +76,24 @@ canvas {
 .timeline {
   position: relative;
   width: 100%;
-  height: 20px;
+  height: 25px;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   display: flex;
-  align-items: center;
+  align-items: right;
+}
+
+.timeline-name {
+  width: 10%;
+  display: flex;
+  align-items: left;
+  margin-right: 10px;
 }
 
 .timeline-block {
   position: absolute;
-  height: 15px;
-  background-color: blue;
+  height: 25px;
+  background-color: hsla(240, 100%, 50%, 0.308);
   border: 1px solid black;
   cursor: move;
 }
diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 8fb3cf3..8e3e5da 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -64,32 +64,33 @@
 
 		<div class="timeline-container">
 			<div *ngFor="let player of players" class="player-timeline">
-				<span>{{ player.id }}</span>
-				<div class="timeline" (mousedown)="onTimelineMouseDown($event, player)">
+				<span class="timeline-name">Joueur {{ player.id }}</span>
+				<div class="timeline" (mousedown)="onTimelineMouseDown($event, player)"
+									  (mousemove)="onTimelineMouseMove($event)"
+									  (mouseup)="onTimelineMouseUp()">
 					<div *ngFor="let step of player.timeline; let i = index"
 				    	class="timeline-block"
-				     	[style.left]="calculateLeftPosition(step)"
-				     	[style.width]="calculateBlockWidth(step)"
-				     	(mousedown)="onTimelineBlockMouseDown($event, player, i)"
-						(mousemove)="onMouseMove($event)"
-						(mouseup)="onMouseUp()">
+						[style.left]="calculateLeftPosition(step)"
+						[style.width]="calculateBlockWidth(step)"
+				     	(mousedown)="onTimelineBlockMouseDown($event, player, i)">
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="timeline">
+	<div class="timeline-player">
 		<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 }}
+					Étape {{ i + 1 }} : Départ ({{ step.startX }}, {{ step.startY }}), Arrivée ({{ step.endX }}, {{ step.endY }}), Durée : ({{ step.startTime }}, {{ step.endTime }}: {{ step.duration }})
 				</li>
 			</ul>
 		</div>
 	</div>
 	<div class="debug">
-		<p>Debug Info: {{ debugInfo }}</p>
+		<h3>Debug Info</h3>
+		<p>{{ debugInfo }}</p>
 	</div>
 <!--  <div class="controls">
     <button (click)="clearDrawings()">Effacer les dessins</button>
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index a2c401c..255488a 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -82,7 +82,7 @@ export class FootballFieldComponent {
 	//			   '#0000ff', '#ffff00',
 	//			   '#ff00ff', '#00ffff',
 	//			   '#000000', '#808080',
-	//                           '#ffa500', '#8a2be2'];
+	//             '#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
@@ -94,21 +94,21 @@ export class FootballFieldComponent {
 	public plots: Circle[] = [];
 	public piquets: Rectangle[] = [];
 	public ball: Circle = { id: 0,
-				x:400, 
-				y:300, 
-				number:1, 
-				radius:10, 
-				isDragging:false, 
-				vx:0, 
-				vy:0, 
-				destinationX: null,
-				destinationY: null,
-				isMoving:false,
-       				progress: 0,
-       				startX: 150,
-				startY: 150,
-       				timeline: null,
-				currentStepIndex: 0 };
+							x:400, 
+							y:300, 
+							number:1, 
+							radius:10, 
+							isDragging:false, 
+							vx:0, 
+							vy:0, 
+							destinationX: null,
+							destinationY: null,
+							isMoving:false,
+       						progress: 0,
+       						startX: 150,
+							startY: 150,
+       						timeline: null,
+							currentStepIndex: 0 };
 	public selectedPlayer: Circle | null = null;
 	public isDrawingLine: boolean = false;
 	public loopAnimation: boolean = false; // Pour répéter l'animation
@@ -122,7 +122,7 @@ export class FootballFieldComponent {
 	// La largeur totale de la timeline en pixels.
 	// Cela représente la taille visuelle de la timeline dans laquelle
 	// les différents étapes de mouvement d'un élément sont affichés.
-	public timelineWidth: number = 800;
+	public timelineWidth: number = 722;
 	// Décalage horizontal en pixels utilisé lorsque vous commencez à déplacer
 	// un bloc sur la timeline.
 	public dragOffsetX: number = 0;
@@ -251,6 +251,17 @@ export class FootballFieldComponent {
 		// Temps actuel
 		const currentTime = performance.now();
 
+/*
+		// Vérifier si le temps actuel correspond à l'intervalle de cette étape
+		if (currentTime >= step.startTime && currentTime <= step.endTime) {
+			const t = (currentTime - step.startTime) / (step.endTime - step.startTime);
+			player.x = (1 - t) * step.startX + t * step.endX;
+			player.y = (1 - t) * step.startY + t * step.endY;
+		} else if (currentTime > step.endTime) {
+			player.currentStepIndex++;
+		}
+*/
+		
 		if (player.progress >= 1) {
 			player.progress = 0; // Réinitialiser la progression
 			player.x = step.endX;
@@ -274,10 +285,12 @@ export class FootballFieldComponent {
 
 	// 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(', ');
-    		const ballPosition = `Ballon: (${this.ball.x.toFixed(1)}, ${this.ball.y.toFixed(1)})`;
+		const playerPositions = this.players.map((player, index) => 
+													`Joueur ${index + 1}: (${player.x.toFixed(1)}, ${player.y.toFixed(1)})`
+												).join(', ');
+    	const ballPosition = `Ballon: (${this.ball.x.toFixed(1)}, ${this.ball.y.toFixed(1)})`;
 
-    		this.debugInfo = `${playerPositions}, ${ballPosition}`;
+    	this.debugInfo = `${playerPositions}, ${ballPosition}`;
 	}
 
 	// Créer les cercles nuerotes representant les joueurs
@@ -493,16 +506,23 @@ export class FootballFieldComponent {
 				this.endY = y;
 				this.isDrawingLine = false;
 				// Ajouter l'étape dans la timeline du joueur
-				console.log("timeline:", this.selectedPlayer.timeline);
+				let prevStartTime:number = 0;
+				if (this.selectedPlayer.timeline && this.selectedPlayer.timeline.length > 0) {
+					prevStartTime = this.selectedPlayer.timeline[this.selectedPlayer.timeline.length - 1].endTime;
+				} else {
+					prevStartTime = 0;
+				}
+				
 				this.selectedPlayer.timeline.push({
-					startTime: 0,
-					endTime: 1000,
+					startTime: prevStartTime,
+					endTime: prevStartTime + 200,
 					startX: this.startX,
 					startY: this.startY,
 					endX: this.endX,
 					endY: this.endY,
-					duration: 100 // Durée d'animation arbitraire, peut être ajustée
+					duration: 200 // Durée d'animation arbitraire, peut être ajustée
 				});
+				console.log("timeline:", this.selectedPlayer.timeline);
 				this.selectedPlayer.currentStepIndex = 0; // Réinitialiser au début de la timeline
 				this.startAnimation();
 			}
@@ -898,17 +918,25 @@ export class FootballFieldComponent {
 	/* GESTION DE LA TIMELINE */
 
 	getMousePosOnTimeline(event: MouseEvent): { x: number } {
-		const timelineRect = (event.target as HTMLElement).getBoundingClientRect();
-		return {
-			x: event.clientX - timelineRect.left  // Position X par rapport à la timeline
-		};
+		// Récupérer l'élément avec la classe 'timeline'
+		const timelineElement = document.querySelector('.timeline') as HTMLElement;
+		if (timelineElement) {
+			// Récupérer la position de la timeline relative à la fenêtre
+			const timelineRect = timelineElement.getBoundingClientRect();
+			// Position X par rapport à la timeline
+			//console.log("[getMousePosOnTimeline] timeline rectangle left:", timelineRect.left, " - x:", event.clientX, "- res: ", event.clientX - timelineRect.left);
+			// Calculer la position X relative de la souris par rapport à la timeline
+			return { x: event.clientX - timelineRect.left };
+		}
+		
+		return { x: 0 };
 	}
 
 	calculateBlockPixelPosition(time: number): number {
 		// La durée totale de la timeline
-		const totalDuration = this.getTotalTimelineDuration();  
-		// La largeur de la timeline en pixels (par exemple, 1000px)
-		const timelineWidth = this.timelineWidth;  
+		const totalDuration = this.getTotalTimelineDuration();
+		// La longueur de la timeline en pixels (par exemple, 1000px)
+		const timelineWidth = this.timelineWidth;
 		// La durée totale de l'animation en millisecondes
 		return (time / totalDuration) * timelineWidth;
 	}
@@ -920,52 +948,69 @@ export class FootballFieldComponent {
 		// Chercher si un bloc (une étape du joueur) a été cliqué
 		for (let i = 0; i < player.timeline.length; i++) {
 			const step = player.timeline[i];
-
+			//console.log("[OnTimelineMouseDown | Joueur",player.id,"] - Timeline[",i,"]:", step);
 			// Calculer la position du bloc en pixels sur la timeline
 			const blockStartX = this.calculateBlockPixelPosition(step.startTime);
 			const blockEndX = this.calculateBlockPixelPosition(step.endTime);
-
+			console.log("[OnTimelineMouseDown | Joueur",player.id," | Block:",
+						 i+1,"] x:",
+						 x,
+						 " - blockStartX:", blockStartX,
+						 " - blockEndX:", blockEndX);
 			// Si la souris clique dans un bloc
 			if (x >= blockStartX && x <= blockEndX) {
-				console.log("clique dans un bloc !");
 				// Début du déplacement du bloc
 				this.isTimelineDragging = true;
 				this.draggedTimelinePlayer = player;
 				this.draggedTimelineIndex = i;
 				// Garder une référence pour un déplacement fluide
-				this.dragOffsetX = x - blockStartX;  
+				this.dragOffsetX = x - blockStartX; 
+				console.log("[OnTimelineMouseDown | Joueur",player.id,"] clique dans un bloc",
+							i+1,
+							" ! dragOffsetX:", this.dragOffsetX); 
 				break;
 			}
 		}
 	}
 
 	onTimelineBlockMouseDown(event: MouseEvent, player: Circle, index: number) {
-		console.log("onTimelineBlockMouseDown");
+		console.log("[onTimelineBlockMouseDown] index:", index);
 		this.isTimelineDragging = true;
 		this.draggedTimelinePlayer = player;
 		this.draggedTimelineIndex = index;
 	}
 
-	onMouseMove(event: MouseEvent) {
+	onTimelineMouseMove(event: MouseEvent) {
 		if (this.isTimelineDragging && this.draggedTimelinePlayer) {
-			console.log("onMouseMove");
-			const { x } = this.getMousePos(event);
+			//const { x } = this.getMousePos(event);
+			const { x } = this.getMousePosOnTimeline(event);
+
+			// Calculer la nouvelle position du bloc
+			const newStartX = x - this.dragOffsetX;
 			const totalDuration = this.getTotalTimelineDuration();
-			const newStartTime = (x / this.canvas.nativeElement.width) * totalDuration;
+			//const newStartTime = Math.floor((newStartX / this.canvas.nativeElement.width) * totalDuration);
+			const newStartTime = Math.floor((newStartX / this.timelineWidth) * totalDuration);
+			console.log("[onTimelineMouseMove] - x:",x,
+						" - newStartX:", newStartX,
+						" - newStartTime:", newStartTime);
 
 			// Mettre à jour l'étape avec la nouvelle position
 			const step = this.draggedTimelinePlayer.timeline[this.draggedTimelineIndex];
-			step.startTime = Math.max(0, newStartTime); // Ne pas permettre les valeurs négatives
-
+			if (step.endTime < this.getTotalTimelineDuration()) {
+				step.startTime = Math.max(0, newStartTime); // Ne pas permettre les valeurs négatives
+			}
+			step.endTime = Math.max(0, newStartTime + step.duration); // Ne pas permettre les valeurs négatives
+			/*
 			// Ajuster la position de fin si nécessaire
 			if (this.draggedTimelineIndex > 0) {
 				const previousStep = this.draggedTimelinePlayer.timeline[this.draggedTimelineIndex - 1];
 				previousStep.endTime = step.startTime;
 			}
+			*/
 		}
 	}
 
-	onMouseUp() {
+	onTimelineMouseUp() {
 		console.log("onMouseUp");
 		if (this.isTimelineDragging) {
 			this.isTimelineDragging = false;
@@ -977,12 +1022,21 @@ export class FootballFieldComponent {
 	calculateLeftPosition(step: TimelineStep): string {
 		const totalDuration = this.getTotalTimelineDuration();
 		const left = (step.startTime / totalDuration) * 100;
+		//console.log("[calculateLeftPosition], left:", left, " - startTime:", step.startTime);
 		return `${left}%`;
 	}
 
 	calculateBlockWidth(step: TimelineStep): string {
 		const totalDuration = this.getTotalTimelineDuration();
-		const width = ((step.endTime - step.startTime) / totalDuration) * 100;
+		/*
+		if (step.endTime >= step.startTime) {
+			const width = ((step.endTime - step.startTime) / totalDuration) * 100;
+			console.log("block width:", width);
+			return `${width}%`;
+		}
+		return "0";
+		*/
+		const width = (step.duration / totalDuration) * 100;
 		return `${width}%`;
 	}