From 79af91fad6309f5deba1379164b98c2795cae2b3 Mon Sep 17 00:00:00 2001
From: BENOIT Vincent <vincent.benoit@benserv.fr>
Date: Thu, 17 Oct 2024 17:56:45 +0200
Subject: [PATCH] debut de la gestion de la ligne de temps

---
 .../football-field.component.css              | 12 +++---
 .../football-field.component.html             |  2 +-
 .../football-field.component.ts               | 42 +++++++++++++++----
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/app/football-field/football-field.component.css b/src/app/football-field/football-field.component.css
index e589a73..81c7da6 100644
--- a/src/app/football-field/football-field.component.css
+++ b/src/app/football-field/football-field.component.css
@@ -104,7 +104,7 @@ canvas {
 
 .timeline-container {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 15px;
   position: relative; /* Position relative pour que les éléments enfants positionnés en absolute restent à l'intérieur */
   height: 100%; /* ou n'importe quelle hauteur de la timeline */
   background-color: #f5f5f5;
@@ -126,7 +126,7 @@ canvas {
   width: 100%;
   height: 25px;
   background-color: #f0f0f0;
-  border: 1px solid #ccc;
+  /*border: 1px solid #ccc;*/
   display: flex;
   align-items: right;
 }
@@ -142,7 +142,7 @@ canvas {
   position: absolute;
   height: 23px;
   background-color: hsla(240, 100%, 50%, 0.308);
-  border: 2px solid black;
+  border: 1px solid black;
   border-radius: 4px;
   cursor: move;
   font-family: Arial, Helvetica, sans-serif;
@@ -154,7 +154,7 @@ canvas {
   position: absolute;
   height: 23px;
   background-color: hsla(125, 100%, 50%, 0.308);
-  border: 2px solid black;
+  border: 1px solid black;
   border-radius: 4px;
   cursor: move;
   font-family: Arial, Helvetica, sans-serif;
@@ -176,7 +176,7 @@ canvas {
   top: 0;
   width: 10px;
   height: 100%;
-  background-color: hsla(240, 100%, 50%, 0.507);;
+  background-color: hsla(240, 100%, 50%, 0.507);
   cursor: ew-resize;
 }
 
@@ -185,7 +185,7 @@ canvas {
   top: 0;
   width: 10px;
   height: 100%;
-  background-color: rgba(32, 70, 45, 0.507);;
+  background-color: rgba(32, 70, 45, 0.507);
   cursor: ew-resize;
 }
 
diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 26f0d9b..8957a53 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -102,7 +102,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="vertical-line" 
+			<div class="vertical-line" id="verticale-line"
 				[style.left.px]="linePosition" 
 				(mousedown)="onLineMouseDown($event)"
 				(mousemove)="onLineMouseMove($event)"
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index 9aab644..6561030 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -116,7 +116,6 @@ export class FootballFieldComponent {
 	private curBlockEndTime: number = 0;
 	private curBlockStartTime: number = 0;
 	private isDraggingLine:boolean = false;
-	public linePosition: number = 0; // Position de la ligne verticale
 
 	public playerCount: number = 8; // Nombre de joueurs par défaut
 	public plotCount: number = 2; // Nombre de plots par défaut
@@ -152,6 +151,8 @@ export class FootballFieldComponent {
 	// Décalage horizontal en pixels utilisé lorsque vous commencez à déplacer
 	// un bloc sur la timeline.
 	public dragOffsetX: number = 0;
+	// Position de la ligne verticale
+	public linePosition: number = 0;
 
 	constructor(private renderer: Renderer2, private el: ElementRef) {}
 
@@ -162,6 +163,11 @@ export class FootballFieldComponent {
 		this.createPlots();
 		this.createPiquets();
 		this.animate(); // Lancer l'animation
+
+		const timeline = document.querySelector('.timeline') as HTMLElement;
+		this.linePosition = timeline.offsetLeft;
+		console.log("linePosition:", this.linePosition);
+		//console.log("[onLineMouseDown] initialMouseX:", this.initialMouseX, "-", timeIndicator.style.left);
   	}
 
 	// Dessine le terrain de football
@@ -324,15 +330,17 @@ export class FootballFieldComponent {
 	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;
+		//this.updateTimeIndicator(0);
 	}
 
 	// Mise à jour de la position du trait de temps sur la timeline
 	updateTimeIndicator(currentTime: number) {
 		//const timeIndicator = document.getElementById('time-indicator');
+		const timeline = document.querySelector('.timeline') as HTMLElement;
+
+		this.timelineWidth = timeline.offsetWidth; // Largeur totale de la timeline
 		const elmnts = document.querySelectorAll('[id=time-indicator]');
 		if (elmnts) {
-			const timeline = document.querySelector('.timeline') as HTMLElement;
-			this.timelineWidth = timeline.offsetWidth; // Largeur totale de la timeline
 			// Calcul de la position du trait en pixels
 			let timePosition = (currentTime / this.getTotalTimelineDuration()) * this.timelineWidth;
 			// Si l'indicateur est à la fin de la timeline, on arrete l'animation et on replace
@@ -347,6 +355,18 @@ export class FootballFieldComponent {
 				(element as HTMLElement).style.left = `${timePosition}px`
 			);
 		}
+
+		const timeIndicator = document.getElementById('verticale-line');
+		//console.log("[updateTimeIndicator] Timeline:",timeline.getBoundingClientRect().left, "px -", timeline.getBoundingClientRect().right, "px");
+		if(timeIndicator) {
+			let timePosition = timeline.offsetLeft + (currentTime / this.getTotalTimelineDuration()) * this.timelineWidth;
+			if(timePosition >= this.timelineWidth) {
+				timePosition = timeline.getBoundingClientRect().left;
+				this.isPlaying = false;
+			}
+			this.linePosition = timePosition;
+			timeIndicator.style.left = `${timePosition}px`;
+		}
 	}
 
   	// Méthode pour attacher le ballon à un joueur
@@ -966,8 +986,8 @@ export class FootballFieldComponent {
 		// Mise à jour de l'indicateur de timeline
 		this.updateTimeIndicator(0);
 
-		const currentTime = performance.now();
-		this.updateTimeIndicator(currentTime);
+		//const currentTime = performance.now();
+		//this.updateTimeIndicator(currentTime);
 	}
 
 	/* GESTION DE LA TIMELINE */
@@ -1319,17 +1339,20 @@ export class FootballFieldComponent {
 
 	// Capture l'événement de mousedown pour commencer le déplacement de la ligne
 	onLineMouseDown(event: MouseEvent) {
-		event.preventDefault();
-	
+		event.stopPropagation();
+		
 		this.isDraggingLine = true;
 		this.initialMouseX = event.clientX;
+		//const timeIndicator = document.getElementById('verticale-line');
+		//console.log("[onLineMouseDown] initialMouseX:", this.initialMouseX, "-", timeIndicator.style.left);
 	}
 
  	// Suivre le déplacement de la souris et ajuster la position de la ligne
  	onLineMouseMove(event: MouseEvent) {
     	if (!this.isDraggingLine) return;
-
-    	const deltaX = event.clientX - this.initialMouseX;
+		const deltaX = event.clientX - this.initialMouseX;
+		const timeline = document.querySelector('.timeline') as HTMLElement;
+		console.log("[onLineMouseMove] clientX:",event.clientX,"- initialMouseX:",this.initialMouseX,"- offsetLeft:",timeline.offsetLeft);
     	this.linePosition += deltaX;  // Déplacer la ligne
     	this.initialMouseX = event.clientX;  // Réinitialiser la position de départ
   	}
@@ -1337,5 +1360,6 @@ export class FootballFieldComponent {
   	// Terminer le déplacement de la ligne
   	onLineMouseUp() {
     	this.isDraggingLine = false;
+		console.log("[onLineMouseUp]");
   	}	  
 }