Compare commits
7 Commits
97f01f924a
...
v2.1.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
e24f9794c5 | ||
|
|
5daa64d962 | ||
|
|
b939f4d4f3 | ||
|
|
8e04cc97ba | ||
|
|
5b66e1907c | ||
|
|
55bea1a923 | ||
|
|
83bfe51282 |
46
README.md
46
README.md
@@ -1,8 +1,11 @@
|
|||||||
# Vb
|
# Vb
|
||||||
|
A Team Randomizer built using Angular and Bootstrap, installable as a progressive web app (PWA).
|
||||||
|
Supports setting names using URL query parameters:
|
||||||
|
```url
|
||||||
|
https://vb.example.org?names=Me,Myself,I
|
||||||
|
```
|
||||||
|
|
||||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
|
## Development
|
||||||
|
|
||||||
## Development server
|
|
||||||
|
|
||||||
To start a local development server, run:
|
To start a local development server, run:
|
||||||
|
|
||||||
@@ -12,18 +15,10 @@ ng serve
|
|||||||
|
|
||||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||||
|
|
||||||
## Code scaffolding
|
Alternatively, to open the server to the network instead of just localhost, use
|
||||||
|
|
||||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
ng generate component component-name
|
npm run serve
|
||||||
```
|
|
||||||
|
|
||||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng generate --help
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Building
|
## Building
|
||||||
@@ -34,26 +29,5 @@ To build the project run:
|
|||||||
ng build
|
ng build
|
||||||
```
|
```
|
||||||
|
|
||||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
This will compile your project and store the build artifacts in the `dist/` directory.
|
||||||
|
As this is a static site, simply move the contents of `dist/vb/browser/` to a directory that can be served by nginx or apache.
|
||||||
## Running unit tests
|
|
||||||
|
|
||||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng test
|
|
||||||
```
|
|
||||||
|
|
||||||
## Running end-to-end tests
|
|
||||||
|
|
||||||
For end-to-end (e2e) testing, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
||||||
|
|
||||||
## Additional Resources
|
|
||||||
|
|
||||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
||||||
12
angular.json
12
angular.json
@@ -21,7 +21,8 @@
|
|||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"browser": "src/main.ts",
|
"browser": "src/main.ts",
|
||||||
"polyfills": [
|
"polyfills": [
|
||||||
"zone.js"
|
"zone.js",
|
||||||
|
"@angular/localize/init"
|
||||||
],
|
],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "less",
|
"inlineStyleLanguage": "less",
|
||||||
@@ -32,7 +33,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"@angular/material/prebuilt-themes/azure-blue.css",
|
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||||
"src/styles.less"
|
"src/styles.less"
|
||||||
],
|
],
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
@@ -56,7 +57,8 @@
|
|||||||
"maximumError": "8kB"
|
"maximumError": "8kB"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"outputHashing": "all"
|
"outputHashing": "all",
|
||||||
|
"serviceWorker": "ngsw-config.json"
|
||||||
},
|
},
|
||||||
"development": {
|
"development": {
|
||||||
"optimization": false,
|
"optimization": false,
|
||||||
@@ -86,7 +88,8 @@
|
|||||||
"options": {
|
"options": {
|
||||||
"polyfills": [
|
"polyfills": [
|
||||||
"zone.js",
|
"zone.js",
|
||||||
"zone.js/testing"
|
"zone.js/testing",
|
||||||
|
"@angular/localize/init"
|
||||||
],
|
],
|
||||||
"tsConfig": "tsconfig.spec.json",
|
"tsConfig": "tsconfig.spec.json",
|
||||||
"inlineStyleLanguage": "less",
|
"inlineStyleLanguage": "less",
|
||||||
@@ -97,7 +100,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"@angular/material/prebuilt-themes/azure-blue.css",
|
|
||||||
"src/styles.less"
|
"src/styles.less"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
|
|||||||
52
index.html
52
index.html
@@ -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>
|
|
||||||
38
ngsw-config.json
Normal file
38
ngsw-config.json
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
|
||||||
|
"index": "/index.html",
|
||||||
|
"assetGroups": [
|
||||||
|
{
|
||||||
|
"name": "app",
|
||||||
|
"installMode": "prefetch",
|
||||||
|
"resources": {
|
||||||
|
"files": [
|
||||||
|
"/favicon.ico",
|
||||||
|
"/index.csr.html",
|
||||||
|
"/index.html",
|
||||||
|
"/manifest.webmanifest",
|
||||||
|
"/*.css",
|
||||||
|
"/*.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "assets",
|
||||||
|
"installMode": "lazy",
|
||||||
|
"updateMode": "prefetch",
|
||||||
|
"resources": {
|
||||||
|
"files": [
|
||||||
|
"/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "excluded-redirects",
|
||||||
|
"installMode": "lazy",
|
||||||
|
"updateMode": "lazy",
|
||||||
|
"resources": {
|
||||||
|
"urls": [ "/**" ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
3188
package-lock.json
generated
3188
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@@ -7,31 +7,36 @@
|
|||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development",
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
|
"serve": "ng serve --host 0.0.0.0 --port 4200",
|
||||||
"serve:ssr:vb": "node dist/vb/server/server.mjs"
|
"serve:ssr:vb": "node dist/vb/server/server.mjs"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^19.0.0",
|
"@angular/animations": "^19.0.5",
|
||||||
"@angular/cdk": "~19.0.1",
|
"@angular/cdk": "~19.0.1",
|
||||||
"@angular/common": "^19.0.0",
|
"@angular/common": "^19.0.5",
|
||||||
"@angular/compiler": "^19.0.0",
|
"@angular/compiler": "^19.0.5",
|
||||||
"@angular/core": "^19.0.0",
|
"@angular/core": "^19.0.5",
|
||||||
"@angular/forms": "^19.0.0",
|
"@angular/forms": "^19.0.5",
|
||||||
"@angular/material": "~19.0.1",
|
"@angular/platform-browser": "^19.0.5",
|
||||||
"@angular/platform-browser": "^19.0.0",
|
"@angular/platform-browser-dynamic": "^19.0.5",
|
||||||
"@angular/platform-browser-dynamic": "^19.0.0",
|
"@angular/platform-server": "^19.0.5",
|
||||||
"@angular/platform-server": "^19.0.0",
|
"@angular/router": "^19.0.5",
|
||||||
"@angular/router": "^19.0.0",
|
"@angular/service-worker": "^19.0.5",
|
||||||
"@angular/ssr": "^19.0.2",
|
"@angular/ssr": "^19.0.6",
|
||||||
|
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"bootstrap": "^5.3.3",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.15.0"
|
"zone.js": "~0.15.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^19.0.2",
|
"@angular-devkit/build-angular": "^19.0.6",
|
||||||
"@angular/cli": "^19.0.2",
|
"@angular/cli": "^19.0.6",
|
||||||
"@angular/compiler-cli": "^19.0.0",
|
"@angular/compiler-cli": "^19.0.5",
|
||||||
|
"@angular/localize": "^19.0.5",
|
||||||
"@types/express": "^4.17.17",
|
"@types/express": "^4.17.17",
|
||||||
"@types/jasmine": "~5.1.0",
|
"@types/jasmine": "~5.1.0",
|
||||||
"@types/node": "^18.18.0",
|
"@types/node": "^18.18.0",
|
||||||
@@ -43,4 +48,4 @@
|
|||||||
"karma-jasmine-html-reporter": "~2.1.0",
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
"typescript": "~5.6.2"
|
"typescript": "~5.6.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.4 KiB |
BIN
public/icons/icon-128x128.png
Normal file
BIN
public/icons/icon-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
public/icons/icon-144x144.png
Normal file
BIN
public/icons/icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/icons/icon-152x152.png
Normal file
BIN
public/icons/icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/icons/icon-192x192.png
Normal file
BIN
public/icons/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
public/icons/icon-384x384.png
Normal file
BIN
public/icons/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/icons/icon-512x512.png
Normal file
BIN
public/icons/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/icons/icon-72x72.png
Normal file
BIN
public/icons/icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/icons/icon-96x96.png
Normal file
BIN
public/icons/icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
59
public/manifest.webmanifest
Normal file
59
public/manifest.webmanifest
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"name": "vb",
|
||||||
|
"short_name": "vb",
|
||||||
|
"theme_color": "#1976d2",
|
||||||
|
"background_color": "#fafafa",
|
||||||
|
"display": "standalone",
|
||||||
|
"scope": "./",
|
||||||
|
"start_url": "./",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "icons/icon-72x72.png",
|
||||||
|
"sizes": "72x72",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-96x96.png",
|
||||||
|
"sizes": "96x96",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-128x128.png",
|
||||||
|
"sizes": "128x128",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-152x152.png",
|
||||||
|
"sizes": "152x152",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-384x384.png",
|
||||||
|
"sizes": "384x384",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "icons/icon-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable any"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
68
script.js
68
script.js
@@ -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));
|
|
||||||
});
|
|
||||||
@@ -2,30 +2,62 @@
|
|||||||
*{
|
*{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.main{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
|
<div class="row justify-content-md-center">
|
||||||
<mat-button-toggle value="2">Two</mat-button-toggle>
|
<h1>Please select the number of teams:</h1>
|
||||||
<mat-button-toggle value="3">Three</mat-button-toggle>
|
<div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
|
||||||
<mat-button-toggle value="n">n</mat-button-toggle>
|
<div class="btn-group me-2" id="numTeamsSelector" role="group"
|
||||||
</mat-button-toggle-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>
|
||||||
|
|
||||||
<mat-form-field>
|
<input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||||
<mat-label>Names</mat-label>
|
<label class="btn btn-outline-primary" for="btnradio2">Three</label>
|
||||||
<textarea matInput></textarea>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<button mat-flat-button>Generate</button>
|
<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>
|
||||||
<!--TODO replace with ngFor? extract list items as component?-->
|
</div>
|
||||||
<mat-list>
|
<div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
|
||||||
<mat-list-item>Team1</mat-list-item>
|
<label for="nTeamsField">n Teams</label>
|
||||||
<mat-list-item>Team2</mat-list-item>
|
<input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
|
||||||
<mat-list-item>Team3</mat-list-item>
|
</div>
|
||||||
</mat-list>
|
</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">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Size</th>
|
||||||
|
<th scope="col">Names</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@for (team of teamsArray; track $index) {
|
||||||
|
<tr>
|
||||||
|
<td>{{ team.length | number }}</td>
|
||||||
|
<td>{{ team }}</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<router-outlet />
|
<router-outlet />
|
||||||
|
|||||||
@@ -1,17 +1,69 @@
|
|||||||
import { Component } from '@angular/core';
|
import { AfterViewInit, Component, OnInit} from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { FormsModule } from '@angular/forms';
|
||||||
import {MatButtonToggleModule} from '@angular/material/button-toggle';
|
import { RouterOutlet, ActivatedRoute } from '@angular/router';
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||||
import {MatInputModule} from '@angular/material/input';
|
|
||||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
import { CommonModule } from '@angular/common';
|
||||||
import {MatListModule} from '@angular/material/list';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule],
|
imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrl: './app.component.less'
|
styleUrl: './app.component.less'
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent implements OnInit {
|
||||||
title = 'vb';
|
title = 'vb';
|
||||||
|
playerNamesValue = "";
|
||||||
|
numTeamsSelectorValue = "2";
|
||||||
|
numTeamsSelected = 2;
|
||||||
|
nTeamsValue = "4";
|
||||||
|
teamsArray: string[][] = [];
|
||||||
|
displayedColumns = ["teamCount", "teamNames"];
|
||||||
|
|
||||||
|
constructor(private activatedRoute: ActivatedRoute){}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
//consiedr using Angular's ActivatedRoute here instead
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const names = params.get('names')?.replaceAll(',', '\n');
|
||||||
|
if (names) this.playerNamesValue = names;
|
||||||
|
}
|
||||||
|
|
||||||
|
onButtonGenerate(textinput: string): void{
|
||||||
|
if(this.numTeamsSelectorValue === 'n'){
|
||||||
|
this.numTeamsSelected = Number(this.nTeamsValue);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.numTeamsSelected = Number(this.numTeamsSelectorValue);
|
||||||
|
}
|
||||||
|
let names = 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
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,16 @@
|
|||||||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from '@angular/core';
|
||||||
import { provideRouter } from '@angular/router';
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
import { routes } from './app.routes';
|
import { routes } from './app.routes';
|
||||||
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
||||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||||
|
import { provideServiceWorker } from '@angular/service-worker';
|
||||||
|
|
||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay()), provideAnimationsAsync('noop')]
|
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
|
||||||
|
provideClientHydration(withEventReplay()), provideAnimationsAsync('noop'),
|
||||||
|
provideServiceWorker('ngsw-worker.js', {
|
||||||
|
enabled: !isDevMode(),
|
||||||
|
registrationStrategy: 'registerWhenStable:30000'
|
||||||
|
})]
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,10 +6,11 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
<link rel="manifest" href="manifest.webmanifest">
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<meta name="theme-color" content="#1976d2">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
<noscript>Please enable JavaScript to continue using this application.</noscript>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
/// <reference types="@angular/localize" />
|
||||||
|
|
||||||
import { bootstrapApplication } from '@angular/platform-browser';
|
import { bootstrapApplication } from '@angular/platform-browser';
|
||||||
import { appConfig } from './app/app.config';
|
import { appConfig } from './app/app.config';
|
||||||
import { AppComponent } from './app/app.component';
|
import { AppComponent } from './app/app.component';
|
||||||
|
|||||||
47
style.css
47
style.css
@@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -5,7 +5,8 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./out-tsc/app",
|
"outDir": "./out-tsc/app",
|
||||||
"types": [
|
"types": [
|
||||||
"node"
|
"node",
|
||||||
|
"@angular/localize"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
|||||||
@@ -5,7 +5,8 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./out-tsc/spec",
|
"outDir": "./out-tsc/spec",
|
||||||
"types": [
|
"types": [
|
||||||
"jasmine"
|
"jasmine",
|
||||||
|
"@angular/localize"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
|
|||||||
Reference in New Issue
Block a user