feat: dataservice

src/app/app.component.html

@@ -1,5 +1,4 @@
 <main class="main">
-<app-screen-rotations [players]="players"></app-screen-rotations>
+    <app-screen-edit></app-screen-edit>
+    <app-screen-basic></app-screen-basic>
 </main>
-
-<router-outlet />

src/app/app.routes.ts

@@ -1,3 +1,18 @@
 import { Routes } from '@angular/router';
+import { ScreenBasicComponent } from './screen-basic/screen-basic.component';
+import { ScreenEditComponent } from './screen-edit/screen-edit.component';
+import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
+import { AppComponent } from './app.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+    path: '',
+    component: AppComponent,
+    children: [
+      { path: '', redirectTo: 'edit', pathMatch: 'full' },
+      { path: 'edit', component: ScreenEditComponent },
+      { path: 'basic', component: ScreenBasicComponent },
+      { path: 'rotations', component: ScreenRotationsComponent }
+    ]
+  }
+];

src/app/data.service.spec.ts

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

src/app/data.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Player } from './model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  private players: Player[] = [];
+
+  setPlayers(players: Player[]){
+    this.players = players;
+  }
+  
+  addPlayer(player: Player): boolean{
+    if (Player.isNew(player, this.players)){
+      this.players.push(player);
+      return true
+    }
+    return false
+  }
+  getPlayers(): Player[] {
+    let clone =Object.assign([],this.players);
+    return clone
+  }
+}

src/app/screen-basic/screen-basic.component.ts

@@ -1,11 +1,12 @@
 // Original Team Generation Screen for arbitrary size and number of teams
-import { Component, Input, OnInit} from '@angular/core';
+import { Component, inject, Input, OnInit} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterOutlet, ActivatedRoute } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';
 import { Player } from '../model';
 import { iter } from '../util';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-basic',
@@ -14,7 +15,7 @@ import { iter } from '../util';
   styleUrl: './screen-basic.component.less'
 })
 export class ScreenBasicComponent {
-  @Input() players!: Player[];
+  data = inject(DataService);
   numTeamsSelectorValue = "2";
   numTeamsSelected = 2;
   nTeamsValue = "4";
@@ -30,7 +31,7 @@ export class ScreenBasicComponent {
     
     let teams = Array.from({ length: this.numTeamsSelected }, () => []);
     // clone array here
-    let localPlayers: Player[] = Object.assign([],this.players);
+    let localPlayers: Player[] = this.data.getPlayers();
 
     let nameslen = localPlayers.length;
     let iterator = iter(teams);

src/app/screen-edit/screen-edit.component.html

@@ -1,5 +1,5 @@
 <div class="justify-content-md-center">
-  <h1>Players: {{ players.length }}</h1>
+  <h1>Players: {{ data.getPlayers().length }}</h1>
   <div class="input-group mb-3">
     <input
       type="text"
@@ -17,7 +17,7 @@
     }
 <div class="container mt-4">
   <ul class="list-group mb-3">
-      @for (player of players; track $index) {
+      @for (player of data.getPlayers(); track $index) {
         <li class="list-group-item">
             <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer;">{{ player.name }}</a>
         </li>

src/app/screen-edit/screen-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, inject, Input, ViewChild } from '@angular/core';
 import { NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Player } from '../model';
 import { ModalRotationsComponent } from '../modal-rotations/modal-rotations.component';
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs/internal/Subject';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { debounceTime, tap } from 'rxjs/operators';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-edit',
@@ -14,7 +15,7 @@ import { debounceTime, tap } from 'rxjs/operators';
   styleUrl: './screen-edit.component.less'
 })
 export class ScreenEditComponent {
-  @Input() players!: Player[];
+  data = inject(DataService);
   @ViewChild('selfClosingAlert', { static: false })selfClosingAlert!: NgbAlert;
   private _message$ = new Subject<string>();
   newItem: string = "";
@@ -34,9 +35,9 @@ export class ScreenEditComponent {
     const name = this.newItem.trim()
     if (name) {
       let newPlayer = new Player(name);
-      if (Player.isNew(newPlayer, this.players)){
+      if(this.data.addPlayer(newPlayer)){
-        this.players.push(newPlayer);
         this.newItem = '';
+        return
       }
       else{
         this.setAlertMessage(newPlayer.name);