diff --git a/src/app/components/user-accueil/user-accueil.component.html b/src/app/components/user-accueil/user-accueil.component.html
index 1326f2a..7a5161c 100644
--- a/src/app/components/user-accueil/user-accueil.component.html
+++ b/src/app/components/user-accueil/user-accueil.component.html
@@ -1,22 +1,16 @@
-
-
{{formattedDate}}
-
- LUN |
- MAR |
- MER |
- JEU |
- VEN |
- SAM |
- DIM |
-
+
+ {{ d }}
+ |
+
+
-
- {{ azerty }}
+ |
+ {{ streak }}
|
diff --git a/src/app/components/user-accueil/user-accueil.component.ts b/src/app/components/user-accueil/user-accueil.component.ts
index 87670e5..3d10560 100644
--- a/src/app/components/user-accueil/user-accueil.component.ts
+++ b/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
- const options: Intl.DateTimeFormatOptions = {
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- }
- this.formattedDate = currentDate.toLocaleDateString(undefined, options)
+ this.formattedDate = this.getDate()
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)
+
+ }
}
diff --git a/src/app/components/user-menu/user-menu.component.css b/src/app/components/user-menu/user-menu.component.css
new file mode 100644
index 0000000..38a0f47
--- /dev/null
+++ b/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 */
+ }
+
diff --git a/src/app/components/user-menu/user-menu.component.html b/src/app/components/user-menu/user-menu.component.html
index 708dad9..08137b5 100644
--- a/src/app/components/user-menu/user-menu.component.html
+++ b/src/app/components/user-menu/user-menu.component.html
@@ -1,9 +1,8 @@
Sudoku
- Morpion
- Echec
- Star Wars Rebellion
-
+ Morpion
+ Jeu de l'oie
+ Star Wars Rebellion
diff --git a/src/app/components/user-menu/user-menu.component.ts b/src/app/components/user-menu/user-menu.component.ts
index e983eb4..9cc5079 100644
--- a/src/app/components/user-menu/user-menu.component.ts
+++ b/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";
}
}
}