ajout fonctionalité

src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { LoginComponent } from './components/login/login.component';
 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'
 
 export const routes: Routes = [
     { path: '', component: LoginComponent },
@@ -14,6 +15,7 @@ export const routes: Routes = [
     { path: 'book/:id', component: BookDetailComponent },
     { path: 'users', component: UserListComponent },
     { path: 'user/:id', component: UserDetailComponent },
+    { path: 'sudoku', component: DifficultySelectorComponent },
     { path: 'sudoku/:difficulty', component: SudokuComponent },
     { path: '**', redirectTo: '', pathMatch: 'full' }
 ];

src/app/components/difficulty-selector/difficulty-selector.component.css

@@ -0,0 +1,21 @@
+section {
+    min-height: 50%;
+    min-width: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    border: 1px solid #000;
+    border-radius: 50px;
+    text-align: center;
+}
+
+section .btn {
+    position: absolute;
+    top: 0%;
+    height: 100%;
+    width: calc(100% - 1em);
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}

src/app/components/difficulty-selector/difficulty-selector.component.html

@@ -0,0 +1,11 @@
+<section>
+    <h1>
+        Choisir une difficulté:
+    </h1>
+    
+    <div class="btn">
+        <button routerLink="/sudoku/easy" mat-flat-button color="primary">easy</button>
+        <button routerLink="/sudoku/medium" mat-flat-button color="primary">medium</button>
+        <button routerLink="/sudoku/hard" mat-flat-button color="primary">hard</button>
+    </div>
+</section>

src/app/components/difficulty-selector/difficulty-selector.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DifficultySelectorComponent } from './difficulty-selector.component';
+
+describe('DifficultySelectorComponent', () => {
+  let component: DifficultySelectorComponent;
+  let fixture: ComponentFixture<DifficultySelectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DifficultySelectorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DifficultySelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/difficulty-selector/difficulty-selector.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-difficulty-selector',
+  standalone: true,
+  imports: [RouterModule,MatButtonModule],
+  templateUrl: './difficulty-selector.component.html',
+  styleUrl: './difficulty-selector.component.css'
+})
+export class DifficultySelectorComponent {
+
+}

src/app/components/sudoku/sudoku.component.css

@@ -2,6 +2,7 @@
     --cellSize: 50px;
     --color: #ddd;
     --color-faux: rgba(255,0,0,0.4);
+    --bc-win: #ff0;
 }
 
 .grille {
@@ -10,13 +11,12 @@
     transform: translate(-50%);
 }
 
+/* on reset l'apparence des input*/
 .cell::-webkit-outer-spin-button,
 .cell::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
-/* Firefox */
 .cell[type=number] {
   -moz-appearance: textfield;
 }
@@ -70,3 +70,18 @@
 input:disabled {
   color: #000;
 }
+
+.winpopup {
+  min-width: 50%;
+  min-height: 50%;
+  background-color: var(--bc-win);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 50px;
+}

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

@@ -19,6 +19,16 @@
 
 <p>nombre d'indice: {{nbIndice}}</p>
 
-<button (click)="a()">
-    verrifier
+
+
+<section *ngIf="haveWin" class="winpopup">
+    <h2>Vous avez gagné !</h2>
+    <div class="menu">
+        <button routerLink="/">
+            retour à la page d'acceuille
         </button>
+        <button routerLink="/sudoku/">
+            nouvelle partie
+        </button>
+    </div>
+</section>

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

@@ -15,24 +15,26 @@ import { SudokuService } from '../../services/sudoku-service';
 export class SudokuComponent {
   grille: number[][] = [];
   nbIndice: number = 0;
+  haveWin: boolean = false;
 
   constructor(protected sudokuService: SudokuService, private activatedRoute: ActivatedRoute) {
   }
 
-  public a() {
-    console.log(this.sudokuService.getEasy());
-  }
   ngOnInit() {
     const difficulty = this.activatedRoute.snapshot.params["difficulty"];
     this.Request(difficulty);
   }
   public publish() {
-
+    this.resetError();
+    this.haveWin = this.sudokuService.publishGame(this.getGrid(),"pas test",this.nbIndice)
+    if (this.haveWin) return;
+    this.corriger();
   }
+
   public corriger() {
     this.resetError();
     if (this.sudokuService.isCorrect(this.getGrid())) {
-      alert("c'est correct mon ptit");
+      this.publish();
       return;
     }
     this.nbIndice += 1;

src/app/services/sudoku-service.ts

@@ -14,7 +14,8 @@ export class SudokuService {
     private easy: number[][];
     private medium: number[][];
     private hard: number[][];
-    private readonly userApiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/sudoku/1';
+    private readonly sudokuApiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/sudoku/1';
+    private readonly saveGameApiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/game';
 
     public constructor(private http: HttpClient){
         this.correction = [];
@@ -22,7 +23,7 @@ export class SudokuService {
         this.medium = [];
         this.hard = [];
 
-        this.http.get<apiResponseInterface>(this.userApiUrl).subscribe(apiResponse => {
+        this.http.get<apiResponseInterface>(this.sudokuApiUrl).subscribe(apiResponse => {
             this.correction = this.transformFormat(apiResponse["data"]);
             this.easy = this.transformFormat(apiResponse["easy"]);
             this.medium = this.transformFormat(apiResponse["medium"]);
@@ -47,6 +48,7 @@ export class SudokuService {
     }
 
     public validationGrille(userGrille: number[][]): number[][] {
+        // valide la grille et envoit la position des erreurs
         let validation: number[][] = [];
         for (let y:number = 0; y<userGrille.length; y++) {
             validation.push([]);
@@ -64,7 +66,7 @@ export class SudokuService {
     }
 
     public isCorrect(userGrille: number[][]): boolean {
-        // 
+        // verrifie si la grille est complette et juste
         for (let x:number = 0; x<userGrille.length; x++) {
             for (let y:number = 0; y<userGrille[x].length; y++) {
                 if (userGrille[x][y] == 0 || userGrille[x][y] != this.correction[x][y]) return false;
@@ -73,6 +75,12 @@ export class SudokuService {
         return true;
     }
 
+    public publishGame(userGrille: number[][],pseudo: string, nbIndice: number): boolean {
+        if (!this.isCorrect(userGrille)) return false;
+        this.http.post<string>(this.saveGameApiUrl,{"date":new Date(),"playerName":pseudo,"clues":nbIndice}).subscribe();
+        return true;
+    }
+
     private transformFormat(grill: number[][]): number[][] {
         // convertie le format de la grille pour faciliter l'affichage après.
         let newgrid: number[][] = [];