Ajouts de styles et améliorations de code

src/app/components/user-accueil/user-accueil.component.html

@@ -1,22 +1,16 @@
-<!-- <app-book-menu></app-book-menu> -->
-
 <h2>{{formattedDate}}</h2>
 
-
 <table>
     <tbody>
         <tr>
-            <th>LUN</th>
+            <th *ngFor="let d of day">
-            <th>MAR</th>
+                {{ d }}
-            <th>MER</th>
+            </th>    
-            <th>JEU</th>
-            <th>VEN</th>
-            <th>SAM</th>
-            <th>DIM</th>
         </tr> 
+
         <tr>
-            <th *ngFor="let azerty of streaks">
+            <th *ngFor="let streak of streaks">
-                {{ azerty }}
+                {{ streak }}
             </th>    
         </tr> 
     </tbody>

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
+    this.formattedDate = this.getDate()
-    const options: Intl.DateTimeFormatOptions = {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    }
-    this.formattedDate = currentDate.toLocaleDateString(undefined, options)
 
     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)
+
+  }
 
 }

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 */
+  }
+

src/app/components/user-menu/user-menu.component.html

@@ -1,9 +1,8 @@
 <mat-menu #menu="matMenu">
   <a mat-menu-item routerLink="/sudoku" routerLinkActive="active" ariaCurrentWhenActive="page">Sudoku</a> 
-  <a mat-menu-item routerLink="/morpion" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Morpion</a> 
+  <a mat-menu-item>Morpion</a> 
-  <a mat-menu-item routerLink="/echec" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Echec</a> 
+  <a mat-menu-item>Jeu de l'oie</a> 
-  <a mat-menu-item routerLink="/starars" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Star Wars Rebellion</a> 
+  <a mat-menu-item>Star Wars Rebellion</a> 
-
 </mat-menu>
 
 <nav mat-tab-nav-bar>
@@ -11,5 +10,4 @@
   <mat-tab-link label="Accueil" routerLink="/accueil" >Accueil</mat-tab-link>
   <mat-tab-link label="Classement" routerLink="/users">Classement</mat-tab-link>
   <button mat-button [matMenuTriggerFor]="menu">Menu</button>
-
 </nav>

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";
     }
   }
 }