refactor: basic screen

src/app/app.component.html

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

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

@@ -1,5 +1,4 @@
-  <div class="row justify-content-md-center">
-    <h1>Please select the number of teams:</h1>
+  <div class="justify-content-md-center">
     <div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
     <div class="btn-group me-2" id="numTeamsSelector" role="group"
       value="2">
@@ -17,25 +16,13 @@
       <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
     </div>
   </div>
+    <h1>Random Teams</h1>
 
   <form>
-    <div class="container">
-    <label for="playerNames">Names</label>
-    <textarea [(ngModel)]="playerNamesValue"
-      class="form-control mb-3"
-      rows="18" 
-      cols="30"
-      style="text-align: left;" 
-      name="playerNames"
-      #playerNames
-      id="playerNames"
-      ></textarea>
-    </div>
-  <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
+  <button type="button" (click)="onButtonGenerate()" class="btn btn-primary">Generate</button>
   </form>
 
   <table class="table table-striped custom-table">
-  <caption *ngIf="duplicateNames.length >0">Removed: {{ duplicateNames }}</caption>
     <thead>
       <tr>
         <th scope="col">Size</th>

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

@@ -5,6 +5,7 @@ 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';
 
 @Component({
   selector: 'app-screen-basic',
@@ -14,46 +15,31 @@ import { Player } from '../model';
 })
 export class ScreenBasicComponent {
   @Input() players!: Player[];
-  playerNamesValue = "";
   numTeamsSelectorValue = "2";
   numTeamsSelected = 2;
   nTeamsValue = "4";
   teamsArray: string[][] = [];
-  duplicateNames: string[] = [];
   
-  onButtonGenerate(textinput: string): void{
+  onButtonGenerate(): void{
     if(this.numTeamsSelectorValue === 'n'){
       this.numTeamsSelected  = Number(this.nTeamsValue);
     }
     else{
       this.numTeamsSelected = Number(this.numTeamsSelectorValue);
     }
-    let nameslist = this.playerNamesValue
-        .split('\n')
-        .map(function(str){return str.trim();})
-        .filter(function(str){return str}); // boolean interpretation is same as non-empty
-    // remove duplicates by using a Set
-    let namesset = new Set(nameslist);
-    let names = [...namesset];
-
     
     let teams = Array.from({ length: this.numTeamsSelected }, () => []);
+    // clone array here
+    let localPlayers: Player[] = Object.assign([],this.players);
 
-    let nameslen = names.length;
-    function* iter(list: any[]){
-        let index = 0;
-        while(true){
-            yield list[index % list.length];
-            index++;
-        }
-    }
+    let nameslen = localPlayers.length;
     let iterator = iter(teams);
     for(let i =0; i < nameslen; i++){
-        let index = Math.floor(Math.random()* names.length);
-        let n = names[index]; 
-        names.splice(index,1);
+        let index = Math.floor(Math.random()* localPlayers.length);
+        let n = localPlayers[index];
+        localPlayers.splice(index,1);
         let team = iterator.next().value;
-        team.push(n);
+        team.push(n.name);
 
     }
     this.teamsArray = teams;

src/app/util.ts

@@ -0,0 +1,7 @@
+export function* iter(list: any[]){
+    let index = 0;
+    while(true){
+        yield list[index % list.length];
+        index++;
+    }
+}