modif

FencerJudgeFront/src/app/components/home/home.component.css

@@ -1,10 +1,8 @@
 .match-card {
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   border: 2px solid #daa520;
-    border-radius: 16px;
   padding: 24px;
-    box-shadow: 
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
-        0 8px 32px rgba(0, 0, 0, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
@@ -14,7 +12,7 @@
 }
 
 .match-card::before {
-    content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -39,11 +37,9 @@
   }
 }
 
-.match-card:hover {
+.match-card {
   transform: translateY(-4px);
-    box-shadow: 
+  box-shadow: 0 12px 48px rgba(218, 165, 32, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4);
-        0 12px 48px rgba(218, 165, 32, 0.2),
-        0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
 .match-background {
@@ -74,8 +70,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-    background: 
+  background: linear-gradient(
-        linear-gradient(135deg, 
+    135deg,
     rgba(26, 26, 46, 0.85) 0%,
     rgba(0, 0, 0, 0.7) 50%,
     rgba(22, 33, 62, 0.85) 100%
@@ -117,19 +113,19 @@
   letter-spacing: 0.5px;
 }
 
-.status-live {
+.status-warning {
   background: rgba(34, 197, 94, 0.2);
   color: #22c55e;
   border: 1px solid #22c55e;
 }
 
-.status-finished {
+.status-success {
   background: rgba(239, 68, 68, 0.2);
   color: #ef4444;
   border: 1px solid #ef4444;
 }
 
-.status-upcoming {
+.status-secondary {
   background: rgba(59, 130, 246, 0.2);
   color: #3b82f6;
   border: 1px solid #3b82f6;
@@ -144,8 +140,13 @@
 }
 
 @keyframes pulse {
-    0%, 100% { opacity: 1; }
+  0%,
-    50% { opacity: 0.5; }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }
 
 /* Versus Section */
@@ -260,8 +261,8 @@
 
 .combat-arena {
   margin-top: 24px;
-    background: 
+  background: linear-gradient(
-        linear-gradient(135deg, 
+    135deg,
     rgba(220, 38, 38, 0.1) 0%,
     rgba(0, 0, 0, 0.8) 50%,
     rgba(255, 215, 0, 0.1) 100%
@@ -275,14 +276,13 @@
 }
 
 .combat-arena::before {
-    content: '';
+  content: "";
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
-    background: 
+  background: repeating-conic-gradient(
-        repeating-conic-gradient(
     from 0deg at 50% 50%,
     transparent 0deg 2deg,
     rgba(220, 38, 38, 0.05) 2deg 4deg
@@ -292,8 +292,12 @@
 }
 
 @keyframes rotate {
-    0% { transform: rotate(0deg); }
+  0% {
-    100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Header Arena */
@@ -307,21 +311,22 @@
 }
 
 .arena-title {
-    font-family: 'Orbitron', monospace;
+  font-family: "Orbitron", monospace;
   font-size: 16px;
   font-weight: 900;
   color: #ffd700;
   letter-spacing: 3px;
-    text-shadow: 
+  text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
-        0 0 10px #ffd700,
-        0 0 20px #ffd700,
-        0 0 30px #ffd700;
   animation: titleGlow 2s ease-in-out infinite alternate;
 }
 
 @keyframes titleGlow {
-    from { text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700; }
+  from {
-    to { text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700; }
+    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+  }
+  to {
+    text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700;
+  }
 }
 
 .arena-pulse {
@@ -334,7 +339,7 @@
 }
 
 .arena-pulse::before {
-    content: '';
+  content: "";
   position: absolute;
   top: -5px;
   left: -5px;
@@ -347,13 +352,24 @@
 }
 
 @keyframes pulse-danger {
-    0%, 100% { transform: scale(1); }
+  0%,
-    50% { transform: scale(1.2); }
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
 }
 
 @keyframes pulse-ring {
-    0% { transform: scale(0.8); opacity: 0.8; }
+  0% {
-    100% { transform: scale(2); opacity: 0; }
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
 }
 
 /* Combat Grid */
@@ -368,8 +384,8 @@
   align-items: center;
   gap: 16px;
   padding: 16px;
-    background: 
+  background: linear-gradient(
-        linear-gradient(90deg, 
+    90deg,
     rgba(0, 0, 0, 0.8) 0%,
     rgba(26, 26, 46, 0.9) 50%,
     rgba(0, 0, 0, 0.8) 100%
@@ -384,8 +400,7 @@
 .combat-stat:hover {
   transform: translateX(8px);
   border-color: #ffd700;
-    box-shadow: 
+  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3),
-        0 4px 20px rgba(255, 215, 0, 0.3),
     inset 0 1px 0 rgba(255, 215, 0, 0.1);
 }
 
@@ -415,7 +430,18 @@
   width: 35px;
   height: 35px;
   background: linear-gradient(45deg, #ffd700, #ffed4a);
-    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
   animation: badge-pulse 3s ease-in-out infinite;
 }
 
@@ -430,18 +456,31 @@
 }
 
 @keyframes radar-spin {
-    0% { transform: rotate(0deg); }
+  0% {
-    100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes badge-pulse {
-    0%, 100% { transform: scale(1) rotate(0deg); }
+  0%,
-    50% { transform: scale(1.1) rotate(5deg); }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(1.1) rotate(5deg);
+  }
 }
 
 @keyframes time-tick {
-    0% { transform: rotate(0deg); }
+  0% {
-    100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Content */
@@ -453,7 +492,7 @@
 }
 
 .stat-label {
-    font-family: 'Orbitron', monospace;
+  font-family: "Orbitron", monospace;
   font-size: 10px;
   font-weight: 700;
   color: #6b7280;
@@ -475,9 +514,15 @@
 }
 
 /* Glows spécifiques */
-.venue .stat-value { color: #10b981; }
+.venue .stat-value {
-.referee .stat-value { color: #ffd700; }
+  color: #10b981;
-.timing .stat-value { color: #dc2626; }
+}
+.referee .stat-value {
+  color: #ffd700;
+}
+.timing .stat-value {
+  color: #dc2626;
+}
 
 .stat-glow {
   position: absolute;
@@ -495,50 +540,14 @@
   opacity: 1;
 }
 
-.venue-glow { box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2); }
+.venue-glow {
-.referee-glow { box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2); }
+  box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
-.timing-glow { box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2); }
-
-/* Footer Arena */
-.arena-footer {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
 }
-
+.referee-glow {
-.danger-tape {
+  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
-    flex: 1;
-    height: 4px;
-    background: 
-        repeating-linear-gradient(
-            45deg,
-            #ffd700 0px,
-            #ffd700 10px,
-            #dc2626 10px,
-            #dc2626 20px
-        );
-    animation: tape-move 2s linear infinite;
 }
-
+.timing-glow {
-@keyframes tape-move {
+  box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2);
-    0% { background-position: 0px 0px; }
-    100% { background-position: 28px 0px; }
-}
-
-.warning-text {
-    font-family: 'Orbitron', monospace;
-    font-size: 12px;
-    font-weight: 700;
-    color: #ffd700;
-    letter-spacing: 1px;
-    animation: warning-blink 1.5s ease-in-out infinite alternate;
-}
-
-@keyframes warning-blink {
-    0% { opacity: 1; }
-    100% { opacity: 0.6; }
 }
 
 /* Responsive */
@@ -557,4 +566,3 @@
     transform: translateY(-4px);
   }
 }
-

FencerJudgeFront/src/app/components/home/home.component.html

@@ -1,25 +1,30 @@
-<div class="match-card">
+<div class="match-card" *ngIf="latestMatch">
   <div class="match-background">
-        <img src="./assets/duel.webp" alt="Escrime" class="background-image">
+    <img src="./assets/duel.webp" alt="Escrime" class="background-image" />
     <div class="image-overlay"></div>
   </div>
 
   <div class="match-header">
     <div class="match-weapon">
       <i class="sword-icon">⚔️</i>
-            <span class="weapon-type">Épée</span>
+      <span class="weapon-type">{{ latestMatch.weapon }}</span>
     </div>
-        <div class="match-status status-live">
+    <div
+      class="match-status"
+      [ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
+    >
       <span class="status-dot"></span>
-            En cours
+      {{ getMatchStateLabel(latestMatch.state) }}
     </div>
   </div>
 
   <div class="match-versus">
     <div class="fencer fencer-left">
-            <div class="fencer-name">Martin DUBOIS</div>
+      <div class="fencer-name">
-            <div class="fencer-club">CE Paris</div>
+        {{ player1?.name }} {{ player1?.firstName }}
-            <div class="score">12</div>
+      </div>
+      <div class="fencer-club">{{ player1?.club }}</div>
+      <div class="score">{{ latestMatch.score1 }}</div>
     </div>
 
     <div class="vs-divider">
@@ -28,9 +33,11 @@
     </div>
 
     <div class="fencer fencer-right">
-            <div class="fencer-name">Sophie BERNARD</div>
+      <div class="fencer-name">
-            <div class="fencer-club">Escrime Lyon</div>
+        {{ player2?.name }} {{ player2?.firstName }}
-            <div class="score">8</div>
+      </div>
+      <div class="fencer-club">{{ player2?.club }}</div>
+      <div class="score">{{ latestMatch.score2 }}</div>
     </div>
   </div>
 
@@ -48,8 +55,8 @@
         </div>
         <div class="stat-content">
           <span class="stat-label">BATTLEFIELD</span>
-                    <span class="stat-value">Gymnase Jean Moulin</span>
+          <span class="stat-value">{{ latestMatch.city }}</span>
-                    <span class="stat-sub">PARIS • ZONE A</span>
+          <span class="stat-sub">{{ latestMatch.country }}</span>
         </div>
         <div class="stat-glow venue-glow"></div>
       </div>
@@ -61,29 +68,45 @@
         </div>
         <div class="stat-content">
           <span class="stat-label">COMBAT JUDGE</span>
-                    <span class="stat-value">Pierre MARTIN</span>
+          <span class="stat-value"
+            >{{ referee?.name }} {{ referee?.firstName }}</span
+          >
           <span class="stat-sub">OFFICIAL REFEREE</span>
         </div>
         <div class="stat-glow referee-glow"></div>
       </div>
 
-            <div class="combat-stat timing">
+      <div
+        class="combat-stat timing"
+        *ngIf="latestMatch?.state === MatchState.NOT_STARTED"
+      >
         <div class="stat-icon">
           <div class="time-ring"></div>
           <span>⚡</span>
         </div>
         <div class="stat-content">
           <span class="stat-label">COMBAT START</span>
-                    <span class="stat-value">14:30</span>
+          <span class="stat-value">{{ getTimeUntilMatch() }}</span>
           <span class="stat-sub">LIVE BATTLE</span>
         </div>
         <div class="stat-glow timing-glow"></div>
       </div>
+      <div
+        class="combat-stat funfact"
+        *ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
+      >
+        <div class="stat-icon">
+          <span>🎯</span>
+        </div>
+        <div class="stat-content">
+          <span class="stat-label">FUN FACT</span>
+          <span class="stat-value">
+            Saviez-vous que l'escrime est l'un des sports les plus anciens aux
+            Jeux Olympiques ?
+          </span>
+          <span class="stat-sub">Inspiration et tradition au rendez-vous</span>
+        </div>
       </div>
-
-        <div class="arena-footer">
-            <div class="danger-tape"></div>
-            <span class="warning-text">⚠️ COMBAT ZONE ACTIVE ⚠️</span>
     </div>
   </div>
 </div>

FencerJudgeFront/src/app/components/home/home.component.ts

@@ -1,9 +1,159 @@
 import { Component } from '@angular/core';
 
+import { MatchesService } from '@services/matches/matches.service';
+import { Matches, MatchState } from '@interfaces/matches';
+
+import { PlayerService } from '@services/player/player.service';
+import { Player } from '@interfaces/player';
+
+import { RefereeService } from '@services/referee/referee.service';
+import { Referee, RefereeLevel } from '@interfaces/referee';
+
 @Component({
   selector: 'app-home',
   standalone: false,
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })
-export class HomeComponent {}
+export class HomeComponent {
+  latestMatch?: Matches;
+  player1?: Player;
+  player2?: Player;
+  referee?: Referee;
+  MatchState = MatchState;
+  intervalId?: any;
+  timeUntilMatch: string | null = null;
+
+  constructor(
+    private matchesService: MatchesService,
+    private playerService: PlayerService,
+    private refereeService: RefereeService
+  ) {}
+
+  ngOnInit(): void {
+    this.getLatestMatch();
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  private getLatestMatch(): void {
+    this.matchesService.getMatches().subscribe((matches) => {
+      if (matches.length > 0) {
+        this.latestMatch = matches[matches.length - 1];
+        console.log(
+          '[HomeComponent] 🏁 Dernier match ajouté :',
+          this.latestMatch
+        );
+
+        // Récupération des données liées
+        this.loadRelatedEntities(this.latestMatch);
+
+        if (this.latestMatch.state === MatchState.NOT_STARTED) {
+          this.updateTimeUntilMatch(); // initial
+          this.intervalId = setInterval(() => {
+            this.updateTimeUntilMatch();
+          }, 60000); // chaque minute
+        }
+      } else {
+        console.warn('[HomeComponent] Aucun match disponible');
+      }
+    });
+  }
+
+  private updateTimeUntilMatch(): void {
+    if (!this.latestMatch) return;
+
+    const now = new Date();
+    const matchDate = new Date(this.latestMatch.date);
+    const diffMs = matchDate.getTime() - now.getTime();
+
+    if (diffMs <= 0) {
+      this.timeUntilMatch = null;
+      clearInterval(this.intervalId);
+      return;
+    }
+
+    const totalMinutes = Math.floor(diffMs / (1000 * 60));
+    const days = Math.floor(totalMinutes / (60 * 24));
+    const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+    const minutes = totalMinutes % 60;
+
+    let result = '';
+    if (days > 0) result += `${days}j `;
+    if (hours > 0 || days > 0) result += `${hours}h `;
+    result += `${minutes}min`;
+
+    this.timeUntilMatch = result.trim();
+  }
+
+  private loadRelatedEntities(match: Matches): void {
+    this.playerService.getPlayerById(match.player1ID).subscribe((p1) => {
+      this.player1 = p1!;
+    });
+
+    this.playerService.getPlayerById(match.player2ID).subscribe((p2) => {
+      this.player2 = p2!;
+    });
+
+    this.refereeService.getRefereeById(match.refereeID).subscribe((ref) => {
+      this.referee = ref!;
+    });
+  }
+
+  getMatchStateLabel(state: MatchState): string {
+    switch (state) {
+      case MatchState.NOT_STARTED:
+        return 'À venir';
+      case MatchState.ONGOING:
+        return 'En cours';
+      case MatchState.OVER:
+        return 'Terminé';
+      default:
+        return 'Inconnu';
+    }
+  }
+
+  getMatchStateColor(state: MatchState): string {
+    switch (state) {
+      case MatchState.NOT_STARTED:
+        return 'secondary';
+      case MatchState.ONGOING:
+        return 'warning';
+      case MatchState.OVER:
+        return 'success';
+      default:
+        return 'light';
+    }
+  }
+
+  getTimeUntilMatch(): string | null {
+    if (
+      !this.latestMatch ||
+      this.latestMatch.state !== MatchState.NOT_STARTED
+    ) {
+      return null;
+    }
+
+    const now = new Date();
+    const matchDate = new Date(this.latestMatch.date);
+    const diffMs = matchDate.getTime() - now.getTime();
+
+    if (diffMs <= 0) return null;
+
+    const totalMinutes = Math.floor(diffMs / (1000 * 60));
+    const days = Math.floor(totalMinutes / (60 * 24));
+    const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+    const minutes = totalMinutes % 60;
+
+    let result = '';
+    if (days > 0) result += `${days}j `;
+    if (hours > 0 || days > 0) result += `${hours}h `;
+    result += `${minutes}min`;
+
+    return result.trim();
+  }
+}

FencerJudgeFront/src/app/components/match/matches-add/matches-add.component.css

@@ -0,0 +1,18 @@
+form fieldset {
+  background-color: #f8f9fa; /* gris clair */
+}
+
+form legend {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+form label {
+  font-weight: 500;
+}
+
+form button {
+  width: 100%;
+  padding: 0.6rem;
+  font-size: 1.1rem;
+}

FencerJudgeFront/src/app/components/match/matches-add/matches-add.component.html

@@ -1,102 +1,171 @@
-<h2>Ajouter un match</h2>
+<h2 class="mb-4">Ajouter un match</h2>
 
-<form (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" class="needs-validation" novalidate>
-  <fieldset>
+  <fieldset class="border p-3 mb-4 rounded">
-    <legend>Joueur 1</legend>
+    <legend class="w-auto px-2">Joueur 1</legend>
-    <label>Prénom :</label>
+
+    <div class="mb-3">
+      <label class="form-label">Prénom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player1FirstName"
         name="player1FirstName"
         required
       />
+    </div>
 
-    <label>Nom :</label>
+    <div class="mb-3">
+      <label class="form-label">Nom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player1Name"
         name="player1Name"
         required
       />
+    </div>
 
-    <label>Club :</label>
+    <div class="mb-3">
+      <label class="form-label">Club :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player1Club"
         name="player1Club"
         required
       />
+    </div>
   </fieldset>
 
-  <fieldset>
+  <fieldset class="border p-3 mb-4 rounded">
-    <legend>Joueur 2</legend>
+    <legend class="w-auto px-2">Joueur 2</legend>
-    <label>Prénom :</label>
+
+    <div class="mb-3">
+      <label class="form-label">Prénom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player2FirstName"
         name="player2FirstName"
         required
       />
+    </div>
 
-    <label>Nom :</label>
+    <div class="mb-3">
+      <label class="form-label">Nom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player2Name"
         name="player2Name"
         required
       />
+    </div>
 
-    <label>Club :</label>
+    <div class="mb-3">
+      <label class="form-label">Club :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.player2Club"
         name="player2Club"
         required
       />
+    </div>
   </fieldset>
 
-  <fieldset>
+  <fieldset class="border p-3 mb-4 rounded">
-    <legend>Arbitre</legend>
+    <legend class="w-auto px-2">Arbitre</legend>
-    <label>Prénom :</label>
+
+    <div class="mb-3">
+      <label class="form-label">Prénom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.refereeFirstName"
         name="refereeFirstName"
         required
       />
+    </div>
 
-    <label>Nom :</label>
+    <div class="mb-3">
+      <label class="form-label">Nom :</label>
       <input
         type="text"
+        class="form-control"
         [(ngModel)]="formData.refereeName"
         name="refereeName"
         required
       />
+    </div>
 
-    <label>Niveau :</label>
+    <div class="mb-3">
-    <select [(ngModel)]="formData.refereelevel" name="refereelevel" required>
+      <label class="form-label">Niveau :</label>
+      <select
+        class="form-select"
+        [(ngModel)]="formData.refereelevel"
+        name="refereelevel"
+        required
+      >
         <option [value]="0">Départemental</option>
         <option [value]="1">Régional</option>
         <option [value]="2">National</option>
         <option [value]="3">International</option>
       </select>
+    </div>
   </fieldset>
 
-  <fieldset>
+  <fieldset class="border p-3 mb-4 rounded">
-    <legend>Match</legend>
+    <legend class="w-auto px-2">Match</legend>
-    <label>Ville :</label>
-    <input type="text" [(ngModel)]="formData.city" name="city" required />
 
-    <label>Pays :</label>
+    <div class="mb-3">
-    <input type="text" [(ngModel)]="formData.country" name="country" required />
+      <label class="form-label">Ville :</label>
+      <input
+        type="text"
+        class="form-control"
+        [(ngModel)]="formData.city"
+        name="city"
+        required
+      />
+    </div>
 
-    <label>Arme :</label>
+    <div class="mb-3">
-    <select [(ngModel)]="formData.weapon" name="weapon" required>
+      <label class="form-label">Pays :</label>
+      <input
+        type="text"
+        class="form-control"
+        [(ngModel)]="formData.country"
+        name="country"
+        required
+      />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Arme :</label>
+      <select
+        class="form-select"
+        [(ngModel)]="formData.weapon"
+        name="weapon"
+        required
+      >
         <option value="Épée">Épée</option>
         <option value="Sabre">Sabre</option>
         <option value="Fleuret">Fleuret</option>
       </select>
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Date :</label>
+      <input
+        type="datetime-local"
+        class="form-control"
+        [(ngModel)]="formData.date"
+        name="date"
+        required
+      />
+    </div>
   </fieldset>
 
-  <button type="submit">Créer le match</button>
+  <button type="submit" class="btn btn-primary">Créer le match</button>
 </form>

FencerJudgeFront/src/app/components/match/matches-add/matches-add.component.ts

@@ -36,6 +36,7 @@ export class MatchesAddComponent {
     city: '',
     country: '',
     weapon: '',
+    date: '',
   };
 
   constructor(
@@ -82,7 +83,7 @@ export class MatchesAddComponent {
                   country: this.formData.country,
                   city: this.formData.city,
                   weapon: this.formData.weapon,
-                  date: new Date(),
+                  date: new Date(this.formData.date),
                   state: MatchState.NOT_STARTED,
                 };
 

FencerJudgeFront/src/app/components/match/matches-id/matches-id.component.ts

@@ -11,6 +11,8 @@ import { Player } from '@interfaces/player';
 import { RefereeService } from '@services/referee/referee.service';
 import { Referee, RefereeLevel } from '@interfaces/referee';
 
+import { getMatchStateLabel, getMatchStateColor } from '@utils/getState';
+
 @Component({
   selector: 'app-matches-id',
   standalone: false,

FencerJudgeFront/src/app/utils/getState.ts

@@ -0,0 +1,27 @@
+import { MatchState } from '@interfaces/matches';
+
+export function getMatchStateLabel(state: MatchState): string {
+  switch (state) {
+    case MatchState.NOT_STARTED:
+      return 'À venir';
+    case MatchState.ONGOING:
+      return 'En cours';
+    case MatchState.OVER:
+      return 'Terminé';
+    default:
+      return 'Inconnu';
+  }
+}
+
+export function getMatchStateColor(state: MatchState): string {
+  switch (state) {
+    case MatchState.NOT_STARTED:
+      return 'secondary';
+    case MatchState.ONGOING:
+      return 'warning';
+    case MatchState.OVER:
+      return 'success';
+    default:
+      return 'light';
+  }
+}