Add title battle in component pango-ring with service battle

src/app/pages/components/pango-ring/pango-ring.component.html

@@ -1,7 +1,12 @@
-<btd-stepper></btd-stepper>
+<btd-stepper [activeIndex]="currentAlgoIndex" ></btd-stepper>
+<h1>{{battle}}</h1>
 <h2>Instructions</h2>
 <btd-instructions [myID]="currentAlgo"></btd-instructions>
 <h2>Ta solution</h2>
 <btd-input-and-solution [myID]="currentAlgo"></btd-input-and-solution>
 <h2>Ce que ça donne une fois sorti de ton algo</h2>
 <btd-output-and-validation [myID]="currentAlgo"></btd-output-and-validation>
+
+
+
+<a routerLink="/pango-ring/{{algoList[currentAlgoIndex+1]?.id}}"> Suivant </a>

src/app/pages/components/pango-ring/pango-ring.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AlgoList } from '../../classes/algo-list';
 import { ActivatedRoute, ParamMap } from '@angular/router';
+import { BattlesService } from '../../services/battles/battles.service';
 
 @Component({
   selector: 'btd-pango-ring',
@@ -10,9 +11,11 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 export class PangoRingComponent implements OnInit {
   // Ce tableau contiendra 5 objets. Chaque objet contiendra : un ID, instructions, input-solution, output-validation.
   algoList: AlgoList[] = [];
-  public currentAlgo: any;
+  battle: string;
+  currentAlgo: any;
+  currentAlgoIndex: number;
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute, public battles: BattlesService) { }
 
   ngOnInit(): void {
     const algo1 = new AlgoList (1, 'tu dois rentrer un algorithme simple', 'voici ce qui entre dans ton algorithme : [1, 2, 3]', 'voici ce qui sort de ton algorithme : [3, 2, 1]');
@@ -24,8 +27,12 @@ export class PangoRingComponent implements OnInit {
     this.algoList.push(algo1, algo2, algo3, algo4, algo5);
     this.route.paramMap.subscribe((params: ParamMap) => {
       // tslint:disable-next-line: radix
-      this.currentAlgo = this.algoList.find((algo) => (algo.id === parseInt(params.get('id'))));
+      this.currentAlgoIndex = this.algoList.findIndex((algo) => (algo.id === parseInt(params.get('id'))));
+      this.currentAlgo = this.algoList[this.currentAlgoIndex];
     });
+
+    this.battle = this.battles.getBattle();
   }
 
+
 }

src/app/pages/components/stepper/stepper.component.html

@@ -1 +1 @@
-<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
+<p-steps [model]="steps" [activeIndex]="activeIndex" ></p-steps>

src/app/pages/components/stepper/stepper.component.scss

@@ -4,9 +4,6 @@ body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
 .ui-steps .ui-steps-item {
   width: 20%;
 };
-body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
-  margin-bottom: 30px;
-};
 body .ui-steps .ui-steps-item .ui-menuitem-link:focus {
   box-shadow: none;
 };

src/app/pages/components/stepper/stepper.component.ts

@@ -1,50 +1,26 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import {MenuItem, MessageService} from 'primeng/api';
+import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 
 @Component({
-  selector: 'btd-stepper',
-  templateUrl: './stepper.component.html',
-  styleUrls: ['./stepper.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  providers: [MessageService],
+    selector: 'btd-stepper',
+    templateUrl: './stepper.component.html',
+    styleUrls: ['./stepper.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class StepperComponent implements OnInit {
+    @Input() activeIndex = 1;
 
-  items: MenuItem[];
-  activeIndex = 1;
-  constructor(private messageService: MessageService) {}
+    steps: MenuItem[];
+    constructor() { }
 
-  ngOnInit() {
-    this.items = [{
-      command: (event: any) => {
-          this.activeIndex = 0;
-          this.messageService.add({severity: 'info', summary: 'Algo 1', detail: event.item.label});
-      }
-  },
-  {
-      command: (event: any) => {
-          this.activeIndex = 1;
-          this.messageService.add({severity: 'info', summary: 'Algo 2', detail: event.item.label});
-      }
-  },
-  {
-      command: (event: any) => {
-          this.activeIndex = 2;
-          this.messageService.add({severity: 'info', summary: 'Algo 3', detail: event.item.label});
-      }
-  },
-  {
-      command: (event: any) => {
-          this.activeIndex = 3;
-          this.messageService.add({severity: 'info', summary: 'Algo 4', detail: event.item.label});
-      }
-  },
-  {
-    command: (event: any) => {
-        this.activeIndex = 4;
-        this.messageService.add({severity: 'info', summary: 'Algo 5', detail: event.item.label});
-      }
-  }
-];
-}
+    ngOnInit() {
+
+        this.steps = [
+            {label: 'Algo 1'},
+            {label: 'Algo 2'},
+            {label: 'Algo 3'},
+            {label: 'Algo 4'},
+            {label: 'Algo 5'},
+        ];
+    }
 }

src/app/pages/services/battles/battles.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BattlesService } from './battles.service';
+
+describe('BattlesService', () => {
+  let service: BattlesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BattlesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pages/services/battles/battles.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BattlesService {
+
+  battle = 'Spider battle';
+
+  constructor() { }
+
+  getBattle(){
+    return this.battle;
+  }
+}