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

ballon dans la timeline maintenant

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-14 18:13:56 +00:00
parent 3f2eff7fbd
commit 46acc3e88f
2 changed files with 130 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,18 +35,6 @@
</div>
</div>
<!-- <canvas #canvas width="800" height="600"
(mousedown)="startDrawing($event)"
(mousemove)="draw($event)"
(mouseup)="stopDrawing()">
Your browser does not support the canvas element.
</canvas> -->
<!-- <canvas #canvas width="800" height="600"
(mousedown)="startDragging($event)"
(mousemove)="drag($event)"
(mouseup)="stopDragging()">
Votre navigateur ne supporte pas l'élément canvas.
</canvas> -->
<div class="canvas-and-timeline-container">
<canvas #canvas width="800" height="600"
(mousedown)="onCanvasMouseDown($event)"
@@ -57,17 +45,20 @@
<div class="timeline-container">
<div class="ball-timeline">
<span class="timeline-name">Ballon</span>
<!--<div class="timeline" (mousedown)="onTimelineMouseDown($event, ball)"
(mousemove)="onTimelineMouseMove($event)"
(mouseup)="onTimelineMouseUp()">
<div class="timeline" (mousedown)="onTLBallMouseDown($event, ball)"
(mousemove)="onTLBallMouseMove($event)"
(mouseup)="onTLBallMouseUp()">
<div *ngFor="let stepBall of ball.steps; let i = index"
class="timeline-block"
[style.left]="calculateLeftPosition(stepBall)"
[style.width]="calculateBlockWidth(stepBall)"
(mousedown)="onTimelineBlockMouseDown($event, ball, 0)">
ballon
(mousedown)="onTLBallBlockMouseDown($event, ball, i)">
{{ i + 1 }}
</div>
</div>-->
<div class="time-indicator" id="time-indicator">
<!-- Trait de visualisation -->
</div>
</div>
</div>
<div *ngFor="let player of players" class="player-timeline">
<span class="timeline-name">Joueur {{ player.id }}</span>

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

