CSS terminé

HPFront/src/app/app-routing.module.ts

@@ -3,7 +3,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { CharacterDetailComponent } from './character-detail/character-detail.component';
 import { CharacterComponent } from './character/character.component';
 import { ItemDetailComponent } from './item-detail/item-detail.component';
-import { ItemComponent } from './item/item.component';
 
 
 

HPFront/src/app/app.component.css

@@ -9,7 +9,6 @@
 
 .scene
 {
-    background-color: aliceblue;
     width: 100%;
     height: 100%;
 }
@@ -29,7 +28,6 @@ footer
 
 .wrapperCharacter
 {
-    background-color: blue;
     flex-grow: 8;
     display: flex;
     flex-wrap: wrap;
@@ -57,7 +55,6 @@ button
 
 .Character
 {
-    background-color: brown;
     width: 40%;
     height: 40%;
     
@@ -65,7 +62,6 @@ button
 
 .Inventaire
 {
-    background-color: black;
     width: 100%;
     height: 100%;
     

HPFront/src/app/app.component.html

@@ -4,7 +4,7 @@
 
     <nav [@myInventory]="isShown ? true : false "class="insert-remove-container">
       <div>
-        <app-item class="Inventaire"> </app-item>  
+        <app-inventory class="Inventaire"> </app-inventory>  
       </div>  
     </nav>
   </div>    

HPFront/src/app/app.component.ts

@@ -7,7 +7,7 @@ import { trigger, state, style, animate, transition, keyframes } from '@angular/
   styleUrls: ['./app.component.css'],
   animations: [
     trigger('myInventory', [
-      state('true', style({ background : '#008B8B',width: '80%', color:'white'})),
+      state('true', style({width: '80%', color:'black'})),
       state('false', style({ opacity: 0, width: '0px' })),
       transition('false <=> true', animate(500))
     ]),

HPFront/src/app/app.module.ts

@@ -13,7 +13,7 @@ import { SceneTextComponent } from './scene-text/scene-text.component';
 import { Safe } from './scenePipeCustom';
 import { CharacterDetailComponent } from './character-detail/character-detail.component';
 import { CharacterComponent } from './character/character.component';
-import { ItemComponent } from './item/item.component';
+import { InventoryComponent } from './inventory/inventory.component';
 import { ItemDetailComponent } from './item-detail/item-detail.component';
 
 
@@ -25,7 +25,7 @@ import { ItemDetailComponent } from './item-detail/item-detail.component';
     Safe,
     CharacterDetailComponent,
     CharacterComponent,
-    ItemComponent,
+    InventoryComponent,
     ItemDetailComponent,
   ],
   imports: [

HPFront/src/app/character-detail/character-detail.component.ts

@@ -11,7 +11,7 @@ import { CharacterService } from '../services/character.service';
 })
 export class CharacterDetailComponent implements OnInit {
 
-  @Input() character: Character;
+  @Input() character: Character;//Personnage choisi pour afficher les détails.
   
   constructor(
     private route: ActivatedRoute,
@@ -22,13 +22,13 @@ export class CharacterDetailComponent implements OnInit {
   ngOnInit() {
     this.getCharacter();
   }
-  getCharacter():void{
+  getCharacter():void{//Appel le back pour avoir les information concernant le character en input.
     const id = +this.route.snapshot.paramMap.get('id');
     this.characterService.getCharacter(id)
       .subscribe(character => this.character = character);
   }
   
-  goBack(): void{
+  goBack(): void{//Fonction pour revenir sur la page d'avant. Ceci est associé à un bouton dans le code HTML.
     this.location.back();
   }
 }

HPFront/src/app/character/character.component.css

@@ -4,25 +4,30 @@ ul {
     list-style-type:none;
     }
     li {
-    margin-left:2px;
-    border-left: #696969; /*pour IE*/
-    }
-    ul li a {
-        display:block;
-        float: left;   
-        width:100px;
-        line-height:50px; /*hauteur de l'image de fond*/
-        background:	#008B8B repeat-x;
-        color:white;
-        text-decoration:none;
+        cursor: pointer;
+        position: center;
+        left: 0;
+        background-color: #696969;
+        margin: .5em;
+        padding: .3em 0;
+        height: 1.6em;
+        border-radius: 4px;
         text-align: center;
-        margin: .1em;
-        border-radius: 10%;
       }
-    ul li a:hover {
-        background:	#AFEEEE repeat-x;
+    li:hover {
         color: black;
+        background-color: #BDB76B;
+        left: .1em;
+      }
+    li.selected {
+        background-color: #BDB76B;
+        color: white;
+      }
+    li.selected:hover {
+        background-color: #F0E68C;
+        color: white;
       }
+    
 h3{
     color: #696969;
     

HPFront/src/app/character/character.component.html

@@ -7,11 +7,17 @@
 
     <div id="team">
         <ul class="team">Team :
-            <li *ngFor="let character of team">
-                <a routerLink = "/characterdetail/{{character.id}}">
+            <li *ngFor="let character of team"
+            [class.selected]="character === selectCharacter"
+            (click) = "onSelect(character)">
                 <span class="badge">{{character.name}}</span>
-                </a> 
             </li>
         </ul>
     </div>
+    <div *ngIf="selectCharacter">
+        <p>Description: <span>{{selectCharacter.name}}</span> </p>
+        <div><span>life : </span>{{selectCharacter.life}} <span> / </span> {{selectCharacter.max_life}}</div>
+        <div><span>mana : </span>{{selectCharacter.mana}} <span> / </span> {{selectCharacter.max_mana}}</div>
+        <button (click)="unSelect()" >x</button> 
+    </div>
 </div>
\ No newline at end of file

HPFront/src/app/character/character.component.ts

@@ -9,24 +9,31 @@ import { Character } from './../../Classes/Character';
 })
 export class CharacterComponent implements OnInit {
 
-  player : Character; //= new Character("Riaile", 0);
-  team : Character[];
-  
-  isOpen = true;
-
-  toggle():void{
-    this.isOpen = !this.isOpen
-  }
+  player : Character; //Variable contenant les informations sur le joueur.
+  team : Character[];//Variable contenant la liste des personnages que le joueur possède dans ça team.
+  selectCharacter: Character;//Variable utilisé pour l'affichage des détails d'un personnages dans la team.
+  
+  // isOpen = true;//Variable d'état utilisé pendant les testes 
+  // toggle():void{
+  //   this.isOpen = !this.isOpen
+  // }
   constructor(
     private characterService: CharacterService
   ) {}
   
-  getPlayer():void{
+  onSelect(character: Character):void{//Permet de séléctionner un personnage de la team. Associé à un badge dans le code HTML 
+    this.selectCharacter = character;
+  }
+  unSelect():void{//Permet de plus séléctionner le personnage lorsque il était séléctionner. Associé à un bouton dans le code HTML
+    this.selectCharacter = null;
+  }
+
+  getPlayer():void{//Appel le back pour faire un get sur les informations du joueur.
     this.characterService.getPlayer()
     .subscribe(player => this.player = player);
   }
 
-  getTeam():void{
+  getTeam():void{//Appel le back pour faire un get sur les informations concernant les personnage que contrôle le joueurs
     this.characterService.getCharacters()
     .subscribe(team => this.team = team);
   }

HPFront/src/app/inventory/inventory.component.css

+.inventaire_component h2
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+ul {
+    padding:0;
+    margin:0;
+    list-style-type:none;
+    }
+    li {
+        cursor: pointer;
+        position: center;
+        left: 0;
+        background-color: #D2B48C;
+        margin: .5em;
+        padding: .3em 0;
+        height: 1.6em;
+        border-radius: 4px;
+        text-align: center;
+      }
+    li:hover {
+        color: black;
+        background-color: #FFF8DC;
+        left: .1em;
+      }
+    li.selected {
+        background-color: #FFF8DC;
+        color: black;
+      }
+    li.selected:hover {
+        background-color: #FFF8DC;
+        color: black;
+      }
+    
\ No newline at end of file

HPFront/src/app/item/item.component.spec.ts → HPFront/src/app/inventory/inventory.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ItemComponent } from './item.component';
+import { InventoryComponent } from './inventory.component';
 
-describe('ItemComponent', () => {
-  let component: ItemComponent;
-  let fixture: ComponentFixture<ItemComponent>;
+describe('InventoryComponent', () => {
+  let component: InventoryComponent;
+  let fixture: ComponentFixture<InventoryComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ItemComponent ]
+      declarations: [ InventoryComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ItemComponent);
+    fixture = TestBed.createComponent(InventoryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

HPFront/src/app/item/item.component.ts → HPFront/src/app/inventory/inventory.component.ts

@@ -5,9 +5,9 @@ import { ItemService } from '../services/item.service';
 
 
 @Component({
-  selector: 'app-item',
-  templateUrl: './item.component.html',
-  styleUrls: ['./item.component.css'],
+  selector: 'app-inventory',
+  templateUrl: './inventory.component.html',
+  styleUrls: ['./inventory.component.css'],
  /*  animations: [
     trigger('myInventory', [
       state('true', style({ background : '#008B8B',width: '150px', color:'white'})),
@@ -16,11 +16,11 @@ import { ItemService } from '../services/item.service';
     ]),
   ]  */ 
 })
-export class ItemComponent implements OnInit {
+export class InventoryComponent implements OnInit {
 
-  items : Item[];
+  items : Item[];//Variable contenant liste des items que possède le joueur.
   /* isShown = false; */
-  selectItem: Item;
+  selectItem: Item;//Variable contenant un item sélectionner pour afficher les détails de cette item.
 
   /* toggle():void{
     this.isShown = !this.isShown;
@@ -28,16 +28,13 @@ export class ItemComponent implements OnInit {
   constructor(
     private itemService: ItemService
   ) { }
-  getItems():void{
-    console.log(this.items);
+  getItems():void{//Appel le back pour get les informations sur l'inventaire du joueur
     this.itemService.getItems().subscribe(items  =>this.items = items);
-    console.log(this.items);
   }
-  onSelect(item: Item):void{
+  onSelect(item: Item):void{//Selectionne l'item de l'inventaire sur le quelle on veut les détails. Ceci est associé à un badge dans le HTML
     this.selectItem = item;
-    console.log(this.selectItem);
   }
-  unSelect():void{
+  unSelect():void{//Permet de plus sélectionner l'item de l'inventaire choisie avant. Ceci est associé à un bouton dans le HMTL.
     this.selectItem = null;
   }
   /*
@@ -49,15 +46,17 @@ export class ItemComponent implements OnInit {
     
   }
   
-  delete(item: Item): void {
+  delete(item: Item): void {///Supprime un item de l'inventaire et signale le back que cette item n'appartient plus à l'inventaire.
     this.items = this.items.filter(i => i !== item);
-    this.itemService.deleteHero(item).subscribe();
+    this.itemService.deleteItem(item).subscribe();
   }
-  @HostListener('mouseenter') onMouseEnter(){
+  
+
+  @HostListener('mouseenter') onMouseEnter(){//Réinitialise l'inventaire quand l'utilisateur rentre le curseur de la souris dans la zone de l'inventaire sur la page.
     this.getItems();
   }
 
-  @HostListener('mouseleave') onMouseLeave(){
+  @HostListener('mouseleave') onMouseLeave(){//Réinitialise l'inventaire quand l'utilisateur sort le curseur de la souris dans la zone de l'inventaire sur la page.
     this.getItems();
   }
 }

HPFront/src/app/item-detail/item-detail.component.ts

@@ -22,13 +22,13 @@ export class ItemDetailComponent implements OnInit {
   ngOnInit() {
     this.getItem();
   }
-  getItem():void{
+  getItem():void{//Appel le back pour avoir les informations sur l'item dans l'input.
     const id = +this.route.snapshot.paramMap.get('id');
     this.itemService.getItem(id)
       .subscribe(item => this.item = item);
   }
 
-  goBack():void{
+  goBack():void{//Permet de revenir à la page de base. Ceci est associé à un bouton.
     this.location.back();
   }
 

HPFront/src/app/item/item.component.css

-.inventaire_component h2
-{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file

HPFront/src/app/services/character.service.ts

@@ -9,8 +9,8 @@ import { catchError, tap } from 'rxjs/operators';
   providedIn: 'root'
 })
 export class CharacterService {
-  private characterUrl = "api/characters";
-  private playerUrl= "api/player"; 
+  private characterUrl = "api/characters";//appel l'api pour la team.
+  private playerUrl= "api/player"; //appel l'api pour le Joueur.
 
   private handleError<T>(operation = 'operation', result?: T){
     return (error: any): Observable<T> => {
@@ -24,7 +24,7 @@ export class CharacterService {
     private http: HttpClient
   ) { }
 
-  getCharacters():Observable<Character[]>{
+  getCharacters():Observable<Character[]>{//Permet de faire get d'une liste de character du back pour le CharacterComponent. Sert à initialiser pour la team du joueur. 
     return this.http.get<Character[]>(this.characterUrl)
     .pipe(
       tap(_ =>console.error('fetched characters')),
@@ -33,7 +33,7 @@ export class CharacterService {
   } 
 
 
-  getCharacter(id: number): Observable<Character>{
+  getCharacter(id: number): Observable<Character>{//Permet de faire un get d'un Character pour afficher les détails de l'inventaire. Ceci est envoyé pour le Character-detailComponent.
     const url = `${this.characterUrl}/${id}`;
     return this.http.get<Character>(url).pipe(
       tap(_=> console.log(`fetcted character id=${id}`)),
@@ -41,7 +41,7 @@ export class CharacterService {
     );
   }
 
-  getPlayer(): Observable<Character>{
+  getPlayer(): Observable<Character>{//Permet de faire get le personnage du joueur.
     return this.http.get<Character>(this.playerUrl)
     .pipe(
       tap(_=>console.error('fetched player')),

HPFront/src/app/services/item.service.ts

@@ -9,7 +9,7 @@ import { catchError, tap } from 'rxjs/operators';
   providedIn: 'root'
 })
 export class ItemService {
-  private itemUrl = 'api/inventory';
+  private itemUrl = 'api/inventory';//Url de l'api.
   private handleError<T>(operation = 'operation', result?: T){
     return (error: any): Observable<T> =>{
 
@@ -23,14 +23,14 @@ export class ItemService {
     private http: HttpClient
   ) { }
 
-  getItems():Observable<Item[]>{
+  getItems():Observable<Item[]>{//Fait un GEt sur le back pour l'inventaire. Ceci est envoyé pour InventoryComponent.
     return this.http.get<Item[]>(this.itemUrl)
       .pipe(
         tap(_=>console.error('fetched items')),
         catchError(this.handleError<Item[]>('getItems',[]))
       )
   }
-  getItem(id: number): Observable<Item>{
+  getItem(id: number): Observable<Item>{//Fait un Get sur le back pour l'item dont on veut les détail. Ceci est envoyé pour Item-detailComponent.
     const url = `${this.itemUrl}/${id}`;
     return this.http.get<Item>(url).pipe(
       tap(_=> console.log(`fetched item id = ${id}`)),
@@ -40,14 +40,16 @@ export class ItemService {
 
 
 
-  addItem (item: Item): Observable<Item> {
+  addItem (item: Item): Observable<Item> {//Fonction pour indiquer au back qu'il faut ajouter un item à l'inventaire 
     return this.http.post<Item>(this.itemUrl, item, this.htppOption).pipe(
       tap(_=>console.log(`added item w/ id=${item.ID}`)),
       catchError(this.handleError<Item>('addItem'))
     );
   };
-  deleteHero (item: Item | number): Observable<Item> {
+
+  deleteItem (item: Item | number): Observable<Item> {
     const id = typeof item === 'number' ? item : item.ID;
+
     const url = `${this.itemUrl}/${id}`;
   
     return this.http.delete<Item>(url, this.htppOption).pipe(