eneller/vb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fully functional using angular

Browse Source
This commit is contained in:
eneller
2024-11-28 00:32:41 +01:00
parent d2090f30d4
commit 2a596b15c8
5 changed files with 70 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@@ -1,52 +0,0 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Volleyball Team Randomizer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Please select the number of teams:</h1>
<label class="radioButtons" for="twoTeams">
<input class="radioButtons" type="radio" name="teams" id="twoTeams" checked="checked">
Two teams
</label>
<label class="radioButtons" for="threeTeams">
<input class="radioButtons" type="radio" name="teams" id="threeTeams">
Three teams
</label>
<label class="radioButtons" for="nTeams">
<input class="radioButtons" type="radio" name="teams" id="nTeams">
n Teams
</label>
<input id="nTeamsTextField" style="display: none;" type="number" value=4>
<br>
<h1>Enter player names (each row represents one player)</h1>
<textarea rows="18" cols="30" name="playerNames" required="required" id="playerNames"></textarea>
<br>
<button id="generateTeams" onclick="randomizeTeams()">Generate Teams</button>
<p id="teamOutput"></p>
</body></html>

68
script.js
View File

@@ -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])} <br>`;
}
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));
});

33
src/app/app.component.html
View File

@@ -16,25 +16,40 @@
<mat-button-toggle value="3">Three</mat-button-toggle>
<mat-button-toggle value="n">n</mat-button-toggle>
</mat-button-toggle-group>
<mat-form-field id="nTeamsText" [style.display]="numTeamsSelected === 'n' ? 'inline' : 'none'">
<mat-label>n</mat-label>
<mat-form-field id="nTeamsText" [style.display]="numTeamsSelectorValue === 'n' ? 'inline' : 'none'">
<mat-label>n Teams</mat-label>
<input matInput type="number" pattern="\d*" value="4">
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>Names</mat-label>
<textarea matInput rows="18" cols="30"></textarea>
<textarea matInput
rows="18"
cols="30"
style="text-align: left;"
#playerNames
></textarea>
</mat-form-field>
</div>
<button mat-flat-button >Generate</button>
<button mat-flat-button (click)="onButtonGenerate(playerNames.value)">Generate</button>
<!--TODO populate with ngFor? extract list items as component? use table instead of list?-->
<mat-list>
<mat-list-item>Team1</mat-list-item>
<mat-list-item>Team2</mat-list-item>
<mat-list-item>Team3</mat-list-item>
</mat-list>
<table mat-table [dataSource]="teamsArray">
<ng-container matColumnDef="teamCount">
<th mat-header-cell *matHeaderCellDef>Size</th>
<td mat-cell *matCellDef="let element">{{element.length}}</td>
</ng-container>
<ng-container matColumnDef="teamNames">
<th mat-header-cell *matHeaderCellDef>Names</th>
<td mat-cell *matCellDef="let element">{{element}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</mat-grid-list>
</main>

50
src/app/app.component.ts
View File

@@ -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;
}
}

47
style.css
View File

@@ -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;
}