134 lines
5.1 KiB
HTML
134 lines
5.1 KiB
HTML
<div class="football-container">
|
|
<!-- Sélecteur de couleurs au-dessus du canvas -->
|
|
<div class="toolbar">
|
|
<!-- Saisie du nombre de joueurs -->
|
|
<div class="player-count">
|
|
<label for="playerCount">Nombre de joueurs : </label>
|
|
<input type="number" id="playerCount" [(ngModel)]="playerCount" min="1" max="25" (change)="updatePlayers()">
|
|
</div>
|
|
|
|
<!-- Saisie du nombre de plots -->
|
|
<div class="plot-count">
|
|
<label for="plotCount">Nombre de plots : </label>
|
|
<input type="number" id="plotCount" [(ngModel)]="plotCount" min="1" max="50" (change)="updatePlots()">
|
|
</div>
|
|
|
|
<!-- Saisie du nombre de plots -->
|
|
<div class="piquet-count">
|
|
<label for="piquetCount">Nombre de piquets : </label>
|
|
<input type="number" id="piquetCount" [(ngModel)]="piquetCount" min="1" max="20" (change)="updatePiquets()">
|
|
</div>
|
|
|
|
<!-- Bouton pour réinitialiser le dessin -->
|
|
<!--<button (click)="clearCanvas()" class="clear-button">Réinitialiser</button>-->
|
|
|
|
<div class="toolbar-act">
|
|
<button (click)="setInteractionMode('move')" class="action-button">Déplacer un élément</button>
|
|
<button (click)="setInteractionMode('animate')" class="action-button">Dessiner un vecteur</button>
|
|
<button (click)="reinitPlayers()" class="anim-button">Initialiser</button>
|
|
<button (click)="playTimeline()" class="anim-button">Play Timeline</button>
|
|
<button (click)="stopTimeline()" class="anim-button">Stop Timeline</button>
|
|
</div>
|
|
|
|
<div class="toolbar-mode">
|
|
<span><h2>{{ interactionMode }}</h2></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-and-timeline-container">
|
|
<canvas #canvas width="800" height="600"
|
|
(mousedown)="onCanvasMouseDown($event)"
|
|
(mousemove)="onCanvasMouseMove($event)"
|
|
(mouseup)="onCanvasMouseUp($event)">
|
|
</canvas>
|
|
|
|
<div class="timeline-container">
|
|
<div class="timeline-separator"></div>
|
|
<div class="ball-timeline">
|
|
<span class="timeline-name prevent-select">Ballon</span>
|
|
<div class="timeline" (mousedown)="onTLBallMouseDown($event, ball)"
|
|
(mousemove)="onTLBallMouseMove($event)"
|
|
(mouseup)="onTLBallMouseUp()">
|
|
<div *ngFor="let stepBall of ball.steps; let i = index"
|
|
class="timeline-blk-ball"
|
|
[style.left]="calculateLeftPosition(stepBall)"
|
|
[style.width]="calculateBlockWidth(stepBall)"
|
|
(mousedown)="onTLBallBlockMouseDown($event, ball, i)">
|
|
<span class="prevent-select">{{ i + 1 }}</span>
|
|
<div class="handle-left-blk-ball"
|
|
(mousedown)="onHandleMouseDown($event, 'left', ball, i)"
|
|
(mousemove)="onHandleMouseMove($event)"
|
|
(mouseup)="onHandleMouseUp()">
|
|
<!-- poignée gauche -->
|
|
</div>
|
|
<div class="handle-right-blk-ball"
|
|
(mousedown)="onHandleMouseDown($event, 'right', ball, i)"
|
|
(mousemove)="onHandleMouseMove($event)"
|
|
(mouseup)="onHandleMouseUp()">
|
|
<!-- poignée droite -->
|
|
</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 prevent-select">Joueur {{ player.id }}</span>
|
|
<div class="timeline" (mousedown)="onTimelineMouseDown($event, player)"
|
|
(mousemove)="onTimelineMouseMove($event)"
|
|
(mouseup)="onTimelineMouseUp()">
|
|
|
|
<div *ngFor="let stepPlayer of player.steps; let i = index"
|
|
class="timeline-blk-player"
|
|
[style.left]="calculateLeftPosition(stepPlayer)"
|
|
[style.width]="calculateBlockWidth(stepPlayer)"
|
|
(mousedown)="onTimelineBlockMouseDown($event, player, i)">
|
|
<span class="prevent-select">{{ i + 1 }}</span>
|
|
<div class="handle-left-blk-player"
|
|
(mousedown)="onHandleMouseDown($event, 'left', player, i)"
|
|
(mousemove)="onHandleMouseMove($event)"
|
|
(mouseup)="onHandleMouseUp()">
|
|
<!-- poignée gauche -->
|
|
</div>
|
|
<div class="handle-right-blk-player"
|
|
(mousedown)="onHandleMouseDown($event, 'right', player, i)"
|
|
(mousemove)="onHandleMouseMove($event)"
|
|
(mouseup)="onHandleMouseUp()">
|
|
<!-- poignée droite -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="time-indicator" id="time-indicator"> -->
|
|
<!-- Trait de visualisation -->
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
<div class="vertical-line" id="verticale-line"
|
|
[style.left.px]="linePosition"
|
|
(mousedown)="onLineMouseDown($event)"
|
|
(mousemove)="onLineMouseMove($event)"
|
|
(mouseup)="onLineMouseUp()"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-player">
|
|
<h3>Timeline du joueur sélectionné</h3>
|
|
<div *ngIf="selectedPlayer">
|
|
<ul>
|
|
<li *ngFor="let step of selectedPlayer.steps; let i = index">
|
|
Etape {{ 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">
|
|
<h3>Debug Info</h3>
|
|
<p>{{ debugInfo }}</p>
|
|
</div>
|
|
<!-- <div class="controls">
|
|
<button (click)="clearDrawings()">Effacer les dessins</button>
|
|
</div> -->
|
|
</div>
|