Merge de la brange fait à la mano

src/app/app.component.html

@@ -1,3 +1,3 @@
-<app-book-menu></app-book-menu>
+<!-- <app-book-menu></app-book-menu> -->
 
 <router-outlet (activate)="onActivate($event)"></router-outlet>

src/app/app.routes.ts

@@ -7,9 +7,11 @@ import { UserListComponent } from './components/user-list/user-list.component';
 import { UserDetailComponent } from './components/user-detail/user-detail.component';
 import { SudokuComponent } from './components/sudoku/sudoku.component';
 import { DifficultySelectorComponent } from './components/difficulty-selector/difficulty-selector.component'
+import { UserAccueilComponent } from './components/user-accueil/user-accueil.component'; 
 
 export const routes: Routes = [
     { path: '', component: LoginComponent },
+    { path: 'accueil', component: UserAccueilComponent }, 
     { path: 'books', component: BookListComponent },
     { path: 'book/add', component: BookFormComponent },    
     { path: 'book/:id', component: BookDetailComponent },

src/app/components/sudoku/sudoku.component.html

@@ -1,3 +1,5 @@
+<app-book-menu></app-book-menu> 
+
 <p>sudoku works!</p>
 
 <div class="grid">

src/app/components/sudoku/sudoku.component.ts

@@ -2,13 +2,13 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgFor,NgIf } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-
+import { UserMenuComponent } from '../user-menu/user-menu.component'; 
 import { SudokuService } from '../../services/sudoku-service';
 
 @Component({
   selector: 'app-sudoku',
   standalone: true,
-  imports: [RouterModule, NgFor, NgIf],
+  imports: [RouterModule, NgFor, NgIf,UserMenuComponent],
   templateUrl: './sudoku.component.html',
   styleUrl: './sudoku.component.css'
 })

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

@@ -14,5 +14,10 @@
             <th>SAM</th>
             <th>DIM</th>
         </tr>
+        <tr>
+            <th *ngFor="let azerty of streaks">
+                {{ azerty }}
+            </th>    
+        </tr> 
     </tbody>
 </table>

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

@@ -1,26 +1,56 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { UserMenuComponent } from '../user-menu/user-menu.component';
+import { UserService } from '../../services/user-service';
+import { NgFor } from '@angular/common';
+
+interface Streak {
+  day: string
+  isPlayed: boolean
+} 
 
 @Component({
   selector: 'app-user-accueil',
   standalone: true,
-  imports: [UserMenuComponent,RouterModule],
+  imports: [UserMenuComponent,RouterModule,NgFor],
   templateUrl: './user-accueil.component.html',
   styleUrl: './user-accueil.component.css'
 })
 
 export class UserAccueilComponent {
   protected formattedDate : String
+  protected streaks: Object[] 
 
-  public constructor() {
+  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 = currentDate.toLocaleDateString(undefined, options)
+
+    this.streaks = ["❌","❌","❌","❌","❌","❌","❌"]
+
+    let userConnecte = localStorage.getItem('UserConnecte')
+    if(userConnecte == undefined) {return}
+
+    let id = us.getIdByUser(userConnecte)
+    if(id == undefined) {return}
+
+    let streaks = us.getStreaksFromId(id)
+    if(streaks == undefined) {return}
+    
+    this.streaks = []
+    streaks.forEach(element => {
+      let a : Streak = element as Streak
+      if(a["isPlayed"]){
+        this.streaks.push("✅")
+      } else {
+        this.streaks.push("❌")
+      }
+    }); 
+
+    }
 
 }

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

@@ -4,5 +4,5 @@
   <a mat-menu-item routerLink="/accueil" routerLinkActive="active" ariaCurrentWhenActive="page">Accueil</a>
   <a mat-menu-item routerLink="/users" routerLinkActive="active" ariaCurrentWhenActive="page">Classement</a>
   <a mat-menu-item routerLink="{{route}}" routerLinkActive="active" ariaCurrentWhenActive="page">Details</a>
-  <a mat-menu-item routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Sudoku</a>
+  <a mat-menu-item routerLink="/sudoku" routerLinkActive="active" ariaCurrentWhenActive="page">Sudoku</a> 
 </mat-menu>

src/app/services/user-service.ts

@@ -34,6 +34,18 @@ export class UserService {
         return Math.ceil(this.users.length / this.pageSize)
     }
 
+    public getIdByUser(name: String): number | undefined{
+        let u : User | undefined = this.users.find((user) => user.login === name)
+        if(u == undefined) { return }
+        return u.id
+    }
+
+    public getStreaksFromId(id: number): Object[] | undefined{
+        let u : User | undefined = this.users.find((user) => user.id === id)
+        if(u == undefined) { return }
+        return u.streaks
+    } 
+
     public getUserNbPts(nbPage:number, sortSens:number): User[] {
         if (nbPage>this.getNbPage() || nbPage<=0) return[];
         let page = this.HardCopy(this.users);