diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e965c34..cb1cdfa 100644 --- a/src/app/app.routes.ts +++ b/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' } ]; diff --git a/src/app/components/difficulty-selector/difficulty-selector.component.css b/src/app/components/difficulty-selector/difficulty-selector.component.css new file mode 100644 index 0000000..f2e3947 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/components/difficulty-selector/difficulty-selector.component.html b/src/app/components/difficulty-selector/difficulty-selector.component.html new file mode 100644 index 0000000..49ee3f5 --- /dev/null +++ b/src/app/components/difficulty-selector/difficulty-selector.component.html @@ -0,0 +1,11 @@ +
+

+ Choisir une difficulté: +

+ +
+ + + +
+
\ No newline at end of file diff --git a/src/app/components/difficulty-selector/difficulty-selector.component.spec.ts b/src/app/components/difficulty-selector/difficulty-selector.component.spec.ts new file mode 100644 index 0000000..35415f1 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DifficultySelectorComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DifficultySelectorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/difficulty-selector/difficulty-selector.component.ts b/src/app/components/difficulty-selector/difficulty-selector.component.ts new file mode 100644 index 0000000..6239a24 --- /dev/null +++ b/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 { + +} \ No newline at end of file diff --git a/src/app/components/sudoku/sudoku.component.css b/src/app/components/sudoku/sudoku.component.css index 40702d6..b0c887f 100644 --- a/src/app/components/sudoku/sudoku.component.css +++ b/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; } @@ -69,4 +69,19 @@ 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; } \ No newline at end of file diff --git a/src/app/components/sudoku/sudoku.component.html b/src/app/components/sudoku/sudoku.component.html index 4853b6d..160868f 100644 --- a/src/app/components/sudoku/sudoku.component.html +++ b/src/app/components/sudoku/sudoku.component.html @@ -19,6 +19,16 @@

nombre d'indice: {{nbIndice}}

- \ No newline at end of file + + +
+

Vous avez gagné !

+
+ + +
+
\ No newline at end of file diff --git a/src/app/components/sudoku/sudoku.component.ts b/src/app/components/sudoku/sudoku.component.ts index 98cf7f2..8d05d67 100644 --- a/src/app/components/sudoku/sudoku.component.ts +++ b/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; @@ -87,6 +89,6 @@ export class SudokuComponent { } if (this.grille.length == 0) { setTimeout(()=> {this.Request(difficulty);console.log("a")},100); - } // lancer un await ici si possible + }// lancer un await ici si possible } } \ No newline at end of file diff --git a/src/app/services/sudoku-service.ts b/src/app/services/sudoku-service.ts index 5188ca9..abbb7c8 100644 --- a/src/app/services/sudoku-service.ts +++ b/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(this.userApiUrl).subscribe(apiResponse => { + this.http.get(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(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[][] = [];