modif
This commit is contained in:
ExostFlash
parent
791cbe79d6
commit
cf2274d49c
8 changed files with 834 additions and 536 deletions
|
|
@ -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:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
box-shadow: 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:
|
||||
0 12px 48px rgba(218, 165, 32, 0.2),
|
||||
0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 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:
|
||||
linear-gradient(135deg,
|
||||
background: linear-gradient(
|
||||
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; }
|
||||
50% { opacity: 0.5; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Versus Section */
|
||||
|
|
@ -260,8 +261,8 @@
|
|||
|
||||
.combat-arena {
|
||||
margin-top: 24px;
|
||||
background:
|
||||
linear-gradient(135deg,
|
||||
background: linear-gradient(
|
||||
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:
|
||||
repeating-conic-gradient(
|
||||
background: 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); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
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:
|
||||
0 0 10px #ffd700,
|
||||
0 0 20px #ffd700,
|
||||
0 0 30px #ffd700;
|
||||
text-shadow: 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; }
|
||||
to { text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700; }
|
||||
from {
|
||||
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); }
|
||||
50% { transform: scale(1.2); }
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.8); opacity: 0.8; }
|
||||
100% { transform: scale(2); opacity: 0; }
|
||||
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:
|
||||
linear-gradient(90deg,
|
||||
background: linear-gradient(
|
||||
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:
|
||||
0 4px 20px rgba(255, 215, 0, 0.3),
|
||||
box-shadow: 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); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes badge-pulse {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); }
|
||||
50% { transform: scale(1.1) rotate(5deg); }
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes time-tick {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
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; }
|
||||
.referee .stat-value { color: #ffd700; }
|
||||
.timing .stat-value { color: #dc2626; }
|
||||
.venue .stat-value {
|
||||
color: #10b981;
|
||||
}
|
||||
.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); }
|
||||
.referee-glow { box-shadow: inset 0 0 20px rgba(255, 215, 0, 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;
|
||||
.venue-glow {
|
||||
box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.danger-tape {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
#ffd700 0px,
|
||||
#ffd700 10px,
|
||||
#dc2626 10px,
|
||||
#dc2626 20px
|
||||
);
|
||||
animation: tape-move 2s linear infinite;
|
||||
.referee-glow {
|
||||
box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
@keyframes tape-move {
|
||||
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; }
|
||||
.timing-glow {
|
||||
box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
@ -557,4 +566,3 @@
|
|||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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-club">CE Paris</div>
|
||||
<div class="score">12</div>
|
||||
<div class="fencer-name">
|
||||
{{ player1?.name }} {{ player1?.firstName }}
|
||||
</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-club">Escrime Lyon</div>
|
||||
<div class="score">8</div>
|
||||
<div class="fencer-name">
|
||||
{{ player2?.name }} {{ player2?.firstName }}
|
||||
</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-sub">PARIS • ZONE A</span>
|
||||
<span class="stat-value">{{ latestMatch.city }}</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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,102 +1,171 @@
|
|||
<h2>Ajouter un match</h2>
|
||||
<h2 class="mb-4">Ajouter un match</h2>
|
||||
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<fieldset>
|
||||
<legend>Joueur 1</legend>
|
||||
<label>Prénom :</label>
|
||||
<form (ngSubmit)="onSubmit()" class="needs-validation" novalidate>
|
||||
<fieldset class="border p-3 mb-4 rounded">
|
||||
<legend class="w-auto px-2">Joueur 1</legend>
|
||||
|
||||
<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>
|
||||
<legend>Joueur 2</legend>
|
||||
<label>Prénom :</label>
|
||||
<fieldset class="border p-3 mb-4 rounded">
|
||||
<legend class="w-auto px-2">Joueur 2</legend>
|
||||
|
||||
<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>
|
||||
<legend>Arbitre</legend>
|
||||
<label>Prénom :</label>
|
||||
<fieldset class="border p-3 mb-4 rounded">
|
||||
<legend class="w-auto px-2">Arbitre</legend>
|
||||
|
||||
<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>
|
||||
<select [(ngModel)]="formData.refereelevel" name="refereelevel" required>
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
<legend>Match</legend>
|
||||
<label>Ville :</label>
|
||||
<input type="text" [(ngModel)]="formData.city" name="city" required />
|
||||
<fieldset class="border p-3 mb-4 rounded">
|
||||
<legend class="w-auto px-2">Match</legend>
|
||||
|
||||
<label>Pays :</label>
|
||||
<input type="text" [(ngModel)]="formData.country" name="country" required />
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Ville :</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
[(ngModel)]="formData.city"
|
||||
name="city"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label>Arme :</label>
|
||||
<select [(ngModel)]="formData.weapon" name="weapon" required>
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
27
FencerJudgeFront/src/app/utils/getState.ts
Normal file
27
FencerJudgeFront/src/app/utils/getState.ts
Normal file
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue