refactor: extract randomizer to component

src/app/app.component.html

@@ -1,59 +1,5 @@
 <main class="main">
-  <div class="row justify-content-md-center">
-    <h1>Please select the number of teams:</h1>
-  <div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
-  <div class="btn-group me-2" id="numTeamsSelector" role="group"
-    value="2">
-    <input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
-    <label class="btn btn-outline-primary" for="btnradio1">Two</label>
-
-    <input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
-    <label class="btn btn-outline-primary" for="btnradio2">Three</label>
-
-    <input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
-    <label class="btn btn-outline-primary" for="btnradio3">n</label>
-  </div>
-  <div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
-    <label for="nTeamsField">n Teams</label>
-    <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
-  </div>
-</div>
-
-  <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>
-  </form>
-
-  <table class="table table-striped custom-table">
-  <caption *ngIf="duplicateNames.length >0">Removed: {{ duplicateNames }}</caption>
-    <thead>
-      <tr>
-        <th scope="col">Size</th>
-        <th scope="col">Names</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (team of teamsArray; track $index) {
-        <tr>
-          <td style="text-wrap: wrap;">{{ team.length | number }}</td>
-          <td class="wrap-cell">{{ team }}</td>
-        </tr>
-      }
-    </tbody>
-  </table>
-
-</div>
+<app-screen-basic></app-screen-basic>
 </main>
 
 <router-outlet />

src/app/app.component.ts

@@ -5,10 +5,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { CommonModule } from '@angular/common';
 import { filter, take } from 'rxjs';
+import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
 
 @Component({
   selector: 'app-root',
-  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
@@ -35,7 +36,7 @@ export class AppComponent implements OnInit {
     });
   }
 
-  onButtonGenerate(textinput: string): void{
+onButtonGenerate(textinput: string): void{
     if(this.numTeamsSelectorValue === 'n'){
       this.numTeamsSelected  = Number(this.nTeamsValue);
     }

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

@@ -0,0 +1,55 @@
+  <div class="row justify-content-md-center">
+    <h1>Please select the number of teams:</h1>
+  <div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
+  <div class="btn-group me-2" id="numTeamsSelector" role="group"
+    value="2">
+    <input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btnradio1">Two</label>
+
+    <input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio2">Three</label>
+
+    <input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio3">n</label>
+  </div>
+  <div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
+    <label for="nTeamsField">n Teams</label>
+    <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
+  </div>
+</div>
+
+  <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>
+  </form>
+
+  <table class="table table-striped custom-table">
+  <caption *ngIf="duplicateNames.length >0">Removed: {{ duplicateNames }}</caption>
+    <thead>
+      <tr>
+        <th scope="col">Size</th>
+        <th scope="col">Names</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (team of teamsArray; track $index) {
+        <tr>
+          <td style="text-wrap: wrap;">{{ team.length | number }}</td>
+          <td class="wrap-cell">{{ team }}</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenBasicComponent } from './screen-basic.component';
+
+describe('ScreenBasicComponent', () => {
+  let component: ScreenBasicComponent;
+  let fixture: ComponentFixture<ScreenBasicComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenBasicComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ScreenBasicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,60 @@
+import { Component, 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';
+
+@Component({
+  selector: 'app-screen-basic',
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent],
+  templateUrl: './screen-basic.component.html',
+  styleUrl: './screen-basic.component.less'
+})
+export class ScreenBasicComponent {
+  playerNamesValue = "";
+  numTeamsSelectorValue = "2";
+  numTeamsSelected = 2;
+  nTeamsValue = "4";
+  teamsArray: string[][] = [];
+  duplicateNames: string[] = [];
+  
+  onButtonGenerate(textinput: string): 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 }, () => []);
+    let playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
+
+    let nameslen = names.length;
+    function* iter(list: any[]){
+        let index = 0;
+        while(true){
+            yield list[index % list.length];
+            index++;
+        }
+    }
+    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 team = iterator.next().value;
+        team.push(n);
+
+    }
+    this.teamsArray = teams;
+  }
+
+}