@@ -92,7 +92,7 @@ export class FootballFieldComponent {
private draggingPlayer: Player | null = null;
private draggingElement: any = null; // Element (plot, piquet) en cours de déplacement sur le terrain
private attachedPlayer: Player | null = null;
private magnetRadius: number = 50; // Distance à laquelle le ballon s'attache au joueur
private magnetRadius: number = 10; // Distance à laquelle le ballon s'attache au joueur
//private attachedToPlayer: boolean = false; // indique si le ballon est attache a un joueur
private offsetX: number = 0;
private offsetY: number = 0;
@@ -133,6 +133,7 @@ export class FootballFieldComponent {
public isTimelineDragging: boolean = false;
public draggedTimelinePlayer: Player | null = null;
public draggedTimelineBall: Ball | null = null;
public draggedTimelineIndex: number = -1;
// La largeur totale de la timeline en pixels.
// Cela représente la taille visuelle de la timeline dans laquelle
@@ -256,6 +257,13 @@ export class FootballFieldComponent {
if (player.steps.length > 0) {
this.updatePlayerPosition(player);
}
// Déplacer le ballon si attaché à un joueur
if (this.ball.attachedToPlayer) {
const player = this.ball.attachedToPlayer;
// Le ballon suit le joueur
this.updateBallPositionOnPlayer(player);
}
} else if (this.isPlaying) {
player.steps.forEach(step => {
if (currentTime >= step.startTime && currentTime <= step.endTime) {
@@ -266,12 +274,14 @@ export class FootballFieldComponent {
}
});
// Déplacer le ballon si attaché à un joueur
if (this.ball.attachedToPlayer) {
const player = this.ball.attachedToPlayer;
// Le ballon suit le joueur
this.updateBallPositionOnPlayer(player);
}
this.ball.steps.forEach(step => {
if (currentTime >= step.startTime && currentTime <= step.endTime) {
const progress = ((currentTime - step.startTime) / (step.endTime - step.startTime));
this.ball.design.x = step.startX + (step.endX - step.startX) * progress;
this.ball.design.y = step.startY + (step.endY - step.startY) * progress;
hasAnimation = true; // Indiquer qu'il y a encore de l'animation
}
});
// Mettre à jour la position du trait de visualisation du temps
this.updateTimeIndicator(currentTime);
@@ -915,6 +925,10 @@ export class FootballFieldComponent {
this.updatePlayerPosition(player);
});
this.ball.progress = 0;
this.ball.currentStepIndex = 0;
this.updateBallPosition();
// Mise à jour de l'indicateur de timeline
this.updateTimeIndicator(0);
@@ -950,6 +964,104 @@ export class FootballFieldComponent {
return (time / totalDuration) * timelineWidth;
}
onTLBallMouseDown(event: MouseEvent, ball: Ball) {
console.log("[onTLBallMouseDown]");
// Récupérer la position de la souris lors du clic
const { x } = this.getMousePosOnTimeline(event);
// Chercher si un bloc (une étape du joueur) a été cliqué
for (let i = 0; i < ball.steps.length; i++) {
const step = ball.steps[i];
// 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 | Ballon",ball.id," | Block:",
i+1,"] x:",
x,
" - blockStartX:", blockStartX,
" - blockEndX:", blockEndX);
// Si la souris clique dans un bloc
if (x >= blockStartX && x <= blockEndX) {
// Début du déplacement du bloc
this.isTimelineDragging = true;
this.draggedTimelineBall = ball;
this.draggedTimelineIndex = i;
// Garder une référence pour un déplacement fluide
this.dragOffsetX = x - blockStartX;
console.log("[OnTimelineMouseDown | Ballon",ball.id,"] clique dans le bloc",
i+1,
" ! dragOffsetX:", this.dragOffsetX);
break;
}
}
}
onTLBallMouseMove(event: MouseEvent) {
console.log("[onTLBallMouseMove]");
if (this.isTimelineDragging && this.draggedTimelineBall) {
const { x } = this.getMousePosOnTimeline(event);
// Calculer la nouvelle position du bloc
const newStartX = x - this.dragOffsetX;
const totalDuration = this.getTotalTimelineDuration();
const newStartTime = Math.floor((newStartX / this.timelineWidth) * totalDuration);
console.log("[onTimelineMouseMove] - x:",x,
" - dragOffsetX:", this.dragOffsetX,
" - newStartX:", newStartX,
" - newStartTime:", newStartTime,
" - dragged Index:", this.draggedTimelineIndex,
" - timeline len:", this.draggedTimelineBall.steps.length,
);
// Mettre à jour l'étape avec la nouvelle position
const step = this.draggedTimelineBall.steps[this.draggedTimelineIndex];
let prevStep:TimelineStep = null;
// Le bloc N ne peut pas dépasser le bloc N+1 si celui-ci existe
// De même, le bloc N ne peut pas dépasser le bloc N-1 si celui-ci existe
if ((this.draggedTimelineIndex + 1) < this.draggedTimelineBall.steps.length) {
const nextStep = this.draggedTimelineBall.steps[this.draggedTimelineIndex + 1];
if ((this.draggedTimelineIndex - 1) >= 0) {
prevStep = this.draggedTimelineBall.steps[this.draggedTimelineIndex - 1];
}
if ((((newStartTime + step.duration) < nextStep.startTime) &&
prevStep === null) ||
(prevStep != null &&
((prevStep.endTime <= newStartTime) && ((newStartTime + step.duration) < nextStep.startTime)))) {
step.startTime = Math.max(0, newStartTime); // Ne pas permettre les valeurs négatives
step.endTime = Math.max(0, step.startTime + step.duration); // Ne pas permettre les valeurs négatives
}
} else if (((this.draggedTimelineIndex - 1) >= 0) &&
(this.draggedTimelineBall.steps[this.draggedTimelineIndex - 1])) {
const prevStep = this.draggedTimelineBall.steps[this.draggedTimelineIndex - 1];
if ((prevStep.endTime <= newStartTime) &&
((newStartTime + step.duration) <= (this.getTotalTimelineDuration()))) {
step.startTime = Math.max(0, newStartTime); // Ne pas permettre les valeurs négatives
step.endTime = Math.max(0, step.startTime + step.duration); // Ne pas permettre les valeurs négatives
}
} else {
if (step.endTime < this.getTotalTimelineDuration()) {
step.startTime = Math.max(0, newStartTime); // Ne pas permettre les valeurs négatives
}
step.endTime = Math.max(0, step.startTime + step.duration); // Ne pas permettre les valeurs négatives
}
}
}
onTLBallMouseUp() {
if (this.isTimelineDragging) {
console.log("[onTLBallMouseUp] timeline:", this.draggedTimelineBall.steps);
this.isTimelineDragging = false;
this.draggedTimelineBall = null;
this.draggedTimelineIndex = -1;
}
}
onTLBallBlockMouseDown(event: MouseEvent, ball: Ball, index: number) {
console.log("[onTLBallBlockMouseDown] index:", index);
this.isTimelineDragging = true;
this.draggedTimelineBall = ball;
this.draggedTimelineIndex = index;
}
onTimelineMouseDown(event: MouseEvent, player: Player) {
// Récupérer la position de la souris lors du clic
const { x } = this.getMousePosOnTimeline(event);
@@ -974,7 +1086,7 @@ export class FootballFieldComponent {
this.draggedTimelineIndex = i;
// Garder une référence pour un déplacement fluide
this.dragOffsetX = x - blockStartX;
console.log("[OnTimelineMouseDown | Joueur",player.id,"] clique dans un bloc",
console.log("[OnTimelineMouseDown | Joueur",player.id,"] clique dans le bloc",
i+1,
" ! dragOffsetX:", this.dragOffsetX);
break;
@@ -1050,9 +1162,8 @@ export class FootballFieldComponent {
}
onTimelineMouseUp() {
console.log("onMouseUp");
if (this.isTimelineDragging) {
console.log("timeline:", this.draggedTimelinePlayer.steps);
console.log("[onTimelineMouseUp] timeline:", this.draggedTimelinePlayer.steps);
this.isTimelineDragging = false;
this.draggedTimelinePlayer = null;
this.draggedTimelineIndex = -1;