diff --git a/src/app/components/user-accueil/user-accueil.component.html b/src/app/components/user-accueil/user-accueil.component.html index 1326f2a..7a5161c 100644 --- a/src/app/components/user-accueil/user-accueil.component.html +++ b/src/app/components/user-accueil/user-accueil.component.html @@ -1,22 +1,16 @@ - -

{{formattedDate}}

- - - - - - - - - + + + - diff --git a/src/app/components/user-accueil/user-accueil.component.ts b/src/app/components/user-accueil/user-accueil.component.ts index 87670e5..3d10560 100644 --- a/src/app/components/user-accueil/user-accueil.component.ts +++ b/src/app/components/user-accueil/user-accueil.component.ts @@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router'; import { UserMenuComponent } from '../user-menu/user-menu.component'; import { UserService } from '../../services/user-service'; import { NgFor } from '@angular/common'; +import { DatePipe } from '@angular/common'; interface Streak { day: string @@ -12,7 +13,7 @@ interface Streak { @Component({ selector: 'app-user-accueil', standalone: true, - imports: [UserMenuComponent,RouterModule,NgFor], + imports: [UserMenuComponent,RouterModule,NgFor,DatePipe], templateUrl: './user-accueil.component.html', styleUrl: './user-accueil.component.css' }) @@ -20,17 +21,13 @@ interface Streak { export class UserAccueilComponent { protected formattedDate : String protected streaks: Object[] + protected day: String[] public constructor(us : UserService) { - const currentDate: Date = new Date - const options: Intl.DateTimeFormatOptions = { - year: 'numeric', - month: 'long', - day: 'numeric' - } - this.formattedDate = currentDate.toLocaleDateString(undefined, options) + this.formattedDate = this.getDate() this.streaks = ["❌","❌","❌","❌","❌","❌","❌"] + this.day = ["L","M","M","J","V","S","D"] let userConnecte = localStorage.getItem('UserConnecte') if(userConnecte == undefined) {return} @@ -42,8 +39,10 @@ export class UserAccueilComponent { if(streaks == undefined) {return} this.streaks = [] + this.day = [] streaks.forEach(element => { let a : Streak = element as Streak + this.day.push(a["day"]) if(a["isPlayed"]){ this.streaks.push("✅") } else { @@ -51,6 +50,17 @@ export class UserAccueilComponent { } }); + } + + public getDate(): String{ + const currentDate: Date = new Date + const options: Intl.DateTimeFormatOptions = { + year: 'numeric', + month: 'long', + day: 'numeric' } + return currentDate.toLocaleDateString(undefined, options) + + } } diff --git a/src/app/components/user-menu/user-menu.component.css b/src/app/components/user-menu/user-menu.component.css new file mode 100644 index 0000000..38a0f47 --- /dev/null +++ b/src/app/components/user-menu/user-menu.component.css @@ -0,0 +1,33 @@ +nav[mat-tab-nav-bar] { + display: flex; + justify-content: space-between; + background-color: #333; + padding: 10px 0 + } + + mat-tab-link, button[mat-button] { + flex: 1; + text-align: center; + color: white; + background-color: #444; + border: none; + padding: 15px; + cursor: pointer; + transition: background-color 0.3s; + } + + mat-tab-link:hover, button[mat-button]:hover { + background-color: #555; + } + + a[mat-menu-item] { + text-align: center; /* Centrer le texte des éléments de menu */ + padding: 10px; /* Espacement interne pour le menu */ + display: block; /* Faire en sorte que le lien prenne toute la largeur */ + color: #111; /* Couleur du texte du menu */ + } + + a[mat-menu-item]:hover { + background-color: #555; /* Couleur au survol pour le menu */ + } + diff --git a/src/app/components/user-menu/user-menu.component.html b/src/app/components/user-menu/user-menu.component.html index 708dad9..08137b5 100644 --- a/src/app/components/user-menu/user-menu.component.html +++ b/src/app/components/user-menu/user-menu.component.html @@ -1,9 +1,8 @@ Sudoku - Morpion - Echec - Star Wars Rebellion - + Morpion + Jeu de l'oie + Star Wars Rebellion diff --git a/src/app/components/user-menu/user-menu.component.ts b/src/app/components/user-menu/user-menu.component.ts index e983eb4..9cc5079 100644 --- a/src/app/components/user-menu/user-menu.component.ts +++ b/src/app/components/user-menu/user-menu.component.ts @@ -6,35 +6,40 @@ import { UserService } from '../../services/user-service'; import { MatTabsModule } from '@angular/material/tabs'; import { RouterLink } from '@angular/router'; import { MatTabNav } from '@angular/material/tabs'; +import { SimpleChanges } from '@angular/core'; @Component({ selector: 'app-book-menu', standalone: true, imports: [RouterModule, MatButtonModule, MatMenuModule,MatTabsModule,RouterLink,MatTabNav], - templateUrl: './user-menu.component.html' + templateUrl: './user-menu.component.html', + styleUrl: './user-menu.component.css' }) export class UserMenuComponent { - private Service : UserService; + private service : UserService; public userconnecte : String | undefined; public route : String | undefined; public constructor(us: UserService) { - this.Service = us + this.service = us this.reloadPseudo() } public reloadPseudo(){ - let id = localStorage.getItem('UserConnecte'); + let name = localStorage.getItem('UserConnecte'); + + if (typeof name === "string" && name !="undefined"){ + this.userconnecte = name + + // let id : number | undefined = this.service.getIdByUser(name) + // if(id == undefined) return + // this.route = "/user/" + id + // console.log(this.route) - if (typeof id === "string" && id !="undefined"){ - let user = this.Service.getUserById(+id) - this.route = "/users/" + user?.id - this.userconnecte = user?.login - this.userconnecte = id } else { this.userconnecte = "Pseudo"; - this.route = "/users/0"; + this.route = "/user/0"; } } }
LUNMARMERJEUVENSAMDIM
+ {{ d }} +
- {{ azerty }} + + {{ streak }}