a

.DockerFile

@@ -0,0 +1,13 @@
+FROM node:alpine
+
+WORKDIR /usr/src/app
+
+COPY . /usr/src/app
+
+RUN npm install -g @angular/cli
+
+RUN npm install
+
+EXPOSE 8080
+
+CMD ["ng", "serve", "--host", "127.0.0.1", "--port", "8080"]

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

@@ -3,12 +3,7 @@
     --color: #ddd;
     --color-faux: rgba(255,0,0,0.4);
     --bc-win: #ff0;
-}
-
-.grille {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%);
+    --bc-selec: rgba(0,0,255,0.2);
 }
 
 /* on reset l'apparence des input*/
@@ -85,3 +80,69 @@ input:disabled {
   transform: translate(-50%,-50%);
   border-radius: 50px;
 }
+
+.selectedRowCol {
+  background-color: var(--bc-selec);
+}
+
+input:disabled {
+  pointer-events: none;
+}
+
+.main {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  min-height: 50vh;
+  min-width: 70vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.haut {
+  position: relative;
+  width: 100%;
+  height: max-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.button {
+  margin-left: 20px;
+  position: relative;
+  min-height: 40vh;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-direction: column;
+}
+
+.grid {
+  min-height: 40vh;
+}
+
+.bas {
+  position: relative;
+  padding-top: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.bas button {
+  padding: 20px;
+  aspect-ratio: 1/1;
+  text-align: center;
+}
+.bas button div {
+  position: relative;
+  top: -50%;
+  left: 200%;
+}

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

@@ -1,16 +1,17 @@
 <app-book-menu></app-book-menu> 
 
-<p>sudoku works!</p>
+<section class="main">
 
+    <div class="haut">
         <div class="grid">
             <div *ngFor="let row of grille; let x = index" class="subgrid sub{{x}}">
                 <div *ngFor="let cell of row; let y = index" class="case x{{x}} y{{y}}">
-            <input *ngIf="cell != 0" type="number" value="{{cell}}" class="cell" max="9" min="0" id="xy{{x}}{{y}}" disabled>
-            <input *ngIf="cell == 0" type="number" value="" class="cell" max="9" min="0" id="xy{{x}}{{y}}">
+                    <input *ngIf="cell != 0" type="number" value="{{cell}}" class="cell" max="9" min="0" id="xy{{x}}{{y}}" (change)="key()" (click)="colorSameRowCol(y,x,$event)">
+                    <input *ngIf="cell == 0" type="number" value="" class="cell" max="9" min="0" id="xy{{x}}{{y}}" (click)="colorSameRowCol(y,x,$event)" (change)="key()">
                 </div>
             </div>
         </div>
-
+        <div class="button">
             <button (click)="publish()">
                 soumettre
             </button>
@@ -20,8 +21,14 @@
             </button>
         
             <p>nombre d'indice: {{nbIndice}}</p>
+        </div>
+    </div>
+    <div class="bas">
+        <button *ngFor="let obj of [].constructor(9); let i = index" (click)="addNumber(i+1)">{{i+1}}<div id="btn{{i+1}}">{{nbEachNumber[i]}}</div></button>
+    </div>
 
 
+</section>
 
 <section *ngIf="haveWin" class="winpopup">
     <h2>Vous avez gagné !</h2>
@@ -34,4 +41,3 @@
         </button>
     </div>
 </section>
-

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

@@ -4,6 +4,7 @@ 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';
+import { Block } from '@angular/compiler';
 
 @Component({
   selector: 'app-sudoku',
@@ -16,6 +17,8 @@ export class SudokuComponent {
   grille: number[][] = [];
   nbIndice: number = 0;
   haveWin: boolean = false;
+  nbEachNumber:number[] = [0,0,0,0,0,0,0,0,0];
+  lastInputClicked: HTMLInputElement | undefined;
 
   constructor(protected sudokuService: SudokuService, private activatedRoute: ActivatedRoute) {
   }
@@ -89,6 +92,59 @@ export class SudokuComponent {
     }
     if (this.grille.length == 0) {
       setTimeout(()=> {this.Request(difficulty)},100);
-    }// lancer un await ici si possible
+      return;
+    }
+    this.updateNb();
+  }
+
+  public colorSameRowCol(a:number ,b:number, event: Event) {
+    if (event.target != null) this.lastInputClicked = <HTMLInputElement>event.target;
+    this.resetColor();
+    let xp:number = (a%3)*3+ b%3;
+    let yp:number = Math.floor(a/3)*3+Math.floor(b/3);
+    for(let x:number=0; x<9; x++) {
+      for(let y:number=0; y<9; y++) {
+        if (xp == x || yp == y) {
+          let newx:number = (y%3)*3+(x%3);
+          let newy:number = Math.floor(y/3)*3+Math.floor(x/3);
+          document.getElementById("xy"+newx.toString()+newy.toString())?.classList.add("selectedRowCol")
+        }
+      }
+    }
+  }
+
+  public resetColor() {
+    this.updateNb();
+    let inputs:HTMLCollection = document.getElementsByClassName("selectedRowCol");
+    for (let i:number=0;inputs.length>0;i++) {
+      inputs[0].classList.remove("selectedRowCol");
+    }
+  }
+
+  private updateNb() {
+    for(let i:number=1;i<10;i++) {
+      this.nbEachNumber[i-1] = this.nb(i);
+    }
+  }
+
+  private nb(i:number) {
+    let a:number=0
+    this.grille.forEach(e=>{
+      a += e.filter((v) => (v == i)).length
+    })
+    return 9-a;
+  }
+
+  public key() {
+    this.grille = this.getGrid();
+    this.updateNb();
+  }
+
+  public addNumber(nb:number) {
+    this.resetColor();
+    if (this.nbEachNumber[nb-1] <= 0) return;
+    if (this.lastInputClicked == null) return;
+    this.lastInputClicked.value = nb.toString();
+    this.key();
   }
 }

src/app/components/user-list/user-list.component.css

@@ -0,0 +1,40 @@
+section {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    min-height: 50vh;
+    min-width: 50vw;
+}
+
+thead, tr {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+thead {
+    border-bottom: 1px solid #000;
+}
+
+th, td {
+    position: relative;
+    width: 100%;
+    text-align: center;
+}
+
+tbody {
+    width: 100%;
+    display: block;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.pagination > * {
+    margin: 20px;
+}

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

@@ -1,8 +1,6 @@
 <app-book-menu></app-book-menu>
 
-<h2>User list</h2>
-
-
+<section>
     <thead>
         <tr>
             <th scope="col">Pseudo</th>
@@ -18,10 +16,14 @@
         </tr>
     </tbody>
 
-<br>
+    <div class="pagination">
         <button (click)="loadPage(-1)">
             <
         </button>
+        <p>{{nbPage}}/{{userService.getNbPage()}}</p>
         <button (click)="loadPage(1)">
             >
         </button>
+    </div>
+
+</section>

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

@@ -5,6 +5,7 @@ import { NgFor } from '@angular/common';
 import { User } from '../../models/user.model';
 import { UserService } from '../../services/user-service';
 import { UserMenuComponent } from '../user-menu/user-menu.component';
+import { DataSource } from '@angular/cdk/collections';
 
 @Component({
   selector: 'app-user-list',
@@ -25,9 +26,7 @@ export class UserListComponent {
 
   ngOnInit() {
     this.nbPage = 1;
-    this.users = this.userService.getAll();
     this.loadPage(0);
-    console.log(this.users);
   }
 
   public changeWatchedvar(newVar:string) {
@@ -38,7 +37,7 @@ export class UserListComponent {
   }
 
   public loadPage(nb: number) {
-    if (this.nbPage + nb > this.userService.getNbPage() || this.nbPage + nb <= 0) {return;}
+    if ((this.nbPage + nb > this.userService.getNbPage() && this.users.length != 0) || this.nbPage + nb <= 0) {return;}
     this.nbPage += nb;
     switch(this.sortBy) {
       case 'nbPts':
@@ -51,5 +50,7 @@ export class UserListComponent {
         this.users = this.userService.getUserNbStreak(this.nbPage,this.sortSens);
         break;
     }
+    
+    if (this.users.length == 0) {setTimeout(()=>{this.nbPage -=nb;this.loadPage(nb)},100)};
   }
 }

src/app/services/user-service.ts

@@ -6,7 +6,7 @@ import { User } from "../models/user.model";
 export class UserService {
     private users: User[];
     private readonly userApiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/users';
-    private pageSize: number = 5;
+    public readonly pageSize: number = 5;
 
     public constructor(private http: HttpClient){
         this.users = [];