diff --git a/index.html b/index.html deleted file mode 100644 index fa93dda..0000000 --- a/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - Volleyball Team Randomizer - - - - - - -

Please select the number of teams:

- - - - - - - - - - -
-

Enter player names (each row represents one player)

- - - -
- - - -

- - - - - - - - - - - diff --git a/script.js b/script.js deleted file mode 100644 index 95272fd..0000000 --- a/script.js +++ /dev/null @@ -1,68 +0,0 @@ - - -function randomizeTeams() { - let teamCount = 2; - if(document.getElementById("threeTeams").checked){ - teamCount = 3; - } - if(document.getElementById("nTeams").checked){ - teamCount = document.getElementById("nTeamsTextField").value; - } - const outputField = document.getElementById("teamOutput"); - let textinput = document.getElementById("playerNames").value; - let names = textinput - .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 - names = [...new Set(names)]; - - teams = Array.from({ length: teamCount }, () => []); - playersPerTeam = Math.floor(names.length / teamCount); - - let nameslen = names.length; - iterator = iter(teams); - for(let i =0; i < nameslen; i++){ - index = Math.floor(Math.random()* names.length); - n = names[index]; - names.splice(index,1); - team = iterator.next().value; - team.push(n); - - } - - outputField.innerHTML = teamstotext(teams) -} -function teamstotext(teams){ - textinput = ""; - for(let i =0; i < teams.length; i++){ - textinput += `Team${i+1}(${teams[i].length}) :${teamtotext(teams[i])}
`; - } - return textinput; -} - -function teamtotext(team){ - return team; -} - -function* iter(list){ - let index = 0; - while(true){ - yield list[index % list.length]; - index++; - } -} - -function textchangelistener(){ - let elem = document.getElementById("nTeamsTextField"); - if(this.checked && this.id == "nTeams"){ - elem.style.display = "block"; - } - else { - elem.style.display = "none"; - } -} -document.addEventListener('DOMContentLoaded', () => { - buttons = document.querySelectorAll("input[type='radio']"); - buttons.forEach((x) => x.addEventListener("change", textchangelistener)); -}); diff --git a/src/app/app.component.html b/src/app/app.component.html index 5b9b0ae..67da8d5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -16,25 +16,40 @@ Three n - - n + + n Teams
Names - +
- + - - Team1 - Team2 - Team3 - + + + + + + + + + + + + + +
Size{{element.length}}Names{{element}}
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8e3f192..8f68976 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,19 +4,61 @@ import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/bu import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatListModule} from '@angular/material/list'; +import {MatTableModule} from '@angular/material/table'; import {MatGridListModule} from '@angular/material/grid-list'; @Component({ selector: 'app-root', - imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule, MatGridListModule], + imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatTableModule, MatGridListModule], templateUrl: './app.component.html', styleUrl: './app.component.less' }) export class AppComponent { title = 'vb'; - numTeamsSelected = "2"; + numTeamsSelectorValue = "2"; + numTeamsSelected = 2; + teamsArray: string[][] = []; + displayedColumns = ["teamCount", "teamNames"]; + onNumTeamsSelector(event: MatButtonToggleChange): void{ - this.numTeamsSelected = event.value; + this.numTeamsSelectorValue = event.value; + if(this.numTeamsSelectorValue === 'n'){ + this.numTeamsSelected = 4; //TODO + } + else{ + this.numTeamsSelected = Number(this.numTeamsSelectorValue); + } } + + onButtonGenerate(textinput: string): void{ + let names = textinput + .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 + names = [...new Set(names)]; + + var teams = Array.from({ length: this.numTeamsSelected }, () => []); + var 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++; + } + } + var iterator = iter(teams); + for(let i =0; i < nameslen; i++){ + var index = Math.floor(Math.random()* names.length); + var n = names[index]; + names.splice(index,1); + var team = iterator.next().value; + team.push(n); + + } + this.teamsArray = teams; + } + } diff --git a/style.css b/style.css deleted file mode 100644 index 128fae1..0000000 --- a/style.css +++ /dev/null @@ -1,47 +0,0 @@ -*{ - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - background-color: aquamarine; -} - -textarea{ - font-size: 1vh; - width: 100%; - height:50vh; - padding:0; -} -h1{ - text-align: center; - font-size: 2vh; -} -.radioButtons, #nTeamsTextField{ - height:2vh; - font-size: 2vh; - line-height: 2vh; - display: grid; - grid-template-columns: 1em auto; - gap: 0.5em; -} -#teamOutput{ - - margin-top:10vh; - text-align: center; - font-size: 2vh; - line-height: 4.5vh; - } -button{ - position: absolute; - left:50%; - margin-top: 5vh; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - height: 5vh; - font-size: 2vh; - padding-left: 10%; - padding-right: 10%; - font-weight:bold; -} - - - - -