vincent/football-drawing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debut de la gestion de la ligne de temps

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-17 17:56:45 +02:00
parent 4e75854003
commit 79af91fad6
3 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/football-field/football-field.component.css
View File

@@ -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;
}

2
src/app/football-field/football-field.component.html
View File

@@ -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)"

42
src/app/football-field/football-field.component.ts
View File

@@ -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]");
}
}