diff --git a/src/app/football-field/football-field.component.css b/src/app/football-field/football-field.component.css
index 1156d7c..e589a73 100644
--- a/src/app/football-field/football-field.component.css
+++ b/src/app/football-field/football-field.component.css
@@ -105,17 +105,20 @@ canvas {
.timeline-container {
width: 100%;
margin-top: 20px;
+ 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;
}
.player-timeline {
display: flex;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 5px;
}
.ball-timeline {
display: flex;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 5px;
}
.timeline {
@@ -135,7 +138,7 @@ canvas {
margin-right: 10px;
}
-.timeline-block {
+.timeline-blk-player {
position: absolute;
height: 23px;
background-color: hsla(240, 100%, 50%, 0.308);
@@ -147,6 +150,18 @@ canvas {
text-align: center;
}
+.timeline-blk-ball {
+ position: absolute;
+ height: 23px;
+ background-color: hsla(125, 100%, 50%, 0.308);
+ border: 2px solid black;
+ border-radius: 4px;
+ cursor: move;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ text-align: center;
+}
+
.time-indicator {
position: absolute;
top: 0;
@@ -156,19 +171,38 @@ canvas {
left: 0; /* Point de départ du trait */
}
-.handle-left, .handle-right {
+.handle-left-blk-player, .handle-right-blk-player {
position: absolute;
top: 0;
- width: 15px;
+ width: 10px;
height: 100%;
background-color: hsla(240, 100%, 50%, 0.507);;
cursor: ew-resize;
}
-.handle-left {
+.handle-left-blk-ball, .handle-right-blk-ball {
+ position: absolute;
+ top: 0;
+ width: 10px;
+ height: 100%;
+ background-color: rgba(32, 70, 45, 0.507);;
+ cursor: ew-resize;
+}
+
+.handle-left-blk-player, .handle-left-blk-ball {
left: 0;
}
-.handle-right {
+.handle-right-blk-player, .handle-right-blk-ball {
right: 0;
+}
+
+/* Ligne verticale traversant toutes les timelines */
+.vertical-line {
+ position: absolute;
+ width: 4px;
+ height: 100%;
+ background-color: red;
+ cursor: ew-resize;
+ top: 0;
}
\ No newline at end of file
diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index c113277..26f0d9b 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -49,18 +49,18 @@
(mousemove)="onTLBallMouseMove($event)"
(mouseup)="onTLBallMouseUp()">
{{ i + 1 }}
-
-
@@ -79,18 +79,18 @@
(mouseup)="onTimelineMouseUp()">
{{ i + 1 }}
-
-
@@ -102,6 +102,13 @@
+
+
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index 0b8318d..9aab644 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -111,10 +111,12 @@ export class FootballFieldComponent {
private isResizingLeft: boolean = false;
private isResizingRight: boolean = false;
private initialMouseX:number = 0;
- private resizedTLPlayer: TimelineStep[] | null = null;
+ private resizedTLElmt: TimelineStep[] | null = null;
private resizedBlockIndex: number = 0;
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
@@ -301,7 +303,6 @@ export class FootballFieldComponent {
// Mettre à jour la position du ballon
if (this.isAnimating) {
if (this.ball.steps.length > 0) {
- console.log("PLUP");
this.updateBallPosition();
}
}
@@ -810,6 +811,7 @@ export class FootballFieldComponent {
this.ball.isDragging = false;
this.test = false;
this.prevAngle = 0;
+ this.ball.steps = [];
}
if (this.draggingPlayer) {
@@ -933,8 +935,6 @@ export class FootballFieldComponent {
// Méthode pour changer le mode d'interaction (déplacer ou dessiner un vecteur)
setInteractionMode(mode: 'move' | 'animate') {
this.interactionMode = mode;
- //this.isDrawingVector = false;
- //this.selectedPlayer = null; // Réinitialiser la sélection de joueur pour éviter tout déplacement involontaire
}
// Méthode pour activer/désactiver la boucle de l'animation
@@ -973,43 +973,44 @@ export class FootballFieldComponent {
/* GESTION DE LA TIMELINE */
onHandleMouseMove(event: MouseEvent) {
- if (!this.resizedTLPlayer) return;
+ if (!this.resizedTLElmt) return;
const deltaX = event.clientX - this.initialMouseX;
// On recupère le bloc courant
- const curStep = this.resizedTLPlayer[this.resizedBlockIndex];
+ const curStep = this.resizedTLElmt[this.resizedBlockIndex];
let nextStep:TimelineStep = null;
let prevStep:TimelineStep = null;
// On recupère le bloc suivant si il existe
- if (this.resizedBlockIndex < (this.resizedTLPlayer.length - 1)) {
- nextStep = this.resizedTLPlayer[this.resizedBlockIndex + 1];
+ if (this.resizedBlockIndex < (this.resizedTLElmt.length - 1)) {
+ nextStep = this.resizedTLElmt[this.resizedBlockIndex + 1];
}
// On recupère le bloc précédent si il existe
if (this.resizedBlockIndex > 0) {
- prevStep = this.resizedTLPlayer[this.resizedBlockIndex - 1];
+ prevStep = this.resizedTLElmt[this.resizedBlockIndex - 1];
}
if (this.isResizingLeft) {
const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")");
if (prevStep) {
- curStep.startTime = Math.max(prevStep.endTime, newStartTime);
+ curStep.startTime = Math.max(prevStep.endTime + 1, newStartTime);
} else {
curStep.startTime = Math.max(0, newStartTime);
}
// On calcule la nouvelle durée du bloc
- curStep.duration = curStep.endTime - newStartTime;
+ curStep.duration = curStep.endTime - curStep.startTime;
} else if (this.isResizingRight) {
const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")");
if (newEndTime < this.getTotalTimelineDuration()) {
if (nextStep) {
- curStep.endTime = Math.max(curStep.startTime, nextStep.startTime)
+ console.log("[onHandleMouseMove] nextStep:",newEndTime,"/",nextStep.startTime,")");
+ curStep.endTime = Math.min(newEndTime, nextStep.startTime - 1)
} else {
curStep.endTime = Math.max(curStep.startTime, newEndTime);
}
// On calcule la nouvelle durée du bloc
- curStep.duration = newEndTime - curStep.startTime;
+ curStep.duration = curStep.endTime - curStep.startTime;
}
}
}
@@ -1018,7 +1019,7 @@ export class FootballFieldComponent {
console.log("[onHandleMouseUp]");
this.isResizingLeft = false;
this.isResizingRight = false;
- this.resizedTLPlayer = null;
+ this.resizedTLElmt = null;
this.resizedBlockIndex = 0;
this.curBlockEndTime = 0;
}
@@ -1030,10 +1031,10 @@ export class FootballFieldComponent {
// Position initiale de la souris
this.initialMouseX = event.clientX;
- this.resizedTLPlayer = elmt.steps;
+ this.resizedTLElmt = elmt.steps;
this.resizedBlockIndex = blockIndex;
- this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime;
- this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime;
+ this.curBlockEndTime = this.resizedTLElmt[this.resizedBlockIndex].endTime;
+ this.curBlockStartTime = this.resizedTLElmt[this.resizedBlockIndex].startTime;
console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime);
if (direction === 'left') {
@@ -1315,4 +1316,26 @@ export class FootballFieldComponent {
this.animationStartTime = performance.now(); // Obtenir le timestamp de départ
this.animate();
}
+
+ // Capture l'événement de mousedown pour commencer le déplacement de la ligne
+ onLineMouseDown(event: MouseEvent) {
+ event.preventDefault();
+
+ this.isDraggingLine = true;
+ this.initialMouseX = event.clientX;
+ }
+
+ // 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;
+ this.linePosition += deltaX; // Déplacer la ligne
+ this.initialMouseX = event.clientX; // Réinitialiser la position de départ
+ }
+
+ // Terminer le déplacement de la ligne
+ onLineMouseUp() {
+ this.isDraggingLine = false;
+ }
